diff --git a/.deepsource.toml b/.deepsource.toml
new file mode 100644
index 00000000000..85de1a5e8d4
--- /dev/null
+++ b/.deepsource.toml
@@ -0,0 +1,17 @@
+version = 1
+
+[[analyzers]]
+name = "shell"
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  plugins = ["react"]
+  environment = ["nodejs"]
+
+[[analyzers]]
+name = "python"
+
+  [analyzers.meta]
+  runtime_version = "3.x.x"
\ No newline at end of file
diff --git a/.env.example b/.env.example
index 1d95c56a067..082aa753b80 100644
--- a/.env.example
+++ b/.env.example
@@ -1,36 +1,3 @@
-# Frontend
-# Extra image domains that need to be added for Next Image
-NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
-# Google Client ID for Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
-# Github ID for Github OAuth
-NEXT_PUBLIC_GITHUB_ID=""
-# Github App Name for GitHub Integration
-NEXT_PUBLIC_GITHUB_APP_NAME=""
-# Sentry DSN for error monitoring
-NEXT_PUBLIC_SENTRY_DSN=""
-# Enable/Disable OAUTH - default 0 for selfhosted instance
-NEXT_PUBLIC_ENABLE_OAUTH=0
-# Enable/Disable sentry
-NEXT_PUBLIC_ENABLE_SENTRY=0
-# Enable/Disable session recording
-NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
-# Enable/Disable event tracking
-NEXT_PUBLIC_TRACK_EVENTS=0
-# Slack for Slack Integration
-NEXT_PUBLIC_SLACK_CLIENT_ID=""
-# For Telemetry, set it to "app.plane.so"
-NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
-# public boards deploy url
-NEXT_PUBLIC_DEPLOY_URL=""
-
-# Backend
-# Debug value for api server use it as 0 for production use
-DEBUG=0
-
-# Error logs
-SENTRY_DSN=""
-
 # Database Settings
 PGUSER="plane"
 PGPASSWORD="plane"
@@ -43,15 +10,6 @@ REDIS_HOST="plane-redis"
 REDIS_PORT="6379"
 REDIS_URL="redis://${REDIS_HOST}:6379/"
 
-# Email Settings
-EMAIL_HOST=""
-EMAIL_HOST_USER=""
-EMAIL_HOST_PASSWORD=""
-EMAIL_PORT=587
-EMAIL_FROM="Team Plane <team@mailer.plane.so>"
-EMAIL_USE_TLS="1"
-EMAIL_USE_SSL="0"
-
 # AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID="access-key"
@@ -67,9 +25,6 @@ OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
 OPENAI_API_KEY="sk-" # add your openai key here
 GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
 
-# Github
-GITHUB_CLIENT_SECRET="" # For fetching release notes
-
 # Settings related to Docker
 DOCKERIZED=1
 # set to 1 If using the pre-configured minio setup
@@ -78,10 +33,3 @@ USE_MINIO=1
 # Nginx Configuration
 NGINX_PORT=80
 
-# Default Creds
-DEFAULT_EMAIL="captain@plane.so"
-DEFAULT_PASSWORD="password123"
-
-# SignUps
-ENABLE_SIGNUP="1"
-# Auto generated and Required that will be generated from setup.sh
diff --git a/.eslintrc.js b/.eslintrc.js
index 463c86901c0..c229c095269 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,7 +4,7 @@ module.exports = {
   extends: ["custom"],
   settings: {
     next: {
-      rootDir: ["apps/*"],
+      rootDir: ["web/", "space/"],
     },
   },
 };
diff --git a/.github/workflows/Build_Test_Pull_Request.yml b/.github/workflows/Build_Test_Pull_Request.yml
deleted file mode 100644
index 0dbca646a88..00000000000
--- a/.github/workflows/Build_Test_Pull_Request.yml
+++ /dev/null
@@ -1,55 +0,0 @@
-name: Build Pull Request Contents
-
-on: 
-  pull_request:
-    types: ["opened", "synchronize"]
-
-jobs:
-  build-pull-request-contents:
-    name: Build Pull Request Contents
-    runs-on: ubuntu-20.04
-    permissions:
-      pull-requests: read
-
-    steps:
-      - name: Checkout Repository to Actions
-        uses: actions/checkout@v3.3.0
-
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18.x
-          cache: 'yarn'
-      
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v38
-        with:
-          files_yaml: |
-            apiserver:
-              - apiserver/**
-            web:
-              - apps/app/**
-            deploy:
-              - apps/space/**
-
-      - name: Setup .npmrc for repository
-        run: |
-            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
-
-      - name: Build Plane's Main App
-        if: steps.changed-files.outputs.web_any_changed == 'true'
-        run: |
-          mv ./.npmrc ./apps/app
-          cd apps/app
-          yarn
-          yarn build
-
-      - name: Build Plane's Deploy App
-        if: steps.changed-files.outputs.deploy_any_changed == 'true'
-        run: |
-          cd apps/space
-          yarn 
-          yarn build
-
-
diff --git a/.github/workflows/Update_Docker_Images.yml b/.github/workflows/Update_Docker_Images.yml
deleted file mode 100644
index 8e27e098f98..00000000000
--- a/.github/workflows/Update_Docker_Images.yml
+++ /dev/null
@@ -1,111 +0,0 @@
-name: Update Docker Images for Plane on Release
-
-on:
-  release:
-    types: [released]
-
-jobs:
-  build_push_backend:
-    name: Build and Push Api Server Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Setup .npmrc for repository
-        run: |
-            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaFrontend
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
-          tags: |
-            type=ref,event=tag
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaBackend
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
-          tags: |
-            type=ref,event=tag
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaDeploy
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
-          tags: |
-            type=ref,event=tag
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaProxy
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
-          tags: |
-            type=ref,event=tag
-
-      - name: Build and Push Frontend to Docker Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/amd64
-          tags: ${{ steps.metaFrontend.outputs.tags }}
-          push: true
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Backend to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaBackend.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Plane-Deploy to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/space/Dockerfile.space
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaDeploy.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Plane-Proxy to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./nginx
-          file: ./nginx/Dockerfile
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaProxy.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
new file mode 100644
index 00000000000..26b8addd23b
--- /dev/null
+++ b/.github/workflows/build-branch.yml
@@ -0,0 +1,205 @@
+
+name: Docker Branch Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: 'Log level'     
+        required: true
+        default: 'warning'
+      tags:
+        description: 'Dev/QA Builds'
+
+env:
+  gh_branch: ${{ github.ref_name }}
+  img_tag: latest
+
+jobs:
+  branch_build_and_push:
+    name: Build-Push Web/Space/API/Proxy Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - uses: ASzc/change-string-case-action@v2
+        id: gh_branch_upper_lower
+        with:
+          string: ${{ env.gh_branch }}
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_slash
+        with:
+          source: ${{ steps.gh_branch_upper_lower.outputs.lowercase }}
+          find: '/'        
+          replace: '-'
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_dot
+        with:
+          source: ${{ steps.gh_branch_replace_slash.outputs.value }}
+          find: '.'        
+          replace: ''
+          
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_clean
+        with:
+          source: ${{ steps.gh_branch_replace_dot.outputs.value }}
+          find: '_'
+          replace: ''
+      - name: Uploading Proxy Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: proxy-src-code
+          path: ./nginx
+      - name: Uploading Backend Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: backend-src-code
+          path: ./apiserver
+      - name: Uploading Web Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./space
+      
+      - name: Uploading Space Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: space-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./web
+    outputs:
+        gh_branch_name: ${{ steps.gh_branch_clean.outputs.value }}
+
+  branch_build_push_frontend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Web Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: web-src-code
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./web/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_space:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Space Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: space-src-code
+
+      - name: Build and Push Space to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./space/Dockerfile.space
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_backend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Backend Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: backend-src-code
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_proxy:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Downloading Proxy Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: proxy-src-code
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/build-test-pull-request.yml b/.github/workflows/build-test-pull-request.yml
new file mode 100644
index 00000000000..c74975f48ef
--- /dev/null
+++ b/.github/workflows/build-test-pull-request.yml
@@ -0,0 +1,48 @@
+name: Build Pull Request Contents
+
+on: 
+  pull_request:
+    types: ["opened", "synchronize"]
+
+jobs:
+  build-pull-request-contents:
+    name: Build Pull Request Contents
+    runs-on: ubuntu-20.04
+    permissions:
+      pull-requests: read
+
+    steps:
+      - name: Checkout Repository to Actions
+        uses: actions/checkout@v3.3.0
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+          cache: 'yarn'
+      
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v38
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            web:
+              - web/**
+            deploy:
+              - space/**
+
+      - name: Build Plane's Main App
+        if: steps.changed-files.outputs.web_any_changed == 'true'
+        run: |
+          yarn
+          yarn build --filter=web
+
+      - name: Build Plane's Deploy App
+        if: steps.changed-files.outputs.deploy_any_changed == 'true'
+        run: |
+          yarn 
+          yarn build --filter=space
+
+
diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
new file mode 100644
index 00000000000..c8e27f32216
--- /dev/null
+++ b/.github/workflows/create-sync-pr.yml
@@ -0,0 +1,79 @@
+name: Create PR in Plane EE Repository to sync the changes
+
+on:
+  pull_request:
+    branches:
+      - master
+    types:
+      - closed
+
+jobs:
+  create_pr:
+    # Only run the job when a PR is merged
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Check SOURCE_REPO
+        id: check_repo
+        env:
+          SOURCE_REPO: ${{ secrets.SOURCE_REPO_NAME }}
+        run: |
+          echo "::set-output name=is_correct_repo::$(if [[ "$SOURCE_REPO" == "makeplane/plane" ]]; then echo 'true'; else echo 'false'; fi)"
+
+      - name: Checkout Code
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+
+      - name: Set up Branch Name
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
+        run: |
+          echo "SOURCE_BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
+
+      - name: Setup GH CLI
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
+        run: |
+          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
+          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
+          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+          sudo apt update
+          sudo apt install gh -y
+
+      - name: Create Pull Request
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        run: |
+          TARGET_REPO="${{ secrets.TARGET_REPO_NAME }}"
+          TARGET_BRANCH="${{ secrets.TARGET_REPO_BRANCH }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
+
+          git checkout $SOURCE_BRANCH
+          git remote add target "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target $SOURCE_BRANCH:$SOURCE_BRANCH
+
+          PR_TITLE="${{ github.event.pull_request.title }}"
+          PR_BODY="${{ github.event.pull_request.body }}"
+
+          # Remove double quotes
+          PR_TITLE_CLEANED="${PR_TITLE//\"/}"
+          PR_BODY_CLEANED="${PR_BODY//\"/}"
+
+          # Construct PR_BODY_CONTENT using a here-document
+          PR_BODY_CONTENT=$(cat <<EOF
+          $PR_BODY_CLEANED
+          EOF
+          )
+
+          gh pr create \
+            --base $TARGET_BRANCH \
+            --head $SOURCE_BRANCH \
+            --title "[SYNC] $PR_TITLE_CLEANED" \
+            --body "$PR_BODY_CONTENT" \
+            --repo $TARGET_REPO
diff --git a/.github/workflows/update-docker-images.yml b/.github/workflows/update-docker-images.yml
new file mode 100644
index 00000000000..67ae97e758c
--- /dev/null
+++ b/.github/workflows/update-docker-images.yml
@@ -0,0 +1,107 @@
+name: Update Docker Images for Plane on Release
+
+on:
+  release:
+    types: [released, prereleased]
+
+jobs:
+  build_push_backend:
+    name: Build and Push Api Server Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaFrontend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
+          tags: |
+            type=ref,event=tag
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaBackend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaSpace
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaProxy
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
+          tags: |
+            type=ref,event=tag
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./web/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ steps.metaFrontend.outputs.tags }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./apiserver
+          file: ./apiserver/Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaBackend.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Deploy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./space/Dockerfile.space
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaSpace.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaProxy.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 1e99e102ad5..dcb8b86712e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,8 @@ node_modules
 
 # Production
 /build
+dist/
+out/
 
 # Misc
 .DS_Store
@@ -73,3 +75,7 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 
 .npmrc
+.secrets
+tmp/
+## packages
+dist
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 294dc1c0eb9..9fa847b6e76 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hello@plane.so.
+squawk@plane.so.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -125,4 +125,4 @@ enforcement ladder](https://github.com/mozilla/diversity).
 
 For answers to common questions about this code of conduct, see the FAQ at
 https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
\ No newline at end of file
+https://www.contributor-covenant.org/translations.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6baa0bb07e4..b25a791d080 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,8 +8,8 @@ Before submitting a new issue, please search the [issues](https://github.com/mak
 
 While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like:
 
-- 3rd-party libraries being used and their versions
-- a use-case that fails
+-   3rd-party libraries being used and their versions
+-   a use-case that fails
 
 Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved.
 
@@ -19,10 +19,10 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
 
 ### Requirements
 
-- Node.js version v16.18.0
-- Python version 3.8+
-- Postgres version v14
-- Redis version v6.2.7
+-   Node.js version v16.18.0
+-   Python version 3.8+
+-   Postgres version v14
+-   Redis version v6.2.7
 
 ### Setup the project
 
@@ -30,6 +30,48 @@ The project is a monorepo, with backend api and frontend in a single repo.
 
 The backend is a django project which is kept inside apiserver
 
+1. Clone the repo
+
+```bash
+git clone https://github.com/makeplane/plane
+cd plane
+chmod +x setup.sh
+```
+
+2. Run setup.sh
+
+```bash
+./setup.sh
+```
+
+3. Define `NEXT_PUBLIC_API_BASE_URL=http://localhost` in **web/.env** and **space/.env** file
+
+```bash
+echo "\nNEXT_PUBLIC_API_BASE_URL=http://localhost\n" >> ./web/.env
+```
+
+```bash
+echo "\nNEXT_PUBLIC_API_BASE_URL=http://localhost\n" >> ./space/.env
+```
+
+4. Run Docker compose up
+
+```bash
+docker compose up -d
+```
+
+5. Install dependencies
+
+```bash
+yarn install
+```
+
+6. Run the web app in development mode
+
+```bash
+yarn dev
+```
+
 ## Missing a Feature?
 
 If a feature is missing, you can directly _request_ a new one [here](https://github.com/makeplane/plane/issues/new?assignees=&labels=feature&template=feature_request.yml&title=%F0%9F%9A%80+Feature%3A+). You also can do the same by choosing "🚀 Feature" when raising a [New Issue](https://github.com/makeplane/plane/issues/new/choose) on our GitHub Repository.
@@ -39,8 +81,8 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
-- 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.
+-   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
 
@@ -48,11 +90,11 @@ Questions, suggestions, and thoughts are most welcome. We can also be reached in
 
 ## Ways to contribute
 
-- Try Plane Cloud and the self hosting platform and give feedback
-- Add new integrations
-- 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.
+-   Try Plane Cloud and the self hosting platform and give feedback
+-   Add new integrations
+-   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.
diff --git a/Dockerfile b/Dockerfile
index 1b059b5e043..1a71801f63b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -52,7 +52,7 @@ ENV DJANGO_SETTINGS_MODULE plane.settings.production
 ENV DOCKERIZED 1
 
 WORKDIR /code
-
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
 RUN apk --no-cache add \
     "libpq~=15" \
     "libxslt~=1.1" \
diff --git a/ENV_SETUP.md b/ENV_SETUP.md
new file mode 100644
index 00000000000..6796c3db6b1
--- /dev/null
+++ b/ENV_SETUP.md
@@ -0,0 +1,134 @@
+# Environment Variables
+​
+Environment variables are distributed in various files. Please refer them carefully. 
+
+## {PROJECT_FOLDER}/.env
+File is available in the project root folder​
+
+```
+# Database Settings
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+​
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
+​
+# Settings related to Docker
+DOCKERIZED=1
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+​
+# Nginx Configuration
+NGINX_PORT=80
+```
+​
+## {PROJECT_FOLDER}/web/.env.example
+​
+```
+# Enable/Disable OAUTH - default 0 for selfhosted instance
+NEXT_PUBLIC_ENABLE_OAUTH=0
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
+```
+​
+## {PROJECT_FOLDER}/spaces/.env.example
+​
+```
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=0
+```
+​
+## {PROJECT_FOLDER}/apiserver/.env
+​
+```
+# Backend
+# Debug value for api server use it as 0 for production use
+DEBUG=0
+DJANGO_SETTINGS_MODULE="plane.settings.selfhosted"
+​
+# Error logs
+SENTRY_DSN=""
+​
+# Database Settings
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+​
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+​
+# Email Settings
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_USE_TLS="1"
+EMAIL_USE_SSL="0"
+​
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+​
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
+​
+# Github
+GITHUB_CLIENT_SECRET="" # For fetching release notes
+​
+# Settings related to Docker
+DOCKERIZED=1
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+​
+# Nginx Configuration
+NGINX_PORT=80
+​
+# Default Creds
+DEFAULT_EMAIL="captain@plane.so"
+DEFAULT_PASSWORD="password123"
+​
+# SignUps
+ENABLE_SIGNUP="1"
+​
+# Email Redirection URL
+WEB_URL="http://localhost"
+```
+## Updates​
+- The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
+- The naming convention for containers and images has been updated.
+- The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
+- The Tiptap pro-extension dependency has been removed, eliminating the need for Tiptap API keys.
+- The image name for Plane deployment has been changed to plane-space.
diff --git a/README.md b/README.md
index 2bc2764f3bc..53679943ba3 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 </p>
 
 <h3 align="center"><b>Plane</b></h3>
-<p align="center"><b>Open-source, self-hosted project planning tool</b></p>
+<p align="center"><b>Flexible, extensible open-source project management</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -35,61 +35,51 @@
 
 Meet [Plane](https://plane.so). An open-source software development tool to manage issues, sprints, and product roadmaps with peace of mind 🧘‍♀️.
 
-
 > Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our [Discord](https://discord.com/invite/A92xrEGCge) or GitHub issues, and we will use your feedback to improve on our upcoming releases.
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account. Plane Cloud offers a hosted solution for Plane. If you prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/self-hosting).
 
+## ⚡️ Contributors Quick Start
 
-## ⚡️ Quick start with Docker Compose
+### Prerequisite
 
-### Docker Compose Setup
+Development system must have docker engine installed and running.
 
-- Clone the repository
+### Steps
 
-```bash
-git clone https://github.com/makeplane/plane
-cd plane
-chmod +x setup.sh
-```
+Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute
 
-- Run setup.sh
+1. Clone the code locally using `git clone https://github.com/makeplane/plane.git`
+1. Switch to the code folder `cd plane`
+1. Create your feature or fix branch you plan to work on using `git checkout -b <feature-branch-name>`
+1. Open terminal and run `./setup.sh`
+1. Open the code on VSCode or similar equivalent IDE
+1. Review the `.env` files available in various folders. Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system
+1. Run the docker command to initiate various services `docker compose -f docker-compose-local.yml up -d`
 
 ```bash
-./setup.sh http://localhost 
+./setup.sh
 ```
 
-> If running in a cloud env replace localhost with public facing IP address of the VM
+You are ready to make changes to the code. Do not forget to refresh the browser (in case id does not auto-reload)
 
-- Setup Tiptap Pro
+Thats it!
 
-  Visit [Tiptap Pro](https://collab.tiptap.dev/pro-extensions) and signup (it is free).
+## 🍙 Self Hosting
 
-  Create a **`.npmrc`** file, copy the following and replace your registry token generated from Tiptap Pro. 
-
-```
-@tiptap-pro:registry=https://registry.tiptap.dev/
-//registry.tiptap.dev/:_authToken=YOUR_REGISTRY_TOKEN
-```
-- Run Docker compose up
-
-```bash
-docker compose up -d
-```
-
-<strong>You can use the default email and password for your first login `captain@plane.so` and `password123`.</strong> 
+For self hosting environment setup, visit the [Self Hosting](https://docs.plane.so/self-hosting) documentation page
 
 ## 🚀 Features
 
-* **Issue Planning and Tracking**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
-* **Issue Attachments**: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
-* **Layouts**: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
-* **Cycles**: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
-* **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
-* **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
-* **Pages**: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
-* **Command K**: Enjoy a better user experience with the new Command + K menu. Easily manage and navigate through your projects from one convenient location.
-* **GitHub Sync**: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.
+- **Issue Planning and Tracking**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
+- **Issue Attachments**: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
+- **Layouts**: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
+- **Cycles**: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
+- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
+- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
+- **Pages**: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
+- **Command K**: Enjoy a better user experience with the new Command + K menu. Easily manage and navigate through your projects from one convenient location.
+- **GitHub Sync**: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.
 
 ## 📸 Screenshots
 
@@ -150,7 +140,6 @@ docker compose up -d
   </p>
 </p>
 
-
 ## 📚Documentation
 
 For full documentation, visit [docs.plane.so](https://docs.plane.so/)
diff --git a/apiserver/.env.example b/apiserver/.env.example
new file mode 100644
index 00000000000..8193b5e7716
--- /dev/null
+++ b/apiserver/.env.example
@@ -0,0 +1,72 @@
+# Backend
+# Debug value for api server use it as 0 for production use
+DEBUG=0
+DJANGO_SETTINGS_MODULE="plane.settings.production"
+
+# Error logs
+SENTRY_DSN=""
+
+# Database Settings
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
+
+# Redis Settings
+REDIS_HOST="plane-redis"
+REDIS_PORT="6379"
+REDIS_URL="redis://${REDIS_HOST}:6379/"
+
+# Email Settings
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_USE_TLS="1"
+EMAIL_USE_SSL="0"
+
+# AWS Settings
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
+# Changing this requires change in the nginx.conf for uploads if using minio setup
+AWS_S3_BUCKET_NAME="uploads"
+# Maximum file upload limit
+FILE_SIZE_LIMIT=5242880
+
+# GPT settings
+OPENAI_API_BASE="https://api.openai.com/v1" # change if using a custom endpoint
+OPENAI_API_KEY="sk-" # add your openai key here
+GPT_ENGINE="gpt-3.5-turbo" # use "gpt-4" if you have access
+
+# Github
+GITHUB_CLIENT_SECRET="" # For fetching release notes
+
+# Settings related to Docker
+DOCKERIZED=1
+# set to 1 If using the pre-configured minio setup
+USE_MINIO=1
+
+# Nginx Configuration
+NGINX_PORT=80
+
+# Default Creds
+DEFAULT_EMAIL="captain@plane.so"
+DEFAULT_PASSWORD="password123"
+
+# SignUps
+ENABLE_SIGNUP="1"
+
+
+# Enable Email/Password Signup
+ENABLE_EMAIL_PASSWORD="1"
+
+# Enable Magic link Login
+ENABLE_MAGIC_LINK_LOGIN="0"
+
+# Email redirections and minio domain settings
+WEB_URL="http://localhost"
+
diff --git a/apiserver/Dockerfile.api b/apiserver/Dockerfile.api
index 7da5f9ddaf1..cd1ee966768 100644
--- a/apiserver/Dockerfile.api
+++ b/apiserver/Dockerfile.api
@@ -8,7 +8,6 @@ ENV PIP_DISABLE_PIP_VERSION_CHECK=1
 WORKDIR /code
 
 RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
-
 RUN apk --no-cache add \
     "libpq~=15" \
     "libxslt~=1.1" \
diff --git a/apiserver/Dockerfile.dev b/apiserver/Dockerfile.dev
new file mode 100644
index 00000000000..cdfd2d50dcb
--- /dev/null
+++ b/apiserver/Dockerfile.dev
@@ -0,0 +1,51 @@
+FROM python:3.11.1-alpine3.17 AS backend
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
+RUN apk --no-cache add \
+    "bash~=5.2" \
+    "libpq~=15" \
+    "libxslt~=1.1" \
+    "nodejs-current~=19" \
+    "xmlsec~=1.2" \
+    "libffi-dev" \
+    "bash~=5.2" \
+    "g++~=12.2" \
+    "gcc~=12.2" \
+    "cargo~=1.64" \
+    "git~=2" \
+    "make~=4.3" \
+    "postgresql13-dev~=13" \
+    "libc-dev" \
+    "linux-headers"
+
+WORKDIR /code
+
+COPY requirements.txt ./requirements.txt
+ADD requirements ./requirements
+
+RUN pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn -r requirements.txt  --compile --no-cache-dir
+RUN addgroup -S plane && \
+    adduser -S captain -G plane
+
+RUN chown captain.plane /code
+
+USER captain
+
+# Add in Django deps and generate Django's static files
+
+USER root
+
+# RUN chmod +x ./bin/takeoff ./bin/worker ./bin/beat
+RUN chmod -R 777 /code
+
+USER captain
+
+# Expose container port and run entry point script
+EXPOSE 8000
+
+# CMD [ "./bin/takeoff" ]
+
diff --git a/apiserver/bin/user_script.py b/apiserver/bin/user_script.py
index e115b20b8c0..a356f2ec92b 100644
--- a/apiserver/bin/user_script.py
+++ b/apiserver/bin/user_script.py
@@ -1,4 +1,4 @@
-import os, sys, random, string
+import os, sys
 import uuid
 
 sys.path.append("/code")
diff --git a/apiserver/gunicorn.config.py b/apiserver/gunicorn.config.py
index 67205b5ec94..51c2a548871 100644
--- a/apiserver/gunicorn.config.py
+++ b/apiserver/gunicorn.config.py
@@ -3,4 +3,4 @@
 
 def post_fork(server, worker):
     patch_psycopg()
-    worker.log.info("Made Psycopg2 Green")
\ No newline at end of file
+    worker.log.info("Made Psycopg2 Green")
diff --git a/apiserver/plane/api/permissions/project.py b/apiserver/plane/api/permissions/project.py
index e4e3e0f9bc3..4f907dbd6fa 100644
--- a/apiserver/plane/api/permissions/project.py
+++ b/apiserver/plane/api/permissions/project.py
@@ -101,4 +101,4 @@ def has_permission(self, request, view):
             workspace__slug=view.workspace_slug,
             member=request.user,
             project_id=view.project_id,
-        ).exists()
\ No newline at end of file
+        ).exists()
diff --git a/apiserver/plane/api/permissions/workspace.py b/apiserver/plane/api/permissions/workspace.py
index d01b545ee18..66e8366146c 100644
--- a/apiserver/plane/api/permissions/workspace.py
+++ b/apiserver/plane/api/permissions/workspace.py
@@ -58,8 +58,17 @@ def has_permission(self, request, view):
         if request.user.is_anonymous:
             return False
 
+        ## Safe Methods -> Handle the filtering logic in queryset
+        if request.method in SAFE_METHODS:
+            return WorkspaceMember.objects.filter(
+                workspace__slug=view.workspace_slug,
+                member=request.user,
+            ).exists()
+
         return WorkspaceMember.objects.filter(
-            member=request.user, workspace__slug=view.workspace_slug
+            member=request.user,
+            workspace__slug=view.workspace_slug,
+            role__in=[Owner, Admin],
         ).exists()
 
 
diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index 2dc910cafcd..f1a7de3b81c 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -1,5 +1,13 @@
 from .base import BaseSerializer
-from .user import UserSerializer, UserLiteSerializer, ChangePasswordSerializer, ResetPasswordSerializer, UserAdminLiteSerializer
+from .user import (
+    UserSerializer,
+    UserLiteSerializer,
+    ChangePasswordSerializer,
+    ResetPasswordSerializer,
+    UserAdminLiteSerializer,
+    UserMeSerializer,
+    UserMeSettingsSerializer,
+)
 from .workspace import (
     WorkSpaceSerializer,
     WorkSpaceMemberSerializer,
@@ -8,9 +16,11 @@
     WorkspaceLiteSerializer,
     WorkspaceThemeSerializer,
     WorkspaceMemberAdminSerializer,
+    WorkspaceMemberMeSerializer,
 )
 from .project import (
     ProjectSerializer,
+    ProjectListSerializer,
     ProjectDetailSerializer,
     ProjectMemberSerializer,
     ProjectMemberInviteSerializer,
@@ -20,19 +30,22 @@
     ProjectMemberLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
-    ProjectPublicMemberSerializer
+    ProjectPublicMemberSerializer,
 )
 from .state import StateSerializer, StateLiteSerializer
-from .view import IssueViewSerializer, IssueViewFavoriteSerializer
-from .cycle import CycleSerializer, CycleIssueSerializer, CycleFavoriteSerializer, CycleWriteSerializer
+from .view import GlobalViewSerializer, IssueViewSerializer, IssueViewFavoriteSerializer
+from .cycle import (
+    CycleSerializer,
+    CycleIssueSerializer,
+    CycleFavoriteSerializer,
+    CycleWriteSerializer,
+)
 from .asset import FileAssetSerializer
 from .issue import (
     IssueCreateSerializer,
     IssueActivitySerializer,
     IssueCommentSerializer,
     IssuePropertySerializer,
-    BlockerIssueSerializer,
-    BlockedIssueSerializer,
     IssueAssigneeSerializer,
     LabelSerializer,
     IssueSerializer,
@@ -45,6 +58,8 @@
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssueRelationSerializer,
+    RelatedIssueSerializer,
     IssuePublicSerializer,
 )
 
diff --git a/apiserver/plane/api/serializers/analytic.py b/apiserver/plane/api/serializers/analytic.py
index 5f35e111787..9f3ee6d0a24 100644
--- a/apiserver/plane/api/serializers/analytic.py
+++ b/apiserver/plane/api/serializers/analytic.py
@@ -17,7 +17,7 @@ def create(self, validated_data):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         return AnalyticView.objects.create(**validated_data)
 
     def update(self, instance, validated_data):
@@ -25,6 +25,6 @@ def update(self, instance, validated_data):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         validated_data["query"] = issue_filters(query_params, "PATCH")
         return super().update(instance, validated_data)
diff --git a/apiserver/plane/api/serializers/base.py b/apiserver/plane/api/serializers/base.py
index 0c6bba46823..89c9725d951 100644
--- a/apiserver/plane/api/serializers/base.py
+++ b/apiserver/plane/api/serializers/base.py
@@ -3,3 +3,56 @@
 
 class BaseSerializer(serializers.ModelSerializer):
     id = serializers.PrimaryKeyRelatedField(read_only=True)
+
+class DynamicBaseSerializer(BaseSerializer):
+
+    def __init__(self, *args, **kwargs):
+        # If 'fields' is provided in the arguments, remove it and store it separately.
+        # This is done so as not to pass this custom argument up to the superclass.
+        fields = kwargs.pop("fields", None)
+
+        # Call the initialization of the superclass.
+        super().__init__(*args, **kwargs)
+
+        # If 'fields' was provided, filter the fields of the serializer accordingly.
+        if fields is not None:
+            self.fields = self._filter_fields(fields)
+
+    def _filter_fields(self, fields):
+        """
+        Adjust the serializer's fields based on the provided 'fields' list.
+
+        :param fields: List or dictionary specifying which fields to include in the serializer.
+        :return: The updated fields for the serializer.
+        """
+        # Check each field_name in the provided fields.
+        for field_name in fields:
+            # If the field is a dictionary (indicating nested fields),
+            # loop through its keys and values.
+            if isinstance(field_name, dict):
+                for key, value in field_name.items():
+                    # If the value of this nested field is a list, 
+                    # perform a recursive filter on it.
+                    if isinstance(value, list):
+                        self._filter_fields(self.fields[key], value)
+
+        # Create a list to store allowed fields.
+        allowed = []
+        for item in fields:
+            # If the item is a string, it directly represents a field's name.
+            if isinstance(item, str):
+                allowed.append(item)
+            # If the item is a dictionary, it represents a nested field.
+            # Add the key of this dictionary to the allowed list.
+            elif isinstance(item, dict):
+                allowed.append(list(item.keys())[0])
+
+        # Convert the current serializer's fields and the allowed fields to sets.
+        existing = set(self.fields)
+        allowed = set(allowed)
+
+        # Remove fields from the serializer that aren't in the 'allowed' list.
+        for field_name in (existing - allowed):
+            self.fields.pop(field_name)
+
+        return self.fields
diff --git a/apiserver/plane/api/serializers/cycle.py b/apiserver/plane/api/serializers/cycle.py
index 66436803333..104a3dd067a 100644
--- a/apiserver/plane/api/serializers/cycle.py
+++ b/apiserver/plane/api/serializers/cycle.py
@@ -1,6 +1,3 @@
-# Django imports
-from django.db.models.functions import TruncDate
-
 # Third party imports
 from rest_framework import serializers
 
@@ -12,10 +9,14 @@
 from .project import ProjectLiteSerializer
 from plane.db.models import Cycle, CycleIssue, CycleFavorite
 
-class CycleWriteSerializer(BaseSerializer):
 
+class CycleWriteSerializer(BaseSerializer):
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("end_date", None) is not None and data.get("start_date", None) > data.get("end_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+            and data.get("start_date", None) > data.get("end_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed end date")
         return data
 
@@ -34,7 +35,6 @@ class CycleSerializer(BaseSerializer):
     unstarted_issues = serializers.IntegerField(read_only=True)
     backlog_issues = serializers.IntegerField(read_only=True)
     assignees = serializers.SerializerMethodField(read_only=True)
-    labels = serializers.SerializerMethodField(read_only=True)
     total_estimates = serializers.IntegerField(read_only=True)
     completed_estimates = serializers.IntegerField(read_only=True)
     started_estimates = serializers.IntegerField(read_only=True)
@@ -42,19 +42,24 @@ class CycleSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
 
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("end_date", None) is not None and data.get("start_date", None) > data.get("end_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+            and data.get("start_date", None) > data.get("end_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed end date")
         return data
-    
+
     def get_assignees(self, obj):
         members = [
             {
                 "avatar": assignee.avatar,
-                "first_name": assignee.first_name,
                 "display_name": assignee.display_name,
                 "id": assignee.id,
             }
-            for issue_cycle in obj.issue_cycle.all()
+            for issue_cycle in obj.issue_cycle.prefetch_related(
+                "issue__assignees"
+            ).all()
             for assignee in issue_cycle.issue.assignees.all()
         ]
         # Use a set comprehension to return only the unique objects
@@ -64,24 +69,6 @@ def get_assignees(self, obj):
         unique_list = [dict(item) for item in unique_objects]
 
         return unique_list
-    
-    def get_labels(self, obj):
-        labels = [
-            {
-                "name": label.name,
-                "color": label.color,
-                "id": label.id,
-            }
-            for issue_cycle in obj.issue_cycle.all()
-            for label in issue_cycle.issue.labels.all()
-        ]
-        # Use a set comprehension to return only the unique objects
-        unique_objects = {frozenset(item.items()) for item in labels}
-
-        # Convert the set back to a list of dictionaries
-        unique_list = [dict(item) for item in unique_objects]
-
-        return unique_list
 
     class Meta:
         model = Cycle
diff --git a/apiserver/plane/api/serializers/inbox.py b/apiserver/plane/api/serializers/inbox.py
index ae17b749bfa..f52a90660be 100644
--- a/apiserver/plane/api/serializers/inbox.py
+++ b/apiserver/plane/api/serializers/inbox.py
@@ -6,7 +6,6 @@
 from .issue import IssueFlatSerializer, LabelLiteSerializer
 from .project import ProjectLiteSerializer
 from .state import StateLiteSerializer
-from .project import ProjectLiteSerializer
 from .user import UserLiteSerializer
 from plane.db.models import Inbox, InboxIssue, Issue
 
diff --git a/apiserver/plane/api/serializers/integration/__init__.py b/apiserver/plane/api/serializers/integration/__init__.py
index 963fc295e27..112ff02d162 100644
--- a/apiserver/plane/api/serializers/integration/__init__.py
+++ b/apiserver/plane/api/serializers/integration/__init__.py
@@ -5,4 +5,4 @@
     GithubIssueSyncSerializer,
     GithubCommentSyncSerializer,
 )
-from .slack import SlackProjectSyncSerializer
\ No newline at end of file
+from .slack import SlackProjectSyncSerializer
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 2a75b2f48fb..f061a0a1938 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -8,8 +8,7 @@
 from .base import BaseSerializer
 from .user import UserLiteSerializer
 from .state import StateSerializer, StateLiteSerializer
-from .user import UserLiteSerializer
-from .project import ProjectSerializer, ProjectLiteSerializer
+from .project import ProjectLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from plane.db.models import (
     User,
@@ -17,12 +16,10 @@
     IssueActivity,
     IssueComment,
     IssueProperty,
-    IssueBlocker,
     IssueAssignee,
     IssueSubscriber,
     IssueLabel,
     Label,
-    IssueBlocker,
     CycleIssue,
     Cycle,
     Module,
@@ -32,6 +29,7 @@
     IssueReaction,
     CommentReaction,
     IssueVote,
+    IssueRelation,
 )
 
 
@@ -50,6 +48,7 @@ class Meta:
             "target_date",
             "sequence_id",
             "sort_order",
+            "is_draft",
         ]
 
 
@@ -75,31 +74,18 @@ class IssueCreateSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
 
-    assignees_list = serializers.ListField(
+    assignees = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
     )
 
-    # List of issues that are blocking this issue
-    blockers_list = serializers.ListField(
-        child=serializers.PrimaryKeyRelatedField(queryset=Issue.objects.all()),
-        write_only=True,
-        required=False,
-    )
-    labels_list = serializers.ListField(
+    labels = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
     )
 
-    # List of issues that are blocked by this issue
-    blocks_list = serializers.ListField(
-        child=serializers.PrimaryKeyRelatedField(queryset=Issue.objects.all()),
-        write_only=True,
-        required=False,
-    )
-
     class Meta:
         model = Issue
         fields = "__all__"
@@ -112,6 +98,12 @@ class Meta:
             "updated_at",
         ]
 
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['assignees'] = [str(assignee.id) for assignee in instance.assignees.all()]
+        data['labels'] = [str(label.id) for label in instance.labels.all()]
+        return data
+
     def validate(self, data):
         if (
             data.get("start_date", None) is not None
@@ -122,10 +114,8 @@ def validate(self, data):
         return data
 
     def create(self, validated_data):
-        blockers = validated_data.pop("blockers_list", None)
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
-        blocks = validated_data.pop("blocks_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         project_id = self.context["project_id"]
         workspace_id = self.context["workspace_id"]
@@ -137,22 +127,6 @@ def create(self, validated_data):
         created_by_id = issue.created_by_id
         updated_by_id = issue.updated_by_id
 
-        if blockers is not None and len(blockers):
-            IssueBlocker.objects.bulk_create(
-                [
-                    IssueBlocker(
-                        block=issue,
-                        blocked_by=blocker,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for blocker in blockers
-                ],
-                batch_size=10,
-            )
-
         if assignees is not None and len(assignees):
             IssueAssignee.objects.bulk_create(
                 [
@@ -196,29 +170,11 @@ def create(self, validated_data):
                 batch_size=10,
             )
 
-        if blocks is not None and len(blocks):
-            IssueBlocker.objects.bulk_create(
-                [
-                    IssueBlocker(
-                        block=block,
-                        blocked_by=issue,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for block in blocks
-                ],
-                batch_size=10,
-            )
-
         return issue
 
     def update(self, instance, validated_data):
-        blockers = validated_data.pop("blockers_list", None)
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
-        blocks = validated_data.pop("blocks_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         # Related models
         project_id = instance.project_id
@@ -226,23 +182,6 @@ def update(self, instance, validated_data):
         created_by_id = instance.created_by_id
         updated_by_id = instance.updated_by_id
 
-        if blockers is not None:
-            IssueBlocker.objects.filter(block=instance).delete()
-            IssueBlocker.objects.bulk_create(
-                [
-                    IssueBlocker(
-                        block=instance,
-                        blocked_by=blocker,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for blocker in blockers
-                ],
-                batch_size=10,
-            )
-
         if assignees is not None:
             IssueAssignee.objects.filter(issue=instance).delete()
             IssueAssignee.objects.bulk_create(
@@ -277,23 +216,6 @@ def update(self, instance, validated_data):
                 batch_size=10,
             )
 
-        if blocks is not None:
-            IssueBlocker.objects.filter(blocked_by=instance).delete()
-            IssueBlocker.objects.bulk_create(
-                [
-                    IssueBlocker(
-                        block=block,
-                        blocked_by=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for block in blocks
-                ],
-                batch_size=10,
-            )
-
         # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()
         return super().update(instance, validated_data)
@@ -309,25 +231,6 @@ class Meta:
         fields = "__all__"
 
 
-class IssueCommentSerializer(BaseSerializer):
-    actor_detail = UserLiteSerializer(read_only=True, source="actor")
-    issue_detail = IssueFlatSerializer(read_only=True, source="issue")
-    project_detail = ProjectLiteSerializer(read_only=True, source="project")
-    workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
-
-    class Meta:
-        model = IssueComment
-        fields = "__all__"
-        read_only_fields = [
-            "workspace",
-            "project",
-            "issue",
-            "created_by",
-            "updated_by",
-            "created_at",
-            "updated_at",
-        ]
-
 
 class IssuePropertySerializer(BaseSerializer):
     class Meta:
@@ -364,7 +267,6 @@ class Meta:
 
 
 class IssueLabelSerializer(BaseSerializer):
-    # label_details = LabelSerializer(read_only=True, source="label")
 
     class Meta:
         model = IssueLabel
@@ -375,32 +277,39 @@ class Meta:
         ]
 
 
-class BlockedIssueSerializer(BaseSerializer):
-    blocked_issue_detail = IssueProjectLiteSerializer(source="block", read_only=True)
+class IssueRelationSerializer(BaseSerializer):
+    issue_detail = IssueProjectLiteSerializer(read_only=True, source="related_issue")
 
     class Meta:
-        model = IssueBlocker
+        model = IssueRelation
         fields = [
-            "blocked_issue_detail",
-            "blocked_by",
-            "block",
+            "issue_detail",
+            "relation_type",
+            "related_issue",
+            "issue",
+            "id"
+        ]
+        read_only_fields = [
+            "workspace",
+            "project",
         ]
-        read_only_fields = fields
-
 
-class BlockerIssueSerializer(BaseSerializer):
-    blocker_issue_detail = IssueProjectLiteSerializer(
-        source="blocked_by", read_only=True
-    )
+class RelatedIssueSerializer(BaseSerializer):
+    issue_detail = IssueProjectLiteSerializer(read_only=True, source="issue")
 
     class Meta:
-        model = IssueBlocker
+        model = IssueRelation
         fields = [
-            "blocker_issue_detail",
-            "blocked_by",
-            "block",
+            "issue_detail",
+            "relation_type",
+            "related_issue",
+            "issue",
+            "id"
+        ]
+        read_only_fields = [
+            "workspace",
+            "project",
         ]
-        read_only_fields = fields
 
 
 class IssueAssigneeSerializer(BaseSerializer):
@@ -514,6 +423,9 @@ class Meta:
 
 
 class IssueReactionSerializer(BaseSerializer):
+    
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+    
     class Meta:
         model = IssueReaction
         fields = "__all__"
@@ -525,19 +437,6 @@ class Meta:
         ]
 
 
-class IssueReactionLiteSerializer(BaseSerializer):
-    actor_detail = UserLiteSerializer(read_only=True, source="actor")
-
-    class Meta:
-        model = IssueReaction
-        fields = [
-            "id",
-            "reaction",
-            "issue",
-            "actor_detail",
-        ]
-
-
 class CommentReactionLiteSerializer(BaseSerializer):
     actor_detail = UserLiteSerializer(read_only=True, source="actor")
 
@@ -559,9 +458,12 @@ class Meta:
 
 
 class IssueVoteSerializer(BaseSerializer):
+
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+
     class Meta:
         model = IssueVote
-        fields = ["issue", "vote", "workspace_id", "project_id", "actor"]
+        fields = ["issue", "vote", "workspace", "project", "actor", "actor_detail"]
         read_only_fields = fields
 
 
@@ -624,16 +526,14 @@ class IssueSerializer(BaseSerializer):
     parent_detail = IssueStateFlatSerializer(read_only=True, source="parent")
     label_details = LabelSerializer(read_only=True, source="labels", many=True)
     assignee_details = UserLiteSerializer(read_only=True, source="assignees", many=True)
-    # List of issues blocked by this issue
-    blocked_issues = BlockedIssueSerializer(read_only=True, many=True)
-    # List of issues that block this issue
-    blocker_issues = BlockerIssueSerializer(read_only=True, many=True)
+    related_issues = IssueRelationSerializer(read_only=True, source="issue_relation", many=True)
+    issue_relations = RelatedIssueSerializer(read_only=True, source="issue_related", many=True)
     issue_cycle = IssueCycleDetailSerializer(read_only=True)
     issue_module = IssueModuleDetailSerializer(read_only=True)
     issue_link = IssueLinkSerializer(read_only=True, many=True)
     issue_attachment = IssueAttachmentSerializer(read_only=True, many=True)
     sub_issues_count = serializers.IntegerField(read_only=True)
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -659,7 +559,7 @@ class IssueLiteSerializer(BaseSerializer):
     module_id = serializers.UUIDField(read_only=True)
     attachment_count = serializers.IntegerField(read_only=True)
     link_count = serializers.IntegerField(read_only=True)
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -680,7 +580,8 @@ class Meta:
 class IssuePublicSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateLiteSerializer(read_only=True, source="state")
-    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
+    reactions = IssueReactionSerializer(read_only=True, many=True, source="issue_reactions")
+    votes = IssueVoteSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -696,11 +597,13 @@ class Meta:
             "workspace",
             "priority",
             "target_date",
-            "issue_reactions",
+            "reactions",
+            "votes",
         ]
         read_only_fields = fields
 
 
+
 class IssueSubscriberSerializer(BaseSerializer):
     class Meta:
         model = IssueSubscriber
diff --git a/apiserver/plane/api/serializers/module.py b/apiserver/plane/api/serializers/module.py
index aaabd4ae071..48f773b0f81 100644
--- a/apiserver/plane/api/serializers/module.py
+++ b/apiserver/plane/api/serializers/module.py
@@ -4,9 +4,8 @@
 # Module imports
 from .base import BaseSerializer
 from .user import UserLiteSerializer
-from .project import ProjectSerializer, ProjectLiteSerializer
+from .project import ProjectLiteSerializer
 from .workspace import WorkspaceLiteSerializer
-from .issue import IssueStateSerializer
 
 from plane.db.models import (
     User,
@@ -19,7 +18,7 @@
 
 
 class ModuleWriteSerializer(BaseSerializer):
-    members_list = serializers.ListField(
+    members = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
@@ -39,6 +38,11 @@ class Meta:
             "created_at",
             "updated_at",
         ]
+    
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['members'] = [str(member.id) for member in instance.members.all()]
+        return data
 
     def validate(self, data):
         if data.get("start_date", None) is not None and data.get("target_date", None) is not None and data.get("start_date", None) > data.get("target_date", None):
@@ -46,7 +50,7 @@ def validate(self, data):
         return data    
 
     def create(self, validated_data):
-        members = validated_data.pop("members_list", None)
+        members = validated_data.pop("members", None)
 
         project = self.context["project"]
 
@@ -72,7 +76,7 @@ def create(self, validated_data):
         return module
 
     def update(self, instance, validated_data):
-        members = validated_data.pop("members_list", None)
+        members = validated_data.pop("members", None)
 
         if members is not None:
             ModuleMember.objects.filter(module=instance).delete()
diff --git a/apiserver/plane/api/serializers/page.py b/apiserver/plane/api/serializers/page.py
index 94f7836de18..abdf958cb10 100644
--- a/apiserver/plane/api/serializers/page.py
+++ b/apiserver/plane/api/serializers/page.py
@@ -33,7 +33,7 @@ class Meta:
 class PageSerializer(BaseSerializer):
     is_favorite = serializers.BooleanField(read_only=True)
     label_details = LabelLiteSerializer(read_only=True, source="labels", many=True)
-    labels_list = serializers.ListField(
+    labels = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
@@ -50,9 +50,13 @@ class Meta:
             "project",
             "owned_by",
         ]
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['labels'] = [str(label.id) for label in instance.labels.all()]
+        return data
 
     def create(self, validated_data):
-        labels = validated_data.pop("labels_list", None)
+        labels = validated_data.pop("labels", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
         page = Page.objects.create(
@@ -77,7 +81,7 @@ def create(self, validated_data):
         return page
 
     def update(self, instance, validated_data):
-        labels = validated_data.pop("labels_list", None)
+        labels = validated_data.pop("labels", None)
         if labels is not None:
             PageLabel.objects.filter(page=instance).delete()
             PageLabel.objects.bulk_create(
diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index 49d986cae0b..36fa6ecca7c 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -1,11 +1,8 @@
-# Django imports
-from django.db import IntegrityError
-
 # Third party imports
 from rest_framework import serializers
 
 # Module imports
-from .base import BaseSerializer
+from .base import BaseSerializer, DynamicBaseSerializer
 from plane.api.serializers.workspace import WorkSpaceSerializer, WorkspaceLiteSerializer
 from plane.api.serializers.user import UserLiteSerializer, UserAdminLiteSerializer
 from plane.db.models import (
@@ -94,8 +91,33 @@ class Meta:
         read_only_fields = fields
 
 
+class ProjectListSerializer(DynamicBaseSerializer):
+    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)
+    is_deployed = serializers.BooleanField(read_only=True)
+    members = serializers.SerializerMethodField()
+
+    def get_members(self, obj):
+        project_members = ProjectMember.objects.filter(project_id=obj.id).values(
+            "id",
+            "member_id",
+            "member__display_name",
+            "member__avatar",
+        )
+        return project_members
+
+    class Meta:
+        model = Project
+        fields = "__all__"
+
+
 class ProjectDetailSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
+    # workspace = WorkSpaceSerializer(read_only=True)
     default_assignee = UserLiteSerializer(read_only=True)
     project_lead = UserLiteSerializer(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
@@ -148,8 +170,6 @@ class Meta:
 
 
 class ProjectFavoriteSerializer(BaseSerializer):
-    project_detail = ProjectLiteSerializer(source="project", read_only=True)
-
     class Meta:
         model = ProjectFavorite
         fields = "__all__"
@@ -178,12 +198,12 @@ class Meta:
         fields = "__all__"
         read_only_fields = [
             "workspace",
-            "project", "anchor",
+            "project",
+            "anchor",
         ]
 
 
 class ProjectPublicMemberSerializer(BaseSerializer):
-
     class Meta:
         model = ProjectPublicMember
         fields = "__all__"
diff --git a/apiserver/plane/api/serializers/user.py b/apiserver/plane/api/serializers/user.py
index dcb00c6cbfe..b8f9dedd43d 100644
--- a/apiserver/plane/api/serializers/user.py
+++ b/apiserver/plane/api/serializers/user.py
@@ -3,7 +3,7 @@
 
 # Module import
 from .base import BaseSerializer
-from plane.db.models import User
+from plane.db.models import User, Workspace, WorkspaceMemberInvite
 
 
 class UserSerializer(BaseSerializer):
@@ -33,6 +33,81 @@ def get_is_onboarded(self, obj):
             return bool(obj.first_name) or bool(obj.last_name)
 
 
+class UserMeSerializer(BaseSerializer):
+    class Meta:
+        model = User
+        fields = [
+            "id",
+            "avatar",
+            "cover_image",
+            "date_joined",
+            "display_name",
+            "email",
+            "first_name",
+            "last_name",
+            "is_active",
+            "is_bot",
+            "is_email_verified",
+            "is_managed",
+            "is_onboarded",
+            "is_tour_completed",
+            "mobile_number",
+            "role",
+            "onboarding_step",
+            "user_timezone",
+            "username",
+            "theme",
+            "last_workspace_id",
+        ]
+        read_only_fields = fields
+
+
+class UserMeSettingsSerializer(BaseSerializer):
+    workspace = serializers.SerializerMethodField()
+
+    class Meta:
+        model = User
+        fields = [
+            "id",
+            "email",
+            "workspace",
+        ]
+        read_only_fields = fields
+
+    def get_workspace(self, obj):
+        workspace_invites = WorkspaceMemberInvite.objects.filter(
+            email=obj.email
+        ).count()
+        if obj.last_workspace_id is not None:
+            workspace = Workspace.objects.filter(
+                pk=obj.last_workspace_id, workspace_member__member=obj.id
+            ).first()
+            return {
+                "last_workspace_id": obj.last_workspace_id,
+                "last_workspace_slug": workspace.slug if workspace is not None else "",
+                "fallback_workspace_id": obj.last_workspace_id,
+                "fallback_workspace_slug": workspace.slug if workspace is not None else "",
+                "invites": workspace_invites,
+            }
+        else:
+            fallback_workspace = (
+                Workspace.objects.filter(workspace_member__member_id=obj.id)
+                .order_by("created_at")
+                .first()
+            )
+            return {
+                "last_workspace_id": None,
+                "last_workspace_slug": None,
+                "fallback_workspace_id": fallback_workspace.id
+                if fallback_workspace is not None
+                else None,
+                "fallback_workspace_slug": fallback_workspace.slug
+                if fallback_workspace is not None
+                else None,
+                "invites": workspace_invites,
+            }
+
+
 class UserLiteSerializer(BaseSerializer):
     class Meta:
         model = User
@@ -51,7 +126,6 @@ class Meta:
 
 
 class UserAdminLiteSerializer(BaseSerializer):
-
     class Meta:
         model = User
         fields = [
diff --git a/apiserver/plane/api/serializers/view.py b/apiserver/plane/api/serializers/view.py
index 076228ae098..e7502609a72 100644
--- a/apiserver/plane/api/serializers/view.py
+++ b/apiserver/plane/api/serializers/view.py
@@ -5,10 +5,39 @@
 from .base import BaseSerializer
 from .workspace import WorkspaceLiteSerializer
 from .project import ProjectLiteSerializer
-from plane.db.models import IssueView, IssueViewFavorite
+from plane.db.models import GlobalView, IssueView, IssueViewFavorite
 from plane.utils.issue_filters import issue_filters
 
 
+class GlobalViewSerializer(BaseSerializer):
+    workspace_detail = WorkspaceLiteSerializer(source="workspace", read_only=True)
+
+    class Meta:
+        model = GlobalView
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "query",
+        ]
+
+    def create(self, validated_data):
+        query_params = validated_data.get("query_data", {})
+        if bool(query_params):
+            validated_data["query"] = issue_filters(query_params, "POST")
+        else:
+            validated_data["query"] = dict()
+        return GlobalView.objects.create(**validated_data)
+
+    def update(self, instance, validated_data):
+        query_params = validated_data.get("query_data", {})
+        if bool(query_params):
+            validated_data["query"] = issue_filters(query_params, "POST")
+        else:
+            validated_data["query"] = dict()
+        validated_data["query"] = issue_filters(query_params, "PATCH")
+        return super().update(instance, validated_data)
+
+
 class IssueViewSerializer(BaseSerializer):
     is_favorite = serializers.BooleanField(read_only=True)
     project_detail = ProjectLiteSerializer(source="project", read_only=True)
@@ -28,7 +57,7 @@ def create(self, validated_data):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         return IssueView.objects.create(**validated_data)
 
     def update(self, instance, validated_data):
@@ -36,7 +65,7 @@ def update(self, instance, validated_data):
         if bool(query_params):
             validated_data["query"] = issue_filters(query_params, "POST")
         else:
-            validated_data["query"] = dict()
+            validated_data["query"] = {}
         validated_data["query"] = issue_filters(query_params, "PATCH")
         return super().update(instance, validated_data)
 
diff --git a/apiserver/plane/api/serializers/workspace.py b/apiserver/plane/api/serializers/workspace.py
index d27b66481c0..0a80ce8b7be 100644
--- a/apiserver/plane/api/serializers/workspace.py
+++ b/apiserver/plane/api/serializers/workspace.py
@@ -54,6 +54,13 @@ class Meta:
         fields = "__all__"
 
 
+class WorkspaceMemberMeSerializer(BaseSerializer):
+
+    class Meta:
+        model = WorkspaceMember
+        fields = "__all__"
+
+
 class WorkspaceMemberAdminSerializer(BaseSerializer):
     member = UserAdminLiteSerializer(read_only=True)
     workspace = WorkspaceLiteSerializer(read_only=True)
@@ -103,9 +110,8 @@ def create(self, validated_data, **kwargs):
             ]
             TeamMember.objects.bulk_create(team_members, batch_size=10)
             return team
-        else:
-            team = Team.objects.create(**validated_data)
-            return team
+        team = Team.objects.create(**validated_data)
+        return team
 
     def update(self, instance, validated_data):
         if "members" in validated_data:
@@ -117,8 +123,7 @@ def update(self, instance, validated_data):
             ]
             TeamMember.objects.bulk_create(team_members, batch_size=10)
             return super().update(instance, validated_data)
-        else:
-            return super().update(instance, validated_data)
+        return super().update(instance, validated_data)
 
 
 class WorkspaceThemeSerializer(BaseSerializer):
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
deleted file mode 100644
index 1fb2b8e905c..00000000000
--- a/apiserver/plane/api/urls.py
+++ /dev/null
@@ -1,1643 +0,0 @@
-from django.urls import path
-
-
-# Create your urls here.
-
-from plane.api.views import (
-    # Authentication
-    SignUpEndpoint,
-    SignInEndpoint,
-    SignOutEndpoint,
-    MagicSignInEndpoint,
-    MagicSignInGenerateEndpoint,
-    OauthEndpoint,
-    ## End Authentication
-    # Auth Extended
-    ForgotPasswordEndpoint,
-    VerifyEmailEndpoint,
-    ResetPasswordEndpoint,
-    RequestEmailVerificationEndpoint,
-    ChangePasswordEndpoint,
-    ## End Auth Extender
-    # User
-    UserEndpoint,
-    UpdateUserOnBoardedEndpoint,
-    UpdateUserTourCompletedEndpoint,
-    UserActivityEndpoint,
-    ## End User
-    # Workspaces
-    WorkSpaceViewSet,
-    UserWorkspaceInvitationsEndpoint,
-    UserWorkSpacesEndpoint,
-    InviteWorkspaceEndpoint,
-    JoinWorkspaceEndpoint,
-    WorkSpaceMemberViewSet,
-    WorkspaceMembersEndpoint,
-    WorkspaceInvitationsViewset,
-    UserWorkspaceInvitationsEndpoint,
-    WorkspaceMemberUserEndpoint,
-    WorkspaceMemberUserViewsEndpoint,
-    WorkSpaceAvailabilityCheckEndpoint,
-    TeamMemberViewSet,
-    AddTeamToProjectEndpoint,
-    UserLastProjectWithWorkspaceEndpoint,
-    UserWorkspaceInvitationEndpoint,
-    UserActivityGraphEndpoint,
-    UserIssueCompletedGraphEndpoint,
-    UserWorkspaceDashboardEndpoint,
-    WorkspaceThemeViewSet,
-    WorkspaceUserProfileStatsEndpoint,
-    WorkspaceUserActivityEndpoint,
-    WorkspaceUserProfileEndpoint,
-    WorkspaceUserProfileIssuesEndpoint,
-    WorkspaceLabelsEndpoint,
-    ## End Workspaces
-    # File Assets
-    FileAssetEndpoint,
-    UserAssetsEndpoint,
-    ## End File Assets
-    # Projects
-    ProjectViewSet,
-    InviteProjectEndpoint,
-    ProjectMemberViewSet,
-    ProjectMemberEndpoint,
-    ProjectMemberInvitationsViewset,
-    ProjectMemberUserEndpoint,
-    AddMemberToProjectEndpoint,
-    ProjectJoinEndpoint,
-    UserProjectInvitationsViewset,
-    ProjectIdentifierEndpoint,
-    ProjectFavoritesViewSet,
-    ## End Projects
-    # Issues
-    IssueViewSet,
-    WorkSpaceIssuesEndpoint,
-    IssueActivityEndpoint,
-    IssueCommentViewSet,
-    UserWorkSpaceIssues,
-    BulkDeleteIssuesEndpoint,
-    BulkImportIssuesEndpoint,
-    ProjectUserViewsEndpoint,
-    IssuePropertyViewSet,
-    LabelViewSet,
-    SubIssuesEndpoint,
-    IssueLinkViewSet,
-    BulkCreateIssueLabelsEndpoint,
-    IssueAttachmentEndpoint,
-    IssueArchiveViewSet,
-    IssueSubscriberViewSet,
-    IssueCommentPublicViewSet,
-    IssueReactionViewSet,
-    CommentReactionViewSet,
-    ## End Issues
-    # States
-    StateViewSet,
-    ## End States
-    # Estimates
-    ProjectEstimatePointEndpoint,
-    BulkEstimatePointEndpoint,
-    ## End Estimates
-    # Views
-    IssueViewViewSet,
-    ViewIssuesEndpoint,
-    IssueViewFavoriteViewSet,
-    ## End Views
-    # Cycles
-    CycleViewSet,
-    CycleIssueViewSet,
-    CycleDateCheckEndpoint,
-    CycleFavoriteViewSet,
-    TransferCycleIssueEndpoint,
-    ## End Cycles
-    # Modules
-    ModuleViewSet,
-    ModuleIssueViewSet,
-    ModuleFavoriteViewSet,
-    ModuleLinkViewSet,
-    BulkImportModulesEndpoint,
-    ## End Modules
-    # Pages
-    PageViewSet,
-    PageBlockViewSet,
-    PageFavoriteViewSet,
-    CreateIssueFromPageBlockEndpoint,
-    ## End Pages
-    # Api Tokens
-    ApiTokenEndpoint,
-    ## End Api Tokens
-    # Integrations
-    IntegrationViewSet,
-    WorkspaceIntegrationViewSet,
-    GithubRepositoriesEndpoint,
-    GithubRepositorySyncViewSet,
-    GithubIssueSyncViewSet,
-    GithubCommentSyncViewSet,
-    BulkCreateGithubIssueSyncEndpoint,
-    SlackProjectSyncViewSet,
-    ## End Integrations
-    # Importer
-    ServiceIssueImportSummaryEndpoint,
-    ImportServiceEndpoint,
-    UpdateServiceImportStatusEndpoint,
-    ## End importer
-    # Search
-    GlobalSearchEndpoint,
-    IssueSearchEndpoint,
-    ## End Search
-    # Gpt
-    GPTIntegrationEndpoint,
-    ## End Gpt
-    # Release Notes
-    ReleaseNotesEndpoint,
-    ## End Release Notes
-    # Inbox
-    InboxViewSet,
-    InboxIssueViewSet,
-    ## End Inbox
-    # Analytics
-    AnalyticsEndpoint,
-    AnalyticViewViewset,
-    SavedAnalyticEndpoint,
-    ExportAnalyticsEndpoint,
-    DefaultAnalyticsEndpoint,
-    ## End Analytics
-    # Notification
-    NotificationViewSet,
-    UnreadNotificationEndpoint,
-    MarkAllReadNotificationViewSet,
-    ## End Notification
-    # Public Boards
-    ProjectDeployBoardViewSet,
-    ProjectIssuesPublicEndpoint,
-    ProjectDeployBoardPublicSettingsEndpoint,
-    IssueReactionPublicViewSet,
-    CommentReactionPublicViewSet,
-    InboxIssuePublicViewSet,
-    IssueVotePublicViewSet,
-    WorkspaceProjectDeployBoardEndpoint,
-    IssueRetrievePublicEndpoint,
-    ## End Public Boards
-    ## Exporter
-    ExportIssuesEndpoint,
-    ## End Exporter
-
-)
-
-
-urlpatterns = [
-    #  Social Auth
-    path("social-auth/", OauthEndpoint.as_view(), name="oauth"),
-    # Auth
-    path("sign-up/", SignUpEndpoint.as_view(), name="sign-up"),
-    path("sign-in/", SignInEndpoint.as_view(), name="sign-in"),
-    path("sign-out/", SignOutEndpoint.as_view(), name="sign-out"),
-    # Magic Sign In/Up
-    path(
-        "magic-generate/", MagicSignInGenerateEndpoint.as_view(), name="magic-generate"
-    ),
-    path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
-    # Email verification
-    path("email-verify/", VerifyEmailEndpoint.as_view(), name="email-verify"),
-    path(
-        "request-email-verify/",
-        RequestEmailVerificationEndpoint.as_view(),
-        name="request-reset-email",
-    ),
-    # Password Manipulation
-    path(
-        "reset-password/<uidb64>/<token>/",
-        ResetPasswordEndpoint.as_view(),
-        name="password-reset",
-    ),
-    path(
-        "forgot-password/",
-        ForgotPasswordEndpoint.as_view(),
-        name="forgot-password",
-    ),
-    # User Profile
-    path(
-        "users/me/",
-        UserEndpoint.as_view(
-            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
-        ),
-        name="users",
-    ),
-    path(
-        "users/me/change-password/",
-        ChangePasswordEndpoint.as_view(),
-        name="change-password",
-    ),
-    path(
-        "users/me/onboard/",
-        UpdateUserOnBoardedEndpoint.as_view(),
-        name="user-onboard",
-    ),
-    path(
-        "users/me/tour-completed/",
-        UpdateUserTourCompletedEndpoint.as_view(),
-        name="user-tour",
-    ),
-    path("users/workspaces/<str:slug>/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
-    # user workspaces
-    path(
-        "users/me/workspaces/",
-        UserWorkSpacesEndpoint.as_view(),
-        name="user-workspace",
-    ),
-    # user workspace invitations
-    path(
-        "users/me/invitations/workspaces/",
-        UserWorkspaceInvitationsEndpoint.as_view({"get": "list", "post": "create"}),
-        name="user-workspace-invitations",
-    ),
-    # user workspace invitation
-    path(
-        "users/me/invitations/<uuid:pk>/",
-        UserWorkspaceInvitationEndpoint.as_view(
-            {
-                "get": "retrieve",
-            }
-        ),
-        name="workspace",
-    ),
-    # user join workspace
-    # User Graphs
-    path(
-        "users/me/workspaces/<str:slug>/activity-graph/",
-        UserActivityGraphEndpoint.as_view(),
-        name="user-activity-graph",
-    ),
-    path(
-        "users/me/workspaces/<str:slug>/issues-completed-graph/",
-        UserIssueCompletedGraphEndpoint.as_view(),
-        name="completed-graph",
-    ),
-    path(
-        "users/me/workspaces/<str:slug>/dashboard/",
-        UserWorkspaceDashboardEndpoint.as_view(),
-        name="user-workspace-dashboard",
-    ),
-    ## User  Graph
-    path(
-        "users/me/invitations/workspaces/<str:slug>/<uuid:pk>/join/",
-        JoinWorkspaceEndpoint.as_view(),
-        name="user-join-workspace",
-    ),
-    # user project invitations
-    path(
-        "users/me/invitations/projects/",
-        UserProjectInvitationsViewset.as_view({"get": "list", "post": "create"}),
-        name="user-project-invitaions",
-    ),
-    ## Workspaces ##
-    path(
-        "workspace-slug-check/",
-        WorkSpaceAvailabilityCheckEndpoint.as_view(),
-        name="workspace-availability",
-    ),
-    path(
-        "workspaces/",
-        WorkSpaceViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/",
-        WorkSpaceViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/invite/",
-        InviteWorkspaceEndpoint.as_view(),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/invitations/",
-        WorkspaceInvitationsViewset.as_view({"get": "list"}),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/invitations/<uuid:pk>/",
-        WorkspaceInvitationsViewset.as_view(
-            {
-                "delete": "destroy",
-                "get": "retrieve",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/members/",
-        WorkSpaceMemberViewSet.as_view({"get": "list"}),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/members/<uuid:pk>/",
-        WorkSpaceMemberViewSet.as_view(
-            {
-                "patch": "partial_update",
-                "delete": "destroy",
-                "get": "retrieve",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-members/",
-        WorkspaceMembersEndpoint.as_view(),
-        name="workspace-members",
-    ),
-    path(
-        "workspaces/<str:slug>/teams/",
-        TeamMemberViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/teams/<uuid:pk>/",
-        TeamMemberViewSet.as_view(
-            {
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-                "get": "retrieve",
-            }
-        ),
-        name="workspace",
-    ),
-    path(
-        "users/last-visited-workspace/",
-        UserLastProjectWithWorkspaceEndpoint.as_view(),
-        name="workspace-project-details",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-members/me/",
-        WorkspaceMemberUserEndpoint.as_view(),
-        name="workspace-member-details",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-views/",
-        WorkspaceMemberUserViewsEndpoint.as_view(),
-        name="workspace-member-details",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-themes/",
-        WorkspaceThemeViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="workspace-themes",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-themes/<uuid:pk>/",
-        WorkspaceThemeViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="workspace-themes",
-    ),
-    path(
-        "workspaces/<str:slug>/user-stats/<uuid:user_id>/",
-        WorkspaceUserProfileStatsEndpoint.as_view(),
-        name="workspace-user-stats",
-    ),
-    path(
-        "workspaces/<str:slug>/user-activity/<uuid:user_id>/",
-        WorkspaceUserActivityEndpoint.as_view(),
-        name="workspace-user-activity",
-    ),
-    path(
-        "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
-        WorkspaceUserProfileEndpoint.as_view(),
-        name="workspace-user-profile-page",
-    ),
-    path(
-        "workspaces/<str:slug>/user-issues/<uuid:user_id>/",
-        WorkspaceUserProfileIssuesEndpoint.as_view(),
-        name="workspace-user-profile-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/labels/",
-        WorkspaceLabelsEndpoint.as_view(),
-        name="workspace-labels",
-    ),
-    ## End Workspaces ##
-    # Projects
-    path(
-        "workspaces/<str:slug>/projects/",
-        ProjectViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:pk>/",
-        ProjectViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/project-identifiers/",
-        ProjectIdentifierEndpoint.as_view(),
-        name="project-identifiers",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/invite/",
-        InviteProjectEndpoint.as_view(),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/members/",
-        ProjectMemberViewSet.as_view({"get": "list"}),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/members/<uuid:pk>/",
-        ProjectMemberViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/",
-        ProjectMemberEndpoint.as_view(),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/members/add/",
-        AddMemberToProjectEndpoint.as_view(),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/join/",
-        ProjectJoinEndpoint.as_view(),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/team-invite/",
-        AddTeamToProjectEndpoint.as_view(),
-        name="projects",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/",
-        ProjectMemberInvitationsViewset.as_view({"get": "list"}),
-        name="workspace",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/<uuid:pk>/",
-        ProjectMemberInvitationsViewset.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-views/",
-        ProjectUserViewsEndpoint.as_view(),
-        name="project-view",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/me/",
-        ProjectMemberUserEndpoint.as_view(),
-        name="project-view",
-    ),
-    path(
-        "workspaces/<str:slug>/user-favorite-projects/",
-        ProjectFavoritesViewSet.as_view(
-            {
-                "post": "create",
-            }
-        ),
-        name="project",
-    ),
-    path(
-        "workspaces/<str:slug>/user-favorite-projects/<uuid:project_id>/",
-        ProjectFavoritesViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="project",
-    ),
-    # End Projects
-    #  States
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/states/",
-        StateViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-states",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/",
-        StateViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-state",
-    ),
-    # End States ##
-    #  Estimates
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-estimates/",
-        ProjectEstimatePointEndpoint.as_view(),
-        name="project-estimate-points",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/",
-        BulkEstimatePointEndpoint.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="bulk-create-estimate-points",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/",
-        BulkEstimatePointEndpoint.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="bulk-create-estimate-points",
-    ),
-    # End Estimates ##
-    # Views
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/views/",
-        IssueViewViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-view",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:pk>/",
-        IssueViewViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-view",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:view_id>/issues/",
-        ViewIssuesEndpoint.as_view(),
-        name="project-view-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/",
-        IssueViewFavoriteViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="user-favorite-view",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/<uuid:view_id>/",
-        IssueViewFavoriteViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="user-favorite-view",
-    ),
-    ## End Views
-    ## Cycles
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/",
-        CycleViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:pk>/",
-        CycleViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/",
-        CycleIssueViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/<uuid:pk>/",
-        CycleIssueViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/date-check/",
-        CycleDateCheckEndpoint.as_view(),
-        name="project-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/",
-        CycleFavoriteViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="user-favorite-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/<uuid:cycle_id>/",
-        CycleFavoriteViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="user-favorite-cycle",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/transfer-issues/",
-        TransferCycleIssueEndpoint.as_view(),
-        name="transfer-issues",
-    ),
-    ## End Cycles
-    # Issue
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
-        IssueViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/",
-        IssueViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue",
-    ),
-    path(
-        "workspaces/<str:slug>/issues/",
-        WorkSpaceIssuesEndpoint.as_view(),
-        name="workspace-issue",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
-        LabelViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-labels",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/<uuid:pk>/",
-        LabelViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-labels",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-create-labels/",
-        BulkCreateIssueLabelsEndpoint.as_view(),
-        name="project-bulk-labels",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-delete-issues/",
-        BulkDeleteIssuesEndpoint.as_view(),
-        name="project-issues-bulk",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-issues/<str:service>/",
-        BulkImportIssuesEndpoint.as_view(),
-        name="project-issues-bulk",
-    ),
-    path(
-        "workspaces/<str:slug>/my-issues/",
-        UserWorkSpaceIssues.as_view(),
-        name="workspace-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/sub-issues/",
-        SubIssuesEndpoint.as_view(),
-        name="sub-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/",
-        IssueLinkViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-links",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/<uuid:pk>/",
-        IssueLinkViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-links",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/",
-        IssueAttachmentEndpoint.as_view(),
-        name="project-issue-attachments",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
-        IssueAttachmentEndpoint.as_view(),
-        name="project-issue-attachments",
-    ),
-    path(
-        "workspaces/<str:slug>/export-issues/",
-        ExportIssuesEndpoint.as_view(),
-        name="export-issues",
-    ),
-    ## End Issues
-    ## Issue Activity
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/history/",
-        IssueActivityEndpoint.as_view(),
-        name="project-issue-history",
-    ),
-    ## Issue Activity
-    ## IssueComments
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
-        IssueCommentViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-comment",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
-        IssueCommentViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-comment",
-    ),
-    ## End IssueComments
-    # Issue Subscribers
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/",
-        IssueSubscriberViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-subscribers",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/<uuid:subscriber_id>/",
-        IssueSubscriberViewSet.as_view({"delete": "destroy"}),
-        name="project-issue-subscribers",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/subscribe/",
-        IssueSubscriberViewSet.as_view(
-            {
-                "get": "subscription_status",
-                "post": "subscribe",
-                "delete": "unsubscribe",
-            }
-        ),
-        name="project-issue-subscribers",
-    ),
-    ## End Issue Subscribers
-    # Issue Reactions
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
-        IssueReactionViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-reactions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
-        IssueReactionViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-reactions",
-    ),
-    ## End Issue Reactions
-    # Comment Reactions
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
-        CommentReactionViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-comment-reactions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
-        CommentReactionViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-comment-reactions",
-    ),
-    ## End Comment Reactions
-    ## IssueProperty
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-roadmap",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-roadmap",
-    ),
-    ## IssueProperty Ebd
-    ## Issue Archives
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
-        IssueArchiveViewSet.as_view(
-            {
-                "get": "list",
-            }
-        ),
-        name="project-issue-archive",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
-        IssueArchiveViewSet.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-archive",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
-        IssueArchiveViewSet.as_view(
-            {
-                "post": "unarchive",
-            }
-        ),
-        name="project-issue-archive",
-    ),
-    ## End Issue Archives
-    ## File Assets
-    path(
-        "workspaces/<str:slug>/file-assets/",
-        FileAssetEndpoint.as_view(),
-        name="file-assets",
-    ),
-    path(
-        "workspaces/file-assets/<uuid:workspace_id>/<str:asset_key>/",
-        FileAssetEndpoint.as_view(),
-        name="file-assets",
-    ),
-    path(
-        "users/file-assets/",
-        UserAssetsEndpoint.as_view(),
-        name="user-file-assets",
-    ),
-    path(
-        "users/file-assets/<str:asset_key>/",
-        UserAssetsEndpoint.as_view(),
-        name="user-file-assets",
-    ),
-    ## End File Assets
-    ## Modules
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/",
-        ModuleViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-modules",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:pk>/",
-        ModuleViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-modules",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/",
-        ModuleIssueViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-module-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/<uuid:pk>/",
-        ModuleIssueViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-module-issues",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/",
-        ModuleLinkViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-module-links",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/<uuid:pk>/",
-        ModuleLinkViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-module-links",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/",
-        ModuleFavoriteViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="user-favorite-module",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/<uuid:module_id>/",
-        ModuleFavoriteViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="user-favorite-module",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-modules/<str:service>/",
-        BulkImportModulesEndpoint.as_view(),
-        name="bulk-modules-create",
-    ),
-    ## End Modules
-    # Pages
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/",
-        PageViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/",
-        PageViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/",
-        PageBlockViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-page-blocks",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:pk>/",
-        PageBlockViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-page-blocks",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/",
-        PageFavoriteViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="user-favorite-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/<uuid:page_id>/",
-        PageFavoriteViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="user-favorite-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:page_block_id>/issues/",
-        CreateIssueFromPageBlockEndpoint.as_view(),
-        name="page-block-issues",
-    ),
-    ## End Pages
-    # API Tokens
-    path("api-tokens/", ApiTokenEndpoint.as_view(), name="api-tokens"),
-    path("api-tokens/<uuid:pk>/", ApiTokenEndpoint.as_view(), name="api-tokens"),
-    ## End API Tokens
-    # Integrations
-    path(
-        "integrations/",
-        IntegrationViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="integrations",
-    ),
-    path(
-        "integrations/<uuid:pk>/",
-        IntegrationViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="integrations",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-integrations/",
-        WorkspaceIntegrationViewSet.as_view(
-            {
-                "get": "list",
-            }
-        ),
-        name="workspace-integrations",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-integrations/<str:provider>/",
-        WorkspaceIntegrationViewSet.as_view(
-            {
-                "post": "create",
-            }
-        ),
-        name="workspace-integrations",
-    ),
-    path(
-        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/provider/",
-        WorkspaceIntegrationViewSet.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-        name="workspace-integrations",
-    ),
-    # Github Integrations
-    path(
-        "workspaces/<str:slug>/workspace-integrations/<uuid:workspace_integration_id>/github-repositories/",
-        GithubRepositoriesEndpoint.as_view(),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/",
-        GithubRepositorySyncViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/<uuid:pk>/",
-        GithubRepositorySyncViewSet.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/",
-        GithubIssueSyncViewSet.as_view(
-            {
-                "post": "create",
-                "get": "list",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/bulk-create-github-issue-sync/",
-        BulkCreateGithubIssueSyncEndpoint.as_view(),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:pk>/",
-        GithubIssueSyncViewSet.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/",
-        GithubCommentSyncViewSet.as_view(
-            {
-                "post": "create",
-                "get": "list",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/<uuid:pk>/",
-        GithubCommentSyncViewSet.as_view(
-            {
-                "get": "retrieve",
-                "delete": "destroy",
-            }
-        ),
-    ),
-    ## End Github Integrations
-    # Slack Integration
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/",
-        SlackProjectSyncViewSet.as_view(
-            {
-                "post": "create",
-                "get": "list",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/<uuid:pk>/",
-        SlackProjectSyncViewSet.as_view(
-            {
-                "delete": "destroy",
-                "get": "retrieve",
-            }
-        ),
-    ),
-    ## End Slack Integration
-    ## End Integrations
-    # Importer
-    path(
-        "workspaces/<str:slug>/importers/<str:service>/",
-        ServiceIssueImportSummaryEndpoint.as_view(),
-        name="importer",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/importers/<str:service>/",
-        ImportServiceEndpoint.as_view(),
-        name="importer",
-    ),
-    path(
-        "workspaces/<str:slug>/importers/",
-        ImportServiceEndpoint.as_view(),
-        name="importer",
-    ),
-    path(
-        "workspaces/<str:slug>/importers/<str:service>/<uuid:pk>/",
-        ImportServiceEndpoint.as_view(),
-        name="importer",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/service/<str:service>/importers/<uuid:importer_id>/",
-        UpdateServiceImportStatusEndpoint.as_view(),
-        name="importer",
-    ),
-    ##  End Importer
-    # Search
-    path(
-        "workspaces/<str:slug>/search/",
-        GlobalSearchEndpoint.as_view(),
-        name="global-search",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/search-issues/",
-        IssueSearchEndpoint.as_view(),
-        name="project-issue-search",
-    ),
-    ## End Search
-    # Gpt
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
-        GPTIntegrationEndpoint.as_view(),
-        name="importer",
-    ),
-    ## End Gpt
-    # Release Notes
-    path(
-        "release-notes/",
-        ReleaseNotesEndpoint.as_view(),
-        name="release-notes",
-    ),
-    ## End Release Notes
-    # Inbox
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
-        InboxViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="inbox",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:pk>/",
-        InboxViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="inbox",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
-        InboxIssueViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="inbox-issue",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
-        InboxIssueViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="inbox-issue",
-    ),
-    ## End Inbox
-    # Analytics
-    path(
-        "workspaces/<str:slug>/analytics/",
-        AnalyticsEndpoint.as_view(),
-        name="plane-analytics",
-    ),
-    path(
-        "workspaces/<str:slug>/analytic-view/",
-        AnalyticViewViewset.as_view({"get": "list", "post": "create"}),
-        name="analytic-view",
-    ),
-    path(
-        "workspaces/<str:slug>/analytic-view/<uuid:pk>/",
-        AnalyticViewViewset.as_view(
-            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
-        ),
-        name="analytic-view",
-    ),
-    path(
-        "workspaces/<str:slug>/saved-analytic-view/<uuid:analytic_id>/",
-        SavedAnalyticEndpoint.as_view(),
-        name="saved-analytic-view",
-    ),
-    path(
-        "workspaces/<str:slug>/export-analytics/",
-        ExportAnalyticsEndpoint.as_view(),
-        name="export-analytics",
-    ),
-    path(
-        "workspaces/<str:slug>/default-analytics/",
-        DefaultAnalyticsEndpoint.as_view(),
-        name="default-analytics",
-    ),
-    ## End Analytics
-    # Notification
-    path(
-        "workspaces/<str:slug>/users/notifications/",
-        NotificationViewSet.as_view(
-            {
-                "get": "list",
-            }
-        ),
-        name="notifications",
-    ),
-    path(
-        "workspaces/<str:slug>/users/notifications/<uuid:pk>/",
-        NotificationViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="notifications",
-    ),
-    path(
-        "workspaces/<str:slug>/users/notifications/<uuid:pk>/read/",
-        NotificationViewSet.as_view(
-            {
-                "post": "mark_read",
-                "delete": "mark_unread",
-            }
-        ),
-        name="notifications",
-    ),
-    path(
-        "workspaces/<str:slug>/users/notifications/<uuid:pk>/archive/",
-        NotificationViewSet.as_view(
-            {
-                "post": "archive",
-                "delete": "unarchive",
-            }
-        ),
-        name="notifications",
-    ),
-    path(
-        "workspaces/<str:slug>/users/notifications/unread/",
-        UnreadNotificationEndpoint.as_view(),
-        name="unread-notifications",
-    ),
-    path(
-        "workspaces/<str:slug>/users/notifications/mark-all-read/",
-        MarkAllReadNotificationViewSet.as_view(
-            {
-                "post": "create",
-            }
-        ),
-        name="mark-all-read-notifications",
-    ),
-    ## End Notification
-    # Public Boards
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/",
-        ProjectDeployBoardViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-deploy-board",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/<uuid:pk>/",
-        ProjectDeployBoardViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-deploy-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/settings/",
-        ProjectDeployBoardPublicSettingsEndpoint.as_view(),
-        name="project-deploy-board-settings",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
-        ProjectIssuesPublicEndpoint.as_view(),
-        name="project-deploy-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
-        IssueRetrievePublicEndpoint.as_view(),
-        name="workspace-project-boards",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
-        IssueCommentPublicViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="issue-comments-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
-        IssueCommentPublicViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="issue-comments-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
-        IssueReactionPublicViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="issue-reactions-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
-        IssueReactionPublicViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="issue-reactions-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
-        CommentReactionPublicViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="comment-reactions-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
-        CommentReactionPublicViewSet.as_view(
-            {
-                "delete": "destroy",
-            }
-        ),
-        name="comment-reactions-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
-        InboxIssuePublicViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="inbox-issue",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
-        InboxIssuePublicViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="inbox-issue",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/votes/",
-        IssueVotePublicViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-                "delete": "destroy",
-            }
-        ),
-        name="issue-vote-project-board",
-    ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/",
-        WorkspaceProjectDeployBoardEndpoint.as_view(),
-        name="workspace-project-boards",
-    ),
-    ## End Public Boards
-]
diff --git a/apiserver/plane/api/urls/__init__.py b/apiserver/plane/api/urls/__init__.py
new file mode 100644
index 00000000000..e4f3718f59c
--- /dev/null
+++ b/apiserver/plane/api/urls/__init__.py
@@ -0,0 +1,50 @@
+from .analytic import urlpatterns as analytic_urls
+from .asset import urlpatterns as asset_urls
+from .authentication import urlpatterns as authentication_urls
+from .config import urlpatterns as configuration_urls
+from .cycle import urlpatterns as cycle_urls
+from .estimate import urlpatterns as estimate_urls
+from .gpt import urlpatterns as gpt_urls
+from .importer import urlpatterns as importer_urls
+from .inbox import urlpatterns as inbox_urls
+from .integration import urlpatterns as integration_urls
+from .issue import urlpatterns as issue_urls
+from .module import urlpatterns as module_urls
+from .notification import urlpatterns as notification_urls
+from .page import urlpatterns as page_urls
+from .project import urlpatterns as project_urls
+from .public_board import urlpatterns as public_board_urls
+from .release_note import urlpatterns as release_note_urls
+from .search import urlpatterns as search_urls
+from .state import urlpatterns as state_urls
+from .unsplash import urlpatterns as unsplash_urls
+from .user import urlpatterns as user_urls
+from .views import urlpatterns as view_urls
+from .workspace import urlpatterns as workspace_urls
+
+
+urlpatterns = [
+    *analytic_urls,
+    *asset_urls,
+    *authentication_urls,
+    *configuration_urls,
+    *cycle_urls,
+    *estimate_urls,
+    *gpt_urls,
+    *importer_urls,
+    *inbox_urls,
+    *integration_urls,
+    *issue_urls,
+    *module_urls,
+    *notification_urls,
+    *page_urls,
+    *project_urls,
+    *public_board_urls,
+    *release_note_urls,
+    *search_urls,
+    *state_urls,
+    *unsplash_urls,
+    *user_urls,
+    *view_urls,
+    *workspace_urls,
+]
diff --git a/apiserver/plane/api/urls/analytic.py b/apiserver/plane/api/urls/analytic.py
new file mode 100644
index 00000000000..cb6155e3256
--- /dev/null
+++ b/apiserver/plane/api/urls/analytic.py
@@ -0,0 +1,46 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    AnalyticsEndpoint,
+    AnalyticViewViewset,
+    SavedAnalyticEndpoint,
+    ExportAnalyticsEndpoint,
+    DefaultAnalyticsEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/analytics/",
+        AnalyticsEndpoint.as_view(),
+        name="plane-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/",
+        AnalyticViewViewset.as_view({"get": "list", "post": "create"}),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/<uuid:pk>/",
+        AnalyticViewViewset.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/saved-analytic-view/<uuid:analytic_id>/",
+        SavedAnalyticEndpoint.as_view(),
+        name="saved-analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/export-analytics/",
+        ExportAnalyticsEndpoint.as_view(),
+        name="export-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/default-analytics/",
+        DefaultAnalyticsEndpoint.as_view(),
+        name="default-analytics",
+    ),
+]
diff --git a/apiserver/plane/api/urls/asset.py b/apiserver/plane/api/urls/asset.py
new file mode 100644
index 00000000000..b6ae9f42c4a
--- /dev/null
+++ b/apiserver/plane/api/urls/asset.py
@@ -0,0 +1,31 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    FileAssetEndpoint,
+    UserAssetsEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/file-assets/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "workspaces/file-assets/<uuid:workspace_id>/<str:asset_key>/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "users/file-assets/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+    path(
+        "users/file-assets/<str:asset_key>/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+]
diff --git a/apiserver/plane/api/urls/authentication.py b/apiserver/plane/api/urls/authentication.py
new file mode 100644
index 00000000000..44b7000eac9
--- /dev/null
+++ b/apiserver/plane/api/urls/authentication.py
@@ -0,0 +1,68 @@
+from django.urls import path
+
+from rest_framework_simplejwt.views import TokenRefreshView
+
+
+from plane.api.views import (
+    # Authentication
+    SignUpEndpoint,
+    SignInEndpoint,
+    SignOutEndpoint,
+    MagicSignInEndpoint,
+    MagicSignInGenerateEndpoint,
+    OauthEndpoint,
+    ## End Authentication
+    # Auth Extended
+    ForgotPasswordEndpoint,
+    VerifyEmailEndpoint,
+    ResetPasswordEndpoint,
+    RequestEmailVerificationEndpoint,
+    ChangePasswordEndpoint,
+    ## End Auth Extender
+    # API Tokens
+    ApiTokenEndpoint,
+    ## End API Tokens
+)
+
+
+urlpatterns = [
+    #  Social Auth
+    path("social-auth/", OauthEndpoint.as_view(), name="oauth"),
+    # Auth
+    path("sign-up/", SignUpEndpoint.as_view(), name="sign-up"),
+    path("sign-in/", SignInEndpoint.as_view(), name="sign-in"),
+    path("sign-out/", SignOutEndpoint.as_view(), name="sign-out"),
+    # Magic Sign In/Up
+    path(
+        "magic-generate/", MagicSignInGenerateEndpoint.as_view(), name="magic-generate"
+    ),
+    path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
+    path("token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
+    # Email verification
+    path("email-verify/", VerifyEmailEndpoint.as_view(), name="email-verify"),
+    path(
+        "request-email-verify/",
+        RequestEmailVerificationEndpoint.as_view(),
+        name="request-reset-email",
+    ),
+    # Password Manipulation
+    path(
+        "users/me/change-password/",
+        ChangePasswordEndpoint.as_view(),
+        name="change-password",
+    ),
+    path(
+        "reset-password/<uidb64>/<token>/",
+        ResetPasswordEndpoint.as_view(),
+        name="password-reset",
+    ),
+    path(
+        "forgot-password/",
+        ForgotPasswordEndpoint.as_view(),
+        name="forgot-password",
+    ),
+    # API Tokens
+    path("api-tokens/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    path("api-tokens/<uuid:pk>/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    ## End API Tokens
+]
diff --git a/apiserver/plane/api/urls/config.py b/apiserver/plane/api/urls/config.py
new file mode 100644
index 00000000000..321a5620062
--- /dev/null
+++ b/apiserver/plane/api/urls/config.py
@@ -0,0 +1,12 @@
+from django.urls import path
+
+
+from plane.api.views import ConfigurationEndpoint
+
+urlpatterns = [
+    path(
+        "configs/",
+        ConfigurationEndpoint.as_view(),
+        name="configuration",
+    ),
+]
\ No newline at end of file
diff --git a/apiserver/plane/api/urls/cycle.py b/apiserver/plane/api/urls/cycle.py
new file mode 100644
index 00000000000..068276361a2
--- /dev/null
+++ b/apiserver/plane/api/urls/cycle.py
@@ -0,0 +1,87 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    CycleViewSet,
+    CycleIssueViewSet,
+    CycleDateCheckEndpoint,
+    CycleFavoriteViewSet,
+    TransferCycleIssueEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/",
+        CycleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:pk>/",
+        CycleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/<uuid:pk>/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/date-check/",
+        CycleDateCheckEndpoint.as_view(),
+        name="project-cycle-date",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/<uuid:cycle_id>/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/transfer-issues/",
+        TransferCycleIssueEndpoint.as_view(),
+        name="transfer-issues",
+    ),
+]
diff --git a/apiserver/plane/api/urls/estimate.py b/apiserver/plane/api/urls/estimate.py
new file mode 100644
index 00000000000..89363e849b3
--- /dev/null
+++ b/apiserver/plane/api/urls/estimate.py
@@ -0,0 +1,37 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ProjectEstimatePointEndpoint,
+    BulkEstimatePointEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-estimates/",
+        ProjectEstimatePointEndpoint.as_view(),
+        name="project-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+]
diff --git a/apiserver/plane/api/urls/gpt.py b/apiserver/plane/api/urls/gpt.py
new file mode 100644
index 00000000000..f2b0362c766
--- /dev/null
+++ b/apiserver/plane/api/urls/gpt.py
@@ -0,0 +1,13 @@
+from django.urls import path
+
+
+from plane.api.views import GPTIntegrationEndpoint
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
+        GPTIntegrationEndpoint.as_view(),
+        name="importer",
+    ),
+]
diff --git a/apiserver/plane/api/urls/importer.py b/apiserver/plane/api/urls/importer.py
new file mode 100644
index 00000000000..c0a9aa5b529
--- /dev/null
+++ b/apiserver/plane/api/urls/importer.py
@@ -0,0 +1,37 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ServiceIssueImportSummaryEndpoint,
+    ImportServiceEndpoint,
+    UpdateServiceImportStatusEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/",
+        ServiceIssueImportSummaryEndpoint.as_view(),
+        name="importer-summary",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/importers/<str:service>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/<uuid:pk>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/service/<str:service>/importers/<uuid:importer_id>/",
+        UpdateServiceImportStatusEndpoint.as_view(),
+        name="importer-status",
+    ),
+]
diff --git a/apiserver/plane/api/urls/inbox.py b/apiserver/plane/api/urls/inbox.py
new file mode 100644
index 00000000000..315f30601b6
--- /dev/null
+++ b/apiserver/plane/api/urls/inbox.py
@@ -0,0 +1,53 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    InboxViewSet,
+    InboxIssueViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
+        InboxViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:pk>/",
+        InboxViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+]
diff --git a/apiserver/plane/api/urls/integration.py b/apiserver/plane/api/urls/integration.py
new file mode 100644
index 00000000000..dd431b6c866
--- /dev/null
+++ b/apiserver/plane/api/urls/integration.py
@@ -0,0 +1,150 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IntegrationViewSet,
+    WorkspaceIntegrationViewSet,
+    GithubRepositoriesEndpoint,
+    GithubRepositorySyncViewSet,
+    GithubIssueSyncViewSet,
+    GithubCommentSyncViewSet,
+    BulkCreateGithubIssueSyncEndpoint,
+    SlackProjectSyncViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "integrations/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "integrations/<uuid:pk>/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<str:provider>/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/provider/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    # Github Integrations
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:workspace_integration_id>/github-repositories/",
+        GithubRepositoriesEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/<uuid:pk>/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/bulk-create-github-issue-sync/",
+        BulkCreateGithubIssueSyncEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:pk>/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/<uuid:pk>/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    ## End Github Integrations
+    # Slack Integration
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/<uuid:pk>/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+    ),
+    ## End Slack Integration
+]
diff --git a/apiserver/plane/api/urls/issue.py b/apiserver/plane/api/urls/issue.py
new file mode 100644
index 00000000000..f1ef7c1767e
--- /dev/null
+++ b/apiserver/plane/api/urls/issue.py
@@ -0,0 +1,315 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IssueViewSet,
+    LabelViewSet,
+    BulkCreateIssueLabelsEndpoint,
+    BulkDeleteIssuesEndpoint,
+    BulkImportIssuesEndpoint,
+    UserWorkSpaceIssues,
+    SubIssuesEndpoint,
+    IssueLinkViewSet,
+    IssueAttachmentEndpoint,
+    ExportIssuesEndpoint,
+    IssueActivityEndpoint,
+    IssueCommentViewSet,
+    IssueSubscriberViewSet,
+    IssueReactionViewSet,
+    CommentReactionViewSet,
+    IssueUserDisplayPropertyEndpoint,
+    IssueArchiveViewSet,
+    IssueRelationViewSet,
+    IssueDraftViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
+        IssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/",
+        IssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
+        LabelViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/<uuid:pk>/",
+        LabelViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-create-labels/",
+        BulkCreateIssueLabelsEndpoint.as_view(),
+        name="project-bulk-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-delete-issues/",
+        BulkDeleteIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-issues/<str:service>/",
+        BulkImportIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/my-issues/",
+        UserWorkSpaceIssues.as_view(),
+        name="workspace-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/sub-issues/",
+        SubIssuesEndpoint.as_view(),
+        name="sub-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/<uuid:pk>/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/export-issues/",
+        ExportIssuesEndpoint.as_view(),
+        name="export-issues",
+    ),
+    ## End Issues
+    ## Issue Activity
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/history/",
+        IssueActivityEndpoint.as_view(),
+        name="project-issue-history",
+    ),
+    ## Issue Activity
+    ## IssueComments
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    ## End IssueComments
+    # Issue Subscribers
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/<uuid:subscriber_id>/",
+        IssueSubscriberViewSet.as_view({"delete": "destroy"}),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/subscribe/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "subscription_status",
+                "post": "subscribe",
+                "delete": "unsubscribe",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    ## End Issue Subscribers
+    # Issue Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    ## End Issue Reactions
+    # Comment Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    ## End Comment Reactions
+    ## IssueProperty
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
+    ),
+    ## IssueProperty End
+    ## Issue Archives
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "post": "unarchive",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    ## End Issue Archives
+    ## Issue Relation
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/",
+        IssueRelationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="issue-relation",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/<uuid:pk>/",
+        IssueRelationViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-relation",
+    ),
+    ## End Issue Relation
+    ## Issue Drafts
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/<uuid:pk>/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+]
diff --git a/apiserver/plane/api/urls/module.py b/apiserver/plane/api/urls/module.py
new file mode 100644
index 00000000000..3239af1e45b
--- /dev/null
+++ b/apiserver/plane/api/urls/module.py
@@ -0,0 +1,104 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ModuleViewSet,
+    ModuleIssueViewSet,
+    ModuleLinkViewSet,
+    ModuleFavoriteViewSet,
+    BulkImportModulesEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/",
+        ModuleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:pk>/",
+        ModuleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/<uuid:pk>/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/<uuid:pk>/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/<uuid:module_id>/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-modules/<str:service>/",
+        BulkImportModulesEndpoint.as_view(),
+        name="bulk-modules-create",
+    ),
+]
diff --git a/apiserver/plane/api/urls/notification.py b/apiserver/plane/api/urls/notification.py
new file mode 100644
index 00000000000..5e1936d0160
--- /dev/null
+++ b/apiserver/plane/api/urls/notification.py
@@ -0,0 +1,66 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    NotificationViewSet,
+    UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/users/notifications/",
+        NotificationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/",
+        NotificationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/read/",
+        NotificationViewSet.as_view(
+            {
+                "post": "mark_read",
+                "delete": "mark_unread",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/archive/",
+        NotificationViewSet.as_view(
+            {
+                "post": "archive",
+                "delete": "unarchive",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/unread/",
+        UnreadNotificationEndpoint.as_view(),
+        name="unread-notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/mark-all-read/",
+        MarkAllReadNotificationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="mark-all-read-notifications",
+    ),
+]
diff --git a/apiserver/plane/api/urls/page.py b/apiserver/plane/api/urls/page.py
new file mode 100644
index 00000000000..64870228353
--- /dev/null
+++ b/apiserver/plane/api/urls/page.py
@@ -0,0 +1,79 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    PageViewSet,
+    PageBlockViewSet,
+    PageFavoriteViewSet,
+    CreateIssueFromPageBlockEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/",
+        PageViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/",
+        PageViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:pk>/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/",
+        PageFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/<uuid:page_id>/",
+        PageFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:page_block_id>/issues/",
+        CreateIssueFromPageBlockEndpoint.as_view(),
+        name="page-block-issues",
+    ),
+]
diff --git a/apiserver/plane/api/urls/project.py b/apiserver/plane/api/urls/project.py
new file mode 100644
index 00000000000..2d9e513df28
--- /dev/null
+++ b/apiserver/plane/api/urls/project.py
@@ -0,0 +1,132 @@
+from django.urls import path
+
+from plane.api.views import (
+    ProjectViewSet,
+    InviteProjectEndpoint,
+    ProjectMemberViewSet,
+    ProjectMemberInvitationsViewset,
+    ProjectMemberUserEndpoint,
+    ProjectJoinEndpoint,
+    AddTeamToProjectEndpoint,
+    ProjectUserViewsEndpoint,
+    ProjectIdentifierEndpoint,
+    ProjectFavoritesViewSet,
+    LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/",
+        ProjectViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:pk>/",
+        ProjectViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/project-identifiers/",
+        ProjectIdentifierEndpoint.as_view(),
+        name="project-identifiers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invite/",
+        InviteProjectEndpoint.as_view(),
+        name="invite-project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/",
+        ProjectMemberViewSet.as_view({"get": "list", "post": "create"}),
+        name="project-member",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/<uuid:pk>/",
+        ProjectMemberViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-member",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/join/",
+        ProjectJoinEndpoint.as_view(),
+        name="project-join",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/team-invite/",
+        AddTeamToProjectEndpoint.as_view(),
+        name="projects",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/",
+        ProjectMemberInvitationsViewset.as_view({"get": "list"}),
+        name="project-member-invite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/<uuid:pk>/",
+        ProjectMemberInvitationsViewset.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-member-invite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-views/",
+        ProjectUserViewsEndpoint.as_view(),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/me/",
+        ProjectMemberUserEndpoint.as_view(),
+        name="project-member-view",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-favorite",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/<uuid:project_id>/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-favorite",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/leave/",
+        LeaveProjectEndpoint.as_view(),
+        name="leave-project",
+    ),
+    path(
+        "project-covers/",
+        ProjectPublicCoverImagesEndpoint.as_view(),
+        name="project-covers",
+    ),
+]
diff --git a/apiserver/plane/api/urls/public_board.py b/apiserver/plane/api/urls/public_board.py
new file mode 100644
index 00000000000..272d5961c56
--- /dev/null
+++ b/apiserver/plane/api/urls/public_board.py
@@ -0,0 +1,151 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    ProjectDeployBoardViewSet,
+    ProjectDeployBoardPublicSettingsEndpoint,
+    ProjectIssuesPublicEndpoint,
+    IssueRetrievePublicEndpoint,
+    IssueCommentPublicViewSet,
+    IssueReactionPublicViewSet,
+    CommentReactionPublicViewSet,
+    InboxIssuePublicViewSet,
+    IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/<uuid:pk>/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/settings/",
+        ProjectDeployBoardPublicSettingsEndpoint.as_view(),
+        name="project-deploy-board-settings",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
+        ProjectIssuesPublicEndpoint.as_view(),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
+        IssueRetrievePublicEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/votes/",
+        IssueVotePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-vote-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/",
+        WorkspaceProjectDeployBoardEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+]
diff --git a/apiserver/plane/api/urls/release_note.py b/apiserver/plane/api/urls/release_note.py
new file mode 100644
index 00000000000..dfbd1ec66df
--- /dev/null
+++ b/apiserver/plane/api/urls/release_note.py
@@ -0,0 +1,13 @@
+from django.urls import path
+
+
+from plane.api.views import ReleaseNotesEndpoint
+
+
+urlpatterns = [
+    path(
+        "release-notes/",
+        ReleaseNotesEndpoint.as_view(),
+        name="release-notes",
+    ),
+]
diff --git a/apiserver/plane/api/urls/search.py b/apiserver/plane/api/urls/search.py
new file mode 100644
index 00000000000..282feb04667
--- /dev/null
+++ b/apiserver/plane/api/urls/search.py
@@ -0,0 +1,21 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    GlobalSearchEndpoint,
+    IssueSearchEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/search/",
+        GlobalSearchEndpoint.as_view(),
+        name="global-search",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/search-issues/",
+        IssueSearchEndpoint.as_view(),
+        name="project-issue-search",
+    ),
+]
diff --git a/apiserver/plane/api/urls/state.py b/apiserver/plane/api/urls/state.py
new file mode 100644
index 00000000000..bcfd80cd7cd
--- /dev/null
+++ b/apiserver/plane/api/urls/state.py
@@ -0,0 +1,30 @@
+from django.urls import path
+
+
+from plane.api.views import StateViewSet
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/",
+        StateViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-states",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/",
+        StateViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-state",
+    ),
+]
diff --git a/apiserver/plane/api/urls/unsplash.py b/apiserver/plane/api/urls/unsplash.py
new file mode 100644
index 00000000000..25fab4694d0
--- /dev/null
+++ b/apiserver/plane/api/urls/unsplash.py
@@ -0,0 +1,13 @@
+from django.urls import path
+
+
+from plane.api.views import UnsplashEndpoint
+
+
+urlpatterns = [
+    path(
+        "unsplash/",
+        UnsplashEndpoint.as_view(),
+        name="unsplash",
+    ),
+]
diff --git a/apiserver/plane/api/urls/user.py b/apiserver/plane/api/urls/user.py
new file mode 100644
index 00000000000..5282a7cf6d3
--- /dev/null
+++ b/apiserver/plane/api/urls/user.py
@@ -0,0 +1,113 @@
+from django.urls import path
+
+from plane.api.views import (
+    ## User
+    UserEndpoint,
+    UpdateUserOnBoardedEndpoint,
+    UpdateUserTourCompletedEndpoint,
+    UserActivityEndpoint,
+    ChangePasswordEndpoint,
+    ## End User
+    ## Workspaces
+    UserWorkspaceInvitationsEndpoint,
+    UserWorkSpacesEndpoint,
+    JoinWorkspaceEndpoint,
+    UserWorkspaceInvitationsEndpoint,
+    UserWorkspaceInvitationEndpoint,
+    UserActivityGraphEndpoint,
+    UserIssueCompletedGraphEndpoint,
+    UserWorkspaceDashboardEndpoint,
+    UserProjectInvitationsViewset,
+    ## End Workspaces
+)
+
+urlpatterns = [
+    # User Profile
+    path(
+        "users/me/",
+        UserEndpoint.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/settings/",
+        UserEndpoint.as_view(
+            {
+                "get": "retrieve_user_settings",
+            }
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/change-password/",
+        ChangePasswordEndpoint.as_view(),
+        name="change-password",
+    ),
+    path(
+        "users/me/onboard/",
+        UpdateUserOnBoardedEndpoint.as_view(),
+        name="user-onboard",
+    ),
+    path(
+        "users/me/tour-completed/",
+        UpdateUserTourCompletedEndpoint.as_view(),
+        name="user-tour",
+    ),
+    path(
+        "users/workspaces/<str:slug>/activities/",
+        UserActivityEndpoint.as_view(),
+        name="user-activities",
+    ),
+    # user workspaces
+    path(
+        "users/me/workspaces/",
+        UserWorkSpacesEndpoint.as_view(),
+        name="user-workspace",
+    ),
+    # user workspace invitations
+    path(
+        "users/me/invitations/workspaces/",
+        UserWorkspaceInvitationsEndpoint.as_view({"get": "list", "post": "create"}),
+        name="user-workspace-invitations",
+    ),
+    # user workspace invitation
+    path(
+        "users/me/invitations/<uuid:pk>/",
+        UserWorkspaceInvitationEndpoint.as_view(
+            {
+                "get": "retrieve",
+            }
+        ),
+        name="user-workspace-invitation",
+    ),
+    # user join workspace
+    # User Graphs
+    path(
+        "users/me/workspaces/<str:slug>/activity-graph/",
+        UserActivityGraphEndpoint.as_view(),
+        name="user-activity-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/issues-completed-graph/",
+        UserIssueCompletedGraphEndpoint.as_view(),
+        name="completed-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/dashboard/",
+        UserWorkspaceDashboardEndpoint.as_view(),
+        name="user-workspace-dashboard",
+    ),
+    ## End User Graph
+    path(
+        "users/me/invitations/workspaces/<str:slug>/<uuid:pk>/join/",
+        JoinWorkspaceEndpoint.as_view(),
+        name="user-join-workspace",
+    ),
+    # user project invitations
+    path(
+        "users/me/invitations/projects/",
+        UserProjectInvitationsViewset.as_view({"get": "list", "post": "create"}),
+        name="user-project-invitations",
+    ),
+]
diff --git a/apiserver/plane/api/urls/views.py b/apiserver/plane/api/urls/views.py
new file mode 100644
index 00000000000..560855e8021
--- /dev/null
+++ b/apiserver/plane/api/urls/views.py
@@ -0,0 +1,85 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    IssueViewViewSet,
+    GlobalViewViewSet,
+    GlobalViewIssuesViewSet,
+    IssueViewFavoriteViewSet,
+)
+
+
+urlpatterns = [
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:pk>/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/<uuid:pk>/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/issues/",
+        GlobalViewIssuesViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="global-view-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/<uuid:view_id>/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+]
diff --git a/apiserver/plane/api/urls/workspace.py b/apiserver/plane/api/urls/workspace.py
new file mode 100644
index 00000000000..f26730833cd
--- /dev/null
+++ b/apiserver/plane/api/urls/workspace.py
@@ -0,0 +1,176 @@
+from django.urls import path
+
+
+from plane.api.views import (
+    WorkSpaceViewSet,
+    InviteWorkspaceEndpoint,
+    WorkSpaceMemberViewSet,
+    WorkspaceInvitationsViewset,
+    WorkspaceMemberUserEndpoint,
+    WorkspaceMemberUserViewsEndpoint,
+    WorkSpaceAvailabilityCheckEndpoint,
+    TeamMemberViewSet,
+    UserLastProjectWithWorkspaceEndpoint,
+    WorkspaceThemeViewSet,
+    WorkspaceUserProfileStatsEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserProfileIssuesEndpoint,
+    WorkspaceLabelsEndpoint,
+    LeaveWorkspaceEndpoint,
+)
+
+
+urlpatterns = [
+    path(
+        "workspace-slug-check/",
+        WorkSpaceAvailabilityCheckEndpoint.as_view(),
+        name="workspace-availability",
+    ),
+    path(
+        "workspaces/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invite/",
+        InviteWorkspaceEndpoint.as_view(),
+        name="invite-workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/",
+        WorkspaceInvitationsViewset.as_view({"get": "list"}),
+        name="workspace-invitations",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/<uuid:pk>/",
+        WorkspaceInvitationsViewset.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-invitations",
+    ),
+    path(
+        "workspaces/<str:slug>/members/",
+        WorkSpaceMemberViewSet.as_view({"get": "list"}),
+        name="workspace-member",
+    ),
+    path(
+        "workspaces/<str:slug>/members/<uuid:pk>/",
+        WorkSpaceMemberViewSet.as_view(
+            {
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-member",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/",
+        TeamMemberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-team-members",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/<uuid:pk>/",
+        TeamMemberViewSet.as_view(
+            {
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace-team-members",
+    ),
+    path(
+        "users/last-visited-workspace/",
+        UserLastProjectWithWorkspaceEndpoint.as_view(),
+        name="workspace-project-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-members/me/",
+        WorkspaceMemberUserEndpoint.as_view(),
+        name="workspace-member-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-views/",
+        WorkspaceMemberUserViewsEndpoint.as_view(),
+        name="workspace-member-views-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/<uuid:pk>/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/user-stats/<uuid:user_id>/",
+        WorkspaceUserProfileStatsEndpoint.as_view(),
+        name="workspace-user-stats",
+    ),
+    path(
+        "workspaces/<str:slug>/user-activity/<uuid:user_id>/",
+        WorkspaceUserActivityEndpoint.as_view(),
+        name="workspace-user-activity",
+    ),
+    path(
+        "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
+        WorkspaceUserProfileEndpoint.as_view(),
+        name="workspace-user-profile-page",
+    ),
+    path(
+        "workspaces/<str:slug>/user-issues/<uuid:user_id>/",
+        WorkspaceUserProfileIssuesEndpoint.as_view(),
+        name="workspace-user-profile-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/labels/",
+        WorkspaceLabelsEndpoint.as_view(),
+        name="workspace-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/members/leave/",
+        LeaveWorkspaceEndpoint.as_view(),
+        name="leave-workspace-members",
+    ),
+]
diff --git a/apiserver/plane/api/urls_deprecated.py b/apiserver/plane/api/urls_deprecated.py
new file mode 100644
index 00000000000..67cc62e4635
--- /dev/null
+++ b/apiserver/plane/api/urls_deprecated.py
@@ -0,0 +1,1740 @@
+from django.urls import path
+
+from rest_framework_simplejwt.views import TokenRefreshView
+
+# Create your urls here.
+
+from plane.api.views import (
+    # Authentication
+    SignUpEndpoint,
+    SignInEndpoint,
+    SignOutEndpoint,
+    MagicSignInEndpoint,
+    MagicSignInGenerateEndpoint,
+    OauthEndpoint,
+    ## End Authentication
+    # Auth Extended
+    ForgotPasswordEndpoint,
+    VerifyEmailEndpoint,
+    ResetPasswordEndpoint,
+    RequestEmailVerificationEndpoint,
+    ChangePasswordEndpoint,
+    ## End Auth Extender
+    # User
+    UserEndpoint,
+    UpdateUserOnBoardedEndpoint,
+    UpdateUserTourCompletedEndpoint,
+    UserActivityEndpoint,
+    ## End User
+    # Workspaces
+    WorkSpaceViewSet,
+    UserWorkSpacesEndpoint,
+    InviteWorkspaceEndpoint,
+    JoinWorkspaceEndpoint,
+    WorkSpaceMemberViewSet,
+    WorkspaceMembersEndpoint,
+    WorkspaceInvitationsViewset,
+    UserWorkspaceInvitationsEndpoint,
+    WorkspaceMemberUserEndpoint,
+    WorkspaceMemberUserViewsEndpoint,
+    WorkSpaceAvailabilityCheckEndpoint,
+    TeamMemberViewSet,
+    AddTeamToProjectEndpoint,
+    UserLastProjectWithWorkspaceEndpoint,
+    UserWorkspaceInvitationEndpoint,
+    UserActivityGraphEndpoint,
+    UserIssueCompletedGraphEndpoint,
+    UserWorkspaceDashboardEndpoint,
+    WorkspaceThemeViewSet,
+    WorkspaceUserProfileStatsEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserProfileIssuesEndpoint,
+    WorkspaceLabelsEndpoint,
+    LeaveWorkspaceEndpoint,
+    ## End Workspaces
+    # File Assets
+    FileAssetEndpoint,
+    UserAssetsEndpoint,
+    ## End File Assets
+    # Projects
+    ProjectViewSet,
+    InviteProjectEndpoint,
+    ProjectMemberViewSet,
+    ProjectMemberEndpoint,
+    ProjectMemberInvitationsViewset,
+    ProjectMemberUserEndpoint,
+    AddMemberToProjectEndpoint,
+    ProjectJoinEndpoint,
+    UserProjectInvitationsViewset,
+    ProjectIdentifierEndpoint,
+    ProjectFavoritesViewSet,
+    LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
+    ## End Projects
+    # Issues
+    IssueViewSet,
+    WorkSpaceIssuesEndpoint,
+    IssueActivityEndpoint,
+    IssueCommentViewSet,
+    UserWorkSpaceIssues,
+    BulkDeleteIssuesEndpoint,
+    BulkImportIssuesEndpoint,
+    ProjectUserViewsEndpoint,
+    IssueUserDisplayPropertyEndpoint,
+    LabelViewSet,
+    SubIssuesEndpoint,
+    IssueLinkViewSet,
+    BulkCreateIssueLabelsEndpoint,
+    IssueAttachmentEndpoint,
+    IssueArchiveViewSet,
+    IssueSubscriberViewSet,
+    IssueCommentPublicViewSet,
+    IssueReactionViewSet,
+    IssueRelationViewSet,
+    CommentReactionViewSet,
+    IssueDraftViewSet,
+    ## End Issues
+    # States
+    StateViewSet,
+    ## End States
+    # Estimates
+    ProjectEstimatePointEndpoint,
+    BulkEstimatePointEndpoint,
+    ## End Estimates
+    # Views
+    GlobalViewViewSet,
+    GlobalViewIssuesViewSet,
+    IssueViewViewSet,
+    IssueViewFavoriteViewSet,
+    ## End Views
+    # Cycles
+    CycleViewSet,
+    CycleIssueViewSet,
+    CycleDateCheckEndpoint,
+    CycleFavoriteViewSet,
+    TransferCycleIssueEndpoint,
+    ## End Cycles
+    # Modules
+    ModuleViewSet,
+    ModuleIssueViewSet,
+    ModuleFavoriteViewSet,
+    ModuleLinkViewSet,
+    BulkImportModulesEndpoint,
+    ## End Modules
+    # Pages
+    PageViewSet,
+    PageBlockViewSet,
+    PageFavoriteViewSet,
+    CreateIssueFromPageBlockEndpoint,
+    ## End Pages
+    # Api Tokens
+    ApiTokenEndpoint,
+    ## End Api Tokens
+    # Integrations
+    IntegrationViewSet,
+    WorkspaceIntegrationViewSet,
+    GithubRepositoriesEndpoint,
+    GithubRepositorySyncViewSet,
+    GithubIssueSyncViewSet,
+    GithubCommentSyncViewSet,
+    BulkCreateGithubIssueSyncEndpoint,
+    SlackProjectSyncViewSet,
+    ## End Integrations
+    # Importer
+    ServiceIssueImportSummaryEndpoint,
+    ImportServiceEndpoint,
+    UpdateServiceImportStatusEndpoint,
+    ## End importer
+    # Search
+    GlobalSearchEndpoint,
+    IssueSearchEndpoint,
+    ## End Search
+    # External
+    GPTIntegrationEndpoint,
+    ReleaseNotesEndpoint,
+    UnsplashEndpoint,
+    ## End External
+    # Inbox
+    InboxViewSet,
+    InboxIssueViewSet,
+    ## End Inbox
+    # Analytics
+    AnalyticsEndpoint,
+    AnalyticViewViewset,
+    SavedAnalyticEndpoint,
+    ExportAnalyticsEndpoint,
+    DefaultAnalyticsEndpoint,
+    ## End Analytics
+    # Notification
+    NotificationViewSet,
+    UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
+    ## End Notification
+    # Public Boards
+    ProjectDeployBoardViewSet,
+    ProjectIssuesPublicEndpoint,
+    ProjectDeployBoardPublicSettingsEndpoint,
+    IssueReactionPublicViewSet,
+    CommentReactionPublicViewSet,
+    InboxIssuePublicViewSet,
+    IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
+    IssueRetrievePublicEndpoint,
+    ## End Public Boards
+    ## Exporter
+    ExportIssuesEndpoint,
+    ## End Exporter
+    # Configuration
+    ConfigurationEndpoint,
+    ## End Configuration
+)
+
+
+#TODO: Delete this file
+# This url file has been deprecated use apiserver/plane/urls folder to create new urls
+
+urlpatterns = [
+    #  Social Auth
+    path("social-auth/", OauthEndpoint.as_view(), name="oauth"),
+    # Auth
+    path("sign-up/", SignUpEndpoint.as_view(), name="sign-up"),
+    path("sign-in/", SignInEndpoint.as_view(), name="sign-in"),
+    path("sign-out/", SignOutEndpoint.as_view(), name="sign-out"),
+    # Magic Sign In/Up
+    path(
+        "magic-generate/", MagicSignInGenerateEndpoint.as_view(), name="magic-generate"
+    ),
+    path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
+    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+    # Email verification
+    path("email-verify/", VerifyEmailEndpoint.as_view(), name="email-verify"),
+    path(
+        "request-email-verify/",
+        RequestEmailVerificationEndpoint.as_view(),
+        name="request-reset-email",
+    ),
+    # Password Manipulation
+    path(
+        "reset-password/<uidb64>/<token>/",
+        ResetPasswordEndpoint.as_view(),
+        name="password-reset",
+    ),
+    path(
+        "forgot-password/",
+        ForgotPasswordEndpoint.as_view(),
+        name="forgot-password",
+    ),
+    # User Profile
+    path(
+        "users/me/",
+        UserEndpoint.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/settings/",
+        UserEndpoint.as_view(
+            {
+                "get": "retrieve_user_settings",
+            }
+        ),
+        name="users",
+    ),
+    path(
+        "users/me/change-password/",
+        ChangePasswordEndpoint.as_view(),
+        name="change-password",
+    ),
+    path(
+        "users/me/onboard/",
+        UpdateUserOnBoardedEndpoint.as_view(),
+        name="user-onboard",
+    ),
+    path(
+        "users/me/tour-completed/",
+        UpdateUserTourCompletedEndpoint.as_view(),
+        name="user-tour",
+    ),
+    path(
+        "users/workspaces/<str:slug>/activities/",
+        UserActivityEndpoint.as_view(),
+        name="user-activities",
+    ),
+    # user workspaces
+    path(
+        "users/me/workspaces/",
+        UserWorkSpacesEndpoint.as_view(),
+        name="user-workspace",
+    ),
+    # user workspace invitations
+    path(
+        "users/me/invitations/workspaces/",
+        UserWorkspaceInvitationsEndpoint.as_view({"get": "list", "post": "create"}),
+        name="user-workspace-invitations",
+    ),
+    # user workspace invitation
+    path(
+        "users/me/invitations/<uuid:pk>/",
+        UserWorkspaceInvitationEndpoint.as_view(
+            {
+                "get": "retrieve",
+            }
+        ),
+        name="workspace",
+    ),
+    # user join workspace
+    # User Graphs
+    path(
+        "users/me/workspaces/<str:slug>/activity-graph/",
+        UserActivityGraphEndpoint.as_view(),
+        name="user-activity-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/issues-completed-graph/",
+        UserIssueCompletedGraphEndpoint.as_view(),
+        name="completed-graph",
+    ),
+    path(
+        "users/me/workspaces/<str:slug>/dashboard/",
+        UserWorkspaceDashboardEndpoint.as_view(),
+        name="user-workspace-dashboard",
+    ),
+    ## User  Graph
+    path(
+        "users/me/invitations/workspaces/<str:slug>/<uuid:pk>/join/",
+        JoinWorkspaceEndpoint.as_view(),
+        name="user-join-workspace",
+    ),
+    # user project invitations
+    path(
+        "users/me/invitations/projects/",
+        UserProjectInvitationsViewset.as_view({"get": "list", "post": "create"}),
+        name="user-project-invitaions",
+    ),
+    ## Workspaces ##
+    path(
+        "workspace-slug-check/",
+        WorkSpaceAvailabilityCheckEndpoint.as_view(),
+        name="workspace-availability",
+    ),
+    path(
+        "workspaces/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/",
+        WorkSpaceViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invite/",
+        InviteWorkspaceEndpoint.as_view(),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/",
+        WorkspaceInvitationsViewset.as_view({"get": "list"}),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/invitations/<uuid:pk>/",
+        WorkspaceInvitationsViewset.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/members/",
+        WorkSpaceMemberViewSet.as_view({"get": "list"}),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/members/<uuid:pk>/",
+        WorkSpaceMemberViewSet.as_view(
+            {
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-members/",
+        WorkspaceMembersEndpoint.as_view(),
+        name="workspace-members",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/",
+        TeamMemberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/teams/<uuid:pk>/",
+        TeamMemberViewSet.as_view(
+            {
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+        name="workspace",
+    ),
+    path(
+        "users/last-visited-workspace/",
+        UserLastProjectWithWorkspaceEndpoint.as_view(),
+        name="workspace-project-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-members/me/",
+        WorkspaceMemberUserEndpoint.as_view(),
+        name="workspace-member-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-views/",
+        WorkspaceMemberUserViewsEndpoint.as_view(),
+        name="workspace-member-details",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-themes/<uuid:pk>/",
+        WorkspaceThemeViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-themes",
+    ),
+    path(
+        "workspaces/<str:slug>/user-stats/<uuid:user_id>/",
+        WorkspaceUserProfileStatsEndpoint.as_view(),
+        name="workspace-user-stats",
+    ),
+    path(
+        "workspaces/<str:slug>/user-activity/<uuid:user_id>/",
+        WorkspaceUserActivityEndpoint.as_view(),
+        name="workspace-user-activity",
+    ),
+    path(
+        "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
+        WorkspaceUserProfileEndpoint.as_view(),
+        name="workspace-user-profile-page",
+    ),
+    path(
+        "workspaces/<str:slug>/user-issues/<uuid:user_id>/",
+        WorkspaceUserProfileIssuesEndpoint.as_view(),
+        name="workspace-user-profile-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/labels/",
+        WorkspaceLabelsEndpoint.as_view(),
+        name="workspace-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/members/leave/",
+        LeaveWorkspaceEndpoint.as_view(),
+        name="workspace-labels",
+    ),
+    ## End Workspaces ##
+    # Projects
+    path(
+        "workspaces/<str:slug>/projects/",
+        ProjectViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:pk>/",
+        ProjectViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/project-identifiers/",
+        ProjectIdentifierEndpoint.as_view(),
+        name="project-identifiers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invite/",
+        InviteProjectEndpoint.as_view(),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/",
+        ProjectMemberViewSet.as_view({"get": "list"}),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/<uuid:pk>/",
+        ProjectMemberViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/",
+        ProjectMemberEndpoint.as_view(),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/add/",
+        AddMemberToProjectEndpoint.as_view(),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/join/",
+        ProjectJoinEndpoint.as_view(),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/team-invite/",
+        AddTeamToProjectEndpoint.as_view(),
+        name="projects",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/",
+        ProjectMemberInvitationsViewset.as_view({"get": "list"}),
+        name="workspace",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/invitations/<uuid:pk>/",
+        ProjectMemberInvitationsViewset.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-views/",
+        ProjectUserViewsEndpoint.as_view(),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/me/",
+        ProjectMemberUserEndpoint.as_view(),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/user-favorite-projects/<uuid:project_id>/",
+        ProjectFavoritesViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/leave/",
+        LeaveProjectEndpoint.as_view(),
+        name="project",
+    ),
+    path(
+        "project-covers/",
+        ProjectPublicCoverImagesEndpoint.as_view(),
+        name="project-covers",
+    ),
+    # End Projects
+    #  States
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/",
+        StateViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-states",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/",
+        StateViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-state",
+    ),
+    # End States ##
+    #  Estimates
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-estimates/",
+        ProjectEstimatePointEndpoint.as_view(),
+        name="project-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/estimates/<uuid:estimate_id>/",
+        BulkEstimatePointEndpoint.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="bulk-create-estimate-points",
+    ),
+    # End Estimates ##
+    # Views
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/views/<uuid:pk>/",
+        IssueViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/views/<uuid:pk>/",
+        GlobalViewViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="global-view",
+    ),
+    path(
+        "workspaces/<str:slug>/issues/",
+        GlobalViewIssuesViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="global-view-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-views/<uuid:view_id>/",
+        IssueViewFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-view",
+    ),
+    ## End Views
+    ## Cycles
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/",
+        CycleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:pk>/",
+        CycleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/cycle-issues/<uuid:pk>/",
+        CycleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/date-check/",
+        CycleDateCheckEndpoint.as_view(),
+        name="project-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-cycles/<uuid:cycle_id>/",
+        CycleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-cycle",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/transfer-issues/",
+        TransferCycleIssueEndpoint.as_view(),
+        name="transfer-issues",
+    ),
+    ## End Cycles
+    # Issue
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/",
+        IssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/",
+        IssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
+        LabelViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/<uuid:pk>/",
+        LabelViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-create-labels/",
+        BulkCreateIssueLabelsEndpoint.as_view(),
+        name="project-bulk-labels",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-delete-issues/",
+        BulkDeleteIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-issues/<str:service>/",
+        BulkImportIssuesEndpoint.as_view(),
+        name="project-issues-bulk",
+    ),
+    path(
+        "workspaces/<str:slug>/my-issues/",
+        UserWorkSpaceIssues.as_view(),
+        name="workspace-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/sub-issues/",
+        SubIssuesEndpoint.as_view(),
+        name="sub-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-links/<uuid:pk>/",
+        IssueLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
+        IssueAttachmentEndpoint.as_view(),
+        name="project-issue-attachments",
+    ),
+    path(
+        "workspaces/<str:slug>/export-issues/",
+        ExportIssuesEndpoint.as_view(),
+        name="export-issues",
+    ),
+    ## End Issues
+    ## Issue Activity
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/history/",
+        IssueActivityEndpoint.as_view(),
+        name="project-issue-history",
+    ),
+    ## Issue Activity
+    ## IssueComments
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment",
+    ),
+    ## End IssueComments
+    # Issue Subscribers
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-subscribers/<uuid:subscriber_id>/",
+        IssueSubscriberViewSet.as_view({"delete": "destroy"}),
+        name="project-issue-subscribers",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/subscribe/",
+        IssueSubscriberViewSet.as_view(
+            {
+                "get": "subscription_status",
+                "post": "subscribe",
+                "delete": "unsubscribe",
+            }
+        ),
+        name="project-issue-subscribers",
+    ),
+    ## End Issue Subscribers
+    # Issue Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    ## End Issue Reactions
+    # Comment Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    ## End Comment Reactions
+    ## IssueProperty
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
+    ),
+    ## IssueProperty Ebd
+    ## Issue Archives
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
+        IssueArchiveViewSet.as_view(
+            {
+                "post": "unarchive",
+            }
+        ),
+        name="project-issue-archive",
+    ),
+    ## End Issue Archives
+    ## Issue Relation
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/",
+        IssueRelationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="issue-relation",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-relation/<uuid:pk>/",
+        IssueRelationViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-relation",
+    ),
+    ## End Issue Relation
+    ## Issue Drafts
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/<uuid:pk>/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-draft",
+    ),
+    ## End Issue Drafts
+    ## File Assets
+    path(
+        "workspaces/<str:slug>/file-assets/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "workspaces/file-assets/<uuid:workspace_id>/<str:asset_key>/",
+        FileAssetEndpoint.as_view(),
+        name="file-assets",
+    ),
+    path(
+        "users/file-assets/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+    path(
+        "users/file-assets/<str:asset_key>/",
+        UserAssetsEndpoint.as_view(),
+        name="user-file-assets",
+    ),
+    ## End File Assets
+    ## Modules
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/",
+        ModuleViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:pk>/",
+        ModuleViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-modules",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-issues/<uuid:pk>/",
+        ModuleIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-module-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/module-links/<uuid:pk>/",
+        ModuleLinkViewSet.as_view(
+            {
+                "get": "retrieve",
+                "put": "update",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-module-links",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-modules/<uuid:module_id>/",
+        ModuleFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-module",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-modules/<str:service>/",
+        BulkImportModulesEndpoint.as_view(),
+        name="bulk-modules-create",
+    ),
+    ## End Modules
+    # Pages
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/",
+        PageViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/",
+        PageViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:pk>/",
+        PageBlockViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-page-blocks",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/",
+        PageFavoriteViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/user-favorite-pages/<uuid:page_id>/",
+        PageFavoriteViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="user-favorite-pages",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/page-blocks/<uuid:page_block_id>/issues/",
+        CreateIssueFromPageBlockEndpoint.as_view(),
+        name="page-block-issues",
+    ),
+    ## End Pages
+    # API Tokens
+    path("api-tokens/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    path("api-tokens/<uuid:pk>/", ApiTokenEndpoint.as_view(), name="api-tokens"),
+    ## End API Tokens
+    # Integrations
+    path(
+        "integrations/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "integrations/<uuid:pk>/",
+        IntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<str:provider>/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:pk>/provider/",
+        WorkspaceIntegrationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-integrations",
+    ),
+    # Github Integrations
+    path(
+        "workspaces/<str:slug>/workspace-integrations/<uuid:workspace_integration_id>/github-repositories/",
+        GithubRepositoriesEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/github-repository-sync/<uuid:pk>/",
+        GithubRepositorySyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/bulk-create-github-issue-sync/",
+        BulkCreateGithubIssueSyncEndpoint.as_view(),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:pk>/",
+        GithubIssueSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/github-repository-sync/<uuid:repo_sync_id>/github-issue-sync/<uuid:issue_sync_id>/github-comment-sync/<uuid:pk>/",
+        GithubCommentSyncViewSet.as_view(
+            {
+                "get": "retrieve",
+                "delete": "destroy",
+            }
+        ),
+    ),
+    ## End Github Integrations
+    # Slack Integration
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "post": "create",
+                "get": "list",
+            }
+        ),
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/workspace-integrations/<uuid:workspace_integration_id>/project-slack-sync/<uuid:pk>/",
+        SlackProjectSyncViewSet.as_view(
+            {
+                "delete": "destroy",
+                "get": "retrieve",
+            }
+        ),
+    ),
+    ## End Slack Integration
+    ## End Integrations
+    # Importer
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/",
+        ServiceIssueImportSummaryEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/importers/<str:service>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/importers/<str:service>/<uuid:pk>/",
+        ImportServiceEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/service/<str:service>/importers/<uuid:importer_id>/",
+        UpdateServiceImportStatusEndpoint.as_view(),
+        name="importer",
+    ),
+    ##  End Importer
+    # Search
+    path(
+        "workspaces/<str:slug>/search/",
+        GlobalSearchEndpoint.as_view(),
+        name="global-search",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/search-issues/",
+        IssueSearchEndpoint.as_view(),
+        name="project-issue-search",
+    ),
+    ## End Search
+    # External
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
+        GPTIntegrationEndpoint.as_view(),
+        name="importer",
+    ),
+    path(
+        "release-notes/",
+        ReleaseNotesEndpoint.as_view(),
+        name="release-notes",
+    ),
+    path(
+        "unsplash/",
+        UnsplashEndpoint.as_view(),
+        name="release-notes",
+    ),
+    ## End External
+    # Inbox
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
+        InboxViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:pk>/",
+        InboxViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    ## End Inbox
+    # Analytics
+    path(
+        "workspaces/<str:slug>/analytics/",
+        AnalyticsEndpoint.as_view(),
+        name="plane-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/",
+        AnalyticViewViewset.as_view({"get": "list", "post": "create"}),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/analytic-view/<uuid:pk>/",
+        AnalyticViewViewset.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/saved-analytic-view/<uuid:analytic_id>/",
+        SavedAnalyticEndpoint.as_view(),
+        name="saved-analytic-view",
+    ),
+    path(
+        "workspaces/<str:slug>/export-analytics/",
+        ExportAnalyticsEndpoint.as_view(),
+        name="export-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/default-analytics/",
+        DefaultAnalyticsEndpoint.as_view(),
+        name="default-analytics",
+    ),
+    ## End Analytics
+    # Notification
+    path(
+        "workspaces/<str:slug>/users/notifications/",
+        NotificationViewSet.as_view(
+            {
+                "get": "list",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/",
+        NotificationViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/read/",
+        NotificationViewSet.as_view(
+            {
+                "post": "mark_read",
+                "delete": "mark_unread",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/<uuid:pk>/archive/",
+        NotificationViewSet.as_view(
+            {
+                "post": "archive",
+                "delete": "unarchive",
+            }
+        ),
+        name="notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/unread/",
+        UnreadNotificationEndpoint.as_view(),
+        name="unread-notifications",
+    ),
+    path(
+        "workspaces/<str:slug>/users/notifications/mark-all-read/",
+        MarkAllReadNotificationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="mark-all-read-notifications",
+    ),
+    ## End Notification
+    # Public Boards
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/<uuid:pk>/",
+        ProjectDeployBoardViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/settings/",
+        ProjectDeployBoardPublicSettingsEndpoint.as_view(),
+        name="project-deploy-board-settings",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
+        ProjectIssuesPublicEndpoint.as_view(),
+        name="project-deploy-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
+        IssueRetrievePublicEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/<uuid:pk>/",
+        IssueCommentPublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-comments-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="issue-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionPublicViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="comment-reactions-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/inboxes/<uuid:inbox_id>/inbox-issues/<uuid:pk>/",
+        InboxIssuePublicViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="inbox-issue",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/votes/",
+        IssueVotePublicViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+                "delete": "destroy",
+            }
+        ),
+        name="issue-vote-project-board",
+    ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/",
+        WorkspaceProjectDeployBoardEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
+    ## End Public Boards
+    # Configuration
+    path(
+        "configs/",
+        ConfigurationEndpoint.as_view(),
+        name="configuration",
+    ),
+    ## End Configuration
+]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index b697741ae2a..8f4b2fb9d98 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -7,15 +7,15 @@
     ProjectMemberInvitationsViewset,
     ProjectMemberInviteDetailViewSet,
     ProjectIdentifierEndpoint,
-    AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     ProjectUserViewsEndpoint,
     ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
-    ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
+    LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
 )
 from .user import (
     UserEndpoint,
@@ -51,10 +51,10 @@
     WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
-    WorkspaceMembersEndpoint,
+    LeaveWorkspaceEndpoint,
 )
 from .state import StateViewSet
-from .view import IssueViewViewSet, ViewIssuesEndpoint, IssueViewFavoriteViewSet
+from .view import GlobalViewViewSet, GlobalViewIssuesViewSet, IssueViewViewSet, IssueViewFavoriteViewSet
 from .cycle import (
     CycleViewSet,
     CycleIssueViewSet,
@@ -68,7 +68,7 @@
     WorkSpaceIssuesEndpoint,
     IssueActivityEndpoint,
     IssueCommentViewSet,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     LabelViewSet,
     BulkDeleteIssuesEndpoint,
     UserWorkSpaceIssues,
@@ -84,8 +84,10 @@
     IssueReactionPublicViewSet,
     CommentReactionPublicViewSet,
     IssueVotePublicViewSet,
+    IssueRelationViewSet,
     IssueRetrievePublicEndpoint,
     ProjectIssuesPublicEndpoint,
+    IssueDraftViewSet,
 )
 
 from .auth_extended import (
@@ -143,16 +145,13 @@
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint
 
 
-from .gpt import GPTIntegrationEndpoint
+from .external import GPTIntegrationEndpoint, ReleaseNotesEndpoint, UnsplashEndpoint
 
 from .estimate import (
     ProjectEstimatePointEndpoint,
     BulkEstimatePointEndpoint,
 )
 
-
-from .release import ReleaseNotesEndpoint
-
 from .inbox import InboxViewSet, InboxIssueViewSet, InboxIssuePublicViewSet
 
 from .analytic import (
@@ -165,6 +164,6 @@
 
 from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
 
-from .exporter import (
-    ExportIssuesEndpoint,
-)
\ No newline at end of file
+from .exporter import ExportIssuesEndpoint
+
+from .config import ConfigurationEndpoint
diff --git a/apiserver/plane/api/views/analytic.py b/apiserver/plane/api/views/analytic.py
index feb766b46df..c29a4b692b0 100644
--- a/apiserver/plane/api/views/analytic.py
+++ b/apiserver/plane/api/views/analytic.py
@@ -1,10 +1,5 @@
 # Django imports
-from django.db.models import (
-    Count,
-    Sum,
-    F,
-    Q
-)
+from django.db.models import Count, Sum, F, Q
 from django.db.models.functions import ExtractMonth
 
 # Third party imports
@@ -28,82 +23,156 @@ class AnalyticsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            x_axis = request.GET.get("x_axis", False)
-            y_axis = request.GET.get("y_axis", False)
-
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        x_axis = request.GET.get("x_axis", False)
+        y_axis = request.GET.get("y_axis", False)
+        segment = request.GET.get("segment", False)
+
+        valid_xaxis_segment = [
+            "state_id",
+            "state__group",
+            "labels__id",
+            "assignees__id",
+            "estimate_point",
+            "issue_cycle__cycle_id",
+            "issue_module__module_id",
+            "priority",
+            "start_date",
+            "target_date",
+            "created_at",
+            "completed_at",
+        ]
+
+        valid_yaxis = [
+            "issue_count",
+            "estimate",
+        ]
+
+        # Check for x-axis and y-axis as thery are required parameters
+        if (
+            not x_axis
+            or not y_axis
+            or not x_axis in valid_xaxis_segment
+            or not y_axis in valid_yaxis
+        ):
+            return Response(
+                {
+                    "error": "x-axis and y-axis dimensions are required and the values should be valid"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            segment = request.GET.get("segment", False)
-            filters = issue_filters(request.GET, "GET")
+        # If segment is present it cannot be same as x-axis
+        if segment and (segment not in valid_xaxis_segment or x_axis == segment):
+            return Response(
+                {
+                    "error": "Both segment and x axis cannot be same and segment should be valid"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
+        # Additional filters that need to be applied
+        filters = issue_filters(request.GET, "GET")
 
-            total_issues = queryset.count()
-            distribution = build_graph_plot(
-                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
-            )
+        # Get the issues for the workspace with the additional filters applied
+        queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
 
-            colors = dict()
-            if x_axis in ["state__name", "state__group"] or segment in [
-                "state__name",
-                "state__group",
-            ]:
-                if x_axis in ["state__name", "state__group"]:
-                    key = "name" if x_axis == "state__name" else "group"
-                else:
-                    key = "name" if segment == "state__name" else "group"
-
-                colors = (
-                    State.objects.filter(
-                        ~Q(name="Triage"),
-                        workspace__slug=slug, project_id__in=filters.get("project__in")
-                    ).values(key, "color")
-                    if filters.get("project__in", False)
-                    else State.objects.filter(~Q(name="Triage"), workspace__slug=slug).values(key, "color")
-                )
+        # Get the total issue count
+        total_issues = queryset.count()
+
+        # Build the graph payload
+        distribution = build_graph_plot(
+            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+        )
 
-            if x_axis in ["labels__name"] or segment in ["labels__name"]:
-                colors = (
-                    Label.objects.filter(
-                        workspace__slug=slug, project_id__in=filters.get("project__in")
-                    ).values("name", "color")
-                    if filters.get("project__in", False)
-                    else Label.objects.filter(workspace__slug=slug).values(
-                        "name", "color"
-                    )
+        state_details = {}
+        if x_axis in ["state_id"] or segment in ["state_id"]:
+            state_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
                 )
+                .distinct("state_id")
+                .order_by("state_id")
+                .values("state_id", "state__name", "state__color")
+            )
 
-            assignee_details = {}
-            if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
-                assignee_details = (
-                    Issue.issue_objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
-                    .order_by("assignees__id")
-                    .distinct("assignees__id")
-                    .values("assignees__avatar", "assignees__display_name", "assignees__first_name", "assignees__last_name", "assignees__id")
+        label_details = {}
+        if x_axis in ["labels__id"] or segment in ["labels__id"]:
+            label_details = (
+                Issue.objects.filter(
+                    workspace__slug=slug, **filters, labels__id__isnull=False
                 )
+                .distinct("labels__id")
+                .order_by("labels__id")
+                .values("labels__id", "labels__color", "labels__name")
+            )
 
+        assignee_details = {}
+        if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
+            assignee_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug, **filters, assignees__avatar__isnull=False
+                )
+                .order_by("assignees__id")
+                .distinct("assignees__id")
+                .values(
+                    "assignees__avatar",
+                    "assignees__display_name",
+                    "assignees__first_name",
+                    "assignees__last_name",
+                    "assignees__id",
+                )
+            )
 
-            return Response(
-                {
-                    "total": total_issues,
-                    "distribution": distribution,
-                    "extras": {"colors": colors, "assignee_details": assignee_details},
-                },
-                status=status.HTTP_200_OK,
+        cycle_details = {}
+        if x_axis in ["issue_cycle__cycle_id"] or segment in ["issue_cycle__cycle_id"]:
+            cycle_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
+                    issue_cycle__cycle_id__isnull=False,
+                )
+                .distinct("issue_cycle__cycle_id")
+                .order_by("issue_cycle__cycle_id")
+                .values(
+                    "issue_cycle__cycle_id",
+                    "issue_cycle__cycle__name",
+                )
             )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        module_details = {}
+        if x_axis in ["issue_module__module_id"] or segment in [
+            "issue_module__module_id"
+        ]:
+            module_details = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    **filters,
+                    issue_module__module_id__isnull=False,
+                )
+                .distinct("issue_module__module_id")
+                .order_by("issue_module__module_id")
+                .values(
+                    "issue_module__module_id",
+                    "issue_module__module__name",
+                )
             )
 
+        return Response(
+            {
+                "total": total_issues,
+                "distribution": distribution,
+                "extras": {
+                    "state_details": state_details,
+                    "assignee_details": assignee_details,
+                    "label_details": label_details,
+                    "cycle_details": cycle_details,
+                    "module_details": module_details,
+                },
+            },
+            status=status.HTTP_200_OK,
+        )
+
 
 class AnalyticViewViewset(BaseViewSet):
     permission_classes = [
@@ -128,45 +197,30 @@ class SavedAnalyticEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, analytic_id):
-        try:
-            analytic_view = AnalyticView.objects.get(
-                pk=analytic_id, workspace__slug=slug
-            )
-
-            filter = analytic_view.query
-            queryset = Issue.issue_objects.filter(**filter)
+        analytic_view = AnalyticView.objects.get(pk=analytic_id, workspace__slug=slug)
 
-            x_axis = analytic_view.query_dict.get("x_axis", False)
-            y_axis = analytic_view.query_dict.get("y_axis", False)
+        filter = analytic_view.query
+        queryset = Issue.issue_objects.filter(**filter)
 
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            segment = request.GET.get("segment", False)
-            distribution = build_graph_plot(
-                queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
-            )
-            total_issues = queryset.count()
-            return Response(
-                {"total": total_issues, "distribution": distribution},
-                status=status.HTTP_200_OK,
-            )
+        x_axis = analytic_view.query_dict.get("x_axis", False)
+        y_axis = analytic_view.query_dict.get("y_axis", False)
 
-        except AnalyticView.DoesNotExist:
+        if not x_axis or not y_axis:
             return Response(
-                {"error": "Analytic View Does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "x-axis and y-axis dimensions are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        segment = request.GET.get("segment", False)
+        distribution = build_graph_plot(
+            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+        )
+        total_issues = queryset.count()
+        return Response(
+            {"total": total_issues, "distribution": distribution},
+            status=status.HTTP_200_OK,
+        )
+
 
 class ExportAnalyticsEndpoint(BaseAPIView):
     permission_classes = [
@@ -174,33 +228,64 @@ class ExportAnalyticsEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug):
-        try:
-            x_axis = request.data.get("x_axis", False)
-            y_axis = request.data.get("y_axis", False)
-
-            if not x_axis or not y_axis:
-                return Response(
-                    {"error": "x-axis and y-axis dimensions are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            analytic_export_task.delay(
-                email=request.user.email, data=request.data, slug=slug
-            )
-
+        x_axis = request.data.get("x_axis", False)
+        y_axis = request.data.get("y_axis", False)
+        segment = request.data.get("segment", False)
+
+        valid_xaxis_segment = [
+            "state_id",
+            "state__group",
+            "labels__id",
+            "assignees__id",
+            "estimate_point",
+            "issue_cycle__cycle_id",
+            "issue_module__module_id",
+            "priority",
+            "start_date",
+            "target_date",
+            "created_at",
+            "completed_at",
+        ]
+
+        valid_yaxis = [
+            "issue_count",
+            "estimate",
+        ]
+
+        # Check for x-axis and y-axis as thery are required parameters
+        if (
+            not x_axis
+            or not y_axis
+            or not x_axis in valid_xaxis_segment
+            or not y_axis in valid_yaxis
+        ):
             return Response(
                 {
-                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+                    "error": "x-axis and y-axis dimensions are required and the values should be valid"
                 },
-                status=status.HTTP_200_OK,
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        # If segment is present it cannot be same as x-axis
+        if segment and (segment not in valid_xaxis_segment or x_axis == segment):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "Both segment and x axis cannot be same and segment should be valid"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        analytic_export_task.delay(
+            email=request.user.email, data=request.data, slug=slug
+        )
+
+        return Response(
+            {
+                "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+            },
+            status=status.HTTP_200_OK,
+        )
+
 
 class DefaultAnalyticsEndpoint(BaseAPIView):
     permission_classes = [
@@ -208,90 +293,92 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            filters = issue_filters(request.GET, "GET")
+        filters = issue_filters(request.GET, "GET")
+        base_issues = Issue.issue_objects.filter(workspace__slug=slug, **filters)
 
-            queryset = Issue.issue_objects.filter(workspace__slug=slug, **filters)
+        total_issues = base_issues.count()
 
-            total_issues = queryset.count()
+        state_groups = base_issues.annotate(state_group=F("state__group"))
 
-            total_issues_classified = (
-                queryset.annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        total_issues_classified = (
+            state_groups.values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            open_issues = queryset.filter(
-                state__group__in=["backlog", "unstarted", "started"]
-            ).count()
+        open_issues_groups = ["backlog", "unstarted", "started"]
+        open_issues_queryset = state_groups.filter(state__group__in=open_issues_groups)
 
-            open_issues_classified = (
-                queryset.filter(state__group__in=["backlog", "unstarted", "started"])
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        open_issues = open_issues_queryset.count()
+        open_issues_classified = (
+            open_issues_queryset.values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            issue_completed_month_wise = (
-                queryset.filter(completed_at__isnull=False)
-                .annotate(month=ExtractMonth("completed_at"))
-                .values("month")
-                .annotate(count=Count("*"))
-                .order_by("month")
-            )
-            most_issue_created_user = (
-                queryset.exclude(created_by=None)
-                .values("created_by__first_name", "created_by__last_name", "created_by__avatar", "created_by__display_name", "created_by__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )[:5]
-
-            most_issue_closed_user = (
-                queryset.filter(completed_at__isnull=False, assignees__isnull=False)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__display_name", "assignees__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )[:5]
-
-            pending_issue_user = (
-                queryset.filter(completed_at__isnull=True)
-                .values("assignees__first_name", "assignees__last_name", "assignees__avatar", "assignees__display_name", "assignees__id")
-                .annotate(count=Count("id"))
-                .order_by("-count")
-            )
+        issue_completed_month_wise = (
+            base_issues.filter(completed_at__isnull=False)
+            .annotate(month=ExtractMonth("completed_at"))
+            .values("month")
+            .annotate(count=Count("*"))
+            .order_by("month")
+        )
 
-            open_estimate_sum = (
-                queryset.filter(
-                    state__group__in=["backlog", "unstarted", "started"]
-                ).aggregate(open_estimate_sum=Sum("estimate_point"))
-            )["open_estimate_sum"]
-            print(open_estimate_sum)
-            
-            total_estimate_sum = queryset.aggregate(
-                total_estimate_sum=Sum("estimate_point")
-            )["total_estimate_sum"]
+        user_details = [
+            "created_by__first_name",
+            "created_by__last_name",
+            "created_by__avatar",
+            "created_by__display_name",
+            "created_by__id",
+        ]
+
+        most_issue_created_user = (
+            base_issues.exclude(created_by=None)
+            .values(*user_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")[:5]
+        )
 
-            return Response(
-                {
-                    "total_issues": total_issues,
-                    "total_issues_classified": total_issues_classified,
-                    "open_issues": open_issues,
-                    "open_issues_classified": open_issues_classified,
-                    "issue_completed_month_wise": issue_completed_month_wise,
-                    "most_issue_created_user": most_issue_created_user,
-                    "most_issue_closed_user": most_issue_closed_user,
-                    "pending_issue_user": pending_issue_user,
-                    "open_estimate_sum": open_estimate_sum,
-                    "total_estimate_sum": total_estimate_sum,
-                },
-                status=status.HTTP_200_OK,
-            )
+        user_assignee_details = [
+            "assignees__first_name",
+            "assignees__last_name",
+            "assignees__avatar",
+            "assignees__display_name",
+            "assignees__id",
+        ]
+
+        most_issue_closed_user = (
+            base_issues.filter(completed_at__isnull=False)
+            .exclude(assignees=None)
+            .values(*user_assignee_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")[:5]
+        )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        pending_issue_user = (
+            base_issues.filter(completed_at__isnull=True)
+            .values(*user_assignee_details)
+            .annotate(count=Count("id"))
+            .order_by("-count")
+        )
+
+        open_estimate_sum = open_issues_queryset.aggregate(sum=Sum("estimate_point"))[
+            "sum"
+        ]
+        total_estimate_sum = base_issues.aggregate(sum=Sum("estimate_point"))["sum"]
+
+        return Response(
+            {
+                "total_issues": total_issues,
+                "total_issues_classified": total_issues_classified,
+                "open_issues": open_issues,
+                "open_issues_classified": open_issues_classified,
+                "issue_completed_month_wise": issue_completed_month_wise,
+                "most_issue_created_user": most_issue_created_user,
+                "most_issue_closed_user": most_issue_closed_user,
+                "pending_issue_user": pending_issue_user,
+                "open_estimate_sum": open_estimate_sum,
+                "total_estimate_sum": total_estimate_sum,
+            },
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/api/views/api_token.py b/apiserver/plane/api/views/api_token.py
index a94ffb45ca2..2253903a9f5 100644
--- a/apiserver/plane/api/views/api_token.py
+++ b/apiserver/plane/api/views/api_token.py
@@ -14,57 +14,34 @@
 
 class ApiTokenEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            label = request.data.get("label", str(uuid4().hex))
-            workspace = request.data.get("workspace", False)
+        label = request.data.get("label", str(uuid4().hex))
+        workspace = request.data.get("workspace", False)
 
-            if not workspace:
-                return Response(
-                    {"error": "Workspace is required"}, status=status.HTTP_200_OK
-                )
-
-            api_token = APIToken.objects.create(
-                label=label, user=request.user, workspace_id=workspace
-            )
-
-            serializer = APITokenSerializer(api_token)
-            # Token will be only vissible while creating
+        if not workspace:
             return Response(
-                {"api_token": serializer.data, "token": api_token.token},
-                status=status.HTTP_201_CREATED,
+                {"error": "Workspace is required"}, status=status.HTTP_200_OK
             )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_token = APIToken.objects.create(
+            label=label, user=request.user, workspace_id=workspace
+        )
+
+        serializer = APITokenSerializer(api_token)
+        # Token will be only vissible while creating
+        return Response(
+            {"api_token": serializer.data, "token": api_token.token},
+            status=status.HTTP_201_CREATED,
+        )
+
 
     def get(self, request):
-        try:
-            api_tokens = APIToken.objects.filter(user=request.user)
-            serializer = APITokenSerializer(api_tokens, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_tokens = APIToken.objects.filter(user=request.user)
+        serializer = APITokenSerializer(api_tokens, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
 
     def delete(self, request, pk):
-        try:
-            api_token = APIToken.objects.get(pk=pk)
-            api_token.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except APIToken.DoesNotExist:
-            return Response(
-                {"error": "Token does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        api_token = APIToken.objects.get(pk=pk)
+        api_token.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
diff --git a/apiserver/plane/api/views/asset.py b/apiserver/plane/api/views/asset.py
index d9b6e502d1d..3f5dcceacbb 100644
--- a/apiserver/plane/api/views/asset.py
+++ b/apiserver/plane/api/views/asset.py
@@ -18,108 +18,58 @@ class FileAssetEndpoint(BaseAPIView):
     """
 
     def get(self, request, workspace_id, asset_key):
-        try:
-            asset_key = str(workspace_id) + "/" + asset_key
-            files = FileAsset.objects.filter(asset=asset_key)
-            if files.exists():
-                serializer = FileAssetSerializer(files, context={"request": request}, many=True)
-                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
-            else:
-                return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        asset_key = str(workspace_id) + "/" + asset_key
+        files = FileAsset.objects.filter(asset=asset_key)
+        if files.exists():
+            serializer = FileAssetSerializer(files, context={"request": request}, many=True)
+            return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+        else:
+            return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
 
 
     def post(self, request, slug):
-        try:
-            serializer = FileAssetSerializer(data=request.data)
-            if serializer.is_valid():
-                # Get the workspace
-                workspace = Workspace.objects.get(slug=slug)
-                serializer.save(workspace_id=workspace.id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Workspace.DoesNotExist:
-            return Response({"error": "Workspace does not exist"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = FileAssetSerializer(data=request.data)
+        if serializer.is_valid():
+            # Get the workspace
+            workspace = Workspace.objects.get(slug=slug)
+            serializer.save(workspace_id=workspace.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
 
     def delete(self, request, workspace_id, asset_key):
-        try:
-            asset_key = str(workspace_id) + "/" + asset_key
-            file_asset = FileAsset.objects.get(asset=asset_key)
-            # Delete the file from storage
-            file_asset.asset.delete(save=False)
-            # Delete the file object
-            file_asset.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except FileAsset.DoesNotExist:
-            return Response(
-                {"error": "File Asset doesn't exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        asset_key = str(workspace_id) + "/" + asset_key
+        file_asset = FileAsset.objects.get(asset=asset_key)
+        # Delete the file from storage
+        file_asset.asset.delete(save=False)
+        # Delete the file object
+        file_asset.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserAssetsEndpoint(BaseAPIView):
     parser_classes = (MultiPartParser, FormParser)
 
     def get(self, request, asset_key):
-        try:
             files = FileAsset.objects.filter(asset=asset_key, created_by=request.user)
             if files.exists():
                 serializer = FileAssetSerializer(files, context={"request": request})
                 return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
             else:
                 return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
     def post(self, request):
-        try:
             serializer = FileAssetSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save()
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+
 
     def delete(self, request, asset_key):
-        try:
             file_asset = FileAsset.objects.get(asset=asset_key, created_by=request.user)
             # Delete the file from storage
             file_asset.asset.delete(save=False)
             # Delete the file object
             file_asset.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
-        except FileAsset.DoesNotExist:
-            return Response(
-                {"error": "File Asset doesn't exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/auth_extended.py b/apiserver/plane/api/views/auth_extended.py
index df3f3aaca83..fbffacff8dc 100644
--- a/apiserver/plane/api/views/auth_extended.py
+++ b/apiserver/plane/api/views/auth_extended.py
@@ -9,7 +9,6 @@
     DjangoUnicodeDecodeError,
 )
 from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
-from django.contrib.sites.shortcuts import get_current_site
 from django.conf import settings
 
 ## Third Party Imports
@@ -56,11 +55,11 @@ def get(self, request):
             return Response(
                 {"email": "Successfully activated"}, status=status.HTTP_200_OK
             )
-        except jwt.ExpiredSignatureError as indentifier:
+        except jwt.ExpiredSignatureError as _indentifier:
             return Response(
                 {"email": "Activation expired"}, status=status.HTTP_400_BAD_REQUEST
             )
-        except jwt.exceptions.DecodeError as indentifier:
+        except jwt.exceptions.DecodeError as _indentifier:
             return Response(
                 {"email": "Invalid token"}, status=status.HTTP_400_BAD_REQUEST
             )
@@ -128,32 +127,25 @@ def post(self, request, uidb64, token):
 
 class ChangePasswordEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            serializer = ChangePasswordSerializer(data=request.data)
-
-            user = User.objects.get(pk=request.user.id)
-            if serializer.is_valid():
-                # Check old password
-                if not user.object.check_password(serializer.data.get("old_password")):
-                    return Response(
-                        {"old_password": ["Wrong password."]},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                # set_password also hashes the password that the user will get
-                self.object.set_password(serializer.data.get("new_password"))
-                self.object.save()
-                response = {
-                    "status": "success",
-                    "code": status.HTTP_200_OK,
-                    "message": "Password updated successfully",
-                }
-
-                return Response(response)
+        serializer = ChangePasswordSerializer(data=request.data)
 
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        user = User.objects.get(pk=request.user.id)
+        if serializer.is_valid():
+            # Check old password
+            if not user.object.check_password(serializer.data.get("old_password")):
+                return Response(
+                    {"old_password": ["Wrong password."]},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # set_password also hashes the password that the user will get
+            self.object.set_password(serializer.data.get("new_password"))
+            self.object.save()
+            response = {
+                "status": "success",
+                "code": status.HTTP_200_OK,
+                "message": "Password updated successfully",
+            }
+
+            return Response(response)
+
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/apiserver/plane/api/views/authentication.py b/apiserver/plane/api/views/authentication.py
index aa8ff451168..eadfeef61bb 100644
--- a/apiserver/plane/api/views/authentication.py
+++ b/apiserver/plane/api/views/authentication.py
@@ -40,228 +40,193 @@ class SignUpEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
-        try:
-            if not settings.ENABLE_SIGNUP:
-                return Response(
-                    {
-                        "error": "New account creation is disabled. Please contact your site administrator"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            email = request.data.get("email", False)
-            password = request.data.get("password", False)
-
-            ## Raise exception if any of the above are missing
-            if not email or not password:
-                return Response(
-                    {"error": "Both email and password are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            email = email.strip().lower()
-
-            try:
-                validate_email(email)
-            except ValidationError as e:
-                return Response(
-                    {"error": "Please provide a valid email address."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Check if the user already exists
-            if User.objects.filter(email=email).exists():
-                return Response(
-                    {"error": "User with this email already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        if not settings.ENABLE_SIGNUP:
+            return Response(
+                {
+                    "error": "New account creation is disabled. Please contact your site administrator"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            user = User.objects.create(email=email, username=uuid.uuid4().hex)
-            user.set_password(password)
+        email = request.data.get("email", False)
+        password = request.data.get("password", False)
 
-            # settings last actives for the user
-            user.last_active = timezone.now()
-            user.last_login_time = timezone.now()
-            user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-            user.token_updated_at = timezone.now()
-            user.save()
+        ## Raise exception if any of the above are missing
+        if not email or not password:
+            return Response(
+                {"error": "Both email and password are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            serialized_user = UserSerializer(user).data
+        email = email.strip().lower()
 
-            access_token, refresh_token = get_tokens_for_user(user)
+        try:
+            validate_email(email)
+        except ValidationError as e:
+            return Response(
+                {"error": "Please provide a valid email address."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            data = {
-                "access_token": access_token,
-                "refresh_token": refresh_token,
-                "user": serialized_user,
-            }
+        # Check if the user already exists
+        if User.objects.filter(email=email).exists():
+            return Response(
+                {"error": "User with this email already exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            # Send Analytics
-            if settings.ANALYTICS_BASE_API:
-                _ = requests.post(
-                    settings.ANALYTICS_BASE_API,
-                    headers={
-                        "Content-Type": "application/json",
-                        "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+        user = User.objects.create(email=email, username=uuid.uuid4().hex)
+        user.set_password(password)
+
+        # settings last actives for the user
+        user.last_active = timezone.now()
+        user.last_login_time = timezone.now()
+        user.last_login_ip = request.META.get("REMOTE_ADDR")
+        user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+        user.token_updated_at = timezone.now()
+        user.save()
+
+        access_token, refresh_token = get_tokens_for_user(user)
+
+        data = {
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+        }
+
+        # Send Analytics
+        if settings.ANALYTICS_BASE_API:
+            _ = requests.post(
+                settings.ANALYTICS_BASE_API,
+                headers={
+                    "Content-Type": "application/json",
+                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                },
+                json={
+                    "event_id": uuid.uuid4().hex,
+                    "event_data": {
+                        "medium": "email",
                     },
-                    json={
-                        "event_id": uuid.uuid4().hex,
-                        "event_data": {
-                            "medium": "email",
-                        },
-                        "user": {"email": email, "id": str(user.id)},
-                        "device_ctx": {
-                            "ip": request.META.get("REMOTE_ADDR"),
-                            "user_agent": request.META.get("HTTP_USER_AGENT"),
-                        },
-                        "event_type": "SIGN_UP",
+                    "user": {"email": email, "id": str(user.id)},
+                    "device_ctx": {
+                        "ip": request.META.get("REMOTE_ADDR"),
+                        "user_agent": request.META.get("HTTP_USER_AGENT"),
                     },
-                )
-
-            return Response(data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                    "event_type": "SIGN_UP",
+                },
             )
 
+        return Response(data, status=status.HTTP_200_OK)
+
 
 class SignInEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
-        try:
-            email = request.data.get("email", False)
-            password = request.data.get("password", False)
+        email = request.data.get("email", False)
+        password = request.data.get("password", False)
 
-            ## Raise exception if any of the above are missing
-            if not email or not password:
-                return Response(
-                    {"error": "Both email and password are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        ## Raise exception if any of the above are missing
+        if not email or not password:
+            return Response(
+                {"error": "Both email and password are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            email = email.strip().lower()
+        email = email.strip().lower()
 
-            try:
-                validate_email(email)
-            except ValidationError as e:
-                return Response(
-                    {"error": "Please provide a valid email address."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        try:
+            validate_email(email)
+        except ValidationError as e:
+            return Response(
+                {"error": "Please provide a valid email address."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            user = User.objects.filter(email=email).first()
+        user = User.objects.filter(email=email).first()
 
-            if user is None:
-                return Response(
-                    {
-                        "error": "Sorry, we could not find a user with the provided credentials. Please try again."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
+        if user is None:
+            return Response(
+                {
+                    "error": "Sorry, we could not find a user with the provided credentials. Please try again."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
 
-            # Sign up Process
-            if not user.check_password(password):
-                return Response(
-                    {
-                        "error": "Sorry, we could not find a user with the provided credentials. Please try again."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
-            if not user.is_active:
-                return Response(
-                    {
-                        "error": "Your account has been deactivated. Please contact your site administrator."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
+        # Sign up Process
+        if not user.check_password(password):
+            return Response(
+                {
+                    "error": "Sorry, we could not find a user with the provided credentials. Please try again."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
+        if not user.is_active:
+            return Response(
+                {
+                    "error": "Your account has been deactivated. Please contact your site administrator."
+                },
+                status=status.HTTP_403_FORBIDDEN,
+            )
 
-            serialized_user = UserSerializer(user).data
-
-            # settings last active for the user
-            user.last_active = timezone.now()
-            user.last_login_time = timezone.now()
-            user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-            user.token_updated_at = timezone.now()
-            user.save()
-
-            access_token, refresh_token = get_tokens_for_user(user)
-            # Send Analytics
-            if settings.ANALYTICS_BASE_API:
-                _ = requests.post(
-                    settings.ANALYTICS_BASE_API,
-                    headers={
-                        "Content-Type": "application/json",
-                        "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+        # settings last active for the user
+        user.last_active = timezone.now()
+        user.last_login_time = timezone.now()
+        user.last_login_ip = request.META.get("REMOTE_ADDR")
+        user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+        user.token_updated_at = timezone.now()
+        user.save()
+
+        access_token, refresh_token = get_tokens_for_user(user)
+        # Send Analytics
+        if settings.ANALYTICS_BASE_API:
+            _ = requests.post(
+                settings.ANALYTICS_BASE_API,
+                headers={
+                    "Content-Type": "application/json",
+                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                },
+                json={
+                    "event_id": uuid.uuid4().hex,
+                    "event_data": {
+                        "medium": "email",
                     },
-                    json={
-                        "event_id": uuid.uuid4().hex,
-                        "event_data": {
-                            "medium": "email",
-                        },
-                        "user": {"email": email, "id": str(user.id)},
-                        "device_ctx": {
-                            "ip": request.META.get("REMOTE_ADDR"),
-                            "user_agent": request.META.get("HTTP_USER_AGENT"),
-                        },
-                        "event_type": "SIGN_IN",
+                    "user": {"email": email, "id": str(user.id)},
+                    "device_ctx": {
+                        "ip": request.META.get("REMOTE_ADDR"),
+                        "user_agent": request.META.get("HTTP_USER_AGENT"),
                     },
-                )
-            data = {
-                "access_token": access_token,
-                "refresh_token": refresh_token,
-                "user": serialized_user,
-            }
-
-            return Response(data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
+                    "event_type": "SIGN_IN",
                 },
-                status=status.HTTP_400_BAD_REQUEST,
             )
+        data = {
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+        }
+
+        return Response(data, status=status.HTTP_200_OK)
 
 
 class SignOutEndpoint(BaseAPIView):
     def post(self, request):
-        try:
-            refresh_token = request.data.get("refresh_token", False)
+        refresh_token = request.data.get("refresh_token", False)
 
-            if not refresh_token:
-                capture_message("No refresh token provided")
-                return Response(
-                    {
-                        "error": "Something went wrong. Please try again later or contact the support team."
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        if not refresh_token:
+            capture_message("No refresh token provided")
+            return Response(
+                {"error": "No refresh token provided"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            user = User.objects.get(pk=request.user.id)
+        user = User.objects.get(pk=request.user.id)
 
-            user.last_logout_time = timezone.now()
-            user.last_logout_ip = request.META.get("REMOTE_ADDR")
+        user.last_logout_time = timezone.now()
+        user.last_logout_ip = request.META.get("REMOTE_ADDR")
 
-            user.save()
+        user.save()
 
-            token = RefreshToken(refresh_token)
-            token.blacklist()
-            return Response({"message": "success"}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        token = RefreshToken(refresh_token)
+        token.blacklist()
+        return Response({"message": "success"}, status=status.HTTP_200_OK)
 
 
 class MagicSignInGenerateEndpoint(BaseAPIView):
@@ -270,74 +235,62 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
-        try:
-            email = request.data.get("email", False)
+        email = request.data.get("email", False)
 
-            if not email:
-                return Response(
-                    {"error": "Please provide a valid email address"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        if not email:
+            return Response(
+                {"error": "Please provide a valid email address"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            # Clean up
-            email = email.strip().lower()
-            validate_email(email)
+        # Clean up
+        email = email.strip().lower()
+        validate_email(email)
 
-            ## Generate a random token
-            token = (
-                "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-                + "-"
-                + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-                + "-"
-                + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
-            )
+        ## Generate a random token
+        token = (
+            "".join(random.choices(string.ascii_lowercase, k=4))
+            + "-"
+            + "".join(random.choices(string.ascii_lowercase, k=4))
+            + "-"
+            + "".join(random.choices(string.ascii_lowercase, k=4))
+        )
 
-            ri = redis_instance()
+        ri = redis_instance()
 
-            key = "magic_" + str(email)
+        key = "magic_" + str(email)
 
-            # Check if the key already exists in python
-            if ri.exists(key):
-                data = json.loads(ri.get(key))
+        # Check if the key already exists in python
+        if ri.exists(key):
+            data = json.loads(ri.get(key))
 
-                current_attempt = data["current_attempt"] + 1
+            current_attempt = data["current_attempt"] + 1
 
-                if data["current_attempt"] > 2:
-                    return Response(
-                        {"error": "Max attempts exhausted. Please try again later."},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
+            if data["current_attempt"] > 2:
+                return Response(
+                    {"error": "Max attempts exhausted. Please try again later."},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
 
-                value = {
-                    "current_attempt": current_attempt,
-                    "email": email,
-                    "token": token,
-                }
-                expiry = 600
+            value = {
+                "current_attempt": current_attempt,
+                "email": email,
+                "token": token,
+            }
+            expiry = 600
 
-                ri.set(key, json.dumps(value), ex=expiry)
+            ri.set(key, json.dumps(value), ex=expiry)
 
-            else:
-                value = {"current_attempt": 0, "email": email, "token": token}
-                expiry = 600
+        else:
+            value = {"current_attempt": 0, "email": email, "token": token}
+            expiry = 600
 
-                ri.set(key, json.dumps(value), ex=expiry)
+            ri.set(key, json.dumps(value), ex=expiry)
 
-            current_site = settings.WEB_URL
-            magic_link.delay(email, key, token, current_site)
+        current_site = settings.WEB_URL
+        magic_link.delay(email, key, token, current_site)
 
-            return Response({"key": key}, status=status.HTTP_200_OK)
-        except ValidationError:
-            return Response(
-                {"error": "Please provide a valid email address."},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response({"key": key}, status=status.HTTP_200_OK)
 
 
 class MagicSignInEndpoint(BaseAPIView):
@@ -346,113 +299,99 @@ class MagicSignInEndpoint(BaseAPIView):
     ]
 
     def post(self, request):
-        try:
-            user_token = request.data.get("token", "").strip()
-            key = request.data.get("key", False).strip().lower()
-
-            if not key or user_token == "":
-                return Response(
-                    {"error": "User token and key are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        user_token = request.data.get("token", "").strip()
+        key = request.data.get("key", False).strip().lower()
 
-            ri = redis_instance()
-
-            if ri.exists(key):
-                data = json.loads(ri.get(key))
-
-                token = data["token"]
-                email = data["email"]
+        if not key or user_token == "":
+            return Response(
+                {"error": "User token and key are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-                if str(token) == str(user_token):
-                    if User.objects.filter(email=email).exists():
-                        user = User.objects.get(email=email)
-                        # Send event to Jitsu for tracking
-                        if settings.ANALYTICS_BASE_API:
-                            _ = requests.post(
-                                settings.ANALYTICS_BASE_API,
-                                headers={
-                                    "Content-Type": "application/json",
-                                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+        ri = redis_instance()
+
+        if ri.exists(key):
+            data = json.loads(ri.get(key))
+
+            token = data["token"]
+            email = data["email"]
+
+            if str(token) == str(user_token):
+                if User.objects.filter(email=email).exists():
+                    user = User.objects.get(email=email)
+                    # Send event to Jitsu for tracking
+                    if settings.ANALYTICS_BASE_API:
+                        _ = requests.post(
+                            settings.ANALYTICS_BASE_API,
+                            headers={
+                                "Content-Type": "application/json",
+                                "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                            },
+                            json={
+                                "event_id": uuid.uuid4().hex,
+                                "event_data": {
+                                    "medium": "code",
                                 },
-                                json={
-                                    "event_id": uuid.uuid4().hex,
-                                    "event_data": {
-                                        "medium": "code",
-                                    },
-                                    "user": {"email": email, "id": str(user.id)},
-                                    "device_ctx": {
-                                        "ip": request.META.get("REMOTE_ADDR"),
-                                        "user_agent": request.META.get(
-                                            "HTTP_USER_AGENT"
-                                        ),
-                                    },
-                                    "event_type": "SIGN_IN",
+                                "user": {"email": email, "id": str(user.id)},
+                                "device_ctx": {
+                                    "ip": request.META.get("REMOTE_ADDR"),
+                                    "user_agent": request.META.get("HTTP_USER_AGENT"),
                                 },
-                            )
-                    else:
-                        user = User.objects.create(
-                            email=email,
-                            username=uuid.uuid4().hex,
-                            password=make_password(uuid.uuid4().hex),
-                            is_password_autoset=True,
+                                "event_type": "SIGN_IN",
+                            },
                         )
-                        # Send event to Jitsu for tracking
-                        if settings.ANALYTICS_BASE_API:
-                            _ = requests.post(
-                                settings.ANALYTICS_BASE_API,
-                                headers={
-                                    "Content-Type": "application/json",
-                                    "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                else:
+                    user = User.objects.create(
+                        email=email,
+                        username=uuid.uuid4().hex,
+                        password=make_password(uuid.uuid4().hex),
+                        is_password_autoset=True,
+                    )
+                    # Send event to Jitsu for tracking
+                    if settings.ANALYTICS_BASE_API:
+                        _ = requests.post(
+                            settings.ANALYTICS_BASE_API,
+                            headers={
+                                "Content-Type": "application/json",
+                                "X-Auth-Token": settings.ANALYTICS_SECRET_KEY,
+                            },
+                            json={
+                                "event_id": uuid.uuid4().hex,
+                                "event_data": {
+                                    "medium": "code",
                                 },
-                                json={
-                                    "event_id": uuid.uuid4().hex,
-                                    "event_data": {
-                                        "medium": "code",
-                                    },
-                                    "user": {"email": email, "id": str(user.id)},
-                                    "device_ctx": {
-                                        "ip": request.META.get("REMOTE_ADDR"),
-                                        "user_agent": request.META.get(
-                                            "HTTP_USER_AGENT"
-                                        ),
-                                    },
-                                    "event_type": "SIGN_UP",
+                                "user": {"email": email, "id": str(user.id)},
+                                "device_ctx": {
+                                    "ip": request.META.get("REMOTE_ADDR"),
+                                    "user_agent": request.META.get("HTTP_USER_AGENT"),
                                 },
-                            )
-
-                    user.last_active = timezone.now()
-                    user.last_login_time = timezone.now()
-                    user.last_login_ip = request.META.get("REMOTE_ADDR")
-                    user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
-                    user.token_updated_at = timezone.now()
-                    user.save()
-                    serialized_user = UserSerializer(user).data
-
-                    access_token, refresh_token = get_tokens_for_user(user)
-                    data = {
-                        "access_token": access_token,
-                        "refresh_token": refresh_token,
-                        "user": serialized_user,
-                    }
+                                "event_type": "SIGN_UP",
+                            },
+                        )
 
-                    return Response(data, status=status.HTTP_200_OK)
+                user.last_active = timezone.now()
+                user.last_login_time = timezone.now()
+                user.last_login_ip = request.META.get("REMOTE_ADDR")
+                user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
+                user.token_updated_at = timezone.now()
+                user.save()
+
+                access_token, refresh_token = get_tokens_for_user(user)
+                data = {
+                    "access_token": access_token,
+                    "refresh_token": refresh_token,
+                }
 
-                else:
-                    return Response(
-                        {"error": "Your login code was incorrect. Please try again."},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
+                return Response(data, status=status.HTTP_200_OK)
 
             else:
                 return Response(
-                    {"error": "The magic code/link has expired please try again"},
+                    {"error": "Your login code was incorrect. Please try again."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        except Exception as e:
-            capture_exception(e)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "The magic code/link has expired please try again"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index 60b0ec0c62c..7ab660e8142 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -5,10 +5,14 @@
 from django.urls import resolve
 from django.conf import settings
 from django.utils import timezone
-# Third part imports
+from django.db import IntegrityError
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
 
+# Third part imports
+from rest_framework import status
 from rest_framework import status
 from rest_framework.viewsets import ModelViewSet
+from rest_framework.response import Response
 from rest_framework.exceptions import APIException
 from rest_framework.views import APIView
 from rest_framework.filters import SearchFilter
@@ -33,8 +37,6 @@ def initial(self, request, *args, **kwargs):
             timezone.deactivate()
 
 
-
-
 class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
 
     model = None
@@ -58,17 +60,50 @@ def get_queryset(self):
         except Exception as e:
             capture_exception(e)
             raise APIException("Please check the view", status.HTTP_400_BAD_REQUEST)
+        
+    def handle_exception(self, exc):
+        """
+        Handle any exception that occurs, by returning an appropriate response,
+        or re-raising the error.
+        """
+        try:
+            response = super().handle_exception(exc)
+            return response
+        except Exception as e:
+            if isinstance(e, IntegrityError):
+                return Response({"error": "The payload is not valid"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ValidationError):
+                return Response({"error": "Please provide valid detail"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ObjectDoesNotExist):
+                model_name = str(exc).split(" matching query does not exist.")[0]
+                return Response({"error": f"{model_name} does not exist."}, status=status.HTTP_404_NOT_FOUND)
+            
+            if isinstance(e, KeyError):
+                capture_exception(e)
+                return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            print(e) if settings.DEBUG else print("Server Error")
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
 
     def dispatch(self, request, *args, **kwargs):
-        response = super().dispatch(request, *args, **kwargs)
+        try:
+            response = super().dispatch(request, *args, **kwargs)
 
-        if settings.DEBUG:
-            from django.db import connection
+            if settings.DEBUG:
+                from django.db import connection
 
-            print(
-                f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
-            )
-        return response
+                print(
+                    f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
+                )
+            return response
+
+        except Exception as exc:
+            response = self.handle_exception(exc)
+            return exc
 
     @property
     def workspace_slug(self):
@@ -104,16 +139,49 @@ def filter_queryset(self, queryset):
             queryset = backend().filter_queryset(self.request, queryset, self)
         return queryset
 
+
+    def handle_exception(self, exc):
+        """
+        Handle any exception that occurs, by returning an appropriate response,
+        or re-raising the error.
+        """
+        try:
+            response = super().handle_exception(exc)
+            return response
+        except Exception as e:
+            if isinstance(e, IntegrityError):
+                return Response({"error": "The payload is not valid"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ValidationError):
+                return Response({"error": "Please provide valid detail"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            if isinstance(e, ObjectDoesNotExist):
+                model_name = str(exc).split(" matching query does not exist.")[0]
+                return Response({"error": f"{model_name} does not exist."}, status=status.HTTP_404_NOT_FOUND)
+            
+            if isinstance(e, KeyError):
+                return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
+            
+            print(e) if settings.DEBUG else print("Server Error")
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
+
+
     def dispatch(self, request, *args, **kwargs):
-        response = super().dispatch(request, *args, **kwargs)
+        try:
+            response = super().dispatch(request, *args, **kwargs)
+
+            if settings.DEBUG:
+                from django.db import connection
 
-        if settings.DEBUG:
-            from django.db import connection
+                print(
+                    f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
+                )
+            return response
 
-            print(
-                f"{request.method} - {request.get_full_path()} of Queries: {len(connection.queries)}"
-            )
-        return response
+        except Exception as exc:
+            response = self.handle_exception(exc)
+            return exc
 
     @property
     def workspace_slug(self):
diff --git a/apiserver/plane/api/views/config.py b/apiserver/plane/api/views/config.py
new file mode 100644
index 00000000000..687cb211c4d
--- /dev/null
+++ b/apiserver/plane/api/views/config.py
@@ -0,0 +1,34 @@
+# Python imports
+import os
+
+# Django imports
+from django.conf import settings
+
+# Third party imports
+from rest_framework.permissions import AllowAny
+from rest_framework import status
+from rest_framework.response import Response
+from sentry_sdk import capture_exception
+
+# Module imports
+from .base import BaseAPIView
+
+
+class ConfigurationEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request):
+        data = {}
+        data["google"] = os.environ.get("GOOGLE_CLIENT_ID", None)
+        data["github"] = os.environ.get("GITHUB_CLIENT_ID", None)
+        data["github_app_name"] = os.environ.get("GITHUB_APP_NAME", None)
+        data["magic_login"] = (
+            bool(settings.EMAIL_HOST_USER) and bool(settings.EMAIL_HOST_PASSWORD)
+        ) and os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "0") == "1"
+        data["email_password_login"] = (
+            os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
+        )
+        data["slack"] = os.environ.get("SLACK_CLIENT_ID", None)
+        return Response(data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index a3d89fa8182..e7d247872ed 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -2,9 +2,7 @@
 import json
 
 # Django imports
-from django.db import IntegrityError
 from django.db.models import (
-    OuterRef,
     Func,
     F,
     Q,
@@ -62,28 +60,6 @@ def perform_create(self, serializer):
             project_id=self.kwargs.get("project_id"), owned_by=self.request.user
         )
 
-    def perform_destroy(self, instance):
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
-        issue_activity.delay(
-            type="cycle.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "cycle_id": str(self.kwargs.get("pk")),
-                    "issues": [str(issue_id) for issue_id in cycle_issues],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-        )
-
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         subquery = CycleFavorite.objects.filter(
             user=self.request.user,
@@ -101,48 +77,84 @@ def get_queryset(self):
             .select_related("workspace")
             .select_related("owned_by")
             .annotate(is_favorite=Exists(subquery))
-            .annotate(total_issues=Count("issue_cycle"))
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
             .annotate(
                 completed_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .prefetch_related(
@@ -162,179 +174,189 @@ def get_queryset(self):
         )
 
     def list(self, request, slug, project_id):
-        try:
-            queryset = self.get_queryset()
-            cycle_view = request.GET.get("cycle_view", "all")
-            order_by = request.GET.get("order_by", "sort_order")
+        queryset = self.get_queryset()
+        cycle_view = request.GET.get("cycle_view", "all")
+        order_by = request.GET.get("order_by", "sort_order")
 
-            queryset = queryset.order_by(order_by)
-
-            # All Cycles
-            if cycle_view == "all":
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+        queryset = queryset.order_by(order_by)
 
-            # Current Cycle
-            if cycle_view == "current":
-                queryset = queryset.filter(
-                    start_date__lte=timezone.now(),
-                    end_date__gte=timezone.now(),
-                )
+        # Current Cycle
+        if cycle_view == "current":
+            queryset = queryset.filter(
+                start_date__lte=timezone.now(),
+                end_date__gte=timezone.now(),
+            )
 
-                data = CycleSerializer(queryset, many=True).data
+            data = CycleSerializer(queryset, many=True).data
 
-                if len(data):
-                    assignee_distribution = (
-                        Issue.objects.filter(
-                            issue_cycle__cycle_id=data[0]["id"],
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-                        .annotate(first_name=F("assignees__first_name"))
-                        .annotate(last_name=F("assignees__last_name"))
-                        .annotate(assignee_id=F("assignees__id"))
-                        .annotate(avatar=F("assignees__avatar"))
-                        .values("first_name", "last_name", "assignee_id", "avatar")
-                        .annotate(total_issues=Count("assignee_id"))
-                        .annotate(
-                            completed_issues=Count(
-                                "assignee_id",
-                                filter=Q(completed_at__isnull=False),
-                            )
+            if len(data):
+                assignee_distribution = (
+                    Issue.objects.filter(
+                        issue_cycle__cycle_id=data[0]["id"],
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    .annotate(display_name=F("assignees__display_name"))
+                    .annotate(assignee_id=F("assignees__id"))
+                    .annotate(avatar=F("assignees__avatar"))
+                    .values("display_name", "assignee_id", "avatar")
+                    .annotate(
+                        total_issues=Count(
+                            "assignee_id",
+                            filter=Q(archived_at__isnull=True, is_draft=False),
+                        ),
+                    )
+                    .annotate(
+                        completed_issues=Count(
+                            "assignee_id",
+                            filter=Q(
+                                completed_at__isnull=False,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
                         )
-                        .annotate(
-                            pending_issues=Count(
-                                "assignee_id",
-                                filter=Q(completed_at__isnull=True),
-                            )
+                    )
+                    .annotate(
+                        pending_issues=Count(
+                            "assignee_id",
+                            filter=Q(
+                                completed_at__isnull=True,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
                         )
-                        .order_by("first_name", "last_name")
                     )
+                    .order_by("display_name")
+                )
 
-                    label_distribution = (
-                        Issue.objects.filter(
-                            issue_cycle__cycle_id=data[0]["id"],
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-                        .annotate(label_name=F("labels__name"))
-                        .annotate(color=F("labels__color"))
-                        .annotate(label_id=F("labels__id"))
-                        .values("label_name", "color", "label_id")
-                        .annotate(total_issues=Count("label_id"))
-                        .annotate(
-                            completed_issues=Count(
-                                "label_id",
-                                filter=Q(completed_at__isnull=False),
-                            )
+                label_distribution = (
+                    Issue.objects.filter(
+                        issue_cycle__cycle_id=data[0]["id"],
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    .annotate(label_name=F("labels__name"))
+                    .annotate(color=F("labels__color"))
+                    .annotate(label_id=F("labels__id"))
+                    .values("label_name", "color", "label_id")
+                    .annotate(
+                        total_issues=Count(
+                            "label_id",
+                            filter=Q(archived_at__isnull=True, is_draft=False),
                         )
-                        .annotate(
-                            pending_issues=Count(
-                                "label_id",
-                                filter=Q(completed_at__isnull=True),
-                            )
+                    )
+                    .annotate(
+                        completed_issues=Count(
+                            "label_id",
+                            filter=Q(
+                                completed_at__isnull=False,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
                         )
-                        .order_by("label_name")
                     )
-                    data[0]["distribution"] = {
-                        "assignees": assignee_distribution,
-                        "labels": label_distribution,
-                        "completion_chart": {},
-                    }
-                    if data[0]["start_date"] and data[0]["end_date"]:
-                        data[0]["distribution"]["completion_chart"] = burndown_plot(
-                            queryset=queryset.first(),
-                            slug=slug,
-                            project_id=project_id,
-                            cycle_id=data[0]["id"],
+                    .annotate(
+                        pending_issues=Count(
+                            "label_id",
+                            filter=Q(
+                                completed_at__isnull=True,
+                                archived_at__isnull=True,
+                                is_draft=False,
+                            ),
                         )
-
-                return Response(data, status=status.HTTP_200_OK)
-
-            # Upcoming Cycles
-            if cycle_view == "upcoming":
-                queryset = queryset.filter(start_date__gt=timezone.now())
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+                    )
+                    .order_by("label_name")
                 )
+                data[0]["distribution"] = {
+                    "assignees": assignee_distribution,
+                    "labels": label_distribution,
+                    "completion_chart": {},
+                }
+                if data[0]["start_date"] and data[0]["end_date"]:
+                    data[0]["distribution"]["completion_chart"] = burndown_plot(
+                        queryset=queryset.first(),
+                        slug=slug,
+                        project_id=project_id,
+                        cycle_id=data[0]["id"],
+                    )
 
-            # Completed Cycles
-            if cycle_view == "completed":
-                queryset = queryset.filter(end_date__lt=timezone.now())
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+            return Response(data, status=status.HTTP_200_OK)
 
-            # Draft Cycles
-            if cycle_view == "draft":
-                queryset = queryset.filter(
-                    end_date=None,
-                    start_date=None,
-                )
+        # Upcoming Cycles
+        if cycle_view == "upcoming":
+            queryset = queryset.filter(start_date__gt=timezone.now())
+            return Response(
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+            )
 
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+        # Completed Cycles
+        if cycle_view == "completed":
+            queryset = queryset.filter(end_date__lt=timezone.now())
+            return Response(
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+            )
 
-            # Incomplete Cycles
-            if cycle_view == "incomplete":
-                queryset = queryset.filter(
-                    Q(end_date__gte=timezone.now().date()) | Q(end_date__isnull=True),
-                )
-                return Response(
-                    CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-                )
+        # Draft Cycles
+        if cycle_view == "draft":
+            queryset = queryset.filter(
+                end_date=None,
+                start_date=None,
+            )
 
             return Response(
-                {"error": "No matching view found"}, status=status.HTTP_400_BAD_REQUEST
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
             )
 
-        except Exception as e:
-            capture_exception(e)
+        # Incomplete Cycles
+        if cycle_view == "incomplete":
+            queryset = queryset.filter(
+                Q(end_date__gte=timezone.now().date()) | Q(end_date__isnull=True),
+            )
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
             )
 
+        # If no matching view is found return all cycles
+        return Response(
+            CycleSerializer(queryset, many=True).data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id):
-        try:
-            if (
-                request.data.get("start_date", None) is None
-                and request.data.get("end_date", None) is None
-            ) or (
-                request.data.get("start_date", None) is not None
-                and request.data.get("end_date", None) is not None
-            ):
-                serializer = CycleSerializer(data=request.data)
-                if serializer.is_valid():
-                    serializer.save(
-                        project_id=project_id,
-                        owned_by=request.user,
-                    )
-                    return Response(serializer.data, status=status.HTTP_201_CREATED)
-                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-            else:
-                return Response(
-                    {
-                        "error": "Both start date and end date are either required or are to be null"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
+        if (
+            request.data.get("start_date", None) is None
+            and request.data.get("end_date", None) is None
+        ) or (
+            request.data.get("start_date", None) is not None
+            and request.data.get("end_date", None) is not None
+        ):
+            serializer = CycleSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    project_id=project_id,
+                    owned_by=request.user,
                 )
-        except Exception as e:
-            capture_exception(e)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "Both start date and end date are either required or are to be null"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     def partial_update(self, request, slug, project_id, pk):
-        try:
-            cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+
+        request_data = request.data
 
-            if cycle.end_date is not None and cycle.end_date < timezone.now().date():
+        if cycle.end_date is not None and cycle.end_date < timezone.now().date():
+            if "sort_order" in request_data:
+                # Can only change sort order
+                request_data = {
+                    "sort_order": request_data.get("sort_order", cycle.sort_order)
+                }
+            else:
                 return Response(
                     {
                         "error": "The Cycle has already been completed so it cannot be edited"
@@ -342,108 +364,138 @@ def partial_update(self, request, slug, project_id, pk):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            serializer = CycleWriteSerializer(cycle, 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 Cycle.DoesNotExist:
-            return Response(
-                {"error": "Cycle does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = CycleWriteSerializer(cycle, 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)
 
     def retrieve(self, request, slug, project_id, pk):
-        try:
-            queryset = self.get_queryset().get(pk=pk)
-
-            # Assignee Distribution
-            assignee_distribution = (
-                Issue.objects.filter(
-                    issue_cycle__cycle_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(first_name=F("assignees__first_name"))
-                .annotate(last_name=F("assignees__last_name"))
-                .annotate(assignee_id=F("assignees__id"))
-                .annotate(avatar=F("assignees__avatar"))
-                .annotate(display_name=F("assignees__display_name"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
-                .annotate(total_issues=Count("assignee_id"))
-                .annotate(
-                    completed_issues=Count(
-                        "assignee_id",
-                        filter=Q(completed_at__isnull=False),
-                    )
+        queryset = self.get_queryset().get(pk=pk)
+
+        # Assignee Distribution
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(first_name=F("assignees__first_name"))
+            .annotate(last_name=F("assignees__last_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(avatar=F("assignees__avatar"))
+            .annotate(display_name=F("assignees__display_name"))
+            .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+            .annotate(
+                total_issues=Count(
+                    "assignee_id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .annotate(
-                    pending_issues=Count(
-                        "assignee_id",
-                        filter=Q(completed_at__isnull=True),
-                    )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .order_by("first_name", "last_name")
             )
+            .order_by("first_name", "last_name")
+        )
 
-            # Label Distribution
-            label_distribution = (
-                Issue.objects.filter(
-                    issue_cycle__cycle_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(label_name=F("labels__name"))
-                .annotate(color=F("labels__color"))
-                .annotate(label_id=F("labels__id"))
-                .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
-                .annotate(
-                    completed_issues=Count(
-                        "label_id",
-                        filter=Q(completed_at__isnull=False),
-                    )
+        # Label Distribution
+        label_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "label_id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .annotate(
-                    pending_issues=Count(
-                        "label_id",
-                        filter=Q(completed_at__isnull=True),
-                    )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .order_by("label_name")
             )
+            .order_by("label_name")
+        )
 
-            data = CycleSerializer(queryset).data
-            data["distribution"] = {
-                "assignees": assignee_distribution,
-                "labels": label_distribution,
-                "completion_chart": {},
-            }
+        data = CycleSerializer(queryset).data
+        data["distribution"] = {
+            "assignees": assignee_distribution,
+            "labels": label_distribution,
+            "completion_chart": {},
+        }
 
-            if queryset.start_date and queryset.end_date:
-                data["distribution"]["completion_chart"] = burndown_plot(
-                    queryset=queryset, slug=slug, project_id=project_id, cycle_id=pk
-                )
-
-            return Response(
-                data,
-                status=status.HTTP_200_OK,
-            )
-        except Cycle.DoesNotExist:
-            return Response(
-                {"error": "Cycle Does not exists"}, status=status.HTTP_400_BAD_REQUEST
+        if queryset.start_date and queryset.end_date:
+            data["distribution"]["completion_chart"] = burndown_plot(
+                queryset=queryset, slug=slug, project_id=project_id, cycle_id=pk
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+
+        return Response(
+            data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, pk):
+        cycle_issues = list(
+            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
+                "issue", flat=True
             )
+        )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        # Delete the cycle
+        cycle.delete()
+        issue_activity.delay(
+            type="cycle.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "cycle_id": str(pk),
+                    "issues": [str(issue_id) for issue_id in cycle_issues],
+                }
+            ),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CycleIssueViewSet(BaseViewSet):
@@ -465,22 +517,6 @@ def perform_create(self, serializer):
             cycle_id=self.kwargs.get("cycle_id"),
         )
 
-    def perform_destroy(self, instance):
-        issue_activity.delay(
-            type="cycle.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "cycle_id": str(self.kwargs.get("cycle_id")),
-                    "issues": [str(instance.issue_id)],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-        )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -505,165 +541,174 @@ def get_queryset(self):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id, cycle_id):
-        try:
-            order_by = request.GET.get("order_by", "created_at")
-            group_by = request.GET.get("group_by", False)
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(bridge_id=F("issue_cycle__id"))
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by)
-                .filter(**filters)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        order_by = request.GET.get("order_by", "created_at")
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+            .annotate(bridge_id=F("issue_cycle__id"))
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by)
+            .filter(**filters)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
-            issues_data = IssueStateSerializer(issues, many=True).data
-
-            if group_by:
-                return Response(
-                    group_results(issues_data, group_by),
-                    status=status.HTTP_200_OK,
-                )
+        issues_data = IssueStateSerializer(issues, many=True).data
 
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+                {"error": "Group by and sub group by cannot be same"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                grouped_results,
+                status=status.HTTP_200_OK,
             )
 
+        return Response(
+            issues_data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id, cycle_id):
-        try:
-            issues = request.data.get("issues", [])
+        issues = request.data.get("issues", [])
 
-            if not len(issues):
-                return Response(
-                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
+        if not len(issues):
+            return Response(
+                {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
+            )
+
+        cycle = Cycle.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=cycle_id
+        )
 
-            cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=cycle_id
+        if cycle.end_date is not None and cycle.end_date < timezone.now().date():
+            return Response(
+                {
+                    "error": "The Cycle has already been completed so no new issues can be added"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            if cycle.end_date is not None and cycle.end_date < timezone.now().date():
-                return Response(
-                    {
-                        "error": "The Cycle has already been completed so no new issues can be added"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
+        # Get all CycleIssues already created
+        cycle_issues = list(CycleIssue.objects.filter(issue_id__in=issues))
+        update_cycle_issue_activity = []
+        record_to_create = []
+        records_to_update = []
+
+        for issue in issues:
+            cycle_issue = [
+                cycle_issue
+                for cycle_issue in cycle_issues
+                if str(cycle_issue.issue_id) in issues
+            ]
+            # Update only when cycle changes
+            if len(cycle_issue):
+                if cycle_issue[0].cycle_id != cycle_id:
+                    update_cycle_issue_activity.append(
+                        {
+                            "old_cycle_id": str(cycle_issue[0].cycle_id),
+                            "new_cycle_id": str(cycle_id),
+                            "issue_id": str(cycle_issue[0].issue_id),
+                        }
+                    )
+                    cycle_issue[0].cycle_id = cycle_id
+                    records_to_update.append(cycle_issue[0])
+            else:
+                record_to_create.append(
+                    CycleIssue(
+                        project_id=project_id,
+                        workspace=cycle.workspace,
+                        created_by=request.user,
+                        updated_by=request.user,
+                        cycle=cycle,
+                        issue_id=issue,
+                    )
                 )
 
-            # Get all CycleIssues already created
-            cycle_issues = list(CycleIssue.objects.filter(issue_id__in=issues))
-            update_cycle_issue_activity = []
-            record_to_create = []
-            records_to_update = []
-
-            for issue in issues:
-                cycle_issue = [
-                    cycle_issue
-                    for cycle_issue in cycle_issues
-                    if str(cycle_issue.issue_id) in issues
-                ]
-                # Update only when cycle changes
-                if len(cycle_issue):
-                    if cycle_issue[0].cycle_id != cycle_id:
-                        update_cycle_issue_activity.append(
-                            {
-                                "old_cycle_id": str(cycle_issue[0].cycle_id),
-                                "new_cycle_id": str(cycle_id),
-                                "issue_id": str(cycle_issue[0].issue_id),
-                            }
-                        )
-                        cycle_issue[0].cycle_id = cycle_id
-                        records_to_update.append(cycle_issue[0])
-                else:
-                    record_to_create.append(
-                        CycleIssue(
-                            project_id=project_id,
-                            workspace=cycle.workspace,
-                            created_by=request.user,
-                            updated_by=request.user,
-                            cycle=cycle,
-                            issue_id=issue,
-                        )
-                    )
+        CycleIssue.objects.bulk_create(
+            record_to_create,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+        CycleIssue.objects.bulk_update(
+            records_to_update,
+            ["cycle"],
+            batch_size=10,
+        )
 
-            CycleIssue.objects.bulk_create(
-                record_to_create,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
-            CycleIssue.objects.bulk_update(
-                records_to_update,
-                ["cycle"],
-                batch_size=10,
-            )
-
-            # Capture Issue Activity
-            issue_activity.delay(
-                type="cycle.activity.created",
-                requested_data=json.dumps({"cycles_list": issues}),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "updated_cycle_issues": update_cycle_issue_activity,
-                        "created_cycle_issues": serializers.serialize(
-                            "json", record_to_create
-                        ),
-                    }
-                ),
-            )
+        # Capture Issue Activity
+        issue_activity.delay(
+            type="cycle.activity.created",
+            requested_data=json.dumps({"cycles_list": issues}),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("pk", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "updated_cycle_issues": update_cycle_issue_activity,
+                    "created_cycle_issues": serializers.serialize(
+                        "json", record_to_create
+                    ),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
 
-            # Return all Cycle Issues
-            return Response(
-                CycleIssueSerializer(self.get_queryset(), many=True).data,
-                status=status.HTTP_200_OK,
-            )
+        # Return all Cycle Issues
+        return Response(
+            CycleIssueSerializer(self.get_queryset(), many=True).data,
+            status=status.HTTP_200_OK,
+        )
 
-        except Cycle.DoesNotExist:
-            return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def destroy(self, request, slug, project_id, cycle_id, pk):
+        cycle_issue = CycleIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, cycle_id=cycle_id
+        )
+        issue_id = cycle_issue.issue_id
+        cycle_issue.delete()
+        issue_activity.delay(
+            type="cycle.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "cycle_id": str(self.kwargs.get("cycle_id")),
+                    "issues": [str(issue_id)],
+                }
+            ),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("pk", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CycleDateCheckEndpoint(BaseAPIView):
@@ -672,45 +717,37 @@ class CycleDateCheckEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            start_date = request.data.get("start_date", False)
-            end_date = request.data.get("end_date", False)
-            cycle_id = request.data.get("cycle_id")
-            if not start_date or not end_date:
-                return Response(
-                    {"error": "Start date and end date both are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        start_date = request.data.get("start_date", False)
+        end_date = request.data.get("end_date", False)
+        cycle_id = request.data.get("cycle_id")
+        if not start_date or not end_date:
+            return Response(
+                {"error": "Start date and end date both are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            cycles = Cycle.objects.filter(
-                Q(workspace__slug=slug)
-                & Q(project_id=project_id)
-                & (
-                    Q(start_date__lte=start_date, end_date__gte=start_date)
-                    | Q(start_date__lte=end_date, end_date__gte=end_date)
-                    | Q(start_date__gte=start_date, end_date__lte=end_date)
-                )
-            ).exclude(pk=cycle_id)
+        cycles = Cycle.objects.filter(
+            Q(workspace__slug=slug)
+            & Q(project_id=project_id)
+            & (
+                Q(start_date__lte=start_date, end_date__gte=start_date)
+                | Q(start_date__lte=end_date, end_date__gte=end_date)
+                | Q(start_date__gte=start_date, end_date__lte=end_date)
+            )
+        ).exclude(pk=cycle_id)
 
-            if cycles.exists():
-                return Response(
-                    {
-                        "error": "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
-                        "status": False,
-                    }
-                )
-            else:
-                return Response({"status": True}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if cycles.exists():
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {
+                    "error": "You have a cycle already on the given dates, if you want to create a draft cycle you can do that by removing dates",
+                    "status": False,
+                }
             )
+        else:
+            return Response({"status": True}, status=status.HTTP_200_OK)
 
 
 class CycleFavoriteViewSet(BaseViewSet):
-
     serializer_class = CycleFavoriteSerializer
     model = CycleFavorite
 
@@ -724,52 +761,21 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = CycleFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The cycle is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = CycleFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, cycle_id):
-        try:
-            cycle_favorite = CycleFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                cycle_id=cycle_id,
-            )
-            cycle_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CycleFavorite.DoesNotExist:
-            return Response(
-                {"error": "Cycle is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        cycle_favorite = CycleFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            cycle_id=cycle_id,
+        )
+        cycle_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class TransferCycleIssueEndpoint(BaseAPIView):
@@ -778,55 +784,43 @@ class TransferCycleIssueEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id, cycle_id):
-        try:
-            new_cycle_id = request.data.get("new_cycle_id", False)
-
-            if not new_cycle_id:
-                return Response(
-                    {"error": "New Cycle Id is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        new_cycle_id = request.data.get("new_cycle_id", False)
 
-            new_cycle = Cycle.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=new_cycle_id
+        if not new_cycle_id:
+            return Response(
+                {"error": "New Cycle Id is required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            if (
-                new_cycle.end_date is not None
-                and new_cycle.end_date < timezone.now().date()
-            ):
-                return Response(
-                    {
-                        "error": "The cycle where the issues are transferred is already completed"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        new_cycle = Cycle.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=new_cycle_id
+        )
 
-            cycle_issues = CycleIssue.objects.filter(
-                cycle_id=cycle_id,
-                project_id=project_id,
-                workspace__slug=slug,
-                issue__state__group__in=["backlog", "unstarted", "started"],
+        if (
+            new_cycle.end_date is not None
+            and new_cycle.end_date < timezone.now().date()
+        ):
+            return Response(
+                {
+                    "error": "The cycle where the issues are transferred is already completed"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            updated_cycles = []
-            for cycle_issue in cycle_issues:
-                cycle_issue.cycle_id = new_cycle_id
-                updated_cycles.append(cycle_issue)
+        cycle_issues = CycleIssue.objects.filter(
+            cycle_id=cycle_id,
+            project_id=project_id,
+            workspace__slug=slug,
+            issue__state__group__in=["backlog", "unstarted", "started"],
+        )
 
-            cycle_issues = CycleIssue.objects.bulk_update(
-                updated_cycles, ["cycle_id"], batch_size=100
-            )
+        updated_cycles = []
+        for cycle_issue in cycle_issues:
+            cycle_issue.cycle_id = new_cycle_id
+            updated_cycles.append(cycle_issue)
 
-            return Response({"message": "Success"}, status=status.HTTP_200_OK)
-        except Cycle.DoesNotExist:
-            return Response(
-                {"error": "New Cycle Does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        cycle_issues = CycleIssue.objects.bulk_update(
+            updated_cycles, ["cycle_id"], batch_size=100
+        )
+
+        return Response({"message": "Success"}, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/estimate.py b/apiserver/plane/api/views/estimate.py
index 68de54d7aec..3c2cca4d5af 100644
--- a/apiserver/plane/api/views/estimate.py
+++ b/apiserver/plane/api/views/estimate.py
@@ -1,6 +1,3 @@
-# Django imports
-from django.db import IntegrityError
-
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
@@ -23,7 +20,6 @@ class ProjectEstimatePointEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        try:
             project = Project.objects.get(workspace__slug=slug, pk=project_id)
             if project.estimate_id is not None:
                 estimate_points = EstimatePoint.objects.filter(
@@ -34,12 +30,6 @@ def get(self, request, slug, project_id):
                 serializer = EstimatePointSerializer(estimate_points, many=True)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response([], status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class BulkEstimatePointEndpoint(BaseViewSet):
@@ -50,204 +40,139 @@ class BulkEstimatePointEndpoint(BaseViewSet):
     serializer_class = EstimateSerializer
 
     def list(self, request, slug, project_id):
-        try:
-            estimates = Estimate.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).prefetch_related("points").select_related("workspace", "project")
-            serializer = EstimateReadSerializer(estimates, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimates = Estimate.objects.filter(
+            workspace__slug=slug, project_id=project_id
+        ).prefetch_related("points").select_related("workspace", "project")
+        serializer = EstimateReadSerializer(estimates, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
-        try:
-            if not request.data.get("estimate", False):
-                return Response(
-                    {"error": "Estimate is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_points = request.data.get("estimate_points", [])
-
-            if not len(estimate_points) or len(estimate_points) > 8:
-                return Response(
-                    {"error": "Estimate points are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_serializer = EstimateSerializer(data=request.data.get("estimate"))
-            if not estimate_serializer.is_valid():
-                return Response(
-                    estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
-                )
-            try:
-                estimate = estimate_serializer.save(project_id=project_id)
-            except IntegrityError:
-                return Response(
-                    {"errror": "Estimate with the name already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            estimate_points = EstimatePoint.objects.bulk_create(
-                [
-                    EstimatePoint(
-                        estimate=estimate,
-                        key=estimate_point.get("key", 0),
-                        value=estimate_point.get("value", ""),
-                        description=estimate_point.get("description", ""),
-                        project_id=project_id,
-                        workspace_id=estimate.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for estimate_point in estimate_points
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
+        if not request.data.get("estimate", False):
+            return Response(
+                {"error": "Estimate is required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            estimate_point_serializer = EstimatePointSerializer(
-                estimate_points, many=True
-            )
+        estimate_points = request.data.get("estimate_points", [])
 
+        if not len(estimate_points) or len(estimate_points) > 8:
             return Response(
-                {
-                    "estimate": estimate_serializer.data,
-                    "estimate_points": estimate_point_serializer.data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
-            return Response(
-                {"error": "Estimate does not exist"},
+                {"error": "Estimate points are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        estimate_serializer = EstimateSerializer(data=request.data.get("estimate"))
+        if not estimate_serializer.is_valid():
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+                estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            )
+        estimate = estimate_serializer.save(project_id=project_id)
+        estimate_points = EstimatePoint.objects.bulk_create(
+            [
+                EstimatePoint(
+                    estimate=estimate,
+                    key=estimate_point.get("key", 0),
+                    value=estimate_point.get("value", ""),
+                    description=estimate_point.get("description", ""),
+                    project_id=project_id,
+                    workspace_id=estimate.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for estimate_point in estimate_points
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        estimate_point_serializer = EstimatePointSerializer(
+            estimate_points, many=True
+        )
+
+        return Response(
+            {
+                "estimate": estimate_serializer.data,
+                "estimate_points": estimate_point_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
 
     def retrieve(self, request, slug, project_id, estimate_id):
-        try:
-            estimate = Estimate.objects.get(
-                pk=estimate_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = EstimateReadSerializer(estimate)
-            return Response(
-                serializer.data,
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
+        estimate = Estimate.objects.get(
+            pk=estimate_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = EstimateReadSerializer(estimate)
+        return Response(
+            serializer.data,
+            status=status.HTTP_200_OK,
+        )
+
+    def partial_update(self, request, slug, project_id, estimate_id):
+        if not request.data.get("estimate", False):
             return Response(
-                {"error": "Estimate does not exist"}, status=status.HTTP_400_BAD_REQUEST
+                {"error": "Estimate is required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        if not len(request.data.get("estimate_points", [])):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Estimate points are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def partial_update(self, request, slug, project_id, estimate_id):
-        try:
-            if not request.data.get("estimate", False):
-                return Response(
-                    {"error": "Estimate is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if not len(request.data.get("estimate_points", [])):
-                return Response(
-                    {"error": "Estimate points are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate = Estimate.objects.get(pk=estimate_id)
+        estimate = Estimate.objects.get(pk=estimate_id)
 
-            estimate_serializer = EstimateSerializer(
-                estimate, data=request.data.get("estimate"), partial=True
-            )
-            if not estimate_serializer.is_valid():
-                return Response(
-                    estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
-                )
-            try:
-                estimate = estimate_serializer.save()
-            except IntegrityError:
-                return Response(
-                    {"errror": "Estimate with the name already exists"},
-                    status=status.HTTP_400_BAD_REQUEST,
+        estimate_serializer = EstimateSerializer(
+            estimate, data=request.data.get("estimate"), partial=True
+        )
+        if not estimate_serializer.is_valid():
+            return Response(
+                estimate_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            )
+
+        estimate = estimate_serializer.save()
+
+        estimate_points_data = request.data.get("estimate_points", [])
+
+        estimate_points = EstimatePoint.objects.filter(
+            pk__in=[
+                estimate_point.get("id") for estimate_point in estimate_points_data
+            ],
+            workspace__slug=slug,
+            project_id=project_id,
+            estimate_id=estimate_id,
+        )
+
+        updated_estimate_points = []
+        for estimate_point in estimate_points:
+            # Find the data for that estimate point
+            estimate_point_data = [
+                point
+                for point in estimate_points_data
+                if point.get("id") == str(estimate_point.id)
+            ]
+            if len(estimate_point_data):
+                estimate_point.value = estimate_point_data[0].get(
+                    "value", estimate_point.value
                 )
+                updated_estimate_points.append(estimate_point)
 
-            estimate_points_data = request.data.get("estimate_points", [])
+        EstimatePoint.objects.bulk_update(
+            updated_estimate_points, ["value"], batch_size=10,
+        )
 
-            estimate_points = EstimatePoint.objects.filter(
-                pk__in=[
-                    estimate_point.get("id") for estimate_point in estimate_points_data
-                ],
-                workspace__slug=slug,
-                project_id=project_id,
-                estimate_id=estimate_id,
-            )
-
-            updated_estimate_points = []
-            for estimate_point in estimate_points:
-                # Find the data for that estimate point
-                estimate_point_data = [
-                    point
-                    for point in estimate_points_data
-                    if point.get("id") == str(estimate_point.id)
-                ]
-                if len(estimate_point_data):
-                    estimate_point.value = estimate_point_data[0].get(
-                        "value", estimate_point.value
-                    )
-                    updated_estimate_points.append(estimate_point)
-
-            try:
-                EstimatePoint.objects.bulk_update(
-                    updated_estimate_points, ["value"], batch_size=10,
-                )
-            except IntegrityError as e:
-                return Response(
-                    {"error": "Values need to be unique for each key"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            estimate_point_serializer = EstimatePointSerializer(estimate_points, many=True)
-            return Response(
-                {
-                    "estimate": estimate_serializer.data,
-                    "estimate_points": estimate_point_serializer.data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Estimate.DoesNotExist:
-            return Response(
-                {"error": "Estimate does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimate_point_serializer = EstimatePointSerializer(estimate_points, many=True)
+        return Response(
+            {
+                "estimate": estimate_serializer.data,
+                "estimate_points": estimate_point_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
 
     def destroy(self, request, slug, project_id, estimate_id):
-        try:
-            estimate = Estimate.objects.get(
-                pk=estimate_id, workspace__slug=slug, project_id=project_id
-            )
-            estimate.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        estimate = Estimate.objects.get(
+            pk=estimate_id, workspace__slug=slug, project_id=project_id
+        )
+        estimate.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/exporter.py b/apiserver/plane/api/views/exporter.py
index 7e14aa82f5a..03da8932f06 100644
--- a/apiserver/plane/api/views/exporter.py
+++ b/apiserver/plane/api/views/exporter.py
@@ -20,81 +20,62 @@ class ExportIssuesEndpoint(BaseAPIView):
     serializer_class = ExporterHistorySerializer
 
     def post(self, request, slug):
-        try:
-            # Get the workspace
-            workspace = Workspace.objects.get(slug=slug)
-            
-            provider = request.data.get("provider", False)
-            multiple = request.data.get("multiple", False)
-            project_ids = request.data.get("project", [])
-            
-            if provider in ["csv", "xlsx", "json"]:
-                if not project_ids:
-                    project_ids = Project.objects.filter(
-                        workspace__slug=slug
-                    ).values_list("id", flat=True)
-                    project_ids = [str(project_id) for project_id in project_ids]
+        # Get the workspace
+        workspace = Workspace.objects.get(slug=slug)
+        
+        provider = request.data.get("provider", False)
+        multiple = request.data.get("multiple", False)
+        project_ids = request.data.get("project", [])
+        
+        if provider in ["csv", "xlsx", "json"]:
+            if not project_ids:
+                project_ids = Project.objects.filter(
+                    workspace__slug=slug
+                ).values_list("id", flat=True)
+                project_ids = [str(project_id) for project_id in project_ids]
 
-                exporter = ExporterHistory.objects.create(
-                    workspace=workspace,
-                    project=project_ids,
-                    initiated_by=request.user,
-                    provider=provider,
-                )
+            exporter = ExporterHistory.objects.create(
+                workspace=workspace,
+                project=project_ids,
+                initiated_by=request.user,
+                provider=provider,
+            )
 
-                issue_export_task.delay(
-                    provider=exporter.provider,
-                    workspace_id=workspace.id,
-                    project_ids=project_ids,
-                    token_id=exporter.token,
-                    multiple=multiple,
-                    slug=slug,
-                )
-                return Response(
-                    {
-                        "message": f"Once the export is ready you will be able to download it"
-                    },
-                    status=status.HTTP_200_OK,
-                )
-            else:
-                return Response(
-                    {"error": f"Provider '{provider}' not found."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Workspace.DoesNotExist:
+            issue_export_task.delay(
+                provider=exporter.provider,
+                workspace_id=workspace.id,
+                project_ids=project_ids,
+                token_id=exporter.token,
+                multiple=multiple,
+                slug=slug,
+            )
             return Response(
-                {"error": "Workspace does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {
+                    "message": f"Once the export is ready you will be able to download it"
+                },
+                status=status.HTTP_200_OK,
             )
-        except Exception as e:
-            capture_exception(e)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": f"Provider '{provider}' not found."},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     def get(self, request, slug):
-        try:
-            exporter_history = ExporterHistory.objects.filter(
-                workspace__slug=slug
-            ).select_related("workspace","initiated_by")
+        exporter_history = ExporterHistory.objects.filter(
+            workspace__slug=slug
+        ).select_related("workspace","initiated_by")
 
-            if request.GET.get("per_page", False) and request.GET.get("cursor", False):
-                return self.paginate(
-                    request=request,
-                    queryset=exporter_history,
-                    on_results=lambda exporter_history: ExporterHistorySerializer(
-                        exporter_history, many=True
-                    ).data,
-                )
-            else:
-                return Response(
-                    {"error": "per_page and cursor are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=exporter_history,
+                on_results=lambda exporter_history: ExporterHistorySerializer(
+                    exporter_history, many=True
+                ).data,
+            )
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "per_page and cursor are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/external.py b/apiserver/plane/api/views/external.py
new file mode 100644
index 00000000000..755879dc699
--- /dev/null
+++ b/apiserver/plane/api/views/external.py
@@ -0,0 +1,92 @@
+# Python imports
+import requests
+
+# Third party imports
+import openai
+from rest_framework.response import Response
+from rest_framework import status
+from rest_framework.permissions import AllowAny
+from sentry_sdk import capture_exception
+
+# Django imports
+from django.conf import settings
+
+# Module imports
+from .base import BaseAPIView
+from plane.api.permissions import ProjectEntityPermission
+from plane.db.models import Workspace, Project
+from plane.api.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
+from plane.utils.integrations.github import get_release_notes
+
+
+class GPTIntegrationEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def post(self, request, slug, project_id):
+        if not settings.OPENAI_API_KEY or not settings.GPT_ENGINE:
+            return Response(
+                {"error": "OpenAI API key and engine is 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
+
+        openai.api_key = settings.OPENAI_API_KEY
+        response = openai.ChatCompletion.create(
+            model=settings.GPT_ENGINE,
+            messages=[{"role": "user", "content": final_text}],
+            temperature=0.7,
+            max_tokens=1024,
+        )
+
+        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,
+                "project_detail": ProjectLiteSerializer(project).data,
+                "workspace_detail": WorkspaceLiteSerializer(workspace).data,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class ReleaseNotesEndpoint(BaseAPIView):
+    def get(self, request):
+        release_notes = get_release_notes()
+        return Response(release_notes, status=status.HTTP_200_OK)
+
+
+class UnsplashEndpoint(BaseAPIView):
+
+    def get(self, request):
+        query = request.GET.get("query", False)
+        page = request.GET.get("page", 1)
+        per_page = request.GET.get("per_page", 20)
+
+        url = (
+            f"https://api.unsplash.com/search/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
+            if query
+            else f"https://api.unsplash.com/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
+        )
+
+        headers = {
+            "Content-Type": "application/json",
+        }
+
+        resp = requests.get(url=url, headers=headers)
+        return Response(resp.json(), status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/gpt.py b/apiserver/plane/api/views/gpt.py
deleted file mode 100644
index f8065f6d04b..00000000000
--- a/apiserver/plane/api/views/gpt.py
+++ /dev/null
@@ -1,75 +0,0 @@
-# Python imports
-import requests
-
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-import openai
-from sentry_sdk import capture_exception
-
-# Django imports
-from django.conf import settings
-
-# Module imports
-from .base import BaseAPIView
-from plane.api.permissions import ProjectEntityPermission
-from plane.db.models import Workspace, Project
-from plane.api.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
-
-
-class GPTIntegrationEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def post(self, request, slug, project_id):
-        try:
-            if not settings.OPENAI_API_KEY or not settings.GPT_ENGINE:
-                return Response(
-                    {"error": "OpenAI API key and engine is 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
-
-            openai.api_key = settings.OPENAI_API_KEY
-            response = openai.Completion.create(
-                model=settings.GPT_ENGINE,
-                prompt=final_text,
-                temperature=0.7,
-                max_tokens=1024,
-            )
-
-            workspace = Workspace.objects.get(slug=slug)
-            project = Project.objects.get(pk=project_id)
-
-            text = response.choices[0].text.strip()
-            text_html = text.replace("\n", "<br/>")
-            return Response(
-                {
-                    "response": text,
-                    "response_html": text_html,
-                    "project_detail": ProjectLiteSerializer(project).data,
-                    "workspace_detail": WorkspaceLiteSerializer(workspace).data,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except (Workspace.DoesNotExist, Project.DoesNotExist) as e:
-            return Response(
-                {"error": "Workspace or Project Does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/importer.py b/apiserver/plane/api/views/importer.py
index 0a92b3850fe..4060b2bd5a8 100644
--- a/apiserver/plane/api/views/importer.py
+++ b/apiserver/plane/api/views/importer.py
@@ -39,564 +39,488 @@
 from plane.utils.importers.jira import jira_project_issue_summary
 from plane.bgtasks.importer_task import service_importer
 from plane.utils.html_processor import strip_tags
+from plane.api.permissions import WorkSpaceAdminPermission
 
 
 class ServiceIssueImportSummaryEndpoint(BaseAPIView):
 
     def get(self, request, slug, service):
-        try:
-            if service == "github":
-                owner = request.GET.get("owner", False)
-                repo = request.GET.get("repo", False)
+        if service == "github":
+            owner = request.GET.get("owner", False)
+            repo = request.GET.get("repo", False)
 
-                if not owner or not repo:
-                    return Response(
-                        {"error": "Owner and repo are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-
-                workspace_integration = WorkspaceIntegration.objects.get(
-                    integration__provider="github", workspace__slug=slug
+            if not owner or not repo:
+                return Response(
+                    {"error": "Owner and repo are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
                 )
 
-                access_tokens_url = workspace_integration.metadata.get(
-                    "access_tokens_url", False
-                )
+            workspace_integration = WorkspaceIntegration.objects.get(
+                integration__provider="github", workspace__slug=slug
+            )
 
-                if not access_tokens_url:
-                    return Response(
-                        {
-                            "error": "There was an error during the installation of the GitHub app. To resolve this issue, we recommend reinstalling the GitHub app."
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
+            access_tokens_url = workspace_integration.metadata.get(
+                "access_tokens_url", False
+            )
 
-                issue_count, labels, collaborators = get_github_repo_details(
-                    access_tokens_url, owner, repo
-                )
+            if not access_tokens_url:
                 return Response(
                     {
-                        "issue_count": issue_count,
-                        "labels": labels,
-                        "collaborators": collaborators,
+                        "error": "There was an error during the installation of the GitHub app. To resolve this issue, we recommend reinstalling the GitHub app."
                     },
-                    status=status.HTTP_200_OK,
+                    status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            if service == "jira":
-                # Check for all the keys
-                params = {
-                    "project_key": "Project key is required",
-                    "api_token": "API token is required",
-                    "email": "Email is required",
-                    "cloud_hostname": "Cloud hostname is required",
-                }
-
-                for key, error_message in params.items():
-                    if not request.GET.get(key, False):
-                        return Response(
-                            {"error": error_message}, status=status.HTTP_400_BAD_REQUEST
-                        )
-
-                project_key = request.GET.get("project_key", "")
-                api_token = request.GET.get("api_token", "")
-                email = request.GET.get("email", "")
-                cloud_hostname = request.GET.get("cloud_hostname", "")
-
-                response = jira_project_issue_summary(
-                    email, api_token, project_key, cloud_hostname
-                )
-                if "error" in response:
-                    return Response(response, status=status.HTTP_400_BAD_REQUEST)
-                else:
-                    return Response(
-                        response,
-                        status=status.HTTP_200_OK,
-                    )
-            return Response(
-                {"error": "Service not supported yet"},
-                status=status.HTTP_400_BAD_REQUEST,
+            issue_count, labels, collaborators = get_github_repo_details(
+                access_tokens_url, owner, repo
             )
-        except WorkspaceIntegration.DoesNotExist:
             return Response(
-                {"error": "Requested integration was not installed in the workspace"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {
+                    "issue_count": issue_count,
+                    "labels": labels,
+                    "collaborators": collaborators,
+                },
+                status=status.HTTP_200_OK,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+
+        if service == "jira":
+            # Check for all the keys
+            params = {
+                "project_key": "Project key is required",
+                "api_token": "API token is required",
+                "email": "Email is required",
+                "cloud_hostname": "Cloud hostname is required",
+            }
+
+            for key, error_message in params.items():
+                if not request.GET.get(key, False):
+                    return Response(
+                        {"error": error_message}, status=status.HTTP_400_BAD_REQUEST
+                    )
+
+            project_key = request.GET.get("project_key", "")
+            api_token = request.GET.get("api_token", "")
+            email = request.GET.get("email", "")
+            cloud_hostname = request.GET.get("cloud_hostname", "")
+
+            response = jira_project_issue_summary(
+                email, api_token, project_key, cloud_hostname
             )
+            if "error" in response:
+                return Response(response, status=status.HTTP_400_BAD_REQUEST)
+            else:
+                return Response(
+                    response,
+                    status=status.HTTP_200_OK,
+                )
+        return Response(
+            {"error": "Service not supported yet"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
 
 
 class ImportServiceEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
     def post(self, request, slug, service):
-        try:
-            project_id = request.data.get("project_id", False)
+        project_id = request.data.get("project_id", False)
+
+        if not project_id:
+            return Response(
+                {"error": "Project ID is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        workspace = Workspace.objects.get(slug=slug)
 
-            if not project_id:
+        if service == "github":
+            data = request.data.get("data", False)
+            metadata = request.data.get("metadata", False)
+            config = request.data.get("config", False)
+            if not data or not metadata or not config:
                 return Response(
-                    {"error": "Project ID is required"},
+                    {"error": "Data, config and metadata are required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            workspace = Workspace.objects.get(slug=slug)
-
-            if service == "github":
-                data = request.data.get("data", False)
-                metadata = request.data.get("metadata", False)
-                config = request.data.get("config", False)
-                if not data or not metadata or not config:
-                    return Response(
-                        {"error": "Data, config and metadata are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-
-                api_token = APIToken.objects.filter(
-                    user=request.user, workspace=workspace
-                ).first()
-                if api_token is None:
-                    api_token = APIToken.objects.create(
-                        user=request.user,
-                        label="Importer",
-                        workspace=workspace,
-                    )
-
-                importer = Importer.objects.create(
-                    service=service,
-                    project_id=project_id,
-                    status="queued",
-                    initiated_by=request.user,
-                    data=data,
-                    metadata=metadata,
-                    token=api_token,
-                    config=config,
-                    created_by=request.user,
-                    updated_by=request.user,
+            api_token = APIToken.objects.filter(
+                user=request.user, workspace=workspace
+            ).first()
+            if api_token is None:
+                api_token = APIToken.objects.create(
+                    user=request.user,
+                    label="Importer",
+                    workspace=workspace,
                 )
 
-                service_importer.delay(service, importer.id)
-                serializer = ImporterSerializer(importer)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            importer = Importer.objects.create(
+                service=service,
+                project_id=project_id,
+                status="queued",
+                initiated_by=request.user,
+                data=data,
+                metadata=metadata,
+                token=api_token,
+                config=config,
+                created_by=request.user,
+                updated_by=request.user,
+            )
 
-            if service == "jira":
-                data = request.data.get("data", False)
-                metadata = request.data.get("metadata", False)
-                config = request.data.get("config", False)
-                if not data or not metadata:
-                    return Response(
-                        {"error": "Data, config and metadata are required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                api_token = APIToken.objects.filter(
-                    user=request.user, workspace=workspace
-                ).first()
-                if api_token is None:
-                    api_token = APIToken.objects.create(
-                        user=request.user,
-                        label="Importer",
-                        workspace=workspace,
-                    )
+            service_importer.delay(service, importer.id)
+            serializer = ImporterSerializer(importer)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-                importer = Importer.objects.create(
-                    service=service,
-                    project_id=project_id,
-                    status="queued",
-                    initiated_by=request.user,
-                    data=data,
-                    metadata=metadata,
-                    token=api_token,
-                    config=config,
-                    created_by=request.user,
-                    updated_by=request.user,
+        if service == "jira":
+            data = request.data.get("data", False)
+            metadata = request.data.get("metadata", False)
+            config = request.data.get("config", False)
+            if not data or not metadata:
+                return Response(
+                    {"error": "Data, config and metadata are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            api_token = APIToken.objects.filter(
+                user=request.user, workspace=workspace
+            ).first()
+            if api_token is None:
+                api_token = APIToken.objects.create(
+                    user=request.user,
+                    label="Importer",
+                    workspace=workspace,
                 )
 
-                service_importer.delay(service, importer.id)
-                serializer = ImporterSerializer(importer)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-            return Response(
-                {"error": "Servivce not supported yet"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except (
-            Workspace.DoesNotExist,
-            WorkspaceIntegration.DoesNotExist,
-            Project.DoesNotExist,
-        ) as e:
-            return Response(
-                {"error": "Workspace Integration or Project does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+            importer = Importer.objects.create(
+                service=service,
+                project_id=project_id,
+                status="queued",
+                initiated_by=request.user,
+                data=data,
+                metadata=metadata,
+                token=api_token,
+                config=config,
+                created_by=request.user,
+                updated_by=request.user,
             )
 
+            service_importer.delay(service, importer.id)
+            serializer = ImporterSerializer(importer)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(
+            {"error": "Servivce not supported yet"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
+
     def get(self, request, slug):
-        try:
-            imports = (
-                Importer.objects.filter(workspace__slug=slug)
-                .order_by("-created_at")
-                .select_related("initiated_by", "project", "workspace")
-            )
-            serializer = ImporterSerializer(imports, many=True)
-            return Response(serializer.data)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        imports = (
+            Importer.objects.filter(workspace__slug=slug)
+            .order_by("-created_at")
+            .select_related("initiated_by", "project", "workspace")
+        )
+        serializer = ImporterSerializer(imports, many=True)
+        return Response(serializer.data)
 
     def delete(self, request, slug, service, pk):
-        try:
-            importer = Importer.objects.get(
-                pk=pk, service=service, workspace__slug=slug
-            )
+        importer = Importer.objects.get(
+            pk=pk, service=service, workspace__slug=slug
+        )
 
-            if importer.imported_data is not None:
-                # Delete all imported Issues
-                imported_issues = importer.imported_data.get("issues", [])
-                Issue.issue_objects.filter(id__in=imported_issues).delete()
-
-                # Delete all imported Labels
-                imported_labels = importer.imported_data.get("labels", [])
-                Label.objects.filter(id__in=imported_labels).delete()
-
-                if importer.service == "jira":
-                    imported_modules = importer.imported_data.get("modules", [])
-                    Module.objects.filter(id__in=imported_modules).delete()
-            importer.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if importer.imported_data is not None:
+            # Delete all imported Issues
+            imported_issues = importer.imported_data.get("issues", [])
+            Issue.issue_objects.filter(id__in=imported_issues).delete()
+
+            # Delete all imported Labels
+            imported_labels = importer.imported_data.get("labels", [])
+            Label.objects.filter(id__in=imported_labels).delete()
+
+            if importer.service == "jira":
+                imported_modules = importer.imported_data.get("modules", [])
+                Module.objects.filter(id__in=imported_modules).delete()
+        importer.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
     def patch(self, request, slug, service, pk):
-        try:
-            importer = Importer.objects.get(
-                pk=pk, service=service, workspace__slug=slug
-            )
-            serializer = ImporterSerializer(importer, 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 Importer.DoesNotExist:
-            return Response(
-                {"error": "Importer Does not exists"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        importer = Importer.objects.get(
+            pk=pk, service=service, workspace__slug=slug
+        )
+        serializer = ImporterSerializer(importer, 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)
 
 
 class UpdateServiceImportStatusEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, service, importer_id):
-        try:
-            importer = Importer.objects.get(
-                pk=importer_id,
-                workspace__slug=slug,
-                project_id=project_id,
-                service=service,
-            )
-            importer.status = request.data.get("status", "processing")
-            importer.save()
-            return Response(status.HTTP_200_OK)
-        except Importer.DoesNotExist:
-            return Response(
-                {"error": "Importer does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
+        importer = Importer.objects.get(
+            pk=importer_id,
+            workspace__slug=slug,
+            project_id=project_id,
+            service=service,
+        )
+        importer.status = request.data.get("status", "processing")
+        importer.save()
+        return Response(status.HTTP_200_OK)
 
 
 class BulkImportIssuesEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, service):
-        try:
-            # Get the project
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-            # Get the default state
+        # Get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        # Get the default state
+        default_state = State.objects.filter(
+            ~Q(name="Triage"), project_id=project_id, default=True
+        ).first()
+        # if there is no default state assign any random state
+        if default_state is None:
             default_state = State.objects.filter(
-                ~Q(name="Triage"), project_id=project_id, default=True
+                ~Q(name="Triage"), project_id=project_id
             ).first()
-            # if there is no default state assign any random state
-            if default_state is None:
-                default_state = State.objects.filter(
-                    ~Q(name="Triage"), project_id=project_id
-                ).first()
-
-            # Get the maximum sequence_id
-            last_id = IssueSequence.objects.filter(project_id=project_id).aggregate(
-                largest=Max("sequence")
-            )["largest"]
-
-            last_id = 1 if last_id is None else last_id + 1
-
-            # Get the maximum sort order
-            largest_sort_order = Issue.objects.filter(
-                project_id=project_id, state=default_state
-            ).aggregate(largest=Max("sort_order"))["largest"]
-
-            largest_sort_order = (
-                65535 if largest_sort_order is None else largest_sort_order + 10000
-            )
 
-            # Get the issues_data
-            issues_data = request.data.get("issues_data", [])
+        # Get the maximum sequence_id
+        last_id = IssueSequence.objects.filter(project_id=project_id).aggregate(
+            largest=Max("sequence")
+        )["largest"]
 
-            if not len(issues_data):
-                return Response(
-                    {"error": "Issue data is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        last_id = 1 if last_id is None else last_id + 1
 
-            # Issues
-            bulk_issues = []
-            for issue_data in issues_data:
-                bulk_issues.append(
-                    Issue(
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        state_id=issue_data.get("state")
-                        if issue_data.get("state", False)
-                        else default_state.id,
-                        name=issue_data.get("name", "Issue Created through Bulk"),
-                        description_html=issue_data.get("description_html", "<p></p>"),
-                        description_stripped=(
-                            None
-                            if (
-                                issue_data.get("description_html") == ""
-                                or issue_data.get("description_html") is None
-                            )
-                            else strip_tags(issue_data.get("description_html"))
-                        ),
-                        sequence_id=last_id,
-                        sort_order=largest_sort_order,
-                        start_date=issue_data.get("start_date", None),
-                        target_date=issue_data.get("target_date", None),
-                        priority=issue_data.get("priority", None),
-                        created_by=request.user,
-                    )
-                )
+        # Get the maximum sort order
+        largest_sort_order = Issue.objects.filter(
+            project_id=project_id, state=default_state
+        ).aggregate(largest=Max("sort_order"))["largest"]
 
-                largest_sort_order = largest_sort_order + 10000
-                last_id = last_id + 1
+        largest_sort_order = (
+            65535 if largest_sort_order is None else largest_sort_order + 10000
+        )
 
-            issues = Issue.objects.bulk_create(
-                bulk_issues,
-                batch_size=100,
-                ignore_conflicts=True,
+        # Get the issues_data
+        issues_data = request.data.get("issues_data", [])
+
+        if not len(issues_data):
+            return Response(
+                {"error": "Issue data is required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            # Sequences
-            _ = IssueSequence.objects.bulk_create(
-                [
-                    IssueSequence(
-                        issue=issue,
-                        sequence=issue.sequence_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                    )
-                    for issue in issues
-                ],
-                batch_size=100,
+        # Issues
+        bulk_issues = []
+        for issue_data in issues_data:
+            bulk_issues.append(
+                Issue(
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    state_id=issue_data.get("state")
+                    if issue_data.get("state", False)
+                    else default_state.id,
+                    name=issue_data.get("name", "Issue Created through Bulk"),
+                    description_html=issue_data.get("description_html", "<p></p>"),
+                    description_stripped=(
+                        None
+                        if (
+                            issue_data.get("description_html") == ""
+                            or issue_data.get("description_html") is None
+                        )
+                        else strip_tags(issue_data.get("description_html"))
+                    ),
+                    sequence_id=last_id,
+                    sort_order=largest_sort_order,
+                    start_date=issue_data.get("start_date", None),
+                    target_date=issue_data.get("target_date", None),
+                    priority=issue_data.get("priority", "none"),
+                    created_by=request.user,
+                )
             )
 
-            # Attach Labels
-            bulk_issue_labels = []
-            for issue, issue_data in zip(issues, issues_data):
-                labels_list = issue_data.get("labels_list", [])
-                bulk_issue_labels = bulk_issue_labels + [
-                    IssueLabel(
-                        issue=issue,
-                        label_id=label_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for label_id in labels_list
-                ]
+            largest_sort_order = largest_sort_order + 10000
+            last_id = last_id + 1
+
+        issues = Issue.objects.bulk_create(
+            bulk_issues,
+            batch_size=100,
+            ignore_conflicts=True,
+        )
+
+        # Sequences
+        _ = IssueSequence.objects.bulk_create(
+            [
+                IssueSequence(
+                    issue=issue,
+                    sequence=issue.sequence_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+                for issue in issues
+            ],
+            batch_size=100,
+        )
+
+        # Attach Labels
+        bulk_issue_labels = []
+        for issue, issue_data in zip(issues, issues_data):
+            labels_list = issue_data.get("labels_list", [])
+            bulk_issue_labels = bulk_issue_labels + [
+                IssueLabel(
+                    issue=issue,
+                    label_id=label_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for label_id in labels_list
+            ]
+
+        _ = IssueLabel.objects.bulk_create(
+            bulk_issue_labels, batch_size=100, ignore_conflicts=True
+        )
+
+        # Attach Assignees
+        bulk_issue_assignees = []
+        for issue, issue_data in zip(issues, issues_data):
+            assignees_list = issue_data.get("assignees_list", [])
+            bulk_issue_assignees = bulk_issue_assignees + [
+                IssueAssignee(
+                    issue=issue,
+                    assignee_id=assignee_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for assignee_id in assignees_list
+            ]
+
+        _ = IssueAssignee.objects.bulk_create(
+            bulk_issue_assignees, batch_size=100, ignore_conflicts=True
+        )
+
+        # Track the issue activities
+        IssueActivity.objects.bulk_create(
+            [
+                IssueActivity(
+                    issue=issue,
+                    actor=request.user,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    comment=f"imported the issue from {service}",
+                    verb="created",
+                    created_by=request.user,
+                )
+                for issue in issues
+            ],
+            batch_size=100,
+        )
+
+        # Create Comments
+        bulk_issue_comments = []
+        for issue, issue_data in zip(issues, issues_data):
+            comments_list = issue_data.get("comments_list", [])
+            bulk_issue_comments = bulk_issue_comments + [
+                IssueComment(
+                    issue=issue,
+                    comment_html=comment.get("comment_html", "<p></p>"),
+                    actor=request.user,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for comment in comments_list
+            ]
+
+        _ = IssueComment.objects.bulk_create(bulk_issue_comments, batch_size=100)
+
+        # Attach Links
+        _ = IssueLink.objects.bulk_create(
+            [
+                IssueLink(
+                    issue=issue,
+                    url=issue_data.get("link", {}).get("url", "https://github.com"),
+                    title=issue_data.get("link", {}).get("title", "Original Issue"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for issue, issue_data in zip(issues, issues_data)
+            ]
+        )
 
-            _ = IssueLabel.objects.bulk_create(
-                bulk_issue_labels, batch_size=100, ignore_conflicts=True
-            )
+        return Response(
+            {"issues": IssueFlatSerializer(issues, many=True).data},
+            status=status.HTTP_201_CREATED,
+        )
 
-            # Attach Assignees
-            bulk_issue_assignees = []
-            for issue, issue_data in zip(issues, issues_data):
-                assignees_list = issue_data.get("assignees_list", [])
-                bulk_issue_assignees = bulk_issue_assignees + [
-                    IssueAssignee(
-                        issue=issue,
-                        assignee_id=assignee_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for assignee_id in assignees_list
-                ]
 
-            _ = IssueAssignee.objects.bulk_create(
-                bulk_issue_assignees, batch_size=100, ignore_conflicts=True
-            )
+class BulkImportModulesEndpoint(BaseAPIView):
+    def post(self, request, slug, project_id, service):
+        modules_data = request.data.get("modules_data", [])
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        modules = Module.objects.bulk_create(
+            [
+                Module(
+                    name=module.get("name", uuid.uuid4().hex),
+                    description=module.get("description", ""),
+                    start_date=module.get("start_date", None),
+                    target_date=module.get("target_date", None),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                )
+                for module in modules_data
+            ],
+            batch_size=100,
+            ignore_conflicts=True,
+        )
 
-            # Track the issue activities
-            IssueActivity.objects.bulk_create(
+        modules = Module.objects.filter(id__in=[module.id for module in modules])
+
+        if len(modules) == len(modules_data):
+            _ = ModuleLink.objects.bulk_create(
                 [
-                    IssueActivity(
-                        issue=issue,
-                        actor=request.user,
+                    ModuleLink(
+                        module=module,
+                        url=module_data.get("link", {}).get(
+                            "url", "https://plane.so"
+                        ),
+                        title=module_data.get("link", {}).get(
+                            "title", "Original Issue"
+                        ),
                         project_id=project_id,
                         workspace_id=project.workspace_id,
-                        comment=f"imported the issue from {service}",
-                        verb="created",
                         created_by=request.user,
                     )
-                    for issue in issues
+                    for module, module_data in zip(modules, modules_data)
                 ],
                 batch_size=100,
+                ignore_conflicts=True,
             )
 
-            # Create Comments
-            bulk_issue_comments = []
-            for issue, issue_data in zip(issues, issues_data):
-                comments_list = issue_data.get("comments_list", [])
-                bulk_issue_comments = bulk_issue_comments + [
-                    IssueComment(
-                        issue=issue,
-                        comment_html=comment.get("comment_html", "<p></p>"),
-                        actor=request.user,
+            bulk_module_issues = []
+            for module, module_data in zip(modules, modules_data):
+                module_issues_list = module_data.get("module_issues_list", [])
+                bulk_module_issues = bulk_module_issues + [
+                    ModuleIssue(
+                        issue_id=issue,
+                        module=module,
                         project_id=project_id,
                         workspace_id=project.workspace_id,
                         created_by=request.user,
                     )
-                    for comment in comments_list
+                    for issue in module_issues_list
                 ]
 
-            _ = IssueComment.objects.bulk_create(bulk_issue_comments, batch_size=100)
-
-            # Attach Links
-            _ = IssueLink.objects.bulk_create(
-                [
-                    IssueLink(
-                        issue=issue,
-                        url=issue_data.get("link", {}).get("url", "https://github.com"),
-                        title=issue_data.get("link", {}).get("title", "Original Issue"),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for issue, issue_data in zip(issues, issues_data)
-                ]
+            _ = ModuleIssue.objects.bulk_create(
+                bulk_module_issues, batch_size=100, ignore_conflicts=True
             )
 
+            serializer = ModuleSerializer(modules, many=True)
             return Response(
-                {"issues": IssueFlatSerializer(issues, many=True).data},
-                status=status.HTTP_201_CREATED,
+                {"modules": serializer.data}, status=status.HTTP_201_CREATED
             )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
 
-class BulkImportModulesEndpoint(BaseAPIView):
-    def post(self, request, slug, project_id, service):
-        try:
-            modules_data = request.data.get("modules_data", [])
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-            modules = Module.objects.bulk_create(
-                [
-                    Module(
-                        name=module.get("name", uuid.uuid4().hex),
-                        description=module.get("description", ""),
-                        start_date=module.get("start_date", None),
-                        target_date=module.get("target_date", None),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                    )
-                    for module in modules_data
-                ],
-                batch_size=100,
-                ignore_conflicts=True,
-            )
-
-            modules = Module.objects.filter(id__in=[module.id for module in modules])
-
-            if len(modules) == len(modules_data):
-                _ = ModuleLink.objects.bulk_create(
-                    [
-                        ModuleLink(
-                            module=module,
-                            url=module_data.get("link", {}).get(
-                                "url", "https://plane.so"
-                            ),
-                            title=module_data.get("link", {}).get(
-                                "title", "Original Issue"
-                            ),
-                            project_id=project_id,
-                            workspace_id=project.workspace_id,
-                            created_by=request.user,
-                        )
-                        for module, module_data in zip(modules, modules_data)
-                    ],
-                    batch_size=100,
-                    ignore_conflicts=True,
-                )
-
-                bulk_module_issues = []
-                for module, module_data in zip(modules, modules_data):
-                    module_issues_list = module_data.get("module_issues_list", [])
-                    bulk_module_issues = bulk_module_issues + [
-                        ModuleIssue(
-                            issue_id=issue,
-                            module=module,
-                            project_id=project_id,
-                            workspace_id=project.workspace_id,
-                            created_by=request.user,
-                        )
-                        for issue in module_issues_list
-                    ]
-
-                _ = ModuleIssue.objects.bulk_create(
-                    bulk_module_issues, batch_size=100, ignore_conflicts=True
-                )
-
-                serializer = ModuleSerializer(modules, many=True)
-                return Response(
-                    {"modules": serializer.data}, status=status.HTTP_201_CREATED
-                )
-
-            else:
-                return Response(
-                    {"message": "Modules created but issues could not be imported"},
-                    status=status.HTTP_200_OK,
-                )
-        except Project.DoesNotExist:
+        else:
             return Response(
-                {"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"message": "Modules created but issues could not be imported"},
+                status=status.HTTP_200_OK,
             )
diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index 4fbea5f870f..517e9b6de08 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -64,24 +64,17 @@ def perform_create(self, serializer):
         serializer.save(project_id=self.kwargs.get("project_id"))
 
     def destroy(self, request, slug, project_id, pk):
-        try:
-            inbox = Inbox.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            # Handle default inbox delete
-            if inbox.is_default:
-                return Response(
-                    {"error": "You cannot delete the default inbox"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            inbox.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
+        inbox = Inbox.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        )
+        # Handle default inbox delete
+        if inbox.is_default:
             return Response(
-                {"error": "Something went wronf please try again later"},
+                {"error": "You cannot delete the default inbox"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        inbox.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class InboxIssueViewSet(BaseViewSet):
@@ -110,274 +103,239 @@ def get_queryset(self):
         )
 
     def list(self, request, slug, project_id, inbox_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.objects.filter(
-                    issue_inbox__inbox_id=inbox_id,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .filter(**filters)
-                .annotate(bridge_id=F("issue_inbox__id"))
-                .select_related("workspace", "project", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.objects.filter(
+                issue_inbox__inbox_id=inbox_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .filter(**filters)
+            .annotate(bridge_id=F("issue_inbox__id"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(
+                    issue=OuterRef("id")
                 )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_inbox",
-                        queryset=InboxIssue.objects.only(
-                            "status", "duplicate_to", "snoozed_till", "source"
-                        ),
-                    )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_inbox",
+                    queryset=InboxIssue.objects.only(
+                        "status", "duplicate_to", "snoozed_till", "source"
+                    ),
                 )
             )
-            issues_data = IssueStateInboxSerializer(issues, many=True).data
+        )
+        issues_data = IssueStateInboxSerializer(issues, many=True).data
+        return Response(
+            issues_data,
+            status=status.HTTP_200_OK,
+        )
+
+
+    def create(self, request, slug, project_id, inbox_id):
+        if not request.data.get("issue", {}).get("name", False):
             return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        except Exception as e:
-            capture_exception(e)
+        # Check for valid priority
+        if not request.data.get("issue", {}).get("priority", "none") in [
+            "low",
+            "medium",
+            "high",
+            "urgent",
+            "none",
+        ]:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-    def create(self, request, slug, project_id, inbox_id):
-        try:
-            if not request.data.get("issue", {}).get("name", False):
-                return Response(
-                    {"error": "Name is required"}, 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 Inbox Issues",
+            project_id=project_id,
+            color="#ff7700",
+        )
 
-            # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
-                "low",
-                "medium",
-                "high",
-                "urgent",
-                None,
-            ]:
-                return Response(
-                    {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
-                )
+        # create an issue
+        issue = Issue.objects.create(
+            name=request.data.get("issue", {}).get("name"),
+            description=request.data.get("issue", {}).get("description", {}),
+            description_html=request.data.get("issue", {}).get(
+                "description_html", "<p></p>"
+            ),
+            priority=request.data.get("issue", {}).get("priority", "low"),
+            project_id=project_id,
+            state=state,
+        )
 
-            # Create or get state
-            state, _ = State.objects.get_or_create(
-                name="Triage",
-                group="backlog",
-                description="Default state for managing all Inbox Issues",
-                project_id=project_id,
-                color="#ff7700",
-            )
+        # Create an Issue Activity
+        issue_activity.delay(
+            type="issue.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp())
+        )
+        # create an inbox issue
+        InboxIssue.objects.create(
+            inbox_id=inbox_id,
+            project_id=project_id,
+            issue=issue,
+            source=request.data.get("source", "in-app"),
+        )
 
-            # create an issue
-            issue = Issue.objects.create(
-                name=request.data.get("issue", {}).get("name"),
-                description=request.data.get("issue", {}).get("description", {}),
-                description_html=request.data.get("issue", {}).get(
-                    "description_html", "<p></p>"
-                ),
-                priority=request.data.get("issue", {}).get("priority", "low"),
-                project_id=project_id,
-                state=state,
-            )
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
-            # Create an Issue Activity
-            issue_activity.delay(
-                type="issue.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-            )
-            # create an inbox issue
-            InboxIssue.objects.create(
-                inbox_id=inbox_id,
-                project_id=project_id,
-                issue=issue,
-                source=request.data.get("source", "in-app"),
-            )
+    def partial_update(self, request, slug, project_id, inbox_id, pk):
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
+        # Only project members admins and created_by users can access this endpoint
+        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
 
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        # Get issue data
+        issue_data = request.data.pop("issue", False)
+
+        if bool(issue_data):
+            issue = Issue.objects.get(
+                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
             )
+            # Only allow guests and viewers to edit name and description
+            if project_member.role <= 10:
+                # viewers and guests since only viewers and guests 
+                issue_data = {
+                    "name": issue_data.get("name", issue.name),
+                    "description_html": issue_data.get("description_html", issue.description_html),
+                    "description": issue_data.get("description", issue.description)
+                }
 
-    def partial_update(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+            issue_serializer = IssueCreateSerializer(
+                issue, data=issue_data, partial=True
             )
-            # Get the project member
-            project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
-            # Only project members admins and created_by users can access this endpoint
-            if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
-
-            # Get issue data
-            issue_data = request.data.pop("issue", False)
-
-            if bool(issue_data):
-                issue = Issue.objects.get(
-                    pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-                )
-                # Only allow guests and viewers to edit name and description
-                if project_member.role <= 10:
-                    # viewers and guests since only viewers and guests 
-                    issue_data = {
-                        "name": issue_data.get("name", issue.name),
-                        "description_html": issue_data.get("description_html", issue.description_html),
-                        "description": issue_data.get("description", issue.description)
-                    }
-
-                issue_serializer = IssueCreateSerializer(
-                    issue, data=issue_data, partial=True
-                )
 
-                if issue_serializer.is_valid():
-                    current_instance = issue
-                    # Log all the updates
-                    requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
-                    if issue is not None:
-                        issue_activity.delay(
-                            type="issue.activity.updated",
-                            requested_data=requested_data,
-                            actor_id=str(request.user.id),
-                            issue_id=str(issue.id),
-                            project_id=str(project_id),
-                            current_instance=json.dumps(
-                                IssueSerializer(current_instance).data,
-                                cls=DjangoJSONEncoder,
-                            ),
-                        )
-                    issue_serializer.save()
-                else:
-                    return Response(
-                        issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            if issue_serializer.is_valid():
+                current_instance = issue
+                # Log all the updates
+                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+                if issue is not None:
+                    issue_activity.delay(
+                        type="issue.activity.updated",
+                        requested_data=requested_data,
+                        actor_id=str(request.user.id),
+                        issue_id=str(issue.id),
+                        project_id=str(project_id),
+                        current_instance=json.dumps(
+                            IssueSerializer(current_instance).data,
+                            cls=DjangoJSONEncoder,
+                        ),
+                        epoch=int(timezone.now().timestamp())
                     )
-
-            # Only project admins and members can edit inbox issue attributes
-            if project_member.role > 10:
-                serializer = InboxIssueSerializer(
-                    inbox_issue, data=request.data, partial=True
+                issue_serializer.save()
+            else:
+                return Response(
+                    issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST
                 )
 
-                if serializer.is_valid():
-                    serializer.save()
-                    # Update the issue state if the issue is rejected or marked as duplicate
-                    if serializer.data["status"] in [-1, 2]:
-                        issue = Issue.objects.get(
-                            pk=inbox_issue.issue_id,
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
+        # Only project admins and members can edit inbox issue attributes
+        if project_member.role > 10:
+            serializer = InboxIssueSerializer(
+                inbox_issue, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                # Update the issue state if the issue is rejected or marked as duplicate
+                if serializer.data["status"] in [-1, 2]:
+                    issue = Issue.objects.get(
+                        pk=inbox_issue.issue_id,
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+                    state = State.objects.filter(
+                        group="cancelled", workspace__slug=slug, project_id=project_id
+                    ).first()
+                    if state is not None:
+                        issue.state = state
+                        issue.save()
+
+                # Update the issue state if it is accepted
+                if serializer.data["status"] in [1]:
+                    issue = Issue.objects.get(
+                        pk=inbox_issue.issue_id,
+                        workspace__slug=slug,
+                        project_id=project_id,
+                    )
+
+                    # Update the issue state only if it is in triage state
+                    if issue.state.name == "Triage":
+                        # Move to default state
                         state = State.objects.filter(
-                            group="cancelled", workspace__slug=slug, project_id=project_id
+                            workspace__slug=slug, project_id=project_id, default=True
                         ).first()
                         if state is not None:
                             issue.state = state
                             issue.save()
 
-                    # Update the issue state if it is accepted
-                    if serializer.data["status"] in [1]:
-                        issue = Issue.objects.get(
-                            pk=inbox_issue.issue_id,
-                            workspace__slug=slug,
-                            project_id=project_id,
-                        )
-
-                        # Update the issue state only if it is in triage state
-                        if issue.state.name == "Triage":
-                            # Move to default state
-                            state = State.objects.filter(
-                                workspace__slug=slug, project_id=project_id, default=True
-                            ).first()
-                            if state is not None:
-                                issue.state = state
-                                issue.save()
-
-                    return Response(serializer.data, status=status.HTTP_200_OK)
-                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-            else:
-                return Response(InboxIssueSerializer(inbox_issue).data, status=status.HTTP_200_OK)
-        except InboxIssue.DoesNotExist:
-            return Response(
-                {"error": "Inbox Issue does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                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)
+        else:
+            return Response(InboxIssueSerializer(inbox_issue).data, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, inbox_id, pk):
-        try:
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            # Get the project member
-            project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
-
-            if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
-
-            inbox_issue.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except InboxIssue.DoesNotExist:
-            return Response({"error": "Inbox Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        project_member = ProjectMember.objects.get(workspace__slug=slug, project_id=project_id, member=request.user)
+
+        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
+
+        # Check the issue status
+        if inbox_issue.status in [-2, -1, 0, 2]:
+            # Delete the issue also
+            Issue.objects.filter(workspace__slug=slug, project_id=project_id, pk=inbox_issue.issue_id).delete() 
+
+        inbox_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class InboxIssuePublicViewSet(BaseViewSet):
@@ -402,244 +360,200 @@ def get_queryset(self):
                 )
                 .select_related("issue", "workspace", "project")
             )
-        else:
-            return InboxIssue.objects.none()
+        return InboxIssue.objects.none()
 
     def list(self, request, slug, project_id, inbox_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
-
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.objects.filter(
-                    issue_inbox__inbox_id=inbox_id,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .filter(**filters)
-                .annotate(bridge_id=F("issue_inbox__id"))
-                .select_related("workspace", "project", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_inbox",
-                        queryset=InboxIssue.objects.only(
-                            "status", "duplicate_to", "snoozed_till", "source"
-                        ),
-                    )
-                )
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.objects.filter(
+                issue_inbox__inbox_id=inbox_id,
+                workspace__slug=slug,
+                project_id=project_id,
             )
-            issues_data = IssueStateInboxSerializer(issues, many=True).data
-            return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+            .filter(**filters)
+            .annotate(bridge_id=F("issue_inbox__id"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .order_by("issue_inbox__snoozed_till", "issue_inbox__status")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response({"error": "Project Deploy Board does not exist"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-    def create(self, request, slug, project_id, inbox_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
-
-            if not request.data.get("issue", {}).get("name", False):
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(
+                    issue=OuterRef("id")
                 )
-
-            # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
-                "low",
-                "medium",
-                "high",
-                "urgent",
-                None,
-            ]:
-                return Response(
-                    {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_inbox",
+                    queryset=InboxIssue.objects.only(
+                        "status", "duplicate_to", "snoozed_till", "source"
+                    ),
                 )
-
-            # Create or get state
-            state, _ = State.objects.get_or_create(
-                name="Triage",
-                group="backlog",
-                description="Default state for managing all Inbox Issues",
-                project_id=project_id,
-                color="#ff7700",
             )
+        )
+        issues_data = IssueStateInboxSerializer(issues, many=True).data
+        return Response(
+            issues_data,
+            status=status.HTTP_200_OK,
+        )
 
-            # create an issue
-            issue = Issue.objects.create(
-                name=request.data.get("issue", {}).get("name"),
-                description=request.data.get("issue", {}).get("description", {}),
-                description_html=request.data.get("issue", {}).get(
-                    "description_html", "<p></p>"
-                ),
-                priority=request.data.get("issue", {}).get("priority", "low"),
-                project_id=project_id,
-                state=state,
-            )
+    def create(self, request, slug, project_id, inbox_id):
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Create an Issue Activity
-            issue_activity.delay(
-                type="issue.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-            )
-            # create an inbox issue
-            InboxIssue.objects.create(
-                inbox_id=inbox_id,
-                project_id=project_id,
-                issue=issue,
-                source=request.data.get("source", "in-app"),
+        if not request.data.get("issue", {}).get("name", False):
+            return Response(
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        # Check for valid priority
+        if not request.data.get("issue", {}).get("priority", "none") in [
+            "low",
+            "medium",
+            "high",
+            "urgent",
+            "none",
+        ]:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-    def partial_update(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, 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 Inbox Issues",
+            project_id=project_id,
+            color="#ff7700",
+        )
 
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            # Get the project member
-            if str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
+        # create an issue
+        issue = Issue.objects.create(
+            name=request.data.get("issue", {}).get("name"),
+            description=request.data.get("issue", {}).get("description", {}),
+            description_html=request.data.get("issue", {}).get(
+                "description_html", "<p></p>"
+            ),
+            priority=request.data.get("issue", {}).get("priority", "low"),
+            project_id=project_id,
+            state=state,
+        )
 
-            # Get issue data
-            issue_data = request.data.pop("issue", False)
+        # Create an Issue Activity
+        issue_activity.delay(
+            type="issue.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp())
+        )
+        # create an inbox issue
+        InboxIssue.objects.create(
+            inbox_id=inbox_id,
+            project_id=project_id,
+            issue=issue,
+            source=request.data.get("source", "in-app"),
+        )
 
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            # viewers and guests since only viewers and guests 
-            issue_data = {
-                "name": issue_data.get("name", issue.name),
-                "description_html": issue_data.get("description_html", issue.description_html),
-                "description": issue_data.get("description", issue.description)
-            }
+    def partial_update(self, request, slug, project_id, inbox_id, pk):
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            issue_serializer = IssueCreateSerializer(
-                issue, data=issue_data, partial=True
-            )
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        # Get the project member
+        if str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot edit inbox issues"}, status=status.HTTP_400_BAD_REQUEST)
 
-            if issue_serializer.is_valid():
-                current_instance = issue
-                # Log all the updates
-                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
-                if issue is not None:
-                    issue_activity.delay(
-                        type="issue.activity.updated",
-                        requested_data=requested_data,
-                        actor_id=str(request.user.id),
-                        issue_id=str(issue.id),
-                        project_id=str(project_id),
-                        current_instance=json.dumps(
-                            IssueSerializer(current_instance).data,
-                            cls=DjangoJSONEncoder,
-                        ),
-                    )
-                issue_serializer.save()
-                return Response(issue_serializer.data, status=status.HTTP_200_OK)
-            return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except InboxIssue.DoesNotExist:
-            return Response(
-                {"error": "Inbox Issue does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Get issue data
+        issue_data = request.data.pop("issue", False)
+
+
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        # viewers and guests since only viewers and guests 
+        issue_data = {
+            "name": issue_data.get("name", issue.name),
+            "description_html": issue_data.get("description_html", issue.description_html),
+            "description": issue_data.get("description", issue.description)
+        }
+
+        issue_serializer = IssueCreateSerializer(
+            issue, data=issue_data, partial=True
+        )
+
+        if issue_serializer.is_valid():
+            current_instance = issue
+            # Log all the updates
+            requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+            if issue is not None:
+                issue_activity.delay(
+                    type="issue.activity.updated",
+                    requested_data=requested_data,
+                    actor_id=str(request.user.id),
+                    issue_id=str(issue.id),
+                    project_id=str(project_id),
+                    current_instance=json.dumps(
+                        IssueSerializer(current_instance).data,
+                        cls=DjangoJSONEncoder,
+                    ),
+                    epoch=int(timezone.now().timestamp())
+                )
+            issue_serializer.save()
+            return Response(issue_serializer.data, status=status.HTTP_200_OK)
+        return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
-        
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serializer = IssueStateInboxSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+    
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
+        issue = Issue.objects.get(
+            pk=inbox_issue.issue_id, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueStateInboxSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, inbox_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
-            if project_deploy_board.inbox is None:
-                return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
+        project_deploy_board = ProjectDeployBoard.objects.get(workspace__slug=slug, project_id=project_id)
+        if project_deploy_board.inbox is None:
+            return Response({"error": "Inbox is not enabled for this Project Board"}, status=status.HTTP_400_BAD_REQUEST)
 
-            inbox_issue = InboxIssue.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
-            )
-
-            if str(inbox_issue.created_by_id) != str(request.user.id):
-                return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
+        inbox_issue = InboxIssue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id, inbox_id=inbox_id
+        )
 
-            inbox_issue.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except InboxIssue.DoesNotExist:
-            return Response({"error": "Inbox Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if str(inbox_issue.created_by_id) != str(request.user.id):
+            return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
 
+        inbox_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/integration/base.py b/apiserver/plane/api/views/integration/base.py
index 5213baf637e..cc911b53716 100644
--- a/apiserver/plane/api/views/integration/base.py
+++ b/apiserver/plane/api/views/integration/base.py
@@ -1,8 +1,7 @@
 # Python improts
 import uuid
-
+import requests
 # Django imports
-from django.db import IntegrityError
 from django.contrib.auth.hashers import make_password
 
 # Third party imports
@@ -26,72 +25,46 @@
     delete_github_installation,
 )
 from plane.api.permissions import WorkSpaceAdminPermission
-
+from plane.utils.integrations.slack import slack_oauth
 
 class IntegrationViewSet(BaseViewSet):
     serializer_class = IntegrationSerializer
     model = Integration
 
     def create(self, request):
-        try:
-            serializer = IntegrationSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
+        serializer = IntegrationSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def partial_update(self, request, pk):
+        integration = Integration.objects.get(pk=pk)
+        if integration.verified:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Verified integrations cannot be updated"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def partial_update(self, request, pk):
-        try:
-            integration = Integration.objects.get(pk=pk)
-            if integration.verified:
-                return Response(
-                    {"error": "Verified integrations cannot be updated"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IntegrationSerializer(
-                integration, data=request.data, partial=True
-            )
+        serializer = IntegrationSerializer(
+            integration, 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)
+        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 Integration.DoesNotExist:
-            return Response(
-                {"error": "Integration Does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
+    def destroy(self, request, pk):
+        integration = Integration.objects.get(pk=pk)
+        if integration.verified:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Verified integrations cannot be updated"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, pk):
-        try:
-            integration = Integration.objects.get(pk=pk)
-            if integration.verified:
-                return Response(
-                    {"error": "Verified integrations cannot be updated"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            integration.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Integration.DoesNotExist:
-            return Response(
-                {"error": "Integration Does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
+        integration.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class WorkspaceIntegrationViewSet(BaseViewSet):
@@ -111,119 +84,88 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, provider):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-            integration = Integration.objects.get(provider=provider)
-            config = {}
-            if provider == "github":
-                installation_id = request.data.get("installation_id", None)
-                if not installation_id:
-                    return Response(
-                        {"error": "Installation ID is required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                metadata = get_github_metadata(installation_id)
-                config = {"installation_id": installation_id}
-
-            if provider == "slack":
-                metadata = request.data.get("metadata", {})
-                access_token = metadata.get("access_token", False)
-                team_id = metadata.get("team", {}).get("id", False)
-                if not metadata or not access_token or not team_id:
-                    return Response(
-                        {"error": "Access token and team id is required"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                config = {"team_id": team_id, "access_token": access_token}
-
-            # Create a bot user
-            bot_user = User.objects.create(
-                email=f"{uuid.uuid4().hex}@plane.so",
-                username=uuid.uuid4().hex,
-                password=make_password(uuid.uuid4().hex),
-                is_password_autoset=True,
-                is_bot=True,
-                first_name=integration.title,
-                avatar=integration.avatar_url
-                if integration.avatar_url is not None
-                else "",
-            )
+        workspace = Workspace.objects.get(slug=slug)
+        integration = Integration.objects.get(provider=provider)
+        config = {}
+        if provider == "github":
+            installation_id = request.data.get("installation_id", None)
+            if not installation_id:
+                return Response(
+                    {"error": "Installation ID is required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            metadata = get_github_metadata(installation_id)
+            config = {"installation_id": installation_id}
 
-            # Create an API Token for the bot user
-            api_token = APIToken.objects.create(
-                user=bot_user,
-                user_type=1,  # bot user
-                workspace=workspace,
-            )
+        if provider == "slack":
+            code = request.data.get("code", False)
 
-            workspace_integration = WorkspaceIntegration.objects.create(
-                workspace=workspace,
-                integration=integration,
-                actor=bot_user,
-                api_token=api_token,
-                metadata=metadata,
-                config=config,
-            )
+            if not code:
+                return Response({"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Add bot user as a member of workspace
-            _ = WorkspaceMember.objects.create(
-                workspace=workspace_integration.workspace,
-                member=bot_user,
-                role=20,
-            )
-            return Response(
-                WorkspaceIntegrationSerializer(workspace_integration).data,
-                status=status.HTTP_201_CREATED,
-            )
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "Integration is already active in the workspace"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
+            slack_response = slack_oauth(code=code)
+
+            metadata = slack_response
+            access_token = metadata.get("access_token", False)
+            team_id = metadata.get("team", {}).get("id", False)
+            if not metadata or not access_token or not team_id:
                 return Response(
-                    {"error": "Something went wrong please try again later"},
+                    {"error": "Slack could not be installed. Please try again later"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
-        except (Workspace.DoesNotExist, Integration.DoesNotExist) as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Workspace or Integration not found"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            config = {"team_id": team_id, "access_token": access_token}
+
+        # Create a bot user
+        bot_user = User.objects.create(
+            email=f"{uuid.uuid4().hex}@plane.so",
+            username=uuid.uuid4().hex,
+            password=make_password(uuid.uuid4().hex),
+            is_password_autoset=True,
+            is_bot=True,
+            first_name=integration.title,
+            avatar=integration.avatar_url
+            if integration.avatar_url is not None
+            else "",
+        )
 
-    def destroy(self, request, slug, pk):
-        try:
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=pk, workspace__slug=slug
-            )
+        # Create an API Token for the bot user
+        api_token = APIToken.objects.create(
+            user=bot_user,
+            user_type=1,  # bot user
+            workspace=workspace,
+        )
 
-            if workspace_integration.integration.provider == "github":
-                installation_id = workspace_integration.config.get(
-                    "installation_id", False
-                )
-                if installation_id:
-                    delete_github_installation(installation_id=installation_id)
+        workspace_integration = WorkspaceIntegration.objects.create(
+            workspace=workspace,
+            integration=integration,
+            actor=bot_user,
+            api_token=api_token,
+            metadata=metadata,
+            config=config,
+        )
 
-            workspace_integration.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
+        # Add bot user as a member of workspace
+        _ = WorkspaceMember.objects.create(
+            workspace=workspace_integration.workspace,
+            member=bot_user,
+            role=20,
+        )
+        return Response(
+            WorkspaceIntegrationSerializer(workspace_integration).data,
+            status=status.HTTP_201_CREATED,
+        )
 
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+    def destroy(self, request, slug, pk):
+        workspace_integration = WorkspaceIntegration.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+
+        if workspace_integration.integration.provider == "github":
+            installation_id = workspace_integration.config.get(
+                "installation_id", False
             )
+            if installation_id:
+                delete_github_installation(installation_id=installation_id)
+
+        workspace_integration.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/integration/github.py b/apiserver/plane/api/views/integration/github.py
index 4cf07c70595..f2035639e46 100644
--- a/apiserver/plane/api/views/integration/github.py
+++ b/apiserver/plane/api/views/integration/github.py
@@ -30,31 +30,25 @@ class GithubRepositoriesEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, workspace_integration_id):
-        try:
-            page = request.GET.get("page", 1)
-            workspace_integration = WorkspaceIntegration.objects.get(
-                workspace__slug=slug, pk=workspace_integration_id
-            )
-
-            if workspace_integration.integration.provider != "github":
-                return Response(
-                    {"error": "Not a github integration"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        page = request.GET.get("page", 1)
+        workspace_integration = WorkspaceIntegration.objects.get(
+            workspace__slug=slug, pk=workspace_integration_id
+        )
 
-            access_tokens_url = workspace_integration.metadata["access_tokens_url"]
-            repositories_url = (
-                workspace_integration.metadata["repositories_url"]
-                + f"?per_page=100&page={page}"
-            )
-            repositories = get_github_repos(access_tokens_url, repositories_url)
-            return Response(repositories, status=status.HTTP_200_OK)
-        except WorkspaceIntegration.DoesNotExist:
+        if workspace_integration.integration.provider != "github":
             return Response(
-                {"error": "Workspace Integration Does not exists"},
+                {"error": "Not a github integration"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        access_tokens_url = workspace_integration.metadata["access_tokens_url"]
+        repositories_url = (
+            workspace_integration.metadata["repositories_url"]
+            + f"?per_page=100&page={page}"
+        )
+        repositories = get_github_repos(access_tokens_url, repositories_url)
+        return Response(repositories, status=status.HTTP_200_OK)
+
 
 class GithubRepositorySyncViewSet(BaseViewSet):
     permission_classes = [
@@ -76,88 +70,75 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id, workspace_integration_id):
-        try:
-            name = request.data.get("name", False)
-            url = request.data.get("url", False)
-            config = request.data.get("config", {})
-            repository_id = request.data.get("repository_id", False)
-            owner = request.data.get("owner", False)
-
-            if not name or not url or not repository_id or not owner:
-                return Response(
-                    {"error": "Name, url, repository_id and owner are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        name = request.data.get("name", False)
+        url = request.data.get("url", False)
+        config = request.data.get("config", {})
+        repository_id = request.data.get("repository_id", False)
+        owner = request.data.get("owner", False)
 
-            # Get the workspace integration
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=workspace_integration_id
+        if not name or not url or not repository_id or not owner:
+            return Response(
+                {"error": "Name, url, repository_id and owner are required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            # Delete the old repository object
-            GithubRepositorySync.objects.filter(
-                project_id=project_id, workspace__slug=slug
-            ).delete()
-            GithubRepository.objects.filter(
-                project_id=project_id, workspace__slug=slug
-            ).delete()
-
-            # Create repository
-            repo = GithubRepository.objects.create(
-                name=name,
-                url=url,
-                config=config,
-                repository_id=repository_id,
-                owner=owner,
-                project_id=project_id,
-            )
+        # Get the workspace integration
+        workspace_integration = WorkspaceIntegration.objects.get(
+            pk=workspace_integration_id
+        )
 
-            # Create a Label for github
-            label = Label.objects.filter(
-                name="GitHub",
-                project_id=project_id,
-            ).first()
+        # Delete the old repository object
+        GithubRepositorySync.objects.filter(
+            project_id=project_id, workspace__slug=slug
+        ).delete()
+        GithubRepository.objects.filter(
+            project_id=project_id, workspace__slug=slug
+        ).delete()
+
+        # Create repository
+        repo = GithubRepository.objects.create(
+            name=name,
+            url=url,
+            config=config,
+            repository_id=repository_id,
+            owner=owner,
+            project_id=project_id,
+        )
 
-            if label is None:
-                label = Label.objects.create(
-                    name="GitHub",
-                    project_id=project_id,
-                    description="Label to sync Plane issues with GitHub issues",
-                    color="#003773",
-                )
+        # Create a Label for github
+        label = Label.objects.filter(
+            name="GitHub",
+            project_id=project_id,
+        ).first()
 
-            # Create repo sync
-            repo_sync = GithubRepositorySync.objects.create(
-                repository=repo,
-                workspace_integration=workspace_integration,
-                actor=workspace_integration.actor,
-                credentials=request.data.get("credentials", {}),
+        if label is None:
+            label = Label.objects.create(
+                name="GitHub",
                 project_id=project_id,
-                label=label,
+                description="Label to sync Plane issues with GitHub issues",
+                color="#003773",
             )
 
-            # Add bot as a member in the project
-            _ = ProjectMember.objects.get_or_create(
-                member=workspace_integration.actor, role=20, project_id=project_id
-            )
+        # Create repo sync
+        repo_sync = GithubRepositorySync.objects.create(
+            repository=repo,
+            workspace_integration=workspace_integration,
+            actor=workspace_integration.actor,
+            credentials=request.data.get("credentials", {}),
+            project_id=project_id,
+            label=label,
+        )
 
-            # Return Response
-            return Response(
-                GithubRepositorySyncSerializer(repo_sync).data,
-                status=status.HTTP_201_CREATED,
-            )
+        # Add bot as a member in the project
+        _ = ProjectMember.objects.get_or_create(
+            member=workspace_integration.actor, role=20, project_id=project_id
+        )
 
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Return Response
+        return Response(
+            GithubRepositorySyncSerializer(repo_sync).data,
+            status=status.HTTP_201_CREATED,
+        )
 
 
 class GithubIssueSyncViewSet(BaseViewSet):
@@ -177,42 +158,30 @@ def perform_create(self, serializer):
 
 class BulkCreateGithubIssueSyncEndpoint(BaseAPIView):
     def post(self, request, slug, project_id, repo_sync_id):
-        try:
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-            github_issue_syncs = request.data.get("github_issue_syncs", [])
-            github_issue_syncs = GithubIssueSync.objects.bulk_create(
-                [
-                    GithubIssueSync(
-                        issue_id=github_issue_sync.get("issue"),
-                        repo_issue_id=github_issue_sync.get("repo_issue_id"),
-                        issue_url=github_issue_sync.get("issue_url"),
-                        github_issue_id=github_issue_sync.get("github_issue_id"),
-                        repository_sync_id=repo_sync_id,
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for github_issue_sync in github_issue_syncs
-                ],
-                batch_size=100,
-                ignore_conflicts=True,
-            )
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        github_issue_syncs = request.data.get("github_issue_syncs", [])
+        github_issue_syncs = GithubIssueSync.objects.bulk_create(
+            [
+                GithubIssueSync(
+                    issue_id=github_issue_sync.get("issue"),
+                    repo_issue_id=github_issue_sync.get("repo_issue_id"),
+                    issue_url=github_issue_sync.get("issue_url"),
+                    github_issue_id=github_issue_sync.get("github_issue_id"),
+                    repository_sync_id=repo_sync_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for github_issue_sync in github_issue_syncs
+            ],
+            batch_size=100,
+            ignore_conflicts=True,
+        )
 
-            serializer = GithubIssueSyncSerializer(github_issue_syncs, many=True)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = GithubIssueSyncSerializer(github_issue_syncs, many=True)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 
 class GithubCommentSyncViewSet(BaseViewSet):
diff --git a/apiserver/plane/api/views/integration/slack.py b/apiserver/plane/api/views/integration/slack.py
index 498dd0607d0..863b6ba0cf2 100644
--- a/apiserver/plane/api/views/integration/slack.py
+++ b/apiserver/plane/api/views/integration/slack.py
@@ -11,6 +11,7 @@
 from plane.db.models import SlackProjectSync, WorkspaceIntegration, ProjectMember
 from plane.api.serializers import SlackProjectSyncSerializer
 from plane.api.permissions import ProjectBasePermission, ProjectEntityPermission
+from plane.utils.integrations.slack import slack_oauth
 
 
 class SlackProjectSyncViewSet(BaseViewSet):
@@ -33,41 +34,45 @@ def get_queryset(self):
 
     def create(self, request, slug, project_id, workspace_integration_id):
         try:
-            serializer = SlackProjectSyncSerializer(data=request.data)
+            code = request.data.get("code", False)
 
-            workspace_integration = WorkspaceIntegration.objects.get(
-                workspace__slug=slug, pk=workspace_integration_id
-            )
-
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id,
-                    workspace_integration_id=workspace_integration_id,
+            if not code:
+                return Response(
+                    {"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST
                 )
 
-                workspace_integration = WorkspaceIntegration.objects.get(
-                    pk=workspace_integration_id, workspace__slug=slug
-                )
+            slack_response = slack_oauth(code=code)
 
-                _ = ProjectMember.objects.get_or_create(
-                    member=workspace_integration.actor, role=20, project_id=project_id
-                )
+            workspace_integration = WorkspaceIntegration.objects.get(
+                workspace__slug=slug, pk=workspace_integration_id
+            )
 
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError:
-            return Response(
-                {"error": "Slack is already enabled for the project"},
-                status=status.HTTP_400_BAD_REQUEST,
+            workspace_integration = WorkspaceIntegration.objects.get(
+                pk=workspace_integration_id, workspace__slug=slug
             )
-        except WorkspaceIntegration.DoesNotExist:
-            return Response(
-                {"error": "Workspace Integration does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
+            slack_project_sync = SlackProjectSync.objects.create(
+                access_token=slack_response.get("access_token"),
+                scopes=slack_response.get("scope"),
+                bot_user_id=slack_response.get("bot_user_id"),
+                webhook_url=slack_response.get("incoming_webhook", {}).get("url"),
+                data=slack_response,
+                team_id=slack_response.get("team", {}).get("id"),
+                team_name=slack_response.get("team", {}).get("name"),
+                workspace_integration=workspace_integration,
             )
-        except Exception as e:
-            print(e)
+            _ = ProjectMember.objects.get_or_create(
+                member=workspace_integration.actor, role=20, project_id=project_id
+            )
+            serializer = SlackProjectSyncSerializer(slack_project_sync)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"error": "Slack is already installed for the project"},
+                    status=status.HTTP_410_GONE,
+                )
+            capture_exception(e)
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Slack could not be installed. Please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 802431d2e8b..ff7f526915c 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -4,6 +4,7 @@
 from itertools import chain
 
 # Django imports
+from django.utils import timezone
 from django.db.models import (
     Prefetch,
     OuterRef,
@@ -17,18 +18,18 @@
     When,
     Exists,
     Max,
+    IntegerField,
 )
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
-from django.db.models.functions import Coalesce
-from django.conf import settings
+from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.parsers import MultiPartParser, FormParser
-from rest_framework.permissions import AllowAny
+from rest_framework.permissions import AllowAny, IsAuthenticated
 from sentry_sdk import capture_exception
 
 # Module imports
@@ -38,7 +39,6 @@
     IssueActivitySerializer,
     IssueCommentSerializer,
     IssuePropertySerializer,
-    LabelSerializer,
     IssueSerializer,
     LabelSerializer,
     IssueFlatSerializer,
@@ -50,10 +50,11 @@
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssueRelationSerializer,
+    RelatedIssueSerializer,
     IssuePublicSerializer,
 )
 from plane.api.permissions import (
-    WorkspaceEntityPermission,
     ProjectEntityPermission,
     WorkSpaceAdminPermission,
     ProjectMemberPermission,
@@ -75,12 +76,12 @@
     CommentReaction,
     ProjectDeployBoard,
     IssueVote,
+    IssueRelation,
     ProjectPublicMember,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
-from plane.bgtasks.export_task import issue_export_task
 
 
 class IssueViewSet(BaseViewSet):
@@ -106,47 +107,6 @@ def get_serializer_class(self):
         "workspace__id",
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(project_id=self.kwargs.get("project_id"))
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=requested_data,
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
-                ),
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="issue.activity.deleted",
-                requested_data=json.dumps(
-                    {"issue_id": str(self.kwargs.get("pk", None))}
-                ),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
-                ),
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return (
             Issue.issue_objects.annotate(
@@ -169,288 +129,318 @@ def get_queryset(self):
                     queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
-        )
+        ).distinct()
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", None]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
-
-            order_by_param = request.GET.get("order_by", "-created_at")
-
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        filters = issue_filters(request.query_params, "GET")
+
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+        )
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
-                )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            return Response(issues, status=status.HTTP_200_OK)
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def create(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(pk=project_id)
-
-            serializer = IssueCreateSerializer(
-                data=request.data,
-                context={
-                    "project_id": project_id,
-                    "workspace_id": project.workspace_id,
-                    "default_assignee_id": project.default_assignee_id,
-                },
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
             )
 
-            if serializer.is_valid():
-                serializer.save()
+        return Response(issues, status=status.HTTP_200_OK)
 
-                # Track the issue
-                issue_activity.delay(
-                    type="issue.activity.created",
-                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(serializer.data.get("id", None)),
-                    project_id=str(project_id),
-                    current_instance=None,
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+    def create(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id)
+
+        serializer = IssueCreateSerializer(
+            data=request.data,
+            context={
+                "project_id": project_id,
+                "workspace_id": project.workspace_id,
+                "default_assignee_id": project.default_assignee_id,
+            },
+        )
 
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project was not found"}, status=status.HTTP_404_NOT_FOUND
+        if serializer.is_valid():
+            serializer.save()
+
+            # Track the issue
+            issue_activity.delay(
+                type="issue.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(serializer.data.get("id", None)),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.issue_objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
+        issue = Issue.issue_objects.annotate(
+            sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        ).get(workspace__slug=slug, project_id=project_id, pk=pk)
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+
+    def partial_update(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(issue).data, cls=DjangoJSONEncoder
+        )
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        serializer = IssueCreateSerializer(issue, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(pk),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(issue).data, cls=DjangoJSONEncoder
+        )
+        issue.delete()
+        issue_activity.delay(
+            type="issue.activity.deleted",
+            requested_data=json.dumps({"issue_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserWorkSpaceIssues(BaseAPIView):
     @method_decorator(gzip_page)
     def get(self, request, slug):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", None]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
-
-            order_by_param = request.GET.get("order_by", "-created_at")
-
-            issue_queryset = (
-                Issue.issue_objects.filter(
-                    (Q(assignees__in=[request.user]) | Q(created_by=request.user)),
-                    workspace__slug=slug,
-                )
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by_param)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
+        filters = issue_filters(request.query_params, "GET")
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = (
+            Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[request.user])
+                    | Q(created_by=request.user)
+                    | Q(issue_subscribers__subscriber=request.user)
+                ),
+                workspace__slug=slug,
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by_param)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
-                .filter(**filters)
-            ).distinct()
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+            )
+            .filter(**filters)
+        ).distinct()
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Group by and sub group by cannot be same"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(issues, status=status.HTTP_200_OK)
+
 
 class WorkSpaceIssuesEndpoint(BaseAPIView):
     permission_classes = [
@@ -459,20 +449,13 @@ class WorkSpaceIssuesEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug):
-        try:
-            issues = (
-                Issue.issue_objects.filter(workspace__slug=slug)
-                .filter(project__project_projectmember__member=self.request.user)
-                .order_by("-created_at")
-            )
-            serializer = IssueSerializer(issues, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issues = (
+            Issue.issue_objects.filter(workspace__slug=slug)
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("-created_at")
+        )
+        serializer = IssueSerializer(issues, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class IssueActivityEndpoint(BaseAPIView):
@@ -482,42 +465,35 @@ class IssueActivityEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(issue_id=issue_id)
-                .filter(
-                    ~Q(field="comment"),
-                    project__project_projectmember__member=self.request.user,
-                )
-                .select_related("actor", "workspace", "issue", "project")
-            ).order_by("created_at")
-            issue_comments = (
-                IssueComment.objects.filter(issue_id=issue_id)
-                .filter(project__project_projectmember__member=self.request.user)
-                .order_by("created_at")
-                .select_related("actor", "issue", "project", "workspace")
-                .prefetch_related(
-                    Prefetch(
-                        "comment_reactions",
-                        queryset=CommentReaction.objects.select_related("actor"),
-                    )
+        issue_activities = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .filter(
+                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+                project__project_projectmember__member=self.request.user,
+            )
+            .select_related("actor", "workspace", "issue", "project")
+        ).order_by("created_at")
+        issue_comments = (
+            IssueComment.objects.filter(issue_id=issue_id)
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("created_at")
+            .select_related("actor", "issue", "project", "workspace")
+            .prefetch_related(
+                Prefetch(
+                    "comment_reactions",
+                    queryset=CommentReaction.objects.select_related("actor"),
                 )
             )
-            issue_activities = IssueActivitySerializer(issue_activities, many=True).data
-            issue_comments = IssueCommentSerializer(issue_comments, many=True).data
+        )
+        issue_activities = IssueActivitySerializer(issue_activities, many=True).data
+        issue_comments = IssueCommentSerializer(issue_comments, many=True).data
 
-            result_list = sorted(
-                chain(issue_activities, issue_comments),
-                key=lambda instance: instance["created_at"],
-            )
+        result_list = sorted(
+            chain(issue_activities, issue_comments),
+            key=lambda instance: instance["created_at"],
+        )
 
-            return Response(result_list, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(result_list, status=status.HTTP_200_OK)
 
 
 class IssueCommentViewSet(BaseViewSet):
@@ -532,61 +508,6 @@ class IssueCommentViewSet(BaseViewSet):
         "workspace__id",
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_id=self.kwargs.get("issue_id"),
-            actor=self.request.user if self.request.user is not None else None,
-        )
-        issue_activity.delay(
-            type="comment.activity.created",
-            requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id")),
-            project_id=str(self.kwargs.get("project_id")),
-            current_instance=None,
-        )
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="comment.activity.updated",
-                requested_data=requested_data,
-                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=json.dumps(
-                    IssueCommentSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="comment.activity.deleted",
-                requested_data=json.dumps(
-                    {"comment_id": str(self.kwargs.get("pk", 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=json.dumps(
-                    IssueCommentSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -610,66 +531,98 @@ def get_queryset(self):
             .distinct()
         )
 
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueCommentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+                actor=request.user,
+            )
+            issue_activity.delay(
+                type="comment.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id")),
+                project_id=str(self.kwargs.get("project_id")),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-class IssuePropertyViewSet(BaseViewSet):
-    serializer_class = IssuePropertySerializer
-    model = IssueProperty
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    filterset_fields = []
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"), user=self.request.user
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        issue_comment = IssueComment.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
         )
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(user=self.request.user)
-            .filter(project__project_projectmember__member=self.request.user)
-            .select_related("project")
-            .select_related("workspace")
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        current_instance = json.dumps(
+            IssueCommentSerializer(issue_comment).data,
+            cls=DjangoJSONEncoder,
         )
+        serializer = IssueCommentSerializer(
+            issue_comment, data=request.data, partial=True
+        )
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="comment.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def list(self, request, slug, project_id):
-        queryset = self.get_queryset()
-        serializer = IssuePropertySerializer(queryset, many=True)
-        return Response(
-            serializer.data[0] if len(serializer.data) > 0 else [],
-            status=status.HTTP_200_OK,
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_comment = IssueComment.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueCommentSerializer(issue_comment).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_comment.delete()
+        issue_activity.delay(
+            type="comment.activity.deleted",
+            requested_data=json.dumps({"comment_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
         )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
-    def create(self, request, slug, project_id):
-        try:
-            issue_property, created = IssueProperty.objects.get_or_create(
-                user=request.user,
-                project_id=project_id,
-            )
 
-            if not created:
-                issue_property.properties = request.data.get("properties", {})
-                issue_property.save()
+class IssueUserDisplayPropertyEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
 
-                serializer = IssuePropertySerializer(issue_property)
-                return Response(serializer.data, status=status.HTTP_200_OK)
+    def post(self, request, slug, project_id):
+        issue_property, created = IssueProperty.objects.get_or_create(
+            user=request.user,
+            project_id=project_id,
+        )
 
+        if not created:
             issue_property.properties = request.data.get("properties", {})
             issue_property.save()
-            serializer = IssuePropertySerializer(issue_property)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        issue_property.properties = request.data.get("properties", {})
+        issue_property.save()
+        serializer = IssuePropertySerializer(issue_property)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def get(self, request, slug, project_id):
+        issue_property, _ = IssueProperty.objects.get_or_create(
+            user=request.user, project_id=project_id
+        )
+        serializer = IssuePropertySerializer(issue_property)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class LabelViewSet(BaseViewSet):
@@ -679,10 +632,18 @@ class LabelViewSet(BaseViewSet):
         ProjectMemberPermission,
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-        )
+    def create(self, request, slug, project_id):
+        try:
+            serializer = LabelSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(project_id=project_id)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response(
+                {"error": "Label with the same name already exists in the project"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
     def get_queryset(self):
         return self.filter_queryset(
@@ -705,33 +666,26 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
     ]
 
     def delete(self, request, slug, project_id):
-        try:
-            issue_ids = request.data.get("issue_ids", [])
+        issue_ids = request.data.get("issue_ids", [])
 
-            if not len(issue_ids):
-                return Response(
-                    {"error": "Issue IDs are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            issues = Issue.issue_objects.filter(
-                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
+        if not len(issue_ids):
+            return Response(
+                {"error": "Issue IDs are required"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            total_issues = len(issues)
+        issues = Issue.issue_objects.filter(
+            workspace__slug=slug, project_id=project_id, pk__in=issue_ids
+        )
 
-            issues.delete()
+        total_issues = len(issues)
 
-            return Response(
-                {"message": f"{total_issues} issues were deleted"},
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issues.delete()
+
+        return Response(
+            {"message": f"{total_issues} issues were deleted"},
+            status=status.HTTP_200_OK,
+        )
 
 
 class SubIssuesEndpoint(BaseAPIView):
@@ -741,110 +695,102 @@ class SubIssuesEndpoint(BaseAPIView):
 
     @method_decorator(gzip_page)
     def get(self, request, slug, project_id, issue_id):
-        try:
-            sub_issues = (
-                Issue.issue_objects.filter(parent_id=issue_id, workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
+        sub_issues = (
+            Issue.issue_objects.filter(parent_id=issue_id, workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
-
-            state_distribution = (
-                State.objects.filter(
-                    workspace__slug=slug, state_issue__parent_id=issue_id
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
-                .annotate(state_group=F("group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
             )
+        )
 
-            result = {
-                item["state_group"]: item["state_count"] for item in state_distribution
-            }
+        state_distribution = (
+            State.objects.filter(workspace__slug=slug, state_issue__parent_id=issue_id)
+            .annotate(state_group=F("group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            serializer = IssueLiteSerializer(
-                sub_issues,
-                many=True,
-            )
-            return Response(
-                {
-                    "sub_issues": serializer.data,
-                    "state_distribution": result,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        result = {
+            item["state_group"]: item["state_count"] for item in state_distribution
+        }
+
+        serializer = IssueLiteSerializer(
+            sub_issues,
+            many=True,
+        )
+        return Response(
+            {
+                "sub_issues": serializer.data,
+                "state_distribution": result,
+            },
+            status=status.HTTP_200_OK,
+        )
 
     # Assign multiple sub issues
     def post(self, request, slug, project_id, issue_id):
-        try:
-            parent_issue = Issue.issue_objects.get(pk=issue_id)
-            sub_issue_ids = request.data.get("sub_issue_ids", [])
+        parent_issue = Issue.issue_objects.get(pk=issue_id)
+        sub_issue_ids = request.data.get("sub_issue_ids", [])
 
-            if not len(sub_issue_ids):
-                return Response(
-                    {"error": "Sub Issue IDs are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        if not len(sub_issue_ids):
+            return Response(
+                {"error": "Sub Issue IDs are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+        sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
 
-            for sub_issue in sub_issues:
-                sub_issue.parent = parent_issue
+        for sub_issue in sub_issues:
+            sub_issue.parent = parent_issue
 
-            _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
+        _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
 
-            updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+        updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
 
-            return Response(
-                IssueFlatSerializer(updated_sub_issues, many=True).data,
-                status=status.HTTP_200_OK,
-            )
-        except Issue.DoesNotExist:
-            return Response(
-                {"Parent Issue does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        # Track the issue
+        _ = [
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=json.dumps({"parent": str(issue_id)}),
+                actor_id=str(request.user.id),
+                issue_id=str(sub_issue_id),
+                project_id=str(project_id),
+                current_instance=json.dumps({"parent": str(sub_issue_id)}),
+                epoch=int(timezone.now().timestamp()),
             )
+            for sub_issue_id in sub_issue_ids
+        ]
+
+        return Response(
+            IssueFlatSerializer(updated_sub_issues, many=True).data,
+            status=status.HTTP_200_OK,
+        )
 
 
 class IssueLinkViewSet(BaseViewSet):
@@ -855,60 +801,6 @@ class IssueLinkViewSet(BaseViewSet):
     model = IssueLink
     serializer_class = IssueLinkSerializer
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_id=self.kwargs.get("issue_id"),
-        )
-        issue_activity.delay(
-            type="link.activity.created",
-            requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id")),
-            project_id=str(self.kwargs.get("project_id")),
-            current_instance=None,
-        )
-
-    def perform_update(self, serializer):
-        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="link.activity.updated",
-                requested_data=requested_data,
-                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=json.dumps(
-                    IssueLinkSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-            )
-
-        return super().perform_update(serializer)
-
-    def perform_destroy(self, instance):
-        current_instance = (
-            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
-        )
-        if current_instance is not None:
-            issue_activity.delay(
-                type="link.activity.deleted",
-                requested_data=json.dumps(
-                    {"link_id": str(self.kwargs.get("pk", 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=json.dumps(
-                    IssueLinkSerializer(current_instance).data,
-                    cls=DjangoJSONEncoder,
-                ),
-            )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return (
             super()
@@ -921,44 +813,96 @@ def get_queryset(self):
             .distinct()
         )
 
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueLinkSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+            )
+            issue_activity.delay(
+                type="link.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id")),
+                project_id=str(self.kwargs.get("project_id")),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        issue_link = IssueLink.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        requested_data = json.dumps(request.data, cls=DjangoJSONEncoder)
+        current_instance = json.dumps(
+            IssueLinkSerializer(issue_link).data,
+            cls=DjangoJSONEncoder,
+        )
+        serializer = IssueLinkSerializer(issue_link, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            issue_activity.delay(
+                type="link.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=current_instance,
+                epoch=int(timezone.now().timestamp()),
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_link = IssueLink.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueLinkSerializer(issue_link).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_activity.delay(
+            type="link.activity.deleted",
+            requested_data=json.dumps({"link_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_link.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class BulkCreateIssueLabelsEndpoint(BaseAPIView):
     def post(self, request, slug, project_id):
-        try:
-            label_data = request.data.get("label_data", [])
-            project = Project.objects.get(pk=project_id)
-
-            labels = Label.objects.bulk_create(
-                [
-                    Label(
-                        name=label.get("name", "Migrated"),
-                        description=label.get("description", "Migrated Issue"),
-                        color="#" + "%06x" % random.randint(0, 0xFFFFFF),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for label in label_data
-                ],
-                batch_size=50,
-                ignore_conflicts=True,
-            )
+        label_data = request.data.get("label_data", [])
+        project = Project.objects.get(pk=project_id)
+
+        labels = Label.objects.bulk_create(
+            [
+                Label(
+                    name=label.get("name", "Migrated"),
+                    description=label.get("description", "Migrated Issue"),
+                    color="#" + "%06x" % random.randint(0, 0xFFFFFF),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for label in label_data
+            ],
+            batch_size=50,
+            ignore_conflicts=True,
+        )
 
-            return Response(
-                {"labels": LabelSerializer(labels, many=True).data},
-                status=status.HTTP_201_CREATED,
-            )
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {"labels": LabelSerializer(labels, many=True).data},
+            status=status.HTTP_201_CREATED,
+        )
 
 
 class IssueAttachmentEndpoint(BaseAPIView):
@@ -970,64 +914,46 @@ class IssueAttachmentEndpoint(BaseAPIView):
     parser_classes = (MultiPartParser, FormParser)
 
     def post(self, request, slug, project_id, issue_id):
-        try:
-            serializer = IssueAttachmentSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(project_id=project_id, issue_id=issue_id)
-                issue_activity.delay(
-                    type="attachment.activity.created",
-                    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=json.dumps(
-                        serializer.data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-    def delete(self, request, slug, project_id, issue_id, pk):
-        try:
-            issue_attachment = IssueAttachment.objects.get(pk=pk)
-            issue_attachment.asset.delete(save=False)
-            issue_attachment.delete()
+        serializer = IssueAttachmentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(project_id=project_id, issue_id=issue_id)
             issue_activity.delay(
-                type="attachment.activity.deleted",
+                type="attachment.activity.created",
                 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,
+                current_instance=json.dumps(
+                    serializer.data,
+                    cls=DjangoJSONEncoder,
+                ),
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueAttachment.DoesNotExist:
-            return Response(
-                {"error": "Issue Attachment does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def delete(self, request, slug, project_id, issue_id, pk):
+        issue_attachment = IssueAttachment.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()),
+        )
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue_attachments = IssueAttachment.objects.filter(
-                issue_id=issue_id, workspace__slug=slug, project_id=project_id
-            )
-            serilaizer = IssueAttachmentSerializer(issue_attachments, many=True)
-            return Response(serilaizer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_attachments = IssueAttachment.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)
 
 
 class IssueArchiveViewSet(BaseViewSet):
@@ -1058,169 +984,136 @@ def get_queryset(self):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            show_sub_issues = request.GET.get("show_sub_issues", "true")
-
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", None]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
-
-            order_by_param = request.GET.get("order_by", "-created_at")
-
-            issue_queryset = (
-                self.get_queryset()
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        filters = issue_filters(request.query_params, "GET")
+        show_sub_issues = request.GET.get("show_sub_issues", "true")
+
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+        )
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issue_queryset = (
-                issue_queryset
-                if show_sub_issues == "true"
-                else issue_queryset.filter(parent__isnull=True)
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
             )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
+        issue_queryset = (
+            issue_queryset
+            if show_sub_issues == "true"
+            else issue_queryset.filter(parent__isnull=True)
+        )
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            return Response(issues, status=status.HTTP_200_OK)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(issues, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                archived_at__isnull=False,
-                pk=pk,
-            )
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            archived_at__isnull=False,
+            pk=pk,
+        )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, project_id, pk=None):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                archived_at__isnull=False,
-                pk=pk,
-            )
-            issue.archived_at = None
-            issue.save()
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=json.dumps({"archived_at": None}),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=None,
-            )
-
-            return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong, please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            archived_at__isnull=False,
+            pk=pk,
+        )
+        issue_activity.delay(
+            type="issue.activity.updated",
+            requested_data=json.dumps({"archived_at": None}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue.id),
+            project_id=str(project_id),
+            current_instance=json.dumps(
+                IssueSerializer(issue).data, cls=DjangoJSONEncoder
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue.archived_at = None
+        issue.save()
+
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
 
 class IssueSubscriberViewSet(BaseViewSet):
@@ -1262,122 +1155,75 @@ def get_queryset(self):
         )
 
     def list(self, request, slug, project_id, issue_id):
-        try:
-            members = (
-                ProjectMember.objects.filter(
-                    workspace__slug=slug, project_id=project_id
-                )
-                .annotate(
-                    is_subscribed=Exists(
-                        IssueSubscriber.objects.filter(
-                            workspace__slug=slug,
-                            project_id=project_id,
-                            issue_id=issue_id,
-                            subscriber=OuterRef("member"),
-                        )
+        members = (
+            ProjectMember.objects.filter(workspace__slug=slug, project_id=project_id)
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        issue_id=issue_id,
+                        subscriber=OuterRef("member"),
                     )
                 )
-                .select_related("member")
-            )
-            serializer = ProjectMemberLiteSerializer(members, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": e},
-                status=status.HTTP_400_BAD_REQUEST,
             )
+            .select_related("member")
+        )
+        serializer = ProjectMemberLiteSerializer(members, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, issue_id, subscriber_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.get(
-                project=project_id,
-                subscriber=subscriber_id,
-                workspace__slug=slug,
-                issue=issue_id,
-            )
-            issue_subscriber.delete()
-            return Response(
-                status=status.HTTP_204_NO_CONTENT,
-            )
-        except IssueSubscriber.DoesNotExist:
-            return Response(
-                {"error": "User is not subscribed to this issue"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.get(
+            project=project_id,
+            subscriber=subscriber_id,
+            workspace__slug=slug,
+            issue=issue_id,
+        )
+        issue_subscriber.delete()
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
 
     def subscribe(self, request, slug, project_id, issue_id):
-        try:
-            if IssueSubscriber.objects.filter(
-                issue_id=issue_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                project=project_id,
-            ).exists():
-                return Response(
-                    {"message": "User already subscribed to the issue."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            subscriber = IssueSubscriber.objects.create(
-                issue_id=issue_id,
-                subscriber_id=request.user.id,
-                project_id=project_id,
-            )
-            serilaizer = IssueSubscriberSerializer(subscriber)
-            return Response(serilaizer.data, status=status.HTTP_201_CREATED)
-        except Exception as e:
-            capture_exception(e)
+        if IssueSubscriber.objects.filter(
+            issue_id=issue_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            project=project_id,
+        ).exists():
             return Response(
-                {"error": "Something went wrong, please try again later"},
+                {"message": "User already subscribed to the issue."},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        subscriber = IssueSubscriber.objects.create(
+            issue_id=issue_id,
+            subscriber_id=request.user.id,
+            project_id=project_id,
+        )
+        serializer = IssueSubscriberSerializer(subscriber)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
     def unsubscribe(self, request, slug, project_id, issue_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.get(
-                project=project_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                issue=issue_id,
-            )
-            issue_subscriber.delete()
-            return Response(
-                status=status.HTTP_204_NO_CONTENT,
-            )
-        except IssueSubscriber.DoesNotExist:
-            return Response(
-                {"error": "User subscribed to this issue"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.get(
+            project=project_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            issue=issue_id,
+        )
+        issue_subscriber.delete()
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
 
     def subscription_status(self, request, slug, project_id, issue_id):
-        try:
-            issue_subscriber = IssueSubscriber.objects.filter(
-                issue=issue_id,
-                subscriber=request.user,
-                workspace__slug=slug,
-                project=project_id,
-            ).exists()
-            return Response({"subscribed": issue_subscriber}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong, please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue_subscriber = IssueSubscriber.objects.filter(
+            issue=issue_id,
+            subscriber=request.user,
+            workspace__slug=slug,
+            project=project_id,
+        ).exists()
+        return Response({"subscribed": issue_subscriber}, status=status.HTTP_200_OK)
 
 
 class IssueReactionViewSet(BaseViewSet):
@@ -1399,35 +1245,50 @@ def get_queryset(self):
             .distinct()
         )
 
-    def perform_create(self, serializer):
-        serializer.save(
-            issue_id=self.kwargs.get("issue_id"),
-            project_id=self.kwargs.get("project_id"),
-            actor=self.request.user,
-        )
-
-    def destroy(self, request, slug, project_id, issue_id, reaction_code):
-        try:
-            issue_reaction = IssueReaction.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
                 issue_id=issue_id,
-                reaction=reaction_code,
+                project_id=project_id,
                 actor=request.user,
             )
-            issue_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueReaction.DoesNotExist:
-            return Response(
-                {"error": "Issue reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+            issue_activity.delay(
+                type="issue_reaction.activity.created",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, reaction_code):
+        issue_reaction = IssueReaction.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            issue_id=issue_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="issue_reaction.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=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(issue_reaction.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CommentReactionViewSet(BaseViewSet):
@@ -1449,35 +1310,51 @@ def get_queryset(self):
             .distinct()
         )
 
-    def perform_create(self, serializer):
-        serializer.save(
-            actor=self.request.user,
-            comment_id=self.kwargs.get("comment_id"),
-            project_id=self.kwargs.get("project_id"),
-        )
-
-    def destroy(self, request, slug, project_id, comment_id, reaction_code):
-        try:
-            comment_reaction = CommentReaction.objects.get(
-                workspace__slug=slug,
+    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,
-                reaction=reaction_code,
-                actor=request.user,
-            )
-            comment_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CommentReaction.DoesNotExist:
-            return Response(
-                {"error": "Comment reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                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()),
             )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, comment_id, reaction_code):
+        comment_reaction = CommentReaction.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            comment_id=comment_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="comment_reaction.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(comment_reaction.id),
+                    "comment_id": str(comment_id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        comment_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueCommentPublicViewSet(BaseViewSet):
@@ -1489,137 +1366,109 @@ class IssueCommentPublicViewSet(BaseViewSet):
         "workspace__id",
     ]
 
+    def get_permissions(self):
+        if self.action in ["list", "retrieve"]:
+            self.permission_classes = [
+                AllowAny,
+            ]
+        else:
+            self.permission_classes = [
+                IsAuthenticated,
+            ]
+
+        return super(IssueCommentPublicViewSet, self).get_permissions()
+
     def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.comments:
-            return self.filter_queryset(
-                super()
-                .get_queryset()
-                .filter(workspace__slug=self.kwargs.get("slug"))
-                .filter(issue_id=self.kwargs.get("issue_id"))
-                .filter(access="EXTERNAL")
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("issue")
-                .annotate(
-                    is_member=Exists(
-                        ProjectMember.objects.filter(
-                            workspace__slug=self.kwargs.get("slug"),
-                            project_id=self.kwargs.get("project_id"),
-                            member_id=self.request.user.id,
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.comments:
+                return self.filter_queryset(
+                    super()
+                    .get_queryset()
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(issue_id=self.kwargs.get("issue_id"))
+                    .filter(access="EXTERNAL")
+                    .select_related("project")
+                    .select_related("workspace")
+                    .select_related("issue")
+                    .annotate(
+                        is_member=Exists(
+                            ProjectMember.objects.filter(
+                                workspace__slug=self.kwargs.get("slug"),
+                                project_id=self.kwargs.get("project_id"),
+                                member_id=self.request.user.id,
+                            )
                         )
                     )
-                )
-                .distinct()
-            )
-        else:
+                    .distinct()
+                ).order_by("created_at")
+            return IssueComment.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
             return IssueComment.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IssueCommentSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id,
-                    issue_id=issue_id,
-                    actor=request.user,
-                    access="EXTERNAL",
-                )
-                issue_activity.delay(
-                    type="comment.activity.created",
-                    requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(issue_id),
-                    project_id=str(project_id),
-                    current_instance=None,
-                )
-                if not ProjectMember.objects.filter(
-                    project_id=project_id,
-                    member=request.user,
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
 
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
+        if not project_deploy_board.comments:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Comments are not enabled for this project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def partial_update(self, request, slug, project_id, issue_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            comment = IssueComment.objects.get(
-                workspace__slug=slug, pk=pk, actor=request.user
+        serializer = IssueCommentSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id,
+                issue_id=issue_id,
+                actor=request.user,
+                access="EXTERNAL",
             )
-            serializer = IssueCommentSerializer(
-                comment, data=request.data, partial=True
+            issue_activity.delay(
+                type="comment.activity.created",
+                requested_data=json.dumps(serializer.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-            if serializer.is_valid():
-                serializer.save()
-                issue_activity.delay(
-                    type="comment.activity.updated",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(issue_id),
-                    project_id=str(project_id),
-                    current_instance=json.dumps(
-                        IssueCommentSerializer(comment).data,
-                        cls=DjangoJSONEncoder,
-                    ),
+            if not ProjectMember.objects.filter(
+                project_id=project_id,
+                member=request.user,
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
                 )
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
-            return Response(
-                {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
-    def destroy(self, request, slug, project_id, issue_id, pk):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-            if not project_deploy_board.comments:
-                return Response(
-                    {"error": "Comments are not enabled for this project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            comment = IssueComment.objects.get(
-                workspace__slug=slug, pk=pk, project_id=project_id, actor=request.user
+    def partial_update(self, request, slug, project_id, issue_id, pk):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.comments:
+            return Response(
+                {"error": "Comments are not enabled for this project"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
+        comment = IssueComment.objects.get(
+            workspace__slug=slug, pk=pk, actor=request.user
+        )
+        serializer = IssueCommentSerializer(comment, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
             issue_activity.delay(
-                type="comment.activity.deleted",
-                requested_data=json.dumps({"comment_id": str(pk)}),
+                type="comment.activity.updated",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
                 actor_id=str(request.user.id),
                 issue_id=str(issue_id),
                 project_id=str(project_id),
@@ -1627,20 +1476,38 @@ def destroy(self, request, slug, project_id, issue_id, pk):
                     IssueCommentSerializer(comment).data,
                     cls=DjangoJSONEncoder,
                 ),
+                epoch=int(timezone.now().timestamp()),
             )
-            comment.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
-            return Response(
-                {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.comments:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Comments are not enabled for this project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        comment = IssueComment.objects.get(
+            workspace__slug=slug, pk=pk, project_id=project_id, actor=request.user
+        )
+        issue_activity.delay(
+            type="comment.activity.deleted",
+            requested_data=json.dumps({"comment_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=json.dumps(
+                IssueCommentSerializer(comment).data,
+                cls=DjangoJSONEncoder,
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        comment.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueReactionPublicViewSet(BaseViewSet):
@@ -1648,93 +1515,94 @@ class IssueReactionPublicViewSet(BaseViewSet):
     model = IssueReaction
 
     def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.reactions:
-            return (
-                super()
-                .get_queryset()
-                .filter(workspace__slug=self.kwargs.get("slug"))
-                .filter(project_id=self.kwargs.get("project_id"))
-                .filter(issue_id=self.kwargs.get("issue_id"))
-                .order_by("-created_at")
-                .distinct()
-            )
-        else:
-            return IssueReaction.objects.none()
-
-    def create(self, request, slug, project_id, issue_id):
         try:
             project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this project board"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            serializer = IssueReactionSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id, issue_id=issue_id, actor=request.user
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.reactions:
+                return (
+                    super()
+                    .get_queryset()
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(project_id=self.kwargs.get("project_id"))
+                    .filter(issue_id=self.kwargs.get("issue_id"))
+                    .order_by("-created_at")
+                    .distinct()
                 )
-                if not ProjectMember.objects.filter(
-                    project_id=project_id,
-                    member=request.user,
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+            return IssueReaction.objects.none()
         except ProjectDeployBoard.DoesNotExist:
+            return IssueReaction.objects.none()
+
+    def create(self, request, slug, project_id, issue_id):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Project board does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this project board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, slug, project_id, issue_id, reaction_code):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
+        serializer = IssueReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id, issue_id=issue_id, actor=request.user
             )
-
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this project board"},
-                    status=status.HTTP_400_BAD_REQUEST,
+            if not ProjectMember.objects.filter(
+                project_id=project_id,
+                member=request.user,
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
                 )
-            issue_reaction = IssueReaction.objects.get(
-                workspace__slug=slug,
-                issue_id=issue_id,
-                reaction=reaction_code,
-                actor=request.user,
+            issue_activity.delay(
+                type="issue_reaction.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                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()),
             )
-            issue_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueReaction.DoesNotExist:
-            return Response(
-                {"error": "Issue reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, issue_id, reaction_code):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this project board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        issue_reaction = IssueReaction.objects.get(
+            workspace__slug=slug,
+            issue_id=issue_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="issue_reaction.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=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(issue_reaction.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class CommentReactionPublicViewSet(BaseViewSet):
@@ -1742,151 +1610,256 @@ class CommentReactionPublicViewSet(BaseViewSet):
     model = CommentReaction
 
     def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.reactions:
-            return (
-                super()
-                .get_queryset()
-                .filter(workspace__slug=self.kwargs.get("slug"))
-                .filter(project_id=self.kwargs.get("project_id"))
-                .filter(comment_id=self.kwargs.get("comment_id"))
-                .order_by("-created_at")
-                .distinct()
-            )
-        else:
-            return CommentReaction.objects.none()
-
-    def create(self, request, slug, project_id, comment_id):
         try:
             project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this board"},
-                    status=status.HTTP_400_BAD_REQUEST,
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.reactions:
+                return (
+                    super()
+                    .get_queryset()
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(project_id=self.kwargs.get("project_id"))
+                    .filter(comment_id=self.kwargs.get("comment_id"))
+                    .order_by("-created_at")
+                    .distinct()
                 )
-
-            serializer = CommentReactionSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(
-                    project_id=project_id, comment_id=comment_id, actor=request.user
-                )
-                if not ProjectMember.objects.filter(
-                    project_id=project_id, member=request.user
-                ).exists():
-                    # Add the user for workspace tracking
-                    _ = ProjectPublicMember.objects.get_or_create(
-                        project_id=project_id,
-                        member=request.user,
-                    )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+            return CommentReaction.objects.none()
         except ProjectDeployBoard.DoesNotExist:
+            return CommentReaction.objects.none()
+
+    def create(self, request, slug, project_id, comment_id):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Project board does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, slug, project_id, comment_id, reaction_code):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
+        serializer = CommentReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                project_id=project_id, comment_id=comment_id, actor=request.user
             )
-            if not project_deploy_board.reactions:
-                return Response(
-                    {"error": "Reactions are not enabled for this board"},
-                    status=status.HTTP_400_BAD_REQUEST,
+            if not ProjectMember.objects.filter(
+                project_id=project_id, member=request.user
+            ).exists():
+                # Add the user for workspace tracking
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
                 )
-
-            comment_reaction = CommentReaction.objects.get(
-                project_id=project_id,
-                workspace__slug=slug,
-                comment_id=comment_id,
-                reaction=reaction_code,
-                actor=request.user,
-            )
-            comment_reaction.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except CommentReaction.DoesNotExist:
-            return Response(
-                {"error": "Comment reaction does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
+            issue_activity.delay(
+                type="comment_reaction.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=None,
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-        except Exception as e:
-            capture_exception(e)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def destroy(self, request, slug, project_id, comment_id, reaction_code):
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+        if not project_deploy_board.reactions:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Reactions are not enabled for this board"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        comment_reaction = CommentReaction.objects.get(
+            project_id=project_id,
+            workspace__slug=slug,
+            comment_id=comment_id,
+            reaction=reaction_code,
+            actor=request.user,
+        )
+        issue_activity.delay(
+            type="comment_reaction.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "reaction": str(reaction_code),
+                    "identifier": str(comment_reaction.id),
+                    "comment_id": str(comment_id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        comment_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class IssueVotePublicViewSet(BaseViewSet):
     model = IssueVote
     serializer_class = IssueVoteSerializer
 
     def get_queryset(self):
-        return (
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.votes:
+                return (
+                    super()
+                    .get_queryset()
+                    .filter(issue_id=self.kwargs.get("issue_id"))
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(project_id=self.kwargs.get("project_id"))
+                )
+            return IssueVote.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
+            return IssueVote.objects.none()
+
+    def create(self, request, slug, project_id, issue_id):
+        issue_vote, _ = IssueVote.objects.get_or_create(
+            actor_id=request.user.id,
+            project_id=project_id,
+            issue_id=issue_id,
+        )
+        # Add the user for workspace tracking
+        if not ProjectMember.objects.filter(
+            project_id=project_id, member=request.user
+        ).exists():
+            _ = ProjectPublicMember.objects.get_or_create(
+                project_id=project_id,
+                member=request.user,
+            )
+        issue_vote.vote = request.data.get("vote", 1)
+        issue_vote.save()
+        issue_activity.delay(
+            type="issue_vote.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            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()),
+        )
+        serializer = IssueVoteSerializer(issue_vote)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def destroy(self, request, slug, project_id, issue_id):
+        issue_vote = IssueVote.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            issue_id=issue_id,
+            actor_id=request.user.id,
+        )
+        issue_activity.delay(
+            type="issue_vote.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=json.dumps(
+                {
+                    "vote": str(issue_vote.vote),
+                    "identifier": str(issue_vote.id),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
+        issue_vote.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class IssueRelationViewSet(BaseViewSet):
+    serializer_class = IssueRelationSerializer
+    model = IssueRelation
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get_queryset(self):
+        return self.filter_queryset(
             super()
             .get_queryset()
-            .filter(issue_id=self.kwargs.get("issue_id"))
             .filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
+            .filter(issue_id=self.kwargs.get("issue_id"))
+            .filter(project__project_projectmember__member=self.request.user)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("issue")
+            .distinct()
         )
 
     def create(self, request, slug, project_id, issue_id):
-        try:
-            issue_vote, _ = IssueVote.objects.get_or_create(
-                actor_id=request.user.id,
-                project_id=project_id,
-                issue_id=issue_id,
-            )
-            # Add the user for workspace tracking
-            if not ProjectMember.objects.filter(
-                project_id=project_id, member=request.user
-            ).exists():
-                _ = ProjectPublicMember.objects.get_or_create(
+        related_list = request.data.get("related_list", [])
+        relation = request.data.get("relation", None)
+        project = Project.objects.get(pk=project_id)
+
+        issue_relation = IssueRelation.objects.bulk_create(
+            [
+                IssueRelation(
+                    issue_id=related_issue["issue"],
+                    related_issue_id=related_issue["related_issue"],
+                    relation_type=related_issue["relation_type"],
                     project_id=project_id,
-                    member=request.user,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
                 )
-            issue_vote.vote = request.data.get("vote", 1)
-            issue_vote.save()
-            serializer = IssueVoteSerializer(issue_vote)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+                for related_issue in related_list
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
 
-    def destroy(self, request, slug, project_id, issue_id):
-        try:
-            issue_vote = IssueVote.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=issue_id,
-                actor_id=request.user.id,
+        issue_activity.delay(
+            type="issue_relation.activity.created",
+            requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+
+        if relation == "blocking":
+            return Response(
+                RelatedIssueSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
             )
-            issue_vote.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except Exception as e:
-            capture_exception(e)
+        else:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                IssueRelationSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
             )
 
+    def destroy(self, request, slug, project_id, issue_id, pk):
+        issue_relation = IssueRelation.objects.get(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+        )
+        current_instance = json.dumps(
+            IssueRelationSerializer(issue_relation).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_relation.delete()
+        issue_activity.delay(
+            type="issue_relation.activity.deleted",
+            requested_data=json.dumps({"related_list": None}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class IssueRetrievePublicEndpoint(BaseAPIView):
     permission_classes = [
@@ -1894,22 +1867,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id, issue_id):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=issue_id
-            )
-            serializer = IssuePublicSerializer(issue)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            print(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        issue = Issue.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=issue_id
+        )
+        serializer = IssuePublicSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class ProjectIssuesPublicEndpoint(BaseAPIView):
@@ -1918,144 +1880,366 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
 
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            # Custom ordering for priority and state
-            priority_order = ["urgent", "high", "medium", "low", None]
-            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            order_by_param = request.GET.get("order_by", "-created_at")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            issue_queryset = (
-                Issue.issue_objects.annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
+        issue_queryset = (
+            Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project", "workspace", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
+            )
+            .prefetch_related(
+                Prefetch(
+                    "votes",
+                    queryset=IssueVote.objects.select_related("actor"),
                 )
             )
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issues = IssuePublicSerializer(issue_queryset, many=True).data
+
+        state_group_order = [
+            "backlog",
+            "unstarted",
+            "started",
+            "completed",
+            "cancelled",
+        ]
+
+        states = (
+            State.objects.filter(
+                ~Q(name="Triage"),
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(
+                custom_order=Case(
+                    *[
+                        When(group=value, then=Value(index))
+                        for index, value in enumerate(state_group_order)
+                    ],
+                    default=Value(len(state_group_order)),
+                    output_field=IntegerField(),
+                ),
+            )
+            .values("name", "group", "color", "id")
+            .order_by("custom_order", "sequence")
+        )
+
+        labels = Label.objects.filter(
+            workspace__slug=slug, project_id=project_id
+        ).values("id", "name", "color", "parent")
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            issues = group_results(issues, group_by)
+
+        return Response(
+            {
+                "issues": issues,
+                "states": states,
+                "labels": labels,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class IssueDraftViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+    serializer_class = IssueFlatSerializer
+    model = Issue
+
+    def get_queryset(self):
+        return (
+            Issue.objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(is_draft=True)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
+        )
 
-            issues = IssuePublicSerializer(issue_queryset, many=True).data
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id):
+        filters = issue_filters(request.query_params, "GET")
 
-            states = State.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("name", "group", "color", "id")
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
 
-            labels = Label.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("id", "name", "color", "parent")
+        order_by_param = request.GET.get("order_by", "-created_at")
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                issues = group_results(issues, group_by)
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            grouped_results = group_results(issues, group_by)
             return Response(
-                {
-                    "issues": issues,
-                    "states": states,
-                    "labels": labels,
-                },
+                grouped_results,
                 status=status.HTTP_200_OK,
             )
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
+
+        return Response(issues, status=status.HTTP_200_OK)
+
+    def create(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id)
+
+        serializer = IssueCreateSerializer(
+            data=request.data,
+            context={
+                "project_id": project_id,
+                "workspace_id": project.workspace_id,
+                "default_assignee_id": project.default_assignee_id,
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save(is_draft=True)
+
+            # Track the issue
+            issue_activity.delay(
+                type="issue_draft.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(serializer.data.get("id", None)),
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def partial_update(self, request, slug, project_id, pk):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        serializer = IssueSerializer(issue, data=request.data, partial=True)
+
+        if serializer.is_valid():
+            if request.data.get("is_draft") is not None and not request.data.get(
+                "is_draft"
+            ):
+                serializer.save(created_at=timezone.now(), updated_at=timezone.now())
+            else:
+                serializer.save()
+            issue_activity.delay(
+                type="issue_draft.activity.updated",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("pk", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    IssueSerializer(issue).data,
+                    cls=DjangoJSONEncoder,
+                ),
+                epoch=int(timezone.now().timestamp()),
             )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
+    def retrieve(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk, is_draft=True
+        )
+        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+
+    def destroy(self, request, slug, project_id, pk=None):
+        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        current_instance = json.dumps(
+            IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
+        )
+        issue.delete()
+        issue_activity.delay(
+            type="issue_draft.activity.deleted",
+            requested_data=json.dumps({"issue_id": str(pk)}),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=current_instance,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 1cd741f8456..48f892764c5 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -2,6 +2,7 @@
 import json
 
 # Django Imports
+from django.utils import timezone
 from django.db import IntegrityError
 from django.db.models import Prefetch, F, OuterRef, Func, Exists, Count, Q
 from django.core import serializers
@@ -39,6 +40,7 @@
 from plane.utils.issue_filters import issue_filters
 from plane.utils.analytics_plot import burndown_plot
 
+
 class ModuleViewSet(BaseViewSet):
     model = Module
     permission_classes = [
@@ -77,172 +79,209 @@ def get_queryset(self):
                     queryset=ModuleLink.objects.select_related("module", "created_by"),
                 )
             )
-            .annotate(total_issues=Count("issue_module"))
+            .annotate(
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                ),
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="completed"),
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="started"),
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .order_by(order_by, "name")
         )
 
-    def perform_destroy(self, instance):
-        module_issues = list(
-            ModuleIssue.objects.filter(module_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
-        issue_activity.delay(
-            type="module.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "module_id": str(self.kwargs.get("pk")),
-                    "issues": [str(issue_id) for issue_id in module_issues],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
+    def create(self, request, slug, project_id):
+        project = Project.objects.get(workspace__slug=slug, pk=project_id)
+        serializer = ModuleWriteSerializer(
+            data=request.data, context={"project": project}
         )
 
-        return super().perform_destroy(instance)
+        if serializer.is_valid():
+            serializer.save()
 
-    def create(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(workspace__slug=slug, pk=project_id)
-            serializer = ModuleWriteSerializer(
-                data=request.data, context={"project": project}
-            )
+            module = Module.objects.get(pk=serializer.data["id"])
+            serializer = ModuleSerializer(module)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+    def retrieve(self, request, slug, project_id, pk):
+        queryset = self.get_queryset().get(pk=pk)
 
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "Project was not found"}, status=status.HTTP_404_NOT_FOUND
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_module__module_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
             )
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The module name is already taken"},
-                    status=status.HTTP_410_GONE,
+            .annotate(first_name=F("assignees__first_name"))
+            .annotate(last_name=F("assignees__last_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(display_name=F("assignees__display_name"))
+            .annotate(avatar=F("assignees__avatar"))
+            .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+            .annotate(
+                total_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
             )
-
-    def retrieve(self, request, slug, project_id, pk):
-        try:
-            queryset = self.get_queryset().get(pk=pk)
-
-            assignee_distribution = (
-                Issue.objects.filter(
-                    issue_module__module_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(first_name=F("assignees__first_name"))
-                .annotate(last_name=F("assignees__last_name"))
-                .annotate(assignee_id=F("assignees__id"))
-                .annotate(display_name=F("assignees__display_name"))
-                .annotate(avatar=F("assignees__avatar"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
-                .annotate(total_issues=Count("assignee_id"))
-                .annotate(
-                    completed_issues=Count(
-                        "assignee_id",
-                        filter=Q(completed_at__isnull=False),
-                    )
+            .annotate(
+                completed_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .annotate(
-                    pending_issues=Count(
-                        "assignee_id",
-                        filter=Q(completed_at__isnull=True),
-                    )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "assignee_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .order_by("first_name", "last_name")
             )
+            .order_by("first_name", "last_name")
+        )
 
-            label_distribution = (
-                Issue.objects.filter(
-                    issue_module__module_id=pk,
-                    workspace__slug=slug,
-                    project_id=project_id,
-                )
-                .annotate(label_name=F("labels__name"))
-                .annotate(color=F("labels__color"))
-                .annotate(label_id=F("labels__id"))
-                .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
-                .annotate(
-                    completed_issues=Count(
-                        "label_id",
-                        filter=Q(completed_at__isnull=False),
-                    )
+        label_distribution = (
+            Issue.objects.filter(
+                issue_module__module_id=pk,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .annotate(
-                    pending_issues=Count(
-                        "label_id",
-                        filter=Q(completed_at__isnull=True),
-                    )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "label_id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
                 )
-                .order_by("label_name")
             )
+            .order_by("label_name")
+        )
 
-            data = ModuleSerializer(queryset).data
-            data["distribution"] = {
-                "assignees": assignee_distribution,
-                "labels": label_distribution,
-                "completion_chart": {},
-            }
+        data = ModuleSerializer(queryset).data
+        data["distribution"] = {
+            "assignees": assignee_distribution,
+            "labels": label_distribution,
+            "completion_chart": {},
+        }
 
-            if queryset.start_date and queryset.target_date:
-                data["distribution"]["completion_chart"] = burndown_plot(
-                    queryset=queryset, slug=slug, project_id=project_id, module_id=pk
-                )
-
-            return Response(
-                data,
-                status=status.HTTP_200_OK,
+        if queryset.start_date and queryset.target_date:
+            data["distribution"]["completion_chart"] = burndown_plot(
+                queryset=queryset, slug=slug, project_id=project_id, module_id=pk
             )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, pk):
+        module = Module.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
+        module_issues = list(
+            ModuleIssue.objects.filter(module_id=pk).values_list("issue", flat=True)
+        )
+        module.delete()
+        issue_activity.delay(
+            type="module.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "module_id": str(pk),
+                    "issues": [str(issue_id) for issue_id in module_issues],
+                }
+            ),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ModuleIssueViewSet(BaseViewSet):
@@ -264,22 +303,6 @@ def perform_create(self, serializer):
             module_id=self.kwargs.get("module_id"),
         )
 
-    def perform_destroy(self, instance):
-        issue_activity.delay(
-            type="module.activity.deleted",
-            requested_data=json.dumps(
-                {
-                    "module_id": str(self.kwargs.get("module_id")),
-                    "issues": [str(instance.issue_id)],
-                }
-            ),
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("pk", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-        )
-        return super().perform_destroy(instance)
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -305,154 +328,162 @@ def get_queryset(self):
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id, module_id):
-        try:
-            order_by = request.GET.get("order_by", "created_at")
-            group_by = request.GET.get("group_by", False)
-            filters = issue_filters(request.query_params, "GET")
-            issues = (
-                Issue.issue_objects.filter(issue_module__module_id=module_id)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(bridge_id=F("issue_module__id"))
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .order_by(order_by)
-                .filter(**filters)
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
+        order_by = request.GET.get("order_by", "created_at")
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            Issue.issue_objects.filter(issue_module__module_id=module_id)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
             )
+            .annotate(bridge_id=F("issue_module__id"))
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .order_by(order_by)
+            .filter(**filters)
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
+        issues_data = IssueStateSerializer(issues, many=True).data
 
-            issues_data = IssueStateSerializer(issues, many=True).data
-
-            if group_by:
-                return Response(
-                    group_results(issues_data, group_by),
-                    status=status.HTTP_200_OK,
-                )
-
+        if sub_group_by and sub_group_by == group_by:
             return Response(
-                issues_data,
-                status=status.HTTP_200_OK,
+                {"error": "Group by and sub group by cannot be same"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                grouped_results,
+                status=status.HTTP_200_OK,
             )
 
+        return Response(
+            issues_data, status=status.HTTP_200_OK
+        )
+
     def create(self, request, slug, project_id, module_id):
-        try:
-            issues = request.data.get("issues", [])
-            if not len(issues):
-                return Response(
-                    {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-            module = Module.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=module_id
+        issues = request.data.get("issues", [])
+        if not len(issues):
+            return Response(
+                {"error": "Issues are required"}, status=status.HTTP_400_BAD_REQUEST
             )
+        module = Module.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=module_id
+        )
 
-            module_issues = list(ModuleIssue.objects.filter(issue_id__in=issues))
-
-            update_module_issue_activity = []
-            records_to_update = []
-            record_to_create = []
-
-            for issue in issues:
-                module_issue = [
-                    module_issue
-                    for module_issue in module_issues
-                    if str(module_issue.issue_id) in issues
-                ]
-
-                if len(module_issue):
-                    if module_issue[0].module_id != module_id:
-                        update_module_issue_activity.append(
-                            {
-                                "old_module_id": str(module_issue[0].module_id),
-                                "new_module_id": str(module_id),
-                                "issue_id": str(module_issue[0].issue_id),
-                            }
-                        )
-                        module_issue[0].module_id = module_id
-                        records_to_update.append(module_issue[0])
-                else:
-                    record_to_create.append(
-                        ModuleIssue(
-                            module=module,
-                            issue_id=issue,
-                            project_id=project_id,
-                            workspace=module.workspace,
-                            created_by=request.user,
-                            updated_by=request.user,
-                        )
+        module_issues = list(ModuleIssue.objects.filter(issue_id__in=issues))
+
+        update_module_issue_activity = []
+        records_to_update = []
+        record_to_create = []
+
+        for issue in issues:
+            module_issue = [
+                module_issue
+                for module_issue in module_issues
+                if str(module_issue.issue_id) in issues
+            ]
+
+            if len(module_issue):
+                if module_issue[0].module_id != module_id:
+                    update_module_issue_activity.append(
+                        {
+                            "old_module_id": str(module_issue[0].module_id),
+                            "new_module_id": str(module_id),
+                            "issue_id": str(module_issue[0].issue_id),
+                        }
                     )
+                    module_issue[0].module_id = module_id
+                    records_to_update.append(module_issue[0])
+            else:
+                record_to_create.append(
+                    ModuleIssue(
+                        module=module,
+                        issue_id=issue,
+                        project_id=project_id,
+                        workspace=module.workspace,
+                        created_by=request.user,
+                        updated_by=request.user,
+                    )
+                )
 
-            ModuleIssue.objects.bulk_create(
-                record_to_create,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+        ModuleIssue.objects.bulk_create(
+            record_to_create,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
 
-            ModuleIssue.objects.bulk_update(
-                records_to_update,
-                ["module"],
-                batch_size=10,
-            )
+        ModuleIssue.objects.bulk_update(
+            records_to_update,
+            ["module"],
+            batch_size=10,
+        )
 
-            # Capture Issue Activity
-            issue_activity.delay(
-                type="module.activity.created",
-                requested_data=json.dumps({"modules_list": issues}),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    {
-                        "updated_module_issues": update_module_issue_activity,
-                        "created_module_issues": serializers.serialize(
-                            "json", record_to_create
-                        ),
-                    }
-                ),
-            )
+        # Capture Issue Activity
+        issue_activity.delay(
+            type="module.activity.created",
+            requested_data=json.dumps({"modules_list": issues}),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("pk", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=json.dumps(
+                {
+                    "updated_module_issues": update_module_issue_activity,
+                    "created_module_issues": serializers.serialize(
+                        "json", record_to_create
+                    ),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+        )
 
-            return Response(
-                ModuleIssueSerializer(self.get_queryset(), many=True).data,
-                status=status.HTTP_200_OK,
-            )
-        except Module.DoesNotExist:
-            return Response(
-                {"error": "Module Does not exists"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            ModuleIssueSerializer(self.get_queryset(), many=True).data,
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, project_id, module_id, pk):
+        module_issue = ModuleIssue.objects.get(
+            workspace__slug=slug, project_id=project_id, module_id=module_id, pk=pk
+        )
+        module_issue.delete()
+        issue_activity.delay(
+            type="module.activity.deleted",
+            requested_data=json.dumps(
+                {
+                    "module_id": str(module_id),
+                    "issues": [str(module_issue.issue_id)],
+                }
+            ),
+            actor_id=str(request.user.id),
+            issue_id=str(pk),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ModuleLinkViewSet(BaseViewSet):
@@ -483,7 +514,6 @@ def get_queryset(self):
 
 
 class ModuleFavoriteViewSet(BaseViewSet):
-
     serializer_class = ModuleFavoriteSerializer
     model = ModuleFavorite
 
@@ -497,49 +527,18 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = ModuleFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The module is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ModuleFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, module_id):
-        try:
-            module_favorite = ModuleFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                module_id=module_id,
-            )
-            module_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ModuleFavorite.DoesNotExist:
-            return Response(
-                {"error": "Module is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        module_favorite = ModuleFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            module_id=module_id,
+        )
+        module_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/notification.py b/apiserver/plane/api/views/notification.py
index 75b94f034bd..978c01bac34 100644
--- a/apiserver/plane/api/views/notification.py
+++ b/apiserver/plane/api/views/notification.py
@@ -36,328 +36,239 @@ def get_queryset(self):
         )
 
     def list(self, request, slug):
-        try:
-            snoozed = request.GET.get("snoozed", "false")
-            archived = request.GET.get("archived", "false")
-            read = request.GET.get("read", "true")
-
-            # Filter type
-            type = request.GET.get("type", "all")
-
-            notifications = (
-                Notification.objects.filter(
-                    workspace__slug=slug, receiver_id=request.user.id
-                )
-                .select_related("workspace", "project", "triggered_by", "receiver")
-                .order_by("snoozed_till", "-created_at")
+        # Get query parameters
+        snoozed = request.GET.get("snoozed", "false")
+        archived = request.GET.get("archived", "false")
+        read = request.GET.get("read", "true")
+        type = request.GET.get("type", "all")
+
+        notifications = (
+            Notification.objects.filter(
+                workspace__slug=slug, receiver_id=request.user.id
             )
+            .select_related("workspace", "project", "triggered_by", "receiver")
+            .order_by("snoozed_till", "-created_at")
+        )
 
-            # Filter for snoozed notifications
-            if snoozed == "false":
-                notifications = notifications.filter(
-                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
-                )
-
-            if snoozed == "true":
-                notifications = notifications.filter(
-                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
-                )
-
-            if read == "false":
-                notifications = notifications.filter(read_at__isnull=True)
-
-            # Filter for archived or unarchive
-            if archived == "false":
-                notifications = notifications.filter(archived_at__isnull=True)
-
-            if archived == "true":
-                notifications = notifications.filter(archived_at__isnull=False)
-
-            # Subscribed issues
-            if type == "watching":
-                issue_ids = IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True)
-                notifications = notifications.filter(entity_identifier__in=issue_ids)
-
-            # Assigned Issues
-            if type == "assigned":
-                issue_ids = IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True)
+        # Filters based on query parameters
+        snoozed_filters = {
+            "true": Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False),
+            "false": Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
+        }
+
+        notifications = notifications.filter(snoozed_filters[snoozed])
+
+        archived_filters = {
+            "true": Q(archived_at__isnull=False),
+            "false": Q(archived_at__isnull=True),
+        }
+
+        notifications = notifications.filter(archived_filters[archived])
+
+        if read == "false":
+            notifications = notifications.filter(read_at__isnull=True)
+
+        # Subscribed issues
+        if type == "watching":
+            issue_ids = IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Assigned Issues
+        if type == "assigned":
+            issue_ids = IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Created issues
+        if type == "created":
+            if WorkspaceMember.objects.filter(
+                workspace__slug=slug, member=request.user, role__lt=15
+            ).exists():
+                notifications = Notification.objects.none()
+            else:
+                issue_ids = Issue.objects.filter(
+                    workspace__slug=slug, created_by=request.user
+                ).values_list("pk", flat=True)
                 notifications = notifications.filter(entity_identifier__in=issue_ids)
 
-            # Created issues
-            if type == "created":
-                if WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member=request.user, role__lt=15
-                ).exists():
-                    notifications = Notification.objects.none()
-                else:
-                    issue_ids = Issue.objects.filter(
-                        workspace__slug=slug, created_by=request.user
-                    ).values_list("pk", flat=True)
-                    notifications = notifications.filter(
-                        entity_identifier__in=issue_ids
-                    )
-
-            # Pagination
-            if request.GET.get("per_page", False) and request.GET.get("cursor", False):
-                return self.paginate(
-                    request=request,
-                    queryset=(notifications),
-                    on_results=lambda notifications: NotificationSerializer(
-                        notifications, many=True
-                    ).data,
-                )
-
-            serializer = NotificationSerializer(notifications, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        # Pagination
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=(notifications),
+                on_results=lambda notifications: NotificationSerializer(
+                    notifications, many=True
+                ).data,
             )
 
+        serializer = NotificationSerializer(notifications, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     def partial_update(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                workspace__slug=slug, pk=pk, receiver=request.user
-            )
-            # Only read_at and snoozed_till can be updated
-            notification_data = {
-                "snoozed_till": request.data.get("snoozed_till", None),
-            }
-            serializer = NotificationSerializer(
-                notification, data=notification_data, partial=True
-            )
+        notification = Notification.objects.get(
+            workspace__slug=slug, pk=pk, receiver=request.user
+        )
+        # Only read_at and snoozed_till can be updated
+        notification_data = {
+            "snoozed_till": request.data.get("snoozed_till", None),
+        }
+        serializer = NotificationSerializer(
+            notification, data=notification_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 Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        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)
 
     def mark_read(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.read_at = timezone.now()
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.read_at = timezone.now()
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def mark_unread(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.read_at = None
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.read_at = None
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def archive(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.archived_at = timezone.now()
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.archived_at = timezone.now()
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, pk):
-        try:
-            notification = Notification.objects.get(
-                receiver=request.user, workspace__slug=slug, pk=pk
-            )
-            notification.archived_at = None
-            notification.save()
-            serializer = NotificationSerializer(notification)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Notification.DoesNotExist:
-            return Response(
-                {"error": "Notification does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        notification = Notification.objects.get(
+            receiver=request.user, workspace__slug=slug, pk=pk
+        )
+        notification.archived_at = None
+        notification.save()
+        serializer = NotificationSerializer(notification)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class UnreadNotificationEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            # Watching Issues Count
-            watching_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True),
-            ).count()
-
-            # My Issues Count
-            my_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True),
-            ).count()
-
-            # Created Issues Count
-            created_issues_count = Notification.objects.filter(
-                workspace__slug=slug,
-                receiver_id=request.user.id,
-                read_at__isnull=True,
-                archived_at__isnull=True,
-                entity_identifier__in=Issue.objects.filter(
-                    workspace__slug=slug, created_by=request.user
-                ).values_list("pk", flat=True),
-            ).count()
-
-            return Response(
-                {
-                    "watching_issues": watching_issues_count,
-                    "my_issues": my_issues_count,
-                    "created_issues": created_issues_count,
-                },
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Watching Issues Count
+        watching_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True),
+        ).count()
+
+        # My Issues Count
+        my_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True),
+        ).count()
+
+        # Created Issues Count
+        created_issues_count = Notification.objects.filter(
+            workspace__slug=slug,
+            receiver_id=request.user.id,
+            read_at__isnull=True,
+            archived_at__isnull=True,
+            entity_identifier__in=Issue.objects.filter(
+                workspace__slug=slug, created_by=request.user
+            ).values_list("pk", flat=True),
+        ).count()
+
+        return Response(
+            {
+                "watching_issues": watching_issues_count,
+                "my_issues": my_issues_count,
+                "created_issues": created_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class MarkAllReadNotificationViewSet(BaseViewSet):
     def create(self, request, slug):
-        try:
-            snoozed = request.data.get("snoozed", False)
-            archived = request.data.get("archived", False)
-            type = request.data.get("type", "all")
-
-            notifications = (
-                Notification.objects.filter(
-                    workspace__slug=slug,
-                    receiver_id=request.user.id,
-                    read_at__isnull=True,
-                )
-                .select_related("workspace", "project", "triggered_by", "receiver")
-                .order_by("snoozed_till", "-created_at")
+        snoozed = request.data.get("snoozed", False)
+        archived = request.data.get("archived", False)
+        type = request.data.get("type", "all")
+
+        notifications = (
+            Notification.objects.filter(
+                workspace__slug=slug,
+                receiver_id=request.user.id,
+                read_at__isnull=True,
             )
+            .select_related("workspace", "project", "triggered_by", "receiver")
+            .order_by("snoozed_till", "-created_at")
+        )
 
-            # Filter for snoozed notifications
-            if snoozed:
-                notifications = notifications.filter(
-                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
-                )
-            else:
-                notifications = notifications.filter(
-                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
-                )
+        # Filter for snoozed notifications
+        if snoozed:
+            notifications = notifications.filter(
+                Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
+            )
+        else:
+            notifications = notifications.filter(
+                Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
+            )
 
-            # Filter for archived or unarchive
-            if archived:
-                notifications = notifications.filter(archived_at__isnull=False)
+        # Filter for archived or unarchive
+        if archived:
+            notifications = notifications.filter(archived_at__isnull=False)
+        else:
+            notifications = notifications.filter(archived_at__isnull=True)
+
+        # Subscribed issues
+        if type == "watching":
+            issue_ids = IssueSubscriber.objects.filter(
+                workspace__slug=slug, subscriber_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Assigned Issues
+        if type == "assigned":
+            issue_ids = IssueAssignee.objects.filter(
+                workspace__slug=slug, assignee_id=request.user.id
+            ).values_list("issue_id", flat=True)
+            notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+        # Created issues
+        if type == "created":
+            if WorkspaceMember.objects.filter(
+                workspace__slug=slug, member=request.user, role__lt=15
+            ).exists():
+                notifications = Notification.objects.none()
             else:
-                notifications = notifications.filter(archived_at__isnull=True)
-
-            # Subscribed issues
-            if type == "watching":
-                issue_ids = IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subscriber_id=request.user.id
-                ).values_list("issue_id", flat=True)
-                notifications = notifications.filter(entity_identifier__in=issue_ids)
-
-            # Assigned Issues
-            if type == "assigned":
-                issue_ids = IssueAssignee.objects.filter(
-                    workspace__slug=slug, assignee_id=request.user.id
-                ).values_list("issue_id", flat=True)
+                issue_ids = Issue.objects.filter(
+                    workspace__slug=slug, created_by=request.user
+                ).values_list("pk", flat=True)
                 notifications = notifications.filter(entity_identifier__in=issue_ids)
 
-            # Created issues
-            if type == "created":
-                if WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member=request.user, role__lt=15
-                ).exists():
-                    notifications = Notification.objects.none()
-                else:
-                    issue_ids = Issue.objects.filter(
-                        workspace__slug=slug, created_by=request.user
-                    ).values_list("pk", flat=True)
-                    notifications = notifications.filter(
-                        entity_identifier__in=issue_ids
-                    )
-
-            updated_notifications = []
-            for notification in notifications:
-                notification.read_at = timezone.now()
-                updated_notifications.append(notification)
-            Notification.objects.bulk_update(
-                updated_notifications, ["read_at"], batch_size=100
-            )
-            return Response({"message": "Successful"}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        updated_notifications = []
+        for notification in notifications:
+            notification.read_at = timezone.now()
+            updated_notifications.append(notification)
+        Notification.objects.bulk_update(
+            updated_notifications, ["read_at"], batch_size=100
+        )
+        return Response({"message": "Successful"}, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/oauth.py b/apiserver/plane/api/views/oauth.py
index 184cba9517d..f0ea9acc99c 100644
--- a/apiserver/plane/api/views/oauth.py
+++ b/apiserver/plane/api/views/oauth.py
@@ -11,10 +11,10 @@
 from rest_framework.response import Response
 from rest_framework import exceptions
 from rest_framework.permissions import AllowAny
-from rest_framework.views import APIView
 from rest_framework_simplejwt.tokens import RefreshToken
 from rest_framework import status
 from sentry_sdk import capture_exception
+
 # sso authentication
 from google.oauth2 import id_token
 from google.auth.transport import requests as google_auth_request
@@ -112,7 +112,7 @@ def get_user_data(access_token: str) -> dict:
         url="https://api.github.com/user/emails", headers=headers
     ).json()
 
-    [
+    _ = [
         user_data.update({"email": item.get("email")})
         for item in response
         if item.get("primary") is True
@@ -146,7 +146,7 @@ def post(self, request):
                 data = get_user_data(access_token)
 
             email = data.get("email", None)
-            if email == None:
+            if email is None:
                 return Response(
                     {
                         "error": "Something went wrong. Please try again later or contact the support team."
@@ -157,7 +157,6 @@ def post(self, request):
             if "@" in email:
                 user = User.objects.get(email=email)
                 email = data["email"]
-                channel = "email"
                 mobile_number = uuid.uuid4().hex
                 email_verified = True
             else:
@@ -181,19 +180,16 @@ def post(self, request):
             user.last_active = timezone.now()
             user.last_login_time = timezone.now()
             user.last_login_ip = request.META.get("REMOTE_ADDR")
-            user.last_login_medium = f"oauth"
+            user.last_login_medium = "oauth"
             user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
             user.is_email_verified = email_verified
             user.save()
 
-            serialized_user = UserSerializer(user).data
-
             access_token, refresh_token = get_tokens_for_user(user)
 
             data = {
                 "access_token": access_token,
                 "refresh_token": refresh_token,
-                "user": serialized_user,
             }
 
             SocialLoginConnection.objects.update_or_create(
@@ -235,7 +231,6 @@ def post(self, request):
             if "@" in email:
                 email = data["email"]
                 mobile_number = uuid.uuid4().hex
-                channel = "email"
                 email_verified = True
             else:
                 return Response(
@@ -264,14 +259,11 @@ def post(self, request):
             user.last_login_uagent = request.META.get("HTTP_USER_AGENT")
             user.token_updated_at = timezone.now()
             user.save()
-            serialized_user = UserSerializer(user).data
 
             access_token, refresh_token = get_tokens_for_user(user)
             data = {
                 "access_token": access_token,
                 "refresh_token": refresh_token,
-                "user": serialized_user,
-                "permissions": [],
             }
             if settings.ANALYTICS_BASE_API:
                 _ = requests.post(
@@ -304,11 +296,3 @@ def post(self, request):
                 },
             )
             return Response(data, status=status.HTTP_201_CREATED)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong. Please try again later or contact the support team."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/page.py b/apiserver/plane/api/views/page.py
index d9fad9eaa95..ca0927a519c 100644
--- a/apiserver/plane/api/views/page.py
+++ b/apiserver/plane/api/views/page.py
@@ -1,8 +1,7 @@
 # Python imports
-from datetime import timedelta, datetime, date
+from datetime import timedelta, date
 
 # Django imports
-from django.db import IntegrityError
 from django.db.models import Exists, OuterRef, Q, Prefetch
 from django.utils import timezone
 
@@ -78,104 +77,82 @@ def perform_create(self, serializer):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = PageSerializer(
-                data=request.data,
-                context={"project_id": project_id, "owned_by_id": request.user.id},
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        serializer = PageSerializer(
+            data=request.data,
+            context={"project_id": project_id, "owned_by_id": request.user.id},
+        )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
-        try:
-            page = Page.objects.get(pk=pk, workspace__slug=slug, project_id=project_id)
-            # Only update access if the page owner is the requesting  user
-            if (
-                page.access != request.data.get("access", page.access)
-                and page.owned_by_id != request.user.id
-            ):
-                return Response(
-                    {
-                        "error": "Access cannot be updated since this page is owned by someone else"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            serializer = PageSerializer(page, 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 Page.DoesNotExist:
-            return Response(
-                {"error": "Page Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            capture_exception(e)
+        page = Page.objects.get(pk=pk, workspace__slug=slug, project_id=project_id)
+        # Only update access if the page owner is the requesting  user
+        if (
+            page.access != request.data.get("access", page.access)
+            and page.owned_by_id != request.user.id
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "Access cannot be updated since this page is owned by someone else"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        serializer = PageSerializer(page, 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)
         
     def list(self, request, slug, project_id):
-        try:
-            queryset = self.get_queryset()
-            page_view = request.GET.get("page_view", False)
-
-            if not page_view:
-                return Response({"error": "Page View parameter is required"}, status=status.HTTP_400_BAD_REQUEST)
-
-            # All Pages
-            if page_view == "all":
-                return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
+        queryset = self.get_queryset()
+        page_view = request.GET.get("page_view", False)
+
+        if not page_view:
+            return Response({"error": "Page View parameter is required"}, status=status.HTTP_400_BAD_REQUEST)
+
+        # All Pages
+        if page_view == "all":
+            return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
+
+        # Recent pages
+        if page_view == "recent":
+            current_time = date.today()
+            day_before = current_time - timedelta(days=1)
+            todays_pages = queryset.filter(updated_at__date=date.today())
+            yesterdays_pages = queryset.filter(updated_at__date=day_before)
+            earlier_this_week = queryset.filter(                    updated_at__date__range=(
+                    (timezone.now() - timedelta(days=7)),
+                    (timezone.now() - timedelta(days=2)),
+                ))
+            return Response(
+            {
+                "today": PageSerializer(todays_pages, many=True).data,
+                "yesterday": PageSerializer(yesterdays_pages, many=True).data,
+                "earlier_this_week": PageSerializer(earlier_this_week, many=True).data,
+            },
+            status=status.HTTP_200_OK,
+        )
 
-            # Recent pages
-            if page_view == "recent":
-                current_time = date.today()
-                day_before = current_time - timedelta(days=1)
-                todays_pages = queryset.filter(updated_at__date=date.today())
-                yesterdays_pages = queryset.filter(updated_at__date=day_before)
-                earlier_this_week = queryset.filter(                    updated_at__date__range=(
-                        (timezone.now() - timedelta(days=7)),
-                        (timezone.now() - timedelta(days=2)),
-                    ))
-                return Response(
-                {
-                    "today": PageSerializer(todays_pages, many=True).data,
-                    "yesterday": PageSerializer(yesterdays_pages, many=True).data,
-                    "earlier_this_week": PageSerializer(earlier_this_week, many=True).data,
-                },
-                status=status.HTTP_200_OK,
-            )
+        # Favorite Pages
+        if page_view == "favorite":
+            queryset = queryset.filter(is_favorite=True)
+            return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
+        
+        # My pages
+        if page_view == "created_by_me":
+            queryset = queryset.filter(owned_by=request.user)
+            return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
 
-            # Favorite Pages
-            if page_view == "favorite":
-                queryset = queryset.filter(is_favorite=True)
-                return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
-            
-            # My pages
-            if page_view == "created_by_me":
-                queryset = queryset.filter(owned_by=request.user)
-                return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
+        # Created by other Pages
+        if page_view == "created_by_other":
+            queryset = queryset.filter(~Q(owned_by=request.user),  access=0)
+            return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
 
-            # Created by other Pages
-            if page_view == "created_by_other":
-                queryset = queryset.filter(~Q(owned_by=request.user),  access=0)
-                return Response(PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK)
+        return Response({"error": "No matching view found"}, status=status.HTTP_400_BAD_REQUEST)
 
-            return Response({"error": "No matching view found"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
 
 class PageBlockViewSet(BaseViewSet):
     serializer_class = PageBlockSerializer
@@ -225,53 +202,21 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = PageFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The page is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = PageFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, page_id):
-        try:
-            page_favorite = PageFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                page_id=page_id,
-            )
-            page_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except PageFavorite.DoesNotExist:
-            return Response(
-                {"error": "Page is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
+        page_favorite = PageFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            page_id=page_id,
+        )
+        page_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 class CreateIssueFromPageBlockEndpoint(BaseAPIView):
     permission_classes = [
@@ -279,43 +224,32 @@ class CreateIssueFromPageBlockEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id, page_id, page_block_id):
-        try:
-            page_block = PageBlock.objects.get(
-                pk=page_block_id,
-                workspace__slug=slug,
-                project_id=project_id,
-                page_id=page_id,
-            )
-            issue = Issue.objects.create(
-                name=page_block.name,
-                project_id=project_id,
-                description=page_block.description,
-                description_html=page_block.description_html,
-                description_stripped=page_block.description_stripped,
-            )
-            _ = IssueAssignee.objects.create(
-                issue=issue, assignee=request.user, project_id=project_id
-            )
+        page_block = PageBlock.objects.get(
+            pk=page_block_id,
+            workspace__slug=slug,
+            project_id=project_id,
+            page_id=page_id,
+        )
+        issue = Issue.objects.create(
+            name=page_block.name,
+            project_id=project_id,
+            description=page_block.description,
+            description_html=page_block.description_html,
+            description_stripped=page_block.description_stripped,
+        )
+        _ = IssueAssignee.objects.create(
+            issue=issue, assignee=request.user, project_id=project_id
+        )
 
-            _ = IssueActivity.objects.create(
-                issue=issue,
-                actor=request.user,
-                project_id=project_id,
-                comment=f"created the issue from {page_block.name} block",
-                verb="created",
-            )
+        _ = IssueActivity.objects.create(
+            issue=issue,
+            actor=request.user,
+            project_id=project_id,
+            comment=f"created the issue from {page_block.name} block",
+            verb="created",
+        )
 
-            page_block.issue = issue
-            page_block.save()
+        page_block.issue = issue
+        page_block.save()
 
-            return Response(IssueLiteSerializer(issue).data, status=status.HTTP_200_OK)
-        except PageBlock.DoesNotExist:
-            return Response(
-                {"error": "Page Block does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(IssueLiteSerializer(issue).data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 97b06fce581..37e491e8395 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1,24 +1,19 @@
 # Python imports
 import jwt
+import boto3
 from datetime import datetime
 
 # Django imports
 from django.core.exceptions import ValidationError
 from django.db import IntegrityError
 from django.db.models import (
+    Prefetch,
     Q,
     Exists,
     OuterRef,
-    Func,
     F,
-    Max,
-    CharField,
     Func,
     Subquery,
-    Prefetch,
-    When,
-    Case,
-    Value,
 )
 from django.core.validators import validate_email
 from django.conf import settings
@@ -34,11 +29,11 @@
 from .base import BaseViewSet, BaseAPIView
 from plane.api.serializers import (
     ProjectSerializer,
+    ProjectListSerializer,
     ProjectMemberSerializer,
     ProjectDetailSerializer,
     ProjectMemberInviteSerializer,
     ProjectFavoriteSerializer,
-    IssueLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
 )
@@ -47,6 +42,7 @@
     ProjectBasePermission,
     ProjectEntityPermission,
     ProjectMemberPermission,
+    ProjectLitePermission,
 )
 
 from plane.db.models import (
@@ -71,16 +67,10 @@
     ModuleMember,
     Inbox,
     ProjectDeployBoard,
-    Issue,
-    IssueReaction,
-    IssueLink,
-    IssueAttachment,
-    Label,
+    IssueProperty,
 )
 
 from plane.bgtasks.project_invitation_task import project_invitation
-from plane.utils.grouper import group_results
-from plane.utils.issue_filters import issue_filters
 
 
 class ProjectViewSet(BaseViewSet):
@@ -92,17 +82,11 @@ class ProjectViewSet(BaseViewSet):
     ]
 
     def get_serializer_class(self, *args, **kwargs):
-        if self.action == "update" or self.action == "partial_update":
+        if self.action in ["update", "partial_update"]:
             return ProjectSerializer
         return ProjectDetailSerializer
 
     def get_queryset(self):
-        subquery = ProjectFavorite.objects.filter(
-            user=self.request.user,
-            project_id=OuterRef("pk"),
-            workspace__slug=self.kwargs.get("slug"),
-        )
-
         return self.filter_queryset(
             super()
             .get_queryset()
@@ -111,7 +95,15 @@ def get_queryset(self):
             .select_related(
                 "workspace", "workspace__owner", "default_assignee", "project_lead"
             )
-            .annotate(is_favorite=Exists(subquery))
+            .annotate(
+                is_favorite=Exists(
+                    ProjectFavorite.objects.filter(
+                        user=self.request.user,
+                        project_id=OuterRef("pk"),
+                        workspace__slug=self.kwargs.get("slug"),
+                    )
+                )
+            )
             .annotate(
                 is_member=Exists(
                     ProjectMember.objects.filter(
@@ -159,57 +151,40 @@ def get_queryset(self):
         )
 
     def list(self, request, slug):
-        try:
-            is_favorite = request.GET.get("is_favorite", "all")
-            subquery = ProjectFavorite.objects.filter(
-                user=self.request.user,
-                project_id=OuterRef("pk"),
-                workspace__slug=self.kwargs.get("slug"),
-            )
-            sort_order_query = ProjectMember.objects.filter(
-                member=request.user,
-                project_id=OuterRef("pk"),
-                workspace__slug=self.kwargs.get("slug"),
-            ).values("sort_order")
-            projects = (
-                self.get_queryset()
-                .annotate(is_favorite=Exists(subquery))
-                .annotate(sort_order=Subquery(sort_order_query))
-                .order_by("sort_order", "name")
-                .annotate(
-                    total_members=ProjectMember.objects.filter(
-                        project_id=OuterRef("id")
-                    )
-                    .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")
-                )
-            )
+        fields = [field for field in request.GET.get("fields", "").split(",") if field]
 
-            if is_favorite == "true":
-                projects = projects.filter(is_favorite=True)
-            if is_favorite == "false":
-                projects = projects.filter(is_favorite=False)
-
-            return Response(ProjectDetailSerializer(projects, many=True).data)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        sort_order_query = ProjectMember.objects.filter(
+            member=request.user,
+            project_id=OuterRef("pk"),
+            workspace__slug=self.kwargs.get("slug"),
+        ).values("sort_order")
+        projects = (
+            self.get_queryset()
+            .annotate(sort_order=Subquery(sort_order_query))
+            .prefetch_related(
+                Prefetch(
+                    "project_projectmember",
+                    queryset=ProjectMember.objects.filter(
+                        workspace__slug=slug,
+                    ).select_related("member"),
+                )
             )
+            .order_by("sort_order", "name")
+        )
+        if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+            return self.paginate(
+                request=request,
+                queryset=(projects),
+                on_results=lambda projects: ProjectListSerializer(
+                    projects, many=True
+                ).data,
+            )
+
+        return Response(
+            ProjectListSerializer(
+                projects, many=True, fields=fields if fields else None
+            ).data
+        )
 
     def create(self, request, slug):
         try:
@@ -225,6 +200,11 @@ def create(self, request, slug):
                 project_member = ProjectMember.objects.create(
                     project_id=serializer.data["id"], member=request.user, role=20
                 )
+                # Also create the issue property for the user
+                _ = IssueProperty.objects.create(
+                    project_id=serializer.data["id"],
+                    user=request.user,
+                )
 
                 if serializer.data["project_lead"] is not None and str(
                     serializer.data["project_lead"]
@@ -234,6 +214,11 @@ def create(self, request, slug):
                         member_id=serializer.data["project_lead"],
                         role=20,
                     )
+                    # Also create the issue property for the user
+                    IssueProperty.objects.create(
+                        project_id=serializer.data["id"],
+                        user_id=serializer.data["project_lead"],
+                    )
 
                 # Default states
                 states = [
@@ -286,12 +271,9 @@ def create(self, request, slug):
                     ]
                 )
 
-                data = serializer.data
-                # Additional fields of the member
-                data["sort_order"] = project_member.sort_order
-                data["member_role"] = project_member.role
-                data["is_member"] = True
-                return Response(data, status=status.HTTP_201_CREATED)
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,
                 status=status.HTTP_400_BAD_REQUEST,
@@ -302,12 +284,6 @@ def create(self, request, slug):
                     {"name": "The project name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_410_GONE,
-                )
         except Workspace.DoesNotExist as e:
             return Response(
                 {"error": "Workspace does not exist"}, status=status.HTTP_404_NOT_FOUND
@@ -317,12 +293,6 @@ def create(self, request, slug):
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
     def partial_update(self, request, slug, pk=None):
         try:
@@ -353,6 +323,8 @@ def partial_update(self, request, slug, pk=None):
                         color="#ff7700",
                     )
 
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -362,7 +334,7 @@ def partial_update(self, request, slug, pk=None):
                     {"name": "The project name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
-        except Project.DoesNotExist or Workspace.DoesNotExist as e:
+        except (Project.DoesNotExist, Workspace.DoesNotExist):
             return Response(
                 {"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND
             )
@@ -371,12 +343,6 @@ def partial_update(self, request, slug, pk=None):
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class InviteProjectEndpoint(BaseAPIView):
@@ -385,80 +351,62 @@ class InviteProjectEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            email = request.data.get("email", False)
-            role = request.data.get("role", False)
-
-            # Check if email is provided
-            if not email:
-                return Response(
-                    {"error": "Email is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
+        email = request.data.get("email", False)
+        role = request.data.get("role", False)
 
-            validate_email(email)
-            # Check if user is already a member of workspace
-            if ProjectMember.objects.filter(
-                project_id=project_id,
-                member__email=email,
-                member__is_bot=False,
-            ).exists():
-                return Response(
-                    {"error": "User is already member of workspace"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            user = User.objects.filter(email=email).first()
+        # Check if email is provided
+        if not email:
+            return Response(
+                {"error": "Email is required"}, status=status.HTTP_400_BAD_REQUEST
+            )
 
-            if user is None:
-                token = jwt.encode(
-                    {"email": email, "timestamp": datetime.now().timestamp()},
-                    settings.SECRET_KEY,
-                    algorithm="HS256",
-                )
-                project_invitation_obj = ProjectMemberInvite.objects.create(
-                    email=email.strip().lower(),
-                    project_id=project_id,
-                    token=token,
-                    role=role,
-                )
-                domain = settings.WEB_URL
-                project_invitation.delay(email, project_id, token, domain)
+        validate_email(email)
+        # Check if user is already a member of workspace
+        if ProjectMember.objects.filter(
+            project_id=project_id,
+            member__email=email,
+            member__is_bot=False,
+        ).exists():
+            return Response(
+                {"error": "User is already member of workspace"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-                return Response(
-                    {
-                        "message": "Email sent successfully",
-                        "id": project_invitation_obj.id,
-                    },
-                    status=status.HTTP_200_OK,
-                )
+        user = User.objects.filter(email=email).first()
 
-            project_member = ProjectMember.objects.create(
-                member=user, project_id=project_id, role=role
+        if user is None:
+            token = jwt.encode(
+                {"email": email, "timestamp": datetime.now().timestamp()},
+                settings.SECRET_KEY,
+                algorithm="HS256",
             )
-
-            return Response(
-                ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
+            project_invitation_obj = ProjectMemberInvite.objects.create(
+                email=email.strip().lower(),
+                project_id=project_id,
+                token=token,
+                role=role,
             )
+            domain = settings.WEB_URL
+            project_invitation.delay(email, project_id, token, domain)
 
-        except ValidationError:
             return Response(
                 {
-                    "error": "Invalid email address provided a valid email address is required to send the invite"
+                    "message": "Email sent successfully",
+                    "id": project_invitation_obj.id,
                 },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except (Workspace.DoesNotExist, Project.DoesNotExist) as e:
-            return Response(
-                {"error": "Workspace or Project does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                status=status.HTTP_200_OK,
             )
 
+        project_member = ProjectMember.objects.create(
+            member=user, project_id=project_id, role=role
+        )
+
+        _ = IssueProperty.objects.create(user=user, project_id=project_id)
+
+        return Response(
+            ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
+        )
+
 
 class UserProjectInvitationsViewset(BaseViewSet):
     serializer_class = ProjectMemberInviteSerializer
@@ -473,41 +421,46 @@ def get_queryset(self):
         )
 
     def create(self, request):
-        try:
-            invitations = request.data.get("invitations")
-            project_invitations = ProjectMemberInvite.objects.filter(
-                pk__in=invitations, accepted=True
-            )
-            ProjectMember.objects.bulk_create(
-                [
-                    ProjectMember(
-                        project=invitation.project,
-                        workspace=invitation.project.workspace,
-                        member=request.user,
-                        role=invitation.role,
-                        created_by=request.user,
-                    )
-                    for invitation in project_invitations
-                ]
-            )
+        invitations = request.data.get("invitations")
+        project_invitations = ProjectMemberInvite.objects.filter(
+            pk__in=invitations, accepted=True
+        )
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=invitation.project,
+                    workspace=invitation.project.workspace,
+                    member=request.user,
+                    role=invitation.role,
+                    created_by=request.user,
+                )
+                for invitation in project_invitations
+            ]
+        )
 
-            # Delete joined project invites
-            project_invitations.delete()
+        IssueProperty.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=invitation.project,
+                    workspace=invitation.project.workspace,
+                    user=request.user,
+                    created_by=request.user,
+                )
+                for invitation in project_invitations
+            ]
+        )
 
-            return Response(status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        # Delete joined project invites
+        project_invitations.delete()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectMemberViewSet(BaseViewSet):
     serializer_class = ProjectMemberAdminSerializer
     model = ProjectMember
     permission_classes = [
-        ProjectBasePermission,
+        ProjectMemberPermission,
     ]
 
     search_fields = [
@@ -527,189 +480,167 @@ def get_queryset(self):
             .select_related("workspace", "workspace__owner")
         )
 
-    def partial_update(self, request, slug, project_id, pk):
-        try:
-            project_member = ProjectMember.objects.get(
-                pk=pk, workspace__slug=slug, project_id=project_id
-            )
-            if request.user.id == project_member.member_id:
-                return Response(
-                    {"error": "You cannot update your own role"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            # Check while updating user roles
-            requested_project_member = ProjectMember.objects.get(
-                project_id=project_id, workspace__slug=slug, member=request.user
-            )
-            if (
-                "role" in request.data
-                and int(request.data.get("role", project_member.role))
-                > requested_project_member.role
-            ):
-                return Response(
-                    {
-                        "error": "You cannot update a role that is higher than your own role"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+    def create(self, request, slug, project_id):
+        members = request.data.get("members", [])
 
-            serializer = ProjectMemberSerializer(
-                project_member, data=request.data, partial=True
-            )
+        # get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            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 ProjectMember.DoesNotExist:
-            return Response(
-                {"error": "Project Member does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
+        if not len(members):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Atleast one member is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        bulk_project_members = []
+        bulk_issue_props = []
 
-    def destroy(self, request, slug, project_id, pk):
-        try:
-            project_member = ProjectMember.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
+        project_members = (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                member_id__in=[member.get("member_id") for member in members],
             )
-            # check requesting user role
-            requesting_project_member = ProjectMember.objects.get(
-                workspace__slug=slug, member=request.user, project_id=project_id
+            .values("member_id", "sort_order")
+            .order_by("sort_order")
+        )
+
+        for member in members:
+            sort_order = [
+                project_member.get("sort_order")
+                for project_member in project_members
+                if str(project_member.get("member_id")) == str(member.get("member_id"))
+            ]
+            bulk_project_members.append(
+                ProjectMember(
+                    member_id=member.get("member_id"),
+                    role=member.get("role", 10),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
+                )
             )
-            if requesting_project_member.role < project_member.role:
-                return Response(
-                    {
-                        "error": "You cannot remove a user having role higher than yourself"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
+            bulk_issue_props.append(
+                IssueProperty(
+                    user_id=member.get("member_id"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
                 )
-
-            # Remove all favorites
-            ProjectFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            CycleFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            ModuleFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            PageFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            IssueViewFavorite.objects.filter(
-                workspace__slug=slug, project_id=project_id, user=project_member.member
-            ).delete()
-            # Also remove issue from issue assigned
-            IssueAssignee.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                assignee=project_member.member,
-            ).delete()
-
-            # Remove if module member
-            ModuleMember.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                member=project_member.member,
-            ).delete()
-            # Delete owned Pages
-            Page.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                owned_by=project_member.member,
-            ).delete()
-            project_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ProjectMember.DoesNotExist:
-            return Response(
-                {"error": "Project Member does not exist"}, status=status.HTTP_400
             )
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"})
-
 
-class AddMemberToProjectEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
+        project_members = ProjectMember.objects.bulk_create(
+            bulk_project_members,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
 
-    def post(self, request, slug, project_id):
-        try:
-            members = request.data.get("members", [])
+        _ = IssueProperty.objects.bulk_create(
+            bulk_issue_props, batch_size=10, ignore_conflicts=True
+        )
 
-            # get the project
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        serializer = ProjectMemberSerializer(project_members, many=True)
 
-            if not len(members):
-                return Response(
-                    {"error": "Atleast one member is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            bulk_project_members = []
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-            project_members = (
-                ProjectMember.objects.filter(
-                    workspace__slug=slug,
-                    member_id__in=[member.get("member_id") for member in members],
-                )
-                .values("member_id", "sort_order")
-                .order_by("sort_order")
-            )
+    def list(self, request, slug, project_id):
+        project_member = ProjectMember.objects.get(
+            member=request.user, workspace__slug=slug, project_id=project_id
+        )
 
-            for member in members:
-                sort_order = [
-                    project_member.get("sort_order")
-                    for project_member in project_members
-                    if str(project_member.get("member_id"))
-                    == str(member.get("member_id"))
-                ]
-                bulk_project_members.append(
-                    ProjectMember(
-                        member_id=member.get("member_id"),
-                        role=member.get("role", 10),
-                        project_id=project_id,
-                        workspace_id=project.workspace_id,
-                        sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
-                    )
-                )
-
-            project_members = ProjectMember.objects.bulk_create(
-                bulk_project_members,
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+        project_members = ProjectMember.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("project", "member", "workspace")
 
+        if project_member.role > 10:
+            serializer = ProjectMemberAdminSerializer(project_members, many=True)
+        else:
             serializer = ProjectMemberSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except KeyError:
-            return Response(
-                {"error": "Incorrect data sent"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Project.DoesNotExist:
+    def partial_update(self, request, slug, project_id, pk):
+        project_member = ProjectMember.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        if request.user.id == project_member.member_id:
             return Response(
-                {"error": "Project does not exist"}, status=status.HTTP_400_BAD_REQUEST
+                {"error": "You cannot update your own role"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except IntegrityError:
+        # Check while updating user roles
+        requested_project_member = ProjectMember.objects.get(
+            project_id=project_id, workspace__slug=slug, member=request.user
+        )
+        if (
+            "role" in request.data
+            and int(request.data.get("role", project_member.role))
+            > requested_project_member.role
+        ):
             return Response(
-                {"error": "User not member of the workspace"},
+                {"error": "You cannot update a role that is higher than your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        serializer = ProjectMemberSerializer(
+            project_member, 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)
+
+    def destroy(self, request, slug, project_id, pk):
+        project_member = ProjectMember.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        )
+        # check requesting user role
+        requesting_project_member = ProjectMember.objects.get(
+            workspace__slug=slug, member=request.user, project_id=project_id
+        )
+        if requesting_project_member.role < project_member.role:
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "You cannot remove a user having role higher than yourself"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Remove all favorites
+        ProjectFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        CycleFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        ModuleFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        PageFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        IssueViewFavorite.objects.filter(
+            workspace__slug=slug, project_id=project_id, user=project_member.member
+        ).delete()
+        # Also remove issue from issue assigned
+        IssueAssignee.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            assignee=project_member.member,
+        ).delete()
+
+        # Remove if module member
+        ModuleMember.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            member=project_member.member,
+        ).delete()
+        # Delete owned Pages
+        Page.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            owned_by=project_member.member,
+        ).delete()
+        project_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class AddTeamToProjectEndpoint(BaseAPIView):
     permission_classes = [
@@ -717,53 +648,48 @@ class AddTeamToProjectEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, project_id):
-        try:
-            team_members = TeamMember.objects.filter(
-                workspace__slug=slug, team__in=request.data.get("teams", [])
-            ).values_list("member", flat=True)
+        team_members = TeamMember.objects.filter(
+            workspace__slug=slug, team__in=request.data.get("teams", [])
+        ).values_list("member", flat=True)
 
-            if len(team_members) == 0:
-                return Response(
-                    {"error": "No such team exists"}, status=status.HTTP_400_BAD_REQUEST
-                )
+        if len(team_members) == 0:
+            return Response(
+                {"error": "No such team exists"}, status=status.HTTP_400_BAD_REQUEST
+            )
 
-            workspace = Workspace.objects.get(slug=slug)
+        workspace = Workspace.objects.get(slug=slug)
 
-            project_members = []
-            for member in team_members:
-                project_members.append(
-                    ProjectMember(
-                        project_id=project_id,
-                        member_id=member,
-                        workspace=workspace,
-                        created_by=request.user,
-                    )
+        project_members = []
+        issue_props = []
+        for member in team_members:
+            project_members.append(
+                ProjectMember(
+                    project_id=project_id,
+                    member_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
                 )
-
-            ProjectMember.objects.bulk_create(
-                project_members, batch_size=10, ignore_conflicts=True
             )
-
-            serializer = ProjectMemberSerializer(project_members, many=True)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The team with the name already exists"},
-                    status=status.HTTP_410_GONE,
+            issue_props.append(
+                IssueProperty(
+                    project_id=project_id,
+                    user_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
                 )
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "The requested workspace could not be found"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
             )
 
+        ProjectMember.objects.bulk_create(
+            project_members, batch_size=10, ignore_conflicts=True
+        )
+
+        _ = IssueProperty.objects.bulk_create(
+            issue_props, batch_size=10, ignore_conflicts=True
+        )
+
+        serializer = ProjectMemberSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
 
 class ProjectMemberInvitationsViewset(BaseViewSet):
     serializer_class = ProjectMemberInviteSerializer
@@ -811,166 +737,124 @@ class ProjectIdentifierEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            name = request.GET.get("name", "").strip().upper()
-
-            if name == "":
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            exists = ProjectIdentifier.objects.filter(
-                name=name, workspace__slug=slug
-            ).values("id", "name", "project")
+        name = request.GET.get("name", "").strip().upper()
 
+        if name == "":
             return Response(
-                {"exists": len(exists), "identifiers": exists},
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-    def delete(self, request, slug):
-        try:
-            name = request.data.get("name", "").strip().upper()
+        exists = ProjectIdentifier.objects.filter(
+            name=name, workspace__slug=slug
+        ).values("id", "name", "project")
 
-            if name == "":
-                return Response(
-                    {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
-                )
-
-            if Project.objects.filter(identifier=name, workspace__slug=slug).exists():
-                return Response(
-                    {"error": "Cannot delete an identifier of an existing project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        return Response(
+            {"exists": len(exists), "identifiers": exists},
+            status=status.HTTP_200_OK,
+        )
 
-            ProjectIdentifier.objects.filter(name=name, workspace__slug=slug).delete()
+    def delete(self, request, slug):
+        name = request.data.get("name", "").strip().upper()
 
+        if name == "":
             return Response(
-                status=status.HTTP_204_NO_CONTENT,
+                {"error": "Name is required"}, status=status.HTTP_400_BAD_REQUEST
             )
-        except Exception as e:
-            capture_exception(e)
+
+        if Project.objects.filter(identifier=name, workspace__slug=slug).exists():
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Cannot delete an identifier of an existing project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        ProjectIdentifier.objects.filter(name=name, workspace__slug=slug).delete()
+
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
+
 
 class ProjectJoinEndpoint(BaseAPIView):
     def post(self, request, slug):
-        try:
-            project_ids = request.data.get("project_ids", [])
+        project_ids = request.data.get("project_ids", [])
 
-            # Get the workspace user role
-            workspace_member = WorkspaceMember.objects.get(
-                member=request.user, workspace__slug=slug
-            )
+        # Get the workspace user role
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
 
-            workspace_role = workspace_member.role
-            workspace = workspace_member.workspace
-
-            ProjectMember.objects.bulk_create(
-                [
-                    ProjectMember(
-                        project_id=project_id,
-                        member=request.user,
-                        role=20
-                        if workspace_role >= 15
-                        else (15 if workspace_role == 10 else workspace_role),
-                        workspace=workspace,
-                        created_by=request.user,
-                    )
-                    for project_id in project_ids
-                ],
-                ignore_conflicts=True,
-            )
+        workspace_role = workspace_member.role
+        workspace = workspace_member.workspace
 
-            return Response(
-                {"message": "Projects joined successfully"},
-                status=status.HTTP_201_CREATED,
-            )
-        except WorkspaceMember.DoesNotExist:
-            return Response(
-                {"error": "User is not a member of workspace"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project_id=project_id,
+                    member=request.user,
+                    role=20
+                    if workspace_role >= 15
+                    else (15 if workspace_role == 10 else workspace_role),
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+                for project_id in project_ids
+            ],
+            ignore_conflicts=True,
+        )
+
+        IssueProperty.objects.bulk_create(
+            [
+                IssueProperty(
+                    project_id=project_id,
+                    user=request.user,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+                for project_id in project_ids
+            ],
+            ignore_conflicts=True,
+        )
+
+        return Response(
+            {"message": "Projects joined successfully"},
+            status=status.HTTP_201_CREATED,
+        )
 
 
 class ProjectUserViewsEndpoint(BaseAPIView):
     def post(self, request, slug, project_id):
-        try:
-            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
-            project_member = ProjectMember.objects.filter(
-                member=request.user, project=project
-            ).first()
+        project_member = ProjectMember.objects.filter(
+            member=request.user, project=project
+        ).first()
 
-            if project_member is None:
-                return Response(
-                    {"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN
-                )
+        if project_member is None:
+            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
 
-            view_props = project_member.view_props
-            default_props = project_member.default_props
-            preferences = project_member.preferences
-            sort_order = project_member.sort_order
+        view_props = project_member.view_props
+        default_props = project_member.default_props
+        preferences = project_member.preferences
+        sort_order = project_member.sort_order
 
-            project_member.view_props = request.data.get("view_props", view_props)
-            project_member.default_props = request.data.get(
-                "default_props", default_props
-            )
-            project_member.preferences = request.data.get("preferences", preferences)
-            project_member.sort_order = request.data.get("sort_order", sort_order)
+        project_member.view_props = request.data.get("view_props", view_props)
+        project_member.default_props = request.data.get("default_props", default_props)
+        project_member.preferences = request.data.get("preferences", preferences)
+        project_member.sort_order = request.data.get("sort_order", sort_order)
 
-            project_member.save()
+        project_member.save()
 
-            return Response(status=status.HTTP_200_OK)
-
-        except Project.DoesNotExist:
-            return Response(
-                {"error": "The requested resource does not exists"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectMemberUserEndpoint(BaseAPIView):
     def get(self, request, slug, project_id):
-        try:
-            project_member = ProjectMember.objects.get(
-                project_id=project_id, workspace__slug=slug, member=request.user
-            )
-            serializer = ProjectMemberSerializer(project_member)
-
-            return Response(serializer.data, status=status.HTTP_200_OK)
+        project_member = ProjectMember.objects.get(
+            project_id=project_id, workspace__slug=slug, member=request.user
+        )
+        serializer = ProjectMemberSerializer(project_member)
 
-        except ProjectMember.DoesNotExist:
-            return Response(
-                {"error": "User not a member of the project"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class ProjectFavoritesViewSet(BaseViewSet):
@@ -993,50 +877,18 @@ def perform_create(self, serializer):
         serializer.save(user=self.request.user)
 
     def create(self, request, slug):
-        try:
-            serializer = ProjectFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            print(str(e))
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The project is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ProjectFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id):
-        try:
-            project_favorite = ProjectFavorite.objects.get(
-                project=project_id, user=request.user, workspace__slug=slug
-            )
-            project_favorite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except ProjectFavorite.DoesNotExist:
-            return Response(
-                {"error": "Project is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_favorite = ProjectFavorite.objects.get(
+            project=project_id, user=request.user, workspace__slug=slug
+        )
+        project_favorite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectDeployBoardViewSet(BaseViewSet):
@@ -1058,121 +910,138 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            comments = request.data.get("comments", False)
-            reactions = request.data.get("reactions", False)
-            inbox = request.data.get("inbox", None)
-            votes = request.data.get("votes", False)
-            views = request.data.get(
-                "views",
-                {
-                    "list": True,
-                    "kanban": True,
-                    "calendar": True,
-                    "gantt": True,
-                    "spreadsheet": True,
-                },
-            )
+        comments = request.data.get("comments", False)
+        reactions = request.data.get("reactions", False)
+        inbox = request.data.get("inbox", None)
+        votes = request.data.get("votes", False)
+        views = request.data.get(
+            "views",
+            {
+                "list": True,
+                "kanban": True,
+                "calendar": True,
+                "gantt": True,
+                "spreadsheet": True,
+            },
+        )
 
-            project_deploy_board, _ = ProjectDeployBoard.objects.get_or_create(
-                anchor=f"{slug}/{project_id}",
-                project_id=project_id,
-            )
-            project_deploy_board.comments = comments
-            project_deploy_board.reactions = reactions
-            project_deploy_board.inbox = inbox
-            project_deploy_board.votes = votes
-            project_deploy_board.views = views
+        project_deploy_board, _ = ProjectDeployBoard.objects.get_or_create(
+            anchor=f"{slug}/{project_id}",
+            project_id=project_id,
+        )
+        project_deploy_board.comments = comments
+        project_deploy_board.reactions = reactions
+        project_deploy_board.inbox = inbox
+        project_deploy_board.votes = votes
+        project_deploy_board.views = views
 
-            project_deploy_board.save()
+        project_deploy_board.save()
 
-            serializer = ProjectDeployBoardSerializer(project_deploy_board)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = ProjectDeployBoardSerializer(project_deploy_board)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
-class ProjectMemberEndpoint(BaseAPIView):
+class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
     permission_classes = [
-        ProjectEntityPermission,
+        AllowAny,
     ]
 
     def get(self, request, slug, project_id):
-        try:
-            project_members = ProjectMember.objects.filter(
-                project_id=project_id,
-                workspace__slug=slug,
-                member__is_bot=False,
-            ).select_related("project", "member")
-            serializer = ProjectMemberSerializer(project_members, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        project_deploy_board = ProjectDeployBoard.objects.get(
+            workspace__slug=slug, project_id=project_id
+        )
+        serializer = ProjectDeployBoardSerializer(project_deploy_board)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
-class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
+class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
     permission_classes = [
         AllowAny,
     ]
 
-    def get(self, request, slug, project_id):
-        try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-            serializer = ProjectDeployBoardSerializer(project_deploy_board)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except ProjectDeployBoard.DoesNotExist:
-            return Response(
-                {"error": "Project Deploy Board does not exists"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+    def get(self, request, slug):
+        projects = (
+            Project.objects.filter(workspace__slug=slug)
+            .annotate(
+                is_public=Exists(
+                    ProjectDeployBoard.objects.filter(
+                        workspace__slug=slug, project_id=OuterRef("pk")
+                    )
+                )
             )
+            .filter(is_public=True)
+        ).values(
+            "id",
+            "identifier",
+            "name",
+            "description",
+            "emoji",
+            "icon_prop",
+            "cover_image",
+        )
 
+        return Response(projects, status=status.HTTP_200_OK)
 
-class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
 
-    permission_classes = [AllowAny,]
+class LeaveProjectEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
 
-    def get(self, request, slug):
-        try:
-            projects = (
-                Project.objects.filter(workspace__slug=slug)
-                .annotate(
-                    is_public=Exists(
-                        ProjectDeployBoard.objects.filter(
-                            workspace__slug=slug, project_id=OuterRef("pk")
-                        )
-                    )
-                )
-                .filter(is_public=True)
-            ).values(
-                "id",
-                "identifier",
-                "name",
-                "description",
-                "emoji",
-                "icon_prop",
-                "cover_image",
-            )
+    def delete(self, request, slug, project_id):
+        project_member = ProjectMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            project_id=project_id,
+        )
 
-            return Response(projects, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        # Only Admin case
+        if (
+            project_member.role == 20
+            and ProjectMember.objects.filter(
+                workspace__slug=slug,
+                role=20,
+                project_id=project_id,
+            ).count()
+            == 1
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "You cannot leave the project since you are the only admin of the project you should delete the project"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        # Delete the member from workspace
+        project_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class ProjectPublicCoverImagesEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request):
+        files = []
+        s3 = boto3.client(
+            "s3",
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+        )
+        params = {
+            "Bucket": settings.AWS_S3_BUCKET_NAME,
+            "Prefix": "static/project-cover/",
+        }
+
+        response = s3.list_objects_v2(**params)
+        # Extracting file keys from the response
+        if "Contents" in response:
+            for content in response["Contents"]:
+                if not content["Key"].endswith(
+                    "/"
+                ):  # This line ensures we're only getting files, not "sub-folders"
+                    files.append(
+                        f"https://{settings.AWS_S3_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
+                    )
+
+        return Response(files, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/release.py b/apiserver/plane/api/views/release.py
deleted file mode 100644
index de827c896e3..00000000000
--- a/apiserver/plane/api/views/release.py
+++ /dev/null
@@ -1,21 +0,0 @@
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-from sentry_sdk import capture_exception
-
-# Module imports
-from .base import BaseAPIView
-from plane.utils.integrations.github import get_release_notes
-
-
-class ReleaseNotesEndpoint(BaseAPIView):
-    def get(self, request):
-        try:
-            release_notes = get_release_notes()
-            return Response(release_notes, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/api/views/search.py b/apiserver/plane/api/views/search.py
index 0a8c5c5306d..ff743154357 100644
--- a/apiserver/plane/api/views/search.py
+++ b/apiserver/plane/api/views/search.py
@@ -168,126 +168,107 @@ def filter_views(self, query, slug, project_id, workspace_search):
         )
 
     def get(self, request, slug):
-        try:
-            query = request.query_params.get("search", False)
-            workspace_search = request.query_params.get("workspace_search", "false")
-            project_id = request.query_params.get("project_id", False)
-
-            if not query:
-                return Response(
-                    {
-                        "results": {
-                            "workspace": [],
-                            "project": [],
-                            "issue": [],
-                            "cycle": [],
-                            "module": [],
-                            "issue_view": [],
-                            "page": [],
-                        }
-                    },
-                    status=status.HTTP_200_OK,
-                )
+        query = request.query_params.get("search", False)
+        workspace_search = request.query_params.get("workspace_search", "false")
+        project_id = request.query_params.get("project_id", False)
 
-            MODELS_MAPPER = {
-                "workspace": self.filter_workspaces,
-                "project": self.filter_projects,
-                "issue": self.filter_issues,
-                "cycle": self.filter_cycles,
-                "module": self.filter_modules,
-                "issue_view": self.filter_views,
-                "page": self.filter_pages,
-            }
-
-            results = {}
-
-            for model in MODELS_MAPPER.keys():
-                func = MODELS_MAPPER.get(model, None)
-                results[model] = func(query, slug, project_id, workspace_search)
-            return Response({"results": results}, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
+        if not query:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {
+                    "results": {
+                        "workspace": [],
+                        "project": [],
+                        "issue": [],
+                        "cycle": [],
+                        "module": [],
+                        "issue_view": [],
+                        "page": [],
+                    }
+                },
+                status=status.HTTP_200_OK,
             )
 
+        MODELS_MAPPER = {
+            "workspace": self.filter_workspaces,
+            "project": self.filter_projects,
+            "issue": self.filter_issues,
+            "cycle": self.filter_cycles,
+            "module": self.filter_modules,
+            "issue_view": self.filter_views,
+            "page": self.filter_pages,
+        }
+
+        results = {}
+
+        for model in MODELS_MAPPER.keys():
+            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 IssueSearchEndpoint(BaseAPIView):
     def get(self, request, slug, project_id):
-        try:
-            query = request.query_params.get("search", False)
-            workspace_search = request.query_params.get("workspace_search", "false")
-            parent = request.query_params.get("parent", "false")
-            blocker_blocked_by = request.query_params.get("blocker_blocked_by", "false")
-            cycle = request.query_params.get("cycle", "false")
-            module = request.query_params.get("module", "false")
-            sub_issue = request.query_params.get("sub_issue", "false")
-
-            issue_id = request.query_params.get("issue_id", False)
-
-            issues = Issue.issue_objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=self.request.user,
-            )
-
-            if workspace_search == "false":
-                issues = issues.filter(project_id=project_id)
+        query = request.query_params.get("search", False)
+        workspace_search = request.query_params.get("workspace_search", "false")
+        parent = request.query_params.get("parent", "false")
+        issue_relation = request.query_params.get("issue_relation", "false")
+        cycle = request.query_params.get("cycle", "false")
+        module = request.query_params.get("module", "false")
+        sub_issue = request.query_params.get("sub_issue", "false")
 
-            if query:
-                issues = search_issues(query, issues)
+        issue_id = request.query_params.get("issue_id", False)
 
-            if parent == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(
-                    ~Q(pk=issue_id), ~Q(pk=issue.parent_id), parent__isnull=True
-                ).exclude(
-                    pk__in=Issue.issue_objects.filter(parent__isnull=False).values_list(
-                        "parent_id", flat=True
-                    )
-                )
-            if blocker_blocked_by == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(
-                    ~Q(pk=issue_id),
-                    ~Q(blocked_issues__block=issue),
-                    ~Q(blocker_issues__blocked_by=issue),
-                )
-            if sub_issue == "true" and issue_id:
-                issue = Issue.issue_objects.get(pk=issue_id)
-                issues = issues.filter(~Q(pk=issue_id), parent__isnull=True)
-                if issue.parent:
-                    issues = issues.filter(~Q(pk=issue.parent_id))
+        issues = Issue.issue_objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=self.request.user,
+        )
 
-            if cycle == "true":
-                issues = issues.exclude(issue_cycle__isnull=False)
+        if workspace_search == "false":
+            issues = issues.filter(project_id=project_id)
 
-            if module == "true":
-                issues = issues.exclude(issue_module__isnull=False)
+        if query:
+            issues = search_issues(query, issues)
 
-            return Response(
-                issues.values(
-                    "name",
-                    "id",
-                    "sequence_id",
-                    "project__name",
-                    "project__identifier",
-                    "project_id",
-                    "workspace__slug",
-                    "state__name",
-                    "state__group",
-                    "state__color",
-                ),
-                status=status.HTTP_200_OK,
+        if parent == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(
+                ~Q(pk=issue_id), ~Q(pk=issue.parent_id), parent__isnull=True
+            ).exclude(
+                pk__in=Issue.issue_objects.filter(parent__isnull=False).values_list(
+                    "parent_id", flat=True
+                )
             )
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
-            )
-        except Exception as e:
-            print(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        if issue_relation == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(
+                ~Q(pk=issue_id),
+                ~Q(issue_related__issue=issue),
+                ~Q(issue_relation__related_issue=issue),
             )
+        if sub_issue == "true" and issue_id:
+            issue = Issue.issue_objects.get(pk=issue_id)
+            issues = issues.filter(~Q(pk=issue_id), parent__isnull=True)
+            if issue.parent:
+                issues = issues.filter(~Q(pk=issue.parent_id))
+
+        if cycle == "true":
+            issues = issues.exclude(issue_cycle__isnull=False)
+
+        if module == "true":
+            issues = issues.exclude(issue_module__isnull=False)
+
+        return Response(
+            issues.values(
+                "name",
+                "id",
+                "sequence_id",
+                "project__name",
+                "project__identifier",
+                "project_id",
+                "workspace__slug",
+                "state__name",
+                "state__group",
+                "state__color",
+            ),
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index 4fe0c826014..063abf0e312 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -2,7 +2,6 @@
 from itertools import groupby
 
 # Django imports
-from django.db import IntegrityError
 from django.db.models import Q
 
 # Third party imports
@@ -41,67 +40,45 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        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:
-            return Response(
-                {"error": "State with the name already exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        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)
 
     def list(self, request, slug, project_id):
-        try:
-            state_dict = dict()
-            states = StateSerializer(self.get_queryset(), many=True).data
-
-            for key, value in groupby(
-                sorted(states, key=lambda state: state["group"]),
-                lambda state: state.get("group"),
-            ):
-                state_dict[str(key)] = list(value)
-
-            return Response(state_dict, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        state_dict = dict()
+        states = StateSerializer(self.get_queryset(), many=True).data
+
+        for key, value in groupby(
+            sorted(states, key=lambda state: state["group"]),
+            lambda state: state.get("group"),
+        ):
+            state_dict[str(key)] = list(value)
+
+        return Response(state_dict, status=status.HTTP_200_OK)
+
+    def destroy(self, request, slug, project_id, pk):
+        state = State.objects.get(
+            ~Q(name="Triage"),
+            pk=pk, project_id=project_id, workspace__slug=slug,
+        )
+
+        if state.default:
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"error": "Default state cannot be deleted"}, status=False
             )
 
-    def destroy(self, request, slug, project_id, pk):
-        try:
-            state = State.objects.get(
-                ~Q(name="Triage"),
-                pk=pk, project_id=project_id, workspace__slug=slug,
+        # Check for any issues in the state
+        issue_exist = Issue.issue_objects.filter(state=pk).exists()
+
+        if issue_exist:
+            return Response(
+                {
+                    "error": "The state is not empty, only empty states can be deleted"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
-            if state.default:
-                return Response(
-                    {"error": "Default state cannot be deleted"}, status=False
-                )
-
-            # Check for any issues in the state
-            issue_exist = Issue.issue_objects.filter(state=pk).exists()
-
-            if issue_exist:
-                return Response(
-                    {
-                        "error": "The state is not empty, only empty states can be deleted"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            state.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except State.DoesNotExist:
-            return Response({"error": "State does not exists"}, status=status.HTTP_404)
+        state.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/user.py b/apiserver/plane/api/views/user.py
index 68958e5041c..2e40565b466 100644
--- a/apiserver/plane/api/views/user.py
+++ b/apiserver/plane/api/views/user.py
@@ -8,6 +8,8 @@
 from plane.api.serializers import (
     UserSerializer,
     IssueActivitySerializer,
+    UserMeSerializer,
+    UserMeSettingsSerializer,
 )
 
 from plane.api.views.base import BaseViewSet, BaseAPIView
@@ -17,7 +19,6 @@
     WorkspaceMemberInvite,
     Issue,
     IssueActivity,
-    WorkspaceMember,
 )
 from plane.utils.paginator import BasePaginator
 
@@ -30,129 +31,43 @@ def get_object(self):
         return self.request.user
 
     def retrieve(self, request):
-        try:
-            workspace = Workspace.objects.get(
-                pk=request.user.last_workspace_id, workspace_member__member=request.user
-            )
-            workspace_invites = WorkspaceMemberInvite.objects.filter(
-                email=request.user.email
-            ).count()
-            assigned_issues = Issue.issue_objects.filter(
-                assignees__in=[request.user]
-            ).count()
+        serialized_data = UserMeSerializer(request.user).data
+        return Response(
+            serialized_data,
+            status=status.HTTP_200_OK,
+        )
 
-            serialized_data = UserSerializer(request.user).data
-            serialized_data["workspace"] = {
-                "last_workspace_id": request.user.last_workspace_id,
-                "last_workspace_slug": workspace.slug,
-                "fallback_workspace_id": request.user.last_workspace_id,
-                "fallback_workspace_slug": workspace.slug,
-                "invites": workspace_invites,
-            }
-            serialized_data.setdefault("issues", {})[
-                "assigned_issues"
-            ] = assigned_issues
-
-            return Response(
-                serialized_data,
-                status=status.HTTP_200_OK,
-            )
-        except Workspace.DoesNotExist:
-            # This exception will be hit even when the `last_workspace_id` is None
-
-            workspace_invites = WorkspaceMemberInvite.objects.filter(
-                email=request.user.email
-            ).count()
-            assigned_issues = Issue.issue_objects.filter(
-                assignees__in=[request.user]
-            ).count()
-
-            fallback_workspace = (
-                Workspace.objects.filter(workspace_member__member=request.user)
-                .order_by("created_at")
-                .first()
-            )
-
-            serialized_data = UserSerializer(request.user).data
-
-            serialized_data["workspace"] = {
-                "last_workspace_id": None,
-                "last_workspace_slug": None,
-                "fallback_workspace_id": fallback_workspace.id
-                if fallback_workspace is not None
-                else None,
-                "fallback_workspace_slug": fallback_workspace.slug
-                if fallback_workspace is not None
-                else None,
-                "invites": workspace_invites,
-            }
-            serialized_data.setdefault("issues", {})[
-                "assigned_issues"
-            ] = assigned_issues
-
-            return Response(
-                serialized_data,
-                status=status.HTTP_200_OK,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+    def retrieve_user_settings(self, request):
+        serialized_data = UserMeSettingsSerializer(request.user).data
+        return Response(serialized_data, status=status.HTTP_200_OK)
 
 
 class UpdateUserOnBoardedEndpoint(BaseAPIView):
     def patch(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
-            user.is_onboarded = request.data.get("is_onboarded", False)
-            user.save()
-            return Response(
-                {"message": "Updated successfully"}, status=status.HTTP_200_OK
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        user = User.objects.get(pk=request.user.id)
+        user.is_onboarded = request.data.get("is_onboarded", False)
+        user.save()
+        return Response({"message": "Updated successfully"}, status=status.HTTP_200_OK)
 
 
 class UpdateUserTourCompletedEndpoint(BaseAPIView):
     def patch(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
-            user.is_tour_completed = request.data.get("is_tour_completed", False)
-            user.save()
-            return Response(
-                {"message": "Updated successfully"}, status=status.HTTP_200_OK
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        user = User.objects.get(pk=request.user.id)
+        user.is_tour_completed = request.data.get("is_tour_completed", False)
+        user.save()
+        return Response({"message": "Updated successfully"}, status=status.HTTP_200_OK)
 
 
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
     def get(self, request, slug):
-        try:
-            queryset = IssueActivity.objects.filter(
-                actor=request.user, workspace__slug=slug
-            ).select_related("actor", "workspace", "issue", "project")
-
-            return self.paginate(
-                request=request,
-                queryset=queryset,
-                on_results=lambda issue_activities: IssueActivitySerializer(
-                    issue_activities, many=True
-                ).data,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        queryset = IssueActivity.objects.filter(
+            actor=request.user, workspace__slug=slug
+        ).select_related("actor", "workspace", "issue", "project")
+
+        return self.paginate(
+            request=request,
+            queryset=queryset,
+            on_results=lambda issue_activities: IssueActivitySerializer(
+                issue_activities, many=True
+            ).data,
+        )
diff --git a/apiserver/plane/api/views/view.py b/apiserver/plane/api/views/view.py
index 32ba24c8b46..f58f320b77f 100644
--- a/apiserver/plane/api/views/view.py
+++ b/apiserver/plane/api/views/view.py
@@ -1,5 +1,18 @@
 # Django imports
-from django.db import IntegrityError
+from django.db.models import (
+    Prefetch,
+    OuterRef,
+    Func,
+    F,
+    Case,
+    Value,
+    CharField,
+    When,
+    Exists,
+    Max,
+)
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
 from django.db.models import Prefetch, OuterRef, Exists
 
 # Third party imports
@@ -10,18 +23,180 @@
 # Module imports
 from . import BaseViewSet, BaseAPIView
 from plane.api.serializers import (
+    GlobalViewSerializer,
     IssueViewSerializer,
     IssueLiteSerializer,
     IssueViewFavoriteSerializer,
 )
-from plane.api.permissions import ProjectEntityPermission
+from plane.api.permissions import WorkspaceEntityPermission, ProjectEntityPermission
 from plane.db.models import (
+    Workspace,
+    GlobalView,
     IssueView,
     Issue,
     IssueViewFavorite,
     IssueReaction,
+    IssueLink,
+    IssueAttachment,
 )
 from plane.utils.issue_filters import issue_filters
+from plane.utils.grouper import group_results
+
+
+class GlobalViewViewSet(BaseViewSet):
+    serializer_class = GlobalViewSerializer
+    model = GlobalView
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def perform_create(self, serializer):
+        workspace = Workspace.objects.get(slug=self.kwargs.get("slug"))
+        serializer.save(workspace_id=workspace.id)
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace")
+            .order_by(self.request.GET.get("order_by", "-created_at"))
+            .distinct()
+        )
+
+
+class GlobalViewIssuesViewSet(BaseViewSet):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("state")
+            .select_related("parent")
+            .prefetch_related("assignees")
+            .prefetch_related("labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
+        )
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug):
+        filters = issue_filters(request.query_params, "GET")
+
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = (
+            self.get_queryset()
+            .filter(**filters)
+            .filter(project__project_projectmember__member=self.request.user)
+            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(module_id=F("issue_module__module_id"))
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
+                )
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
+                )
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
+                )
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        sub_group_by = request.GET.get("sub_group_by", False)
+        if sub_group_by and sub_group_by == group_by:
+            return Response(
+                {"error": "Group by and sub group by cannot be same"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
+            return Response(
+                grouped_results,
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(issues, status=status.HTTP_200_OK)
 
 
 class IssueViewViewSet(BaseViewSet):
@@ -55,51 +230,6 @@ def get_queryset(self):
         )
 
 
-class ViewIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def get(self, request, slug, project_id, view_id):
-        try:
-            view = IssueView.objects.get(pk=view_id)
-            queries = view.query
-
-            filters = issue_filters(request.query_params, "GET")
-
-            issues = (
-                Issue.issue_objects.filter(
-                    **queries, project_id=project_id, workspace__slug=slug
-                )
-                .filter(**filters)
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("state")
-                .select_related("parent")
-                .prefetch_related("assignees")
-                .prefetch_related("labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-            )
-
-            serializer = IssueLiteSerializer(issues, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except IssueView.DoesNotExist:
-            return Response(
-                {"error": "Issue View does not exist"}, status=status.HTTP_404_NOT_FOUND
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
 class IssueViewFavoriteViewSet(BaseViewSet):
     serializer_class = IssueViewFavoriteSerializer
     model = IssueViewFavorite
@@ -114,49 +244,18 @@ def get_queryset(self):
         )
 
     def create(self, request, slug, project_id):
-        try:
-            serializer = IssueViewFavoriteSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(user=request.user, project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The view is already added to favorites"},
-                    status=status.HTTP_410_GONE,
-                )
-            else:
-                capture_exception(e)
-                return Response(
-                    {"error": "Something went wrong please try again later"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = IssueViewFavoriteSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(user=request.user, project_id=project_id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def destroy(self, request, slug, project_id, view_id):
-        try:
-            view_favourite = IssueViewFavorite.objects.get(
-                project=project_id,
-                user=request.user,
-                workspace__slug=slug,
-                view_id=view_id,
-            )
-            view_favourite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except IssueViewFavorite.DoesNotExist:
-            return Response(
-                {"error": "View is not in favorites"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        view_favourite = IssueViewFavorite.objects.get(
+            project=project_id,
+            user=request.user,
+            workspace__slug=slug,
+            view_id=view_id,
+        )
+        view_favourite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index b10fe3d42c8..c53fbf126bc 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -6,12 +6,10 @@
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import Prefetch
 from django.conf import settings
 from django.utils import timezone
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
-from django.contrib.sites.shortcuts import get_current_site
 from django.db.models import (
     Prefetch,
     OuterRef,
@@ -48,13 +46,13 @@
     IssueActivitySerializer,
     IssueLiteSerializer,
     WorkspaceMemberAdminSerializer,
+    WorkspaceMemberMeSerializer,
 )
 from plane.api.views.base import BaseAPIView
 from . import BaseViewSet
 from plane.db.models import (
     User,
     Workspace,
-    WorkspaceMember,
     WorkspaceMemberInvite,
     Team,
     ProjectMember,
@@ -116,7 +114,7 @@ def get_queryset(self):
         )
 
         issue_count = (
-            Issue.objects.filter(workspace=OuterRef("id"))
+            Issue.issue_objects.filter(workspace=OuterRef("id"))
             .order_by()
             .annotate(count=Func(F("id"), function="Count"))
             .values("count")
@@ -164,23 +162,12 @@ def create(self, request):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        ## Handling unique integrity error for now
-        ## TODO: Extend this to handle other common errors which are not automatically handled by APIException
         except IntegrityError as e:
             if "already exists" in str(e):
                 return Response(
                     {"slug": "The workspace with the slug already exists"},
                     status=status.HTTP_410_GONE,
                 )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {
-                    "error": "Something went wrong please try again later",
-                    "identifier": None,
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
 
 
 class UserWorkSpacesEndpoint(BaseAPIView):
@@ -192,70 +179,53 @@ class UserWorkSpacesEndpoint(BaseAPIView):
     ]
 
     def get(self, request):
-        try:
-            member_count = (
-                WorkspaceMember.objects.filter(
-                    workspace=OuterRef("id"), member__is_bot=False
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+        member_count = (
+            WorkspaceMember.objects.filter(
+                workspace=OuterRef("id"), member__is_bot=False
             )
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        )
 
-            issue_count = (
-                Issue.objects.filter(workspace=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
+        issue_count = (
+            Issue.issue_objects.filter(workspace=OuterRef("id"))
+            .order_by()
+            .annotate(count=Func(F("id"), function="Count"))
+            .values("count")
+        )
 
-            workspace = (
-                (
-                    Workspace.objects.prefetch_related(
-                        Prefetch(
-                            "workspace_member", queryset=WorkspaceMember.objects.all()
-                        )
-                    )
-                    .filter(
-                        workspace_member__member=request.user,
-                    )
-                    .select_related("owner")
+        workspace = (
+            (
+                Workspace.objects.prefetch_related(
+                    Prefetch("workspace_member", queryset=WorkspaceMember.objects.all())
+                )
+                .filter(
+                    workspace_member__member=request.user,
                 )
-                .annotate(total_members=member_count)
-                .annotate(total_issues=issue_count)
+                .select_related("owner")
             )
+            .annotate(total_members=member_count)
+            .annotate(total_issues=issue_count)
+        )
 
-            serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class WorkSpaceAvailabilityCheckEndpoint(BaseAPIView):
     def get(self, request):
-        try:
-            slug = request.GET.get("slug", False)
+        slug = request.GET.get("slug", False)
 
-            if not slug or slug == "":
-                return Response(
-                    {"error": "Workspace Slug is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            workspace = Workspace.objects.filter(slug=slug).exists()
-            return Response({"status": not workspace}, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        if not slug or slug == "":
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Workspace Slug is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        workspace = Workspace.objects.filter(slug=slug).exists()
+        return Response({"status": not workspace}, status=status.HTTP_200_OK)
+
 
 class InviteWorkspaceEndpoint(BaseAPIView):
     permission_classes = [
@@ -263,126 +233,113 @@ class InviteWorkspaceEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug):
-        try:
-            emails = request.data.get("emails", False)
-            # Check if email is provided
-            if not emails or not len(emails):
-                return Response(
-                    {"error": "Emails are required"}, status=status.HTTP_400_BAD_REQUEST
-                )
+        emails = request.data.get("emails", False)
+        # Check if email is provided
+        if not emails or not len(emails):
+            return Response(
+                {"error": "Emails are required"}, status=status.HTTP_400_BAD_REQUEST
+            )
 
-            # check for role level
-            requesting_user = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
+        # check for role level
+        requesting_user = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        if len(
+            [
+                email
+                for email in emails
+                if int(email.get("role", 10)) > requesting_user.role
+            ]
+        ):
+            return Response(
+                {"error": "You cannot invite a user with higher role"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-            if len(
-                [
-                    email
-                    for email in emails
-                    if int(email.get("role", 10)) > requesting_user.role
-                ]
-            ):
-                return Response(
-                    {"error": "You cannot invite a user with higher role"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
 
-            workspace = Workspace.objects.get(slug=slug)
+        workspace = Workspace.objects.get(slug=slug)
+
+        # Check if user is already a member of workspace
+        workspace_members = WorkspaceMember.objects.filter(
+            workspace_id=workspace.id,
+            member__email__in=[email.get("email") for email in emails],
+        ).select_related("member", "workspace", "workspace__owner")
 
-            # Check if user is already a member of workspace
-            workspace_members = WorkspaceMember.objects.filter(
-                workspace_id=workspace.id,
-                member__email__in=[email.get("email") for email in emails],
-            ).select_related("member", "workspace", "workspace__owner")
+        if len(workspace_members):
+            return Response(
+                {
+                    "error": "Some users are already member of workspace",
+                    "workspace_users": WorkSpaceMemberSerializer(
+                        workspace_members, many=True
+                    ).data,
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
-            if len(workspace_members):
+        workspace_invitations = []
+        for email in emails:
+            try:
+                validate_email(email.get("email"))
+                workspace_invitations.append(
+                    WorkspaceMemberInvite(
+                        email=email.get("email").strip().lower(),
+                        workspace_id=workspace.id,
+                        token=jwt.encode(
+                            {
+                                "email": email,
+                                "timestamp": datetime.now().timestamp(),
+                            },
+                            settings.SECRET_KEY,
+                            algorithm="HS256",
+                        ),
+                        role=email.get("role", 10),
+                        created_by=request.user,
+                    )
+                )
+            except ValidationError:
                 return Response(
                     {
-                        "error": "Some users are already member of workspace",
-                        "workspace_users": WorkSpaceMemberSerializer(
-                            workspace_members, many=True
-                        ).data,
+                        "error": f"Invalid email - {email} provided a valid email address is required to send the invite"
                     },
                     status=status.HTTP_400_BAD_REQUEST,
                 )
+        WorkspaceMemberInvite.objects.bulk_create(
+            workspace_invitations, batch_size=10, ignore_conflicts=True
+        )
 
-            workspace_invitations = []
-            for email in emails:
-                try:
-                    validate_email(email.get("email"))
-                    workspace_invitations.append(
-                        WorkspaceMemberInvite(
-                            email=email.get("email").strip().lower(),
-                            workspace_id=workspace.id,
-                            token=jwt.encode(
-                                {
-                                    "email": email,
-                                    "timestamp": datetime.now().timestamp(),
-                                },
-                                settings.SECRET_KEY,
-                                algorithm="HS256",
-                            ),
-                            role=email.get("role", 10),
-                            created_by=request.user,
-                        )
-                    )
-                except ValidationError:
-                    return Response(
-                        {
-                            "error": f"Invalid email - {email} provided a valid email address is required to send the invite"
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
+        workspace_invitations = WorkspaceMemberInvite.objects.filter(
+            email__in=[email.get("email") for email in emails]
+        ).select_related("workspace")
+
+        # create the user if signup is disabled
+        if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
+            _ = User.objects.bulk_create(
+                [
+                    User(
+                        username=str(uuid4().hex),
+                        email=invitation.email,
+                        password=make_password(uuid4().hex),
+                        is_password_autoset=True,
                     )
-            WorkspaceMemberInvite.objects.bulk_create(
-                workspace_invitations, batch_size=10, ignore_conflicts=True
+                    for invitation in workspace_invitations
+                ],
+                batch_size=100,
             )
 
-            workspace_invitations = WorkspaceMemberInvite.objects.filter(
-                email__in=[email.get("email") for email in emails]
-            ).select_related("workspace")
-
-            # create the user if signup is disabled
-            if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
-                _ = User.objects.bulk_create(
-                    [
-                        User(
-                            username=str(uuid4().hex),
-                            email=invitation.email,
-                            password=make_password(uuid4().hex),
-                            is_password_autoset=True,
-                        )
-                        for invitation in workspace_invitations
-                    ],
-                    batch_size=100,
-                )
-
-            for invitation in workspace_invitations:
-                workspace_invitation.delay(
-                    invitation.email,
-                    workspace.id,
-                    invitation.token,
-                    settings.WEB_URL,
-                    request.user.email,
-                )
-
-            return Response(
-                {
-                    "message": "Emails sent successfully",
-                },
-                status=status.HTTP_200_OK,
+        for invitation in workspace_invitations:
+            workspace_invitation.delay(
+                invitation.email,
+                workspace.id,
+                invitation.token,
+                settings.WEB_URL,
+                request.user.email,
             )
 
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "Workspace does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {
+                "message": "Emails sent successfully",
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class JoinWorkspaceEndpoint(BaseAPIView):
@@ -391,68 +348,55 @@ class JoinWorkspaceEndpoint(BaseAPIView):
     ]
 
     def post(self, request, slug, pk):
-        try:
-            workspace_invite = WorkspaceMemberInvite.objects.get(
-                pk=pk, workspace__slug=slug
-            )
-
-            email = request.data.get("email", "")
+        workspace_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
 
-            if email == "" or workspace_invite.email != email:
-                return Response(
-                    {"error": "You do not have permission to join the workspace"},
-                    status=status.HTTP_403_FORBIDDEN,
-                )
+        email = request.data.get("email", "")
 
-            if workspace_invite.responded_at is None:
-                workspace_invite.accepted = request.data.get("accepted", False)
-                workspace_invite.responded_at = timezone.now()
-                workspace_invite.save()
+        if email == "" or workspace_invite.email != email:
+            return Response(
+                {"error": "You do not have permission to join the workspace"},
+                status=status.HTTP_403_FORBIDDEN,
+            )
 
-                if workspace_invite.accepted:
-                    # Check if the user created account after invitation
-                    user = User.objects.filter(email=email).first()
+        if workspace_invite.responded_at is None:
+            workspace_invite.accepted = request.data.get("accepted", False)
+            workspace_invite.responded_at = timezone.now()
+            workspace_invite.save()
 
-                    # If the user is present then create the workspace member
-                    if user is not None:
-                        WorkspaceMember.objects.create(
-                            workspace=workspace_invite.workspace,
-                            member=user,
-                            role=workspace_invite.role,
-                        )
+            if workspace_invite.accepted:
+                # Check if the user created account after invitation
+                user = User.objects.filter(email=email).first()
 
-                        user.last_workspace_id = workspace_invite.workspace.id
-                        user.save()
+                # If the user is present then create the workspace member
+                if user is not None:
+                    WorkspaceMember.objects.create(
+                        workspace=workspace_invite.workspace,
+                        member=user,
+                        role=workspace_invite.role,
+                    )
 
-                        # Delete the invitation
-                        workspace_invite.delete()
+                    user.last_workspace_id = workspace_invite.workspace.id
+                    user.save()
 
-                    return Response(
-                        {"message": "Workspace Invitation Accepted"},
-                        status=status.HTTP_200_OK,
-                    )
+                    # Delete the invitation
+                    workspace_invite.delete()
 
                 return Response(
-                    {"message": "Workspace Invitation was not accepted"},
+                    {"message": "Workspace Invitation Accepted"},
                     status=status.HTTP_200_OK,
                 )
 
             return Response(
-                {"error": "You have already responded to the invitation request"},
-                status=status.HTTP_400_BAD_REQUEST,
+                {"message": "Workspace Invitation was not accepted"},
+                status=status.HTTP_200_OK,
             )
 
-        except WorkspaceMemberInvite.DoesNotExist:
-            return Response(
-                {"error": "The invitation either got expired or could not be found"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(
+            {"error": "You have already responded to the invitation request"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
 
 
 class WorkspaceInvitationsViewset(BaseViewSet):
@@ -472,28 +416,16 @@ def get_queryset(self):
         )
 
     def destroy(self, request, slug, pk):
-        try:
-            workspace_member_invite = WorkspaceMemberInvite.objects.get(
-                pk=pk, workspace__slug=slug
-            )
-            # delete the user if signup is disabled
-            if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
-                user = User.objects.filter(email=workspace_member_invite.email).first()
-                if user is not None:
-                    user.delete()
-            workspace_member_invite.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMemberInvite.DoesNotExist:
-            return Response(
-                {"error": "Workspace member invite does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace_member_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+        # delete the user if signup is disabled
+        if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
+            user = User.objects.filter(email=workspace_member_invite.email).first()
+            if user is not None:
+                user.delete()
+        workspace_member_invite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserWorkspaceInvitationsEndpoint(BaseViewSet):
@@ -510,35 +442,26 @@ def get_queryset(self):
         )
 
     def create(self, request):
-        try:
-            invitations = request.data.get("invitations")
-            workspace_invitations = WorkspaceMemberInvite.objects.filter(
-                pk__in=invitations
-            )
+        invitations = request.data.get("invitations")
+        workspace_invitations = WorkspaceMemberInvite.objects.filter(pk__in=invitations)
 
-            WorkspaceMember.objects.bulk_create(
-                [
-                    WorkspaceMember(
-                        workspace=invitation.workspace,
-                        member=request.user,
-                        role=invitation.role,
-                        created_by=request.user,
-                    )
-                    for invitation in workspace_invitations
-                ],
-                ignore_conflicts=True,
-            )
+        WorkspaceMember.objects.bulk_create(
+            [
+                WorkspaceMember(
+                    workspace=invitation.workspace,
+                    member=request.user,
+                    role=invitation.role,
+                    created_by=request.user,
+                )
+                for invitation in workspace_invitations
+            ],
+            ignore_conflicts=True,
+        )
 
-            # Delete joined workspace invites
-            workspace_invitations.delete()
+        # Delete joined workspace invites
+        workspace_invitations.delete()
 
-            return Response(status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class WorkSpaceMemberViewSet(BaseViewSet):
@@ -546,7 +469,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     model = WorkspaceMember
 
     permission_classes = [
-        WorkSpaceAdminPermission,
+        WorkspaceEntityPermission,
     ]
 
     search_fields = [
@@ -563,131 +486,124 @@ def get_queryset(self):
             .select_related("member")
         )
 
-    def partial_update(self, request, slug, pk):
-        try:
-            workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
-            if request.user.id == workspace_member.member_id:
-                return Response(
-                    {"error": "You cannot update your own role"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+    def list(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
 
-            # Get the requested user role
-            requested_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            # Check if role is being updated
-            # One cannot update role higher than his own role
-            if (
-                "role" in request.data
-                and int(request.data.get("role", workspace_member.role))
-                > requested_workspace_member.role
-            ):
-                return Response(
-                    {
-                        "error": "You cannot update a role that is higher than your own role"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        workspace_members = WorkspaceMember.objects.filter(
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("workspace", "member")
 
+        if workspace_member.role > 10:
+            serializer = WorkspaceMemberAdminSerializer(workspace_members, many=True)
+        else:
             serializer = WorkSpaceMemberSerializer(
-                workspace_member, data=request.data, partial=True
+                workspace_members,
+                many=True,
             )
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
-            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 WorkspaceMember.DoesNotExist:
+    def partial_update(self, request, slug, pk):
+        workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
+        if request.user.id == workspace_member.member_id:
             return Response(
-                {"error": "Workspace Member does not exist"},
+                {"error": "You cannot update your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        # Get the requested user role
+        requested_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        # Check if role is being updated
+        # One cannot update role higher than his own role
+        if (
+            "role" in request.data
+            and int(request.data.get("role", workspace_member.role))
+            > requested_workspace_member.role
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "You cannot update a role that is higher than your own role"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def destroy(self, request, slug, pk):
-        try:
-            # Check the user role who is deleting the user
-            workspace_member = WorkspaceMember.objects.get(workspace__slug=slug, pk=pk)
+        serializer = WorkSpaceMemberSerializer(
+            workspace_member, data=request.data, partial=True
+        )
 
-            # check requesting user role
-            requesting_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            if requesting_workspace_member.role < workspace_member.role:
-                return Response(
-                    {"error": "You cannot remove a user having role higher than you"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+        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)
 
-            # Check for the only member in the workspace
-            if (
-                workspace_member.role == 20
-                and WorkspaceMember.objects.filter(
-                    workspace__slug=slug,
-                    role=20,
-                    member__is_bot=False,
-                ).count()
-                == 1
-            ):
-                return Response(
-                    {"error": "Cannot delete the only Admin for the workspace"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+    def destroy(self, request, slug, pk):
+        # Check the user role who is deleting the user
+        workspace_member = WorkspaceMember.objects.get(workspace__slug=slug, pk=pk)
 
-            # Delete the user also from all the projects
-            ProjectMember.objects.filter(
-                workspace__slug=slug, member=workspace_member.member
-            ).delete()
-            # Remove all favorites
-            ProjectFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            CycleFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            ModuleFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            PageFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            IssueViewFavorite.objects.filter(
-                workspace__slug=slug, user=workspace_member.member
-            ).delete()
-            # Also remove issue from issue assigned
-            IssueAssignee.objects.filter(
-                workspace__slug=slug, assignee=workspace_member.member
-            ).delete()
-
-            # Remove if module member
-            ModuleMember.objects.filter(
-                workspace__slug=slug, member=workspace_member.member
-            ).delete()
-            # Delete owned Pages
-            Page.objects.filter(
-                workspace__slug=slug, owned_by=workspace_member.member
-            ).delete()
-
-            workspace_member.delete()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        except WorkspaceMember.DoesNotExist:
+        # check requesting user role
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        if requesting_workspace_member.role < workspace_member.role:
             return Response(
-                {"error": "Workspace Member does not exists"},
+                {"error": "You cannot remove a user having role higher than you"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        except Exception as e:
-            capture_exception(e)
+
+        # Check for the only member in the workspace
+        if (
+            workspace_member.role == 20
+            and WorkspaceMember.objects.filter(
+                workspace__slug=slug,
+                role=20,
+                member__is_bot=False,
+            ).count()
+            == 1
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {"error": "Cannot delete the only Admin for the workspace"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Delete the user also from all the projects
+        ProjectMember.objects.filter(
+            workspace__slug=slug, member=workspace_member.member
+        ).delete()
+        # Remove all favorites
+        ProjectFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        CycleFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        ModuleFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        PageFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        IssueViewFavorite.objects.filter(
+            workspace__slug=slug, user=workspace_member.member
+        ).delete()
+        # Also remove issue from issue assigned
+        IssueAssignee.objects.filter(
+            workspace__slug=slug, assignee=workspace_member.member
+        ).delete()
+
+        # Remove if module member
+        ModuleMember.objects.filter(
+            workspace__slug=slug, member=workspace_member.member
+        ).delete()
+        # Delete owned Pages
+        Page.objects.filter(
+            workspace__slug=slug, owned_by=workspace_member.member
+        ).delete()
+
+        workspace_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class TeamMemberViewSet(BaseViewSet):
     serializer_class = TeamSerializer
@@ -711,51 +627,36 @@ def get_queryset(self):
         )
 
     def create(self, request, slug):
-        try:
-            members = list(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member__id__in=request.data.get("members", [])
-                )
-                .annotate(member_str_id=Cast("member", output_field=CharField()))
-                .distinct()
-                .values_list("member_str_id", flat=True)
+        members = list(
+            WorkspaceMember.objects.filter(
+                workspace__slug=slug, member__id__in=request.data.get("members", [])
             )
+            .annotate(member_str_id=Cast("member", output_field=CharField()))
+            .distinct()
+            .values_list("member_str_id", flat=True)
+        )
 
-            if len(members) != len(request.data.get("members", [])):
-                users = list(set(request.data.get("members", [])).difference(members))
-                users = User.objects.filter(pk__in=users)
-
-                serializer = UserLiteSerializer(users, many=True)
-                return Response(
-                    {
-                        "error": f"{len(users)} of the member(s) are not a part of the workspace",
-                        "members": serializer.data,
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            workspace = Workspace.objects.get(slug=slug)
+        if len(members) != len(request.data.get("members", [])):
+            users = list(set(request.data.get("members", [])).difference(members))
+            users = User.objects.filter(pk__in=users)
 
-            serializer = TeamSerializer(
-                data=request.data, context={"workspace": workspace}
-            )
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"error": "The team with the name already exists"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Exception as e:
-            capture_exception(e)
+            serializer = UserLiteSerializer(users, many=True)
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": f"{len(users)} of the member(s) are not a part of the workspace",
+                    "members": serializer.data,
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        workspace = Workspace.objects.get(slug=slug)
+
+        serializer = TeamSerializer(data=request.data, context={"workspace": workspace})
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
 
 class UserWorkspaceInvitationEndpoint(BaseViewSet):
     model = WorkspaceMemberInvite
@@ -776,140 +677,93 @@ def get_queryset(self):
 
 class UserLastProjectWithWorkspaceEndpoint(BaseAPIView):
     def get(self, request):
-        try:
-            user = User.objects.get(pk=request.user.id)
-
-            last_workspace_id = user.last_workspace_id
-
-            if last_workspace_id is None:
-                return Response(
-                    {
-                        "project_details": [],
-                        "workspace_details": {},
-                    },
-                    status=status.HTTP_200_OK,
-                )
-
-            workspace = Workspace.objects.get(pk=last_workspace_id)
-            workspace_serializer = WorkSpaceSerializer(workspace)
+        user = User.objects.get(pk=request.user.id)
 
-            project_member = ProjectMember.objects.filter(
-                workspace_id=last_workspace_id, member=request.user
-            ).select_related("workspace", "project", "member", "workspace__owner")
-
-            project_member_serializer = ProjectMemberSerializer(
-                project_member, many=True
-            )
+        last_workspace_id = user.last_workspace_id
 
+        if last_workspace_id is None:
             return Response(
                 {
-                    "workspace_details": workspace_serializer.data,
-                    "project_details": project_member_serializer.data,
+                    "project_details": [],
+                    "workspace_details": {},
                 },
                 status=status.HTTP_200_OK,
             )
 
-        except User.DoesNotExist:
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace = Workspace.objects.get(pk=last_workspace_id)
+        workspace_serializer = WorkSpaceSerializer(workspace)
+
+        project_member = ProjectMember.objects.filter(
+            workspace_id=last_workspace_id, member=request.user
+        ).select_related("workspace", "project", "member", "workspace__owner")
+
+        project_member_serializer = ProjectMemberSerializer(project_member, many=True)
+
+        return Response(
+            {
+                "workspace_details": workspace_serializer.data,
+                "project_details": project_member_serializer.data,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceMemberUserEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            workspace_member = WorkspaceMember.objects.get(
-                member=request.user, workspace__slug=slug
-            )
-            serializer = WorkSpaceMemberSerializer(workspace_member)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        except (Workspace.DoesNotExist, WorkspaceMember.DoesNotExist):
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user, workspace__slug=slug
+        )
+        serializer = WorkspaceMemberMeSerializer(workspace_member)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class WorkspaceMemberUserViewsEndpoint(BaseAPIView):
     def post(self, request, slug):
-        try:
-            workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            workspace_member.view_props = request.data.get("view_props", {})
-            workspace_member.save()
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        workspace_member.view_props = request.data.get("view_props", {})
+        workspace_member.save()
 
-            return Response(status=status.HTTP_200_OK)
-        except WorkspaceMember.DoesNotExist:
-            return Response(
-                {"error": "User not a member of workspace"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class UserActivityGraphEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(
-                    actor=request.user,
-                    workspace__slug=slug,
-                    created_at__date__gte=date.today() + relativedelta(months=-6),
-                )
-                .annotate(created_date=Cast("created_at", DateField()))
-                .values("created_date")
-                .annotate(activity_count=Count("created_date"))
-                .order_by("created_date")
+        issue_activities = (
+            IssueActivity.objects.filter(
+                actor=request.user,
+                workspace__slug=slug,
+                created_at__date__gte=date.today() + relativedelta(months=-6),
             )
+            .annotate(created_date=Cast("created_at", DateField()))
+            .values("created_date")
+            .annotate(activity_count=Count("created_date"))
+            .order_by("created_date")
+        )
 
-            return Response(issue_activities, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(issue_activities, status=status.HTTP_200_OK)
 
 
 class UserIssueCompletedGraphEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            month = request.GET.get("month", 1)
+        month = request.GET.get("month", 1)
 
-            issues = (
-                Issue.issue_objects.filter(
-                    assignees__in=[request.user],
-                    workspace__slug=slug,
-                    completed_at__month=month,
-                    completed_at__isnull=False,
-                )
-                .annotate(completed_week=ExtractWeek("completed_at"))
-                .annotate(week=F("completed_week") % 4)
-                .values("week")
-                .annotate(completed_count=Count("completed_week"))
-                .order_by("week")
-            )
+        issues = (
+            Issue.issue_objects.filter(
+                assignees__in=[request.user],
+                workspace__slug=slug,
+                completed_at__month=month,
+                completed_at__isnull=False,
+            )
+            .annotate(completed_week=ExtractWeek("completed_at"))
+            .annotate(week=F("completed_week") % 4)
+            .values("week")
+            .annotate(completed_count=Count("completed_week"))
+            .order_by("week")
+        )
 
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        return Response(issues, status=status.HTTP_200_OK)
 
 
 class WeekInMonth(Func):
@@ -919,108 +773,100 @@ class WeekInMonth(Func):
 
 class UserWorkspaceDashboardEndpoint(BaseAPIView):
     def get(self, request, slug):
-        try:
-            issue_activities = (
-                IssueActivity.objects.filter(
-                    actor=request.user,
-                    workspace__slug=slug,
-                    created_at__date__gte=date.today() + relativedelta(months=-3),
-                )
-                .annotate(created_date=Cast("created_at", DateField()))
-                .values("created_date")
-                .annotate(activity_count=Count("created_date"))
-                .order_by("created_date")
-            )
-
-            month = request.GET.get("month", 1)
-
-            completed_issues = (
-                Issue.issue_objects.filter(
-                    assignees__in=[request.user],
-                    workspace__slug=slug,
-                    completed_at__month=month,
-                    completed_at__isnull=False,
-                )
-                .annotate(day_of_month=ExtractDay("completed_at"))
-                .annotate(week_in_month=WeekInMonth(F("day_of_month")))
-                .values("week_in_month")
-                .annotate(completed_count=Count("id"))
-                .order_by("week_in_month")
+        issue_activities = (
+            IssueActivity.objects.filter(
+                actor=request.user,
+                workspace__slug=slug,
+                created_at__date__gte=date.today() + relativedelta(months=-3),
             )
+            .annotate(created_date=Cast("created_at", DateField()))
+            .values("created_date")
+            .annotate(activity_count=Count("created_date"))
+            .order_by("created_date")
+        )
 
-            assigned_issues = Issue.issue_objects.filter(
-                workspace__slug=slug, assignees__in=[request.user]
-            ).count()
+        month = request.GET.get("month", 1)
 
-            pending_issues_count = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                workspace__slug=slug,
+        completed_issues = (
+            Issue.issue_objects.filter(
                 assignees__in=[request.user],
-            ).count()
-
-            completed_issues_count = Issue.issue_objects.filter(
                 workspace__slug=slug,
-                assignees__in=[request.user],
-                state__group="completed",
-            ).count()
+                completed_at__month=month,
+                completed_at__isnull=False,
+            )
+            .annotate(day_of_month=ExtractDay("completed_at"))
+            .annotate(week_in_month=WeekInMonth(F("day_of_month")))
+            .values("week_in_month")
+            .annotate(completed_count=Count("id"))
+            .order_by("week_in_month")
+        )
 
-            issues_due_week = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[request.user],
-                )
-                .annotate(target_week=ExtractWeek("target_date"))
-                .filter(target_week=timezone.now().date().isocalendar()[1])
-                .count()
-            )
+        assigned_issues = Issue.issue_objects.filter(
+            workspace__slug=slug, assignees__in=[request.user]
+        ).count()
 
-            state_distribution = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug, assignees__in=[request.user]
-                )
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
-            )
+        pending_issues_count = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+        ).count()
 
-            overdue_issues = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                workspace__slug=slug,
-                assignees__in=[request.user],
-                target_date__lt=timezone.now(),
-                completed_at__isnull=True,
-            ).values("id", "name", "workspace__slug", "project_id", "target_date")
+        completed_issues_count = Issue.issue_objects.filter(
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            state__group="completed",
+        ).count()
 
-            upcoming_issues = Issue.issue_objects.filter(
-                ~Q(state__group__in=["completed", "cancelled"]),
-                start_date__gte=timezone.now(),
+        issues_due_week = (
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
                 assignees__in=[request.user],
-                completed_at__isnull=True,
-            ).values("id", "name", "workspace__slug", "project_id", "start_date")
-
-            return Response(
-                {
-                    "issue_activities": issue_activities,
-                    "completed_issues": completed_issues,
-                    "assigned_issues_count": assigned_issues,
-                    "pending_issues_count": pending_issues_count,
-                    "completed_issues_count": completed_issues_count,
-                    "issues_due_week_count": issues_due_week,
-                    "state_distribution": state_distribution,
-                    "overdue_issues": overdue_issues,
-                    "upcoming_issues": upcoming_issues,
-                },
-                status=status.HTTP_200_OK,
             )
+            .annotate(target_week=ExtractWeek("target_date"))
+            .filter(target_week=timezone.now().date().isocalendar()[1])
+            .count()
+        )
 
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+        state_distribution = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug, assignees__in=[request.user]
             )
+            .annotate(state_group=F("state__group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
+
+        overdue_issues = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            target_date__lt=timezone.now(),
+            completed_at__isnull=True,
+        ).values("id", "name", "workspace__slug", "project_id", "target_date")
+
+        upcoming_issues = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            start_date__gte=timezone.now(),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            completed_at__isnull=True,
+        ).values("id", "name", "workspace__slug", "project_id", "start_date")
+
+        return Response(
+            {
+                "issue_activities": issue_activities,
+                "completed_issues": completed_issues,
+                "assigned_issues_count": assigned_issues,
+                "pending_issues_count": pending_issues_count,
+                "completed_issues_count": completed_issues_count,
+                "issues_due_week_count": issues_due_week,
+                "state_distribution": state_distribution,
+                "overdue_issues": overdue_issues,
+                "upcoming_issues": upcoming_issues,
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceThemeViewSet(BaseViewSet):
@@ -1034,157 +880,138 @@ def get_queryset(self):
         return super().get_queryset().filter(workspace__slug=self.kwargs.get("slug"))
 
     def create(self, request, slug):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-            serializer = WorkspaceThemeSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(workspace=workspace, actor=request.user)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Workspace.DoesNotExist:
-            return Response(
-                {"error": "Workspace does not exist"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = WorkspaceThemeSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(workspace=workspace, actor=request.user)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 
 class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
+        filters = issue_filters(request.query_params, "GET")
 
-            state_distribution = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .annotate(state_group=F("state__group"))
-                .values("state_group")
-                .annotate(state_count=Count("state_group"))
-                .order_by("state_group")
+        state_distribution = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .annotate(state_group=F("state__group"))
+            .values("state_group")
+            .annotate(state_count=Count("state_group"))
+            .order_by("state_group")
+        )
 
-            priority_order = ["urgent", "high", "medium", "low", None]
-
-            priority_distribution = (
-                Issue.objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .values("priority")
-                .annotate(priority_count=Count("priority"))
-                .filter(priority_count__gte=1)
-                .annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        default=Value(len(priority_order)),
-                        output_field=IntegerField(),
-                    )
-                )
-                .order_by("priority_order")
-            )
+        priority_order = ["urgent", "high", "medium", "low", "none"]
 
-            created_issues = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    project__project_projectmember__member=request.user,
-                    created_by_id=user_id,
-                )
-                .filter(**filters)
-                .count()
+        priority_distribution = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
             )
-
-            assigned_issues_count = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
+            .filter(**filters)
+            .values("priority")
+            .annotate(priority_count=Count("priority"))
+            .filter(priority_count__gte=1)
+            .annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    default=Value(len(priority_order)),
+                    output_field=IntegerField(),
                 )
-                .filter(**filters)
-                .count()
             )
+            .order_by("priority_order")
+        )
 
-            pending_issues_count = (
-                Issue.issue_objects.filter(
-                    ~Q(state__group__in=["completed", "cancelled"]),
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
+        created_issues = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+                created_by_id=user_id,
             )
+            .filter(**filters)
+            .count()
+        )
 
-            completed_issues_count = (
-                Issue.issue_objects.filter(
-                    workspace__slug=slug,
-                    assignees__in=[user_id],
-                    state__group="completed",
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
+        assigned_issues_count = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .count()
+        )
 
-            subscribed_issues_count = (
-                IssueSubscriber.objects.filter(
-                    workspace__slug=slug,
-                    subscriber_id=user_id,
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .count()
+        pending_issues_count = (
+            Issue.issue_objects.filter(
+                ~Q(state__group__in=["completed", "cancelled"]),
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .count()
+        )
 
-            upcoming_cycles = CycleIssue.objects.filter(
+        completed_issues_count = (
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
-                cycle__start_date__gt=timezone.now().date(),
-                issue__assignees__in=[
-                    user_id,
-                ],
-            ).values("cycle__name", "cycle__id", "cycle__project_id")
+                assignees__in=[user_id],
+                state__group="completed",
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .count()
+        )
 
-            present_cycle = CycleIssue.objects.filter(
+        subscribed_issues_count = (
+            IssueSubscriber.objects.filter(
                 workspace__slug=slug,
-                cycle__start_date__lt=timezone.now().date(),
-                cycle__end_date__gt=timezone.now().date(),
-                issue__assignees__in=[
-                    user_id,
-                ],
-            ).values("cycle__name", "cycle__id", "cycle__project_id")
-
-            return Response(
-                {
-                    "state_distribution": state_distribution,
-                    "priority_distribution": priority_distribution,
-                    "created_issues": created_issues,
-                    "assigned_issues": assigned_issues_count,
-                    "completed_issues": completed_issues_count,
-                    "pending_issues": pending_issues_count,
-                    "subscribed_issues": subscribed_issues_count,
-                    "present_cycles": present_cycle,
-                    "upcoming_cycles": upcoming_cycles,
-                }
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                subscriber_id=user_id,
+                project__project_projectmember__member=request.user,
             )
+            .filter(**filters)
+            .count()
+        )
+
+        upcoming_cycles = CycleIssue.objects.filter(
+            workspace__slug=slug,
+            cycle__start_date__gt=timezone.now().date(),
+            issue__assignees__in=[
+                user_id,
+            ],
+        ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+        present_cycle = CycleIssue.objects.filter(
+            workspace__slug=slug,
+            cycle__start_date__lt=timezone.now().date(),
+            cycle__end_date__gt=timezone.now().date(),
+            issue__assignees__in=[
+                user_id,
+            ],
+        ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+        return Response(
+            {
+                "state_distribution": state_distribution,
+                "priority_distribution": priority_distribution,
+                "created_issues": created_issues,
+                "assigned_issues": assigned_issues_count,
+                "completed_issues": completed_issues_count,
+                "pending_issues": pending_issues_count,
+                "subscribed_issues": subscribed_issues_count,
+                "present_cycles": present_cycle,
+                "upcoming_cycles": upcoming_cycles,
+            }
+        )
 
 
 class WorkspaceUserActivityEndpoint(BaseAPIView):
@@ -1193,119 +1020,116 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, user_id):
-        try:
-            projects = request.query_params.getlist("project", [])
-
-            queryset = IssueActivity.objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=request.user,
-                actor=user_id,
-            ).select_related("actor", "workspace", "issue", "project")
-
-            if projects:
-                queryset = queryset.filter(project__in=projects)
-
-            return self.paginate(
-                request=request,
-                queryset=queryset,
-                on_results=lambda issue_activities: IssueActivitySerializer(
-                    issue_activities, many=True
-                ).data,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        projects = request.query_params.getlist("project", [])
+
+        queryset = IssueActivity.objects.filter(
+            ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+            actor=user_id,
+        ).select_related("actor", "workspace", "issue", "project")
+
+        if projects:
+            queryset = queryset.filter(project__in=projects)
+
+        return self.paginate(
+            request=request,
+            queryset=queryset,
+            on_results=lambda issue_activities: IssueActivitySerializer(
+                issue_activities, many=True
+            ).data,
+        )
 
 
 class WorkspaceUserProfileEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
-        try:
-            user_data = User.objects.get(pk=user_id)
+        user_data = User.objects.get(pk=user_id)
 
-            requesting_workspace_member = WorkspaceMember.objects.get(
-                workspace__slug=slug, member=request.user
-            )
-            projects = []
-            if requesting_workspace_member.role >= 10:
-                projects = (
-                    Project.objects.filter(
-                        workspace__slug=slug,
-                        project_projectmember__member=request.user,
-                    )
-                    .annotate(
-                        created_issues=Count(
-                            "project_issue",
-                            filter=Q(project_issue__created_by_id=user_id),
-                        )
-                    )
-                    .annotate(
-                        assigned_issues=Count(
-                            "project_issue",
-                            filter=Q(project_issue__assignees__in=[user_id]),
-                        )
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+        projects = []
+        if requesting_workspace_member.role >= 10:
+            projects = (
+                Project.objects.filter(
+                    workspace__slug=slug,
+                    project_projectmember__member=request.user,
+                )
+                .annotate(
+                    created_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__created_by_id=user_id,
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
                     )
-                    .annotate(
-                        completed_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__completed_at__isnull=False,
-                                project_issue__assignees__in=[user_id],
-                            ),
-                        )
+                )
+                .annotate(
+                    assigned_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
                     )
-                    .annotate(
-                        pending_issues=Count(
-                            "project_issue",
-                            filter=Q(
-                                project_issue__state__group__in=[
-                                    "backlog",
-                                    "unstarted",
-                                    "started",
-                                ],
-                                project_issue__assignees__in=[user_id],
-                            ),
-                        )
+                )
+                .annotate(
+                    completed_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__completed_at__isnull=False,
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
                     )
-                    .values(
-                        "id",
-                        "name",
-                        "identifier",
-                        "emoji",
-                        "icon_prop",
-                        "created_issues",
-                        "assigned_issues",
-                        "completed_issues",
-                        "pending_issues",
+                )
+                .annotate(
+                    pending_issues=Count(
+                        "project_issue",
+                        filter=Q(
+                            project_issue__state__group__in=[
+                                "backlog",
+                                "unstarted",
+                                "started",
+                            ],
+                            project_issue__assignees__in=[user_id],
+                            project_issue__archived_at__isnull=True,
+                            project_issue__is_draft=False,
+                        ),
                     )
                 )
+                .values(
+                    "id",
+                    "name",
+                    "identifier",
+                    "emoji",
+                    "icon_prop",
+                    "created_issues",
+                    "assigned_issues",
+                    "completed_issues",
+                    "pending_issues",
+                )
+            )
 
-            return Response(
-                {
-                    "project_data": projects,
-                    "user_data": {
-                        "email": user_data.email,
-                        "first_name": user_data.first_name,
-                        "last_name": user_data.last_name,
-                        "avatar": user_data.avatar,
-                        "cover_image": user_data.cover_image,
-                        "date_joined": user_data.date_joined,
-                        "user_timezone": user_data.user_timezone,
-                        "display_name": user_data.display_name,
-                    },
+        return Response(
+            {
+                "project_data": projects,
+                "user_data": {
+                    "email": user_data.email,
+                    "first_name": user_data.first_name,
+                    "last_name": user_data.last_name,
+                    "avatar": user_data.avatar,
+                    "cover_image": user_data.cover_image,
+                    "date_joined": user_data.date_joined,
+                    "user_timezone": user_data.user_timezone,
+                    "display_name": user_data.display_name,
                 },
-                status=status.HTTP_200_OK,
-            )
-        except WorkspaceMember.DoesNotExist:
-            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            },
+            status=status.HTTP_200_OK,
+        )
 
 
 class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
@@ -1314,124 +1138,122 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, user_id):
-        try:
-            filters = issue_filters(request.query_params, "GET")
-            order_by_param = request.GET.get("order_by", "-created_at")
-            issue_queryset = (
-                Issue.issue_objects.filter(
-                    Q(assignees__in=[user_id])
-                    | Q(created_by_id=user_id)
-                    | Q(issue_subscribers__subscriber_id=user_id),
-                    workspace__slug=slug,
-                    project__project_projectmember__member=request.user,
-                )
-                .filter(**filters)
-                .annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .order_by("-created_at")
-                .annotate(
-                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .annotate(
-                    attachment_count=IssueAttachment.objects.filter(
-                        issue=OuterRef("id")
-                    )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
+        filters = issue_filters(request.query_params, "GET")
+
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+        order_by_param = request.GET.get("order_by", "-created_at")
+        issue_queryset = (
+            Issue.issue_objects.filter(
+                Q(assignees__in=[user_id])
+                | Q(created_by_id=user_id)
+                | Q(issue_subscribers__subscriber_id=user_id),
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+            )
+            .filter(**filters)
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .select_related("project", "workspace", "state", "parent")
+            .prefetch_related("assignees", "labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
                 )
-            ).distinct()
-
-            # Priority Ordering
-            if order_by_param == "priority" or order_by_param == "-priority":
-                priority_order = (
-                    priority_order
-                    if order_by_param == "priority"
-                    else priority_order[::-1]
+            )
+            .order_by("-created_at")
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        ).distinct()
+
+        # Priority Ordering
+        if order_by_param == "priority" or order_by_param == "-priority":
+            priority_order = (
+                priority_order if order_by_param == "priority" else priority_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                priority_order=Case(
+                    *[
+                        When(priority=p, then=Value(i))
+                        for i, p in enumerate(priority_order)
+                    ],
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    priority_order=Case(
-                        *[
-                            When(priority=p, then=Value(i))
-                            for i, p in enumerate(priority_order)
-                        ],
-                        output_field=CharField(),
-                    )
-                ).order_by("priority_order")
-
-            # State Ordering
-            elif order_by_param in [
-                "state__name",
-                "state__group",
-                "-state__name",
-                "-state__group",
-            ]:
-                state_order = (
-                    state_order
-                    if order_by_param in ["state__name", "state__group"]
-                    else state_order[::-1]
+            ).order_by("priority_order")
+
+        # State Ordering
+        elif order_by_param in [
+            "state__name",
+            "state__group",
+            "-state__name",
+            "-state__group",
+        ]:
+            state_order = (
+                state_order
+                if order_by_param in ["state__name", "state__group"]
+                else state_order[::-1]
+            )
+            issue_queryset = issue_queryset.annotate(
+                state_order=Case(
+                    *[
+                        When(state__group=state_group, then=Value(i))
+                        for i, state_group in enumerate(state_order)
+                    ],
+                    default=Value(len(state_order)),
+                    output_field=CharField(),
                 )
-                issue_queryset = issue_queryset.annotate(
-                    state_order=Case(
-                        *[
-                            When(state__group=state_group, then=Value(i))
-                            for i, state_group in enumerate(state_order)
-                        ],
-                        default=Value(len(state_order)),
-                        output_field=CharField(),
-                    )
-                ).order_by("state_order")
-            # assignee and label ordering
-            elif order_by_param in [
-                "labels__name",
-                "-labels__name",
-                "assignees__first_name",
-                "-assignees__first_name",
-            ]:
-                issue_queryset = issue_queryset.annotate(
-                    max_values=Max(
-                        order_by_param[1::]
-                        if order_by_param.startswith("-")
-                        else order_by_param
-                    )
-                ).order_by(
-                    "-max_values" if order_by_param.startswith("-") else "max_values"
+            ).order_by("state_order")
+        # assignee and label ordering
+        elif order_by_param in [
+            "labels__name",
+            "-labels__name",
+            "assignees__first_name",
+            "-assignees__first_name",
+        ]:
+            issue_queryset = issue_queryset.annotate(
+                max_values=Max(
+                    order_by_param[1::]
+                    if order_by_param.startswith("-")
+                    else order_by_param
                 )
-            else:
-                issue_queryset = issue_queryset.order_by(order_by_param)
-
-            issues = IssueLiteSerializer(issue_queryset, many=True).data
+            ).order_by(
+                "-max_values" if order_by_param.startswith("-") else "max_values"
+            )
+        else:
+            issue_queryset = issue_queryset.order_by(order_by_param)
 
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                return Response(
-                    group_results(issues, group_by), status=status.HTTP_200_OK
-                )
+        issues = IssueLiteSerializer(issue_queryset, many=True).data
 
-            return Response(issues, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+        ## Grouping the results
+        group_by = request.GET.get("group_by", False)
+        if group_by:
+            grouped_results = group_results(issues, group_by)
             return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
+                grouped_results,
+                status=status.HTTP_200_OK,
             )
 
+        return Response(
+            issues, status=status.HTTP_200_OK
+        )
+
 
 class WorkspaceLabelsEndpoint(BaseAPIView):
     permission_classes = [
@@ -1439,36 +1261,35 @@ class WorkspaceLabelsEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug):
-        try:
-            labels = Label.objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=request.user,
-            ).values("parent", "name", "color", "id", "project_id", "workspace__slug")
-            return Response(labels, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        labels = Label.objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+        ).values("parent", "name", "color", "id", "project_id", "workspace__slug")
+        return Response(labels, status=status.HTTP_200_OK)
 
 
-class WorkspaceMembersEndpoint(BaseAPIView):
+class LeaveWorkspaceEndpoint(BaseAPIView):
     permission_classes = [
         WorkspaceEntityPermission,
     ]
 
-    def get(self, request, slug):
-        try:
-            workspace_members = WorkspaceMember.objects.filter(
-                workspace__slug=slug,
-                member__is_bot=False,
-            ).select_related("workspace", "member")
-            serialzier = WorkSpaceMemberSerializer(workspace_members, many=True)
-            return Response(serialzier.data, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
+    def delete(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug, member=request.user
+        )
+
+        # Only Admin case
+        if (
+            workspace_member.role == 20
+            and WorkspaceMember.objects.filter(workspace__slug=slug, role=20).count()
+            == 1
+        ):
             return Response(
-                {"error": "Something went wrong please try again later"},
+                {
+                    "error": "You cannot leave the workspace since you are the only admin of the workspace you should delete the workspace"
+                },
                 status=status.HTTP_400_BAD_REQUEST,
             )
+        # Delete the member from workspace
+        workspace_member.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index 492be887071..a80770c3723 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -20,8 +20,8 @@
 row_mapping = {
     "state__name": "State",
     "state__group": "State Group",
-    "labels__name": "Label",
-    "assignees__display_name": "Assignee Name",
+    "labels__id": "Label",
+    "assignees__id": "Assignee Name",
     "start_date": "Start Date",
     "target_date": "Due Date",
     "completed_at": "Completed At",
@@ -29,8 +29,321 @@
     "issue_count": "Issue Count",
     "priority": "Priority",
     "estimate": "Estimate",
+    "issue_cycle__cycle_id": "Cycle",
+    "issue_module__module_id": "Module"
 }
 
+ASSIGNEE_ID = "assignees__id"
+LABEL_ID = "labels__id"
+STATE_ID = "state_id"
+CYCLE_ID = "issue_cycle__cycle_id"
+MODULE_ID = "issue_module__module_id"
+
+
+def send_export_email(email, slug, csv_buffer):
+    """Helper function to send export email."""
+    subject = "Your Export is ready"
+    html_content = render_to_string("emails/exports/analytics.html", {})
+    text_content = strip_tags(html_content)
+
+    csv_buffer.seek(0)
+    msg = EmailMultiAlternatives(subject, text_content, settings.EMAIL_FROM, [email])
+    msg.attach(f"{slug}-analytics.csv", csv_buffer.getvalue())
+    msg.send(fail_silently=False)
+
+
+def get_assignee_details(slug, filters):
+    """Fetch assignee details if required."""
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug, **filters, assignees__avatar__isnull=False
+        )
+        .distinct("assignees__id")
+        .order_by("assignees__id")
+        .values(
+            "assignees__avatar",
+            "assignees__display_name",
+            "assignees__first_name",
+            "assignees__last_name",
+            "assignees__id",
+        )
+    )
+
+
+def get_label_details(slug, filters):
+    """Fetch label details if required"""
+    return (
+        Issue.objects.filter(workspace__slug=slug, **filters, labels__id__isnull=False)
+        .distinct("labels__id")
+        .order_by("labels__id")
+        .values("labels__id", "labels__color", "labels__name")
+    )
+
+
+def get_state_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+        )
+        .distinct("state_id")
+        .order_by("state_id")
+        .values("state_id", "state__name", "state__color")
+    )
+
+
+def get_module_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+            issue_module__module_id__isnull=False,
+        )
+        .distinct("issue_module__module_id")
+        .order_by("issue_module__module_id")
+        .values(
+            "issue_module__module_id",
+            "issue_module__module__name",
+        )
+    )
+
+
+def get_cycle_details(slug, filters):
+    return (
+        Issue.issue_objects.filter(
+            workspace__slug=slug,
+            **filters,
+            issue_cycle__cycle_id__isnull=False,
+        )
+        .distinct("issue_cycle__cycle_id")
+        .order_by("issue_cycle__cycle_id")
+        .values(
+            "issue_cycle__cycle_id",
+            "issue_cycle__cycle__name",
+        )
+    )
+
+
+def generate_csv_from_rows(rows):
+    """Generate CSV buffer from rows."""
+    csv_buffer = io.StringIO()
+    writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
+    [writer.writerow(row) for row in rows]
+    return csv_buffer
+
+
+def generate_segmented_rows(
+    distribution,
+    x_axis,
+    y_axis,
+    segment,
+    key,
+    assignee_details,
+    label_details,
+    state_details,
+    cycle_details,
+    module_details,
+):
+    segment_zero = list(
+        set(
+            item.get("segment") for sublist in distribution.values() for item in sublist
+        )
+    )
+
+    segmented = segment
+
+    row_zero = [
+        row_mapping.get(x_axis, "X-Axis"),
+        row_mapping.get(y_axis, "Y-Axis"),
+    ] + segment_zero
+
+    rows = []
+    for item, data in distribution.items():
+        generated_row = [
+            item,
+            sum(obj.get(key) for obj in data if obj.get(key) is not None),
+        ]
+
+        for segment in segment_zero:
+            value = next((x.get(key) for x in data if x.get("segment") == segment), "0")
+            generated_row.append(value)
+
+        if x_axis == ASSIGNEE_ID:
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(item)
+                ),
+                None,
+            )
+            if assignee:
+                generated_row[
+                    0
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+        if x_axis == LABEL_ID:
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(item)),
+                None,
+            )
+
+            if label:
+                generated_row[0] = f"{label['labels__name']}"
+
+        if x_axis == STATE_ID:
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(item)),
+                None,
+            )
+
+            if state:
+                generated_row[0] = f"{state['state__name']}"
+
+        if x_axis == CYCLE_ID:
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(item)),
+                None,
+            )
+
+            if cycle:
+                generated_row[0] = f"{cycle['issue_cycle__cycle__name']}"
+
+        if x_axis == MODULE_ID:
+            module = next(
+                (mod for mod in module_details if str(mod[MODULE_ID]) == str(item)),
+                None,
+            )
+
+            if module:
+                generated_row[0] = f"{module['issue_module__module__name']}"
+
+        rows.append(tuple(generated_row))
+
+    if segmented == ASSIGNEE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(segm)
+                ),
+                None,
+            )
+            if assignee:
+                row_zero[
+                    index + 2
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+    if segmented == LABEL_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(segm)),
+                None,
+            )
+            if label:
+                row_zero[index + 2] = label["labels__name"]
+
+    if segmented == STATE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(segm)),
+                None,
+            )
+            if state:
+                row_zero[index + 2] = state["state__name"]
+
+    if segmented == MODULE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            module = next(
+                (mod for mod in label_details if str(mod[MODULE_ID]) == str(segm)),
+                None,
+            )
+            if module:
+                row_zero[index + 2] = module["issue_module__module__name"]
+
+    if segmented == CYCLE_ID:
+        for index, segm in enumerate(row_zero[2:]):
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(segm)),
+                None,
+            )
+            if cycle:
+                row_zero[index + 2] = cycle["issue_cycle__cycle__name"]
+
+    return [tuple(row_zero)] + rows
+
+
+def generate_non_segmented_rows(
+    distribution,
+    x_axis,
+    y_axis,
+    key,
+    assignee_details,
+    label_details,
+    state_details,
+    cycle_details,
+    module_details,
+):
+    rows = []
+    for item, data in distribution.items():
+        row = [item, data[0].get("count" if y_axis == "issue_count" else "estimate")]
+
+        if x_axis == ASSIGNEE_ID:
+            assignee = next(
+                (
+                    user
+                    for user in assignee_details
+                    if str(user[ASSIGNEE_ID]) == str(item)
+                ),
+                None,
+            )
+            if assignee:
+                row[
+                    0
+                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+
+        if x_axis == LABEL_ID:
+            label = next(
+                (lab for lab in label_details if str(lab[LABEL_ID]) == str(item)),
+                None,
+            )
+
+            if label:
+                row[0] = f"{label['labels__name']}"
+
+        if x_axis == STATE_ID:
+            state = next(
+                (sta for sta in state_details if str(sta[STATE_ID]) == str(item)),
+                None,
+            )
+
+            if state:
+                row[0] = f"{state['state__name']}"
+
+        if x_axis == CYCLE_ID:
+            cycle = next(
+                (cyc for cyc in cycle_details if str(cyc[CYCLE_ID]) == str(item)),
+                None,
+            )
+
+            if cycle:
+                row[0] = f"{cycle['issue_cycle__cycle__name']}"
+
+        if x_axis == MODULE_ID:
+            module = next(
+                (mod for mod in module_details if str(mod[MODULE_ID]) == str(item)),
+                None,
+            )
+
+            if module:
+                row[0] = f"{module['issue_module__module__name']}"
+
+        rows.append(tuple(row))
+
+    row_zero = [row_mapping.get(x_axis, "X-Axis"), row_mapping.get(y_axis, "Y-Axis")]
+    return [tuple(row_zero)] + rows
+
 
 @shared_task
 def analytic_export_task(email, data, slug):
@@ -43,134 +356,69 @@ def analytic_export_task(email, data, slug):
         segment = data.get("segment", False)
 
         distribution = build_graph_plot(
-            queryset=queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
+            queryset, x_axis=x_axis, y_axis=y_axis, segment=segment
         )
-
         key = "count" if y_axis == "issue_count" else "estimate"
 
-        segmented = segment
+        assignee_details = (
+            get_assignee_details(slug, filters)
+            if x_axis == ASSIGNEE_ID or segment == ASSIGNEE_ID
+            else {}
+        )
 
-        assignee_details = {}
-        if x_axis in ["assignees__id"] or segment in ["assignees__id"]:
-            assignee_details = (
-                Issue.issue_objects.filter(workspace__slug=slug, **filters, assignees__avatar__isnull=False)
-                .order_by("assignees__id")
-                .distinct("assignees__id")
-                .values("assignees__avatar", "assignees__display_name", "assignees__first_name", "assignees__last_name", "assignees__id")
-            )
+        label_details = (
+            get_label_details(slug, filters)
+            if x_axis == LABEL_ID or segment == LABEL_ID
+            else {}
+        )
 
-        if segment:
-            segment_zero = []
-            for item in distribution:
-                current_dict = distribution.get(item)
-                for current in current_dict:
-                    segment_zero.append(current.get("segment"))
-
-            segment_zero = list(set(segment_zero))
-            row_zero = (
-                [
-                    row_mapping.get(x_axis, "X-Axis"),
-                ]
-                + [
-                    row_mapping.get(y_axis, "Y-Axis"),
-                ]
-                + segment_zero
-            )
-            rows = []
-            for item in distribution:
-                generated_row = [
-                    item,
-                ]
-
-                data = distribution.get(item)
-                # Add y axis values
-                generated_row.append(sum(obj.get(key) for obj in data if obj.get(key, None) is not None))
-
-                for segment in segment_zero:
-                    value = [x for x in data if x.get("segment") == segment]
-                    if len(value):
-                        generated_row.append(value[0].get(key))
-                    else:
-                        generated_row.append("0")
-                # x-axis replacement for names
-                if x_axis in ["assignees__id"]:
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(item)]
-                    if len(assignee):
-                        generated_row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-                rows.append(tuple(generated_row))
-
-            # If segment is ["assignees__display_name"] then replace segment_zero rows with first and last names
-            if segmented in ["assignees__id"]:
-                for index, segm in enumerate(row_zero[2:]):
-                    # find the name of the user
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(segm)]
-                    if len(assignee):
-                        row_zero[index + 2] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-
-            rows = [tuple(row_zero)] + rows
-            csv_buffer = io.StringIO()
-            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-
-            # Write CSV data to the buffer
-            for row in rows:
-                writer.writerow(row)
-
-            subject = "Your Export is ready"
-
-            html_content = render_to_string("emails/exports/analytics.html", {})
-
-            text_content = strip_tags(html_content)
-            csv_buffer.seek(0)
-            msg = EmailMultiAlternatives(
-                subject, text_content, settings.EMAIL_FROM, [email]
-            )
-            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
-            msg.send(fail_silently=False)
+        state_details = (
+            get_state_details(slug, filters)
+            if x_axis == STATE_ID or segment == STATE_ID
+            else {}
+        )
+
+        cycle_details = (
+            get_cycle_details(slug, filters)
+            if x_axis == CYCLE_ID or segment == CYCLE_ID
+            else {}
+        )
 
+        module_details = (
+            get_module_details(slug, filters)
+            if x_axis == MODULE_ID or segment == MODULE_ID
+            else {}
+        )
+
+        if segment:
+            rows = generate_segmented_rows(
+                distribution,
+                x_axis,
+                y_axis,
+                segment,
+                key,
+                assignee_details,
+                label_details,
+                state_details,
+                cycle_details,
+                module_details,
+            )
         else:
-            row_zero = [
-                row_mapping.get(x_axis, "X-Axis"),
-                row_mapping.get(y_axis, "Y-Axis"),
-            ]
-            rows = []
-            for item in distribution:
-                row =  [
-                            item,
-                            distribution.get(item)[0].get("count")
-                            if y_axis == "issue_count"
-                            else distribution.get(item)[0].get("estimate  "),
-                        ]
-                # x-axis replacement to names
-                if x_axis in ["assignees__id"]:
-                    assignee = [user for user in assignee_details if str(user.get("assignees__id")) == str(item)]
-                    if len(assignee):
-                        row[0] = str(assignee[0].get("assignees__first_name")) + " " + str(assignee[0].get("assignees__last_name"))
-
-                rows.append(tuple(row))
-            rows = [tuple(row_zero)] + rows
-            csv_buffer = io.StringIO()
-            writer = csv.writer(csv_buffer, delimiter=",", quoting=csv.QUOTE_ALL)
-
-            # Write CSV data to the buffer
-            for row in rows:
-                writer.writerow(row)
-
-            subject = "Your Export is ready"
-
-            html_content = render_to_string("emails/exports/analytics.html", {})
-
-            text_content = strip_tags(html_content)
-
-            csv_buffer.seek(0)
-            msg = EmailMultiAlternatives(
-                subject, text_content, settings.EMAIL_FROM, [email]
-            )
-            msg.attach(f"{slug}-analytics.csv", csv_buffer.read())
-            msg.send(fail_silently=False)
+            rows = generate_non_segmented_rows(
+                distribution,
+                x_axis,
+                y_axis,
+                key,
+                assignee_details,
+                label_details,
+                state_details,
+                cycle_details,
+                module_details,
+            )
 
+        csv_buffer = generate_csv_from_rows(rows)
+        send_export_email(email, slug, csv_buffer)
     except Exception as e:
-        # Print logs if in DEBUG mode
         if settings.DEBUG:
             print(e)
         capture_exception(e)
-        return
diff --git a/apiserver/plane/bgtasks/email_verification_task.py b/apiserver/plane/bgtasks/email_verification_task.py
index 93b15c425fa..9f9d064373b 100644
--- a/apiserver/plane/bgtasks/email_verification_task.py
+++ b/apiserver/plane/bgtasks/email_verification_task.py
@@ -23,7 +23,7 @@ def email_verification(first_name, email, token, current_site):
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Verify your Email!"
+        subject = "Verify your Email!"
 
         context = {
             "first_name": first_name,
diff --git a/apiserver/plane/bgtasks/export_task.py b/apiserver/plane/bgtasks/export_task.py
index a45120eb5dd..1329697e904 100644
--- a/apiserver/plane/bgtasks/export_task.py
+++ b/apiserver/plane/bgtasks/export_task.py
@@ -4,7 +4,6 @@
 import json
 import boto3
 import zipfile
-from urllib.parse import urlparse, urlunparse
 
 # Django imports
 from django.conf import settings
diff --git a/apiserver/plane/bgtasks/exporter_expired_task.py b/apiserver/plane/bgtasks/exporter_expired_task.py
index a77d68b4b55..45c53eaca05 100644
--- a/apiserver/plane/bgtasks/exporter_expired_task.py
+++ b/apiserver/plane/bgtasks/exporter_expired_task.py
@@ -32,7 +32,7 @@ def delete_old_s3_link():
     else:
         s3 = boto3.client(
             "s3",
-            region_name="ap-south-1",
+            region_name=settings.AWS_REGION,
             aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
             aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
             config=Config(signature_version="s3v4"),
diff --git a/apiserver/plane/bgtasks/forgot_password_task.py b/apiserver/plane/bgtasks/forgot_password_task.py
index 93283dfd540..de1390f016f 100644
--- a/apiserver/plane/bgtasks/forgot_password_task.py
+++ b/apiserver/plane/bgtasks/forgot_password_task.py
@@ -8,20 +8,18 @@
 from celery import shared_task
 from sentry_sdk import capture_exception
 
-# Module imports
-from plane.db.models import User
 
 
 @shared_task
 def forgot_password(first_name, email, uidb64, token, current_site):
 
     try:
-        realtivelink = f"/reset-password/?uidb64={uidb64}&token={token}"
+        realtivelink = f"/accounts/reset-password/?uidb64={uidb64}&token={token}"
         abs_url = current_site + realtivelink
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Reset Your Password - Plane"
+        subject = "Reset Your Password - Plane"
 
         context = {
             "first_name": first_name,
diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
index 757ef601b8f..14bece21b0b 100644
--- a/apiserver/plane/bgtasks/importer_task.py
+++ b/apiserver/plane/bgtasks/importer_task.py
@@ -2,8 +2,6 @@
 import json
 import requests
 import uuid
-import jwt
-from datetime import datetime
 
 # Django imports
 from django.conf import settings
@@ -25,8 +23,8 @@
     WorkspaceIntegration,
     Label,
     User,
+    IssueProperty,
 )
-from .workspace_invitation_task import workspace_invitation
 from plane.bgtasks.user_welcome_task import send_welcome_slack
 
 
@@ -57,7 +55,7 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
-            [
+            _ = [
                 send_welcome_slack.delay(
                     str(user.id),
                     True,
@@ -103,6 +101,20 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
+            IssueProperty.objects.bulk_create(
+                [
+                    IssueProperty(
+                        project_id=importer.project_id,
+                        workspace_id=importer.workspace_id,
+                        user=user,
+                        created_by=importer.created_by,
+                    )
+                    for user in workspace_users
+                ],
+                batch_size=100,
+                ignore_conflicts=True,
+            )
+
         # Check if sync config is on for github importers
         if service == "github" and importer.config.get("sync", False):
             name = importer.metadata.get("name", False)
@@ -142,7 +154,7 @@ def service_importer(service, importer_id):
             )
 
             # Create repo sync
-            repo_sync = GithubRepositorySync.objects.create(
+            _ = GithubRepositorySync.objects.create(
                 repository=repo,
                 workspace_integration=workspace_integration,
                 actor=workspace_integration.actor,
@@ -164,7 +176,7 @@ def service_importer(service, importer_id):
                 ImporterSerializer(importer).data,
                 cls=DjangoJSONEncoder,
             )
-            res = requests.post(
+            _ = requests.post(
                 f"{settings.PROXY_BASE_URL}/hooks/workspaces/{str(importer.workspace_id)}/projects/{str(importer.project_id)}/importers/{str(service)}/",
                 json=import_data_json,
                 headers=headers,
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 1cc6c85cc9a..f0a20eeec39 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -24,132 +24,160 @@
     IssueSubscriber,
     Notification,
     IssueAssignee,
+    IssueReaction,
+    CommentReaction,
+    IssueComment,
 )
 from plane.api.serializers import IssueActivitySerializer
+from plane.bgtasks.notification_task import notifications
 
 
-# Track Chnages in name
+# Track Changes in name
 def track_name(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
     if current_instance.get("name") != requested_data.get("name"):
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=current_instance.get("name"),
                 new_value=requested_data.get("name"),
                 field="name",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the name to {requested_data.get('name')}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the name to",
+                epoch=epoch,
             )
         )
 
 
-# Track changes in parent issue
-def track_parent(
+# Track issue description
+def track_description(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
-    if current_instance.get("parent") != requested_data.get("parent"):
-        if requested_data.get("parent") == None:
-            old_parent = Issue.objects.get(pk=current_instance.get("parent"))
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}",
-                    new_value=None,
-                    field="parent",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the parent issue to None",
-                    old_identifier=old_parent.id,
-                    new_identifier=None,
-                )
-            )
+    if current_instance.get("description_html") != requested_data.get(
+        "description_html"
+    ):
+        last_activity = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .order_by("-created_at")
+            .first()
+        )
+        if (
+            last_activity is not None
+            and last_activity.field == "description"
+            and actor_id == str(last_activity.actor_id)
+        ):
+            last_activity.created_at = timezone.now()
+            last_activity.save(update_fields=["created_at"])
         else:
-            new_parent = Issue.objects.get(pk=requested_data.get("parent"))
-            old_parent = Issue.objects.filter(pk=current_instance.get("parent")).first()
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    actor_id=actor_id,
                     verb="updated",
-                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}"
-                    if old_parent is not None
-                    else None,
-                    new_value=f"{new_parent.project.identifier}-{new_parent.sequence_id}",
-                    field="parent",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the parent issue to {new_parent.name}",
-                    old_identifier=old_parent.id if old_parent is not None else None,
-                    new_identifier=new_parent.id,
+                    old_value=current_instance.get("description_html"),
+                    new_value=requested_data.get("description_html"),
+                    field="description",
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment=f"updated the description to",
+                    epoch=epoch,
                 )
             )
 
 
+# Track changes in parent issue
+def track_parent(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    if current_instance.get("parent") != requested_data.get("parent"):
+        old_parent = Issue.objects.filter(pk=current_instance.get("parent")).first()
+        new_parent = Issue.objects.filter(pk=requested_data.get("parent")).first()
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}"
+                if old_parent is not None
+                else "",
+                new_value=f"{new_parent.project.identifier}-{new_parent.sequence_id}"
+                if new_parent is not None
+                else "",
+                field="parent",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the parent issue to",
+                old_identifier=old_parent.id if old_parent is not None else None,
+                new_identifier=new_parent.id if new_parent is not None else None,
+                epoch=epoch,
+            )
+        )
+
+
 # Track changes in priority
 def track_priority(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
     if current_instance.get("priority") != requested_data.get("priority"):
-        if requested_data.get("priority") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=None,
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to None",
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=requested_data.get("priority"),
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to {requested_data.get('priority')}",
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("priority"),
+                new_value=requested_data.get("priority"),
+                field="priority",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the priority to",
+                epoch=epoch,
             )
+        )
 
 
-# Track chnages in state of the issue
+# Track changes in state of the issue
 def track_state(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
     if current_instance.get("state") != requested_data.get("state"):
         new_state = State.objects.get(pk=requested_data.get("state", None))
@@ -158,90 +186,51 @@ def track_state(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=old_state.name,
                 new_value=new_state.name,
                 field="state",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the state to {new_state.name}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the state to",
                 old_identifier=old_state.id,
                 new_identifier=new_state.id,
+                epoch=epoch,
             )
         )
 
 
-# Track issue description
-def track_description(
-    requested_data,
-    current_instance,
-    issue_id,
-    project,
-    actor,
-    issue_activities,
-):
-    if current_instance.get("description_html") != requested_data.get(
-        "description_html"
-    ):
-        last_activity = IssueActivity.objects.filter(issue_id=issue_id).order_by("-created_at").first()
-        if(last_activity is not None and last_activity.field == "description" and actor.id == last_activity.actor_id):
-            last_activity.created_at = timezone.now()
-            last_activity.save(update_fields=["created_at"])
-        else:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("description_html"),
-                        new_value=requested_data.get("description_html"),
-                        field="description",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"updated the description to {requested_data.get('description_html')}",
-                    )
-                )
-
-
 # Track changes in issue target date
 def track_target_date(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
     if current_instance.get("target_date") != requested_data.get("target_date"):
-        if requested_data.get("target_date") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("target_date"),
-                    new_value=requested_data.get("target_date"),
-                    field="target_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the target date to None",
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("target_date"),
-                    new_value=requested_data.get("target_date"),
-                    field="target_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the target date to {requested_data.get('target_date')}",
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("target_date")
+                if current_instance.get("target_date") is not None
+                else "",
+                new_value=requested_data.get("target_date")
+                if requested_data.get("target_date") is not None
+                else "",
+                field="target_date",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the target date to",
+                epoch=epoch,
             )
+        )
 
 
 # Track changes in issue start date
@@ -249,39 +238,31 @@ def track_start_date(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
     if current_instance.get("start_date") != requested_data.get("start_date"):
-        if requested_data.get("start_date") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("start_date"),
-                    new_value=requested_data.get("start_date"),
-                    field="start_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the start date to None",
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("start_date"),
-                    new_value=requested_data.get("start_date"),
-                    field="start_date",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the start date to {requested_data.get('start_date')}",
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("start_date")
+                if current_instance.get("start_date") is not None
+                else "",
+                new_value=requested_data.get("start_date")
+                if requested_data.get("start_date") is not None
+                else "",
+                field="start_date",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the start date to ",
+                epoch=epoch,
             )
+        )
 
 
 # Track changes in issue labels
@@ -289,51 +270,57 @@ def track_labels(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
-    # Label Addition
-    if len(requested_data.get("labels_list")) > len(current_instance.get("labels")):
-        for label in requested_data.get("labels_list"):
-            if label not in current_instance.get("labels"):
-                label = Label.objects.get(pk=label)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=label.name,
-                        field="labels",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added label {label.name}",
-                        new_identifier=label.id,
-                        old_identifier=None,
-                    )
-                )
+    requested_labels = set([str(lab) for lab in requested_data.get("labels", [])])
+    current_labels = set([str(lab) for lab in current_instance.get("labels", [])])
 
-    # Label Removal
-    if len(requested_data.get("labels_list")) < len(current_instance.get("labels")):
-        for label in current_instance.get("labels"):
-            if label not in requested_data.get("labels_list"):
-                label = Label.objects.get(pk=label)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=label.name,
-                        new_value="",
-                        field="labels",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed label {label.name}",
-                        old_identifier=label.id,
-                        new_identifier=None,
-                    )
-                )
+    added_labels = requested_labels - current_labels
+    dropped_labels = current_labels - requested_labels
+
+    # Set of newly added labels
+    for added_label in added_labels:
+        label = Label.objects.get(pk=added_label)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                verb="updated",
+                field="labels",
+                comment="added label ",
+                old_value="",
+                new_value=label.name,
+                new_identifier=label.id,
+                old_identifier=None,
+                epoch=epoch,
+            )
+        )
+
+    # Set of dropped labels
+    for dropped_label in dropped_labels:
+        label = Label.objects.get(pk=dropped_label)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=label.name,
+                new_value="",
+                field="labels",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed label ",
+                old_identifier=label.id,
+                new_identifier=None,
+                epoch=epoch,
+            )
+        )
 
 
 # Track changes in issue assignees
@@ -341,301 +328,204 @@ def track_assignees(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
-    # Assignee Addition
-    if len(requested_data.get("assignees_list")) > len(
-        current_instance.get("assignees")
-    ):
-        for assignee in requested_data.get("assignees_list"):
-            if assignee not in current_instance.get("assignees"):
-                assignee = User.objects.get(pk=assignee)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=assignee.display_name,
-                        field="assignees",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added assignee {assignee.display_name}",
-                        new_identifier=assignee.id,
-                    )
-                )
+    requested_assignees = set([str(asg) for asg in requested_data.get("assignees", [])])
+    current_assignees = set([str(asg) for asg in current_instance.get("assignees", [])])
 
-    # Assignee Removal
-    if len(requested_data.get("assignees_list")) < len(
-        current_instance.get("assignees")
-    ):
-        for assignee in current_instance.get("assignees"):
-            if assignee not in requested_data.get("assignees_list"):
-                assignee = User.objects.get(pk=assignee)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=assignee.display_name,
-                        new_value="",
-                        field="assignees",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed assignee {assignee.display_name}",
-                        old_identifier=assignee.id,
-                    )
-                )
+    added_assignees = requested_assignees - current_assignees
+    dropped_assginees = current_assignees - requested_assignees
+
+    for added_asignee in added_assignees:
+        assignee = User.objects.get(pk=added_asignee)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value="",
+                new_value=assignee.display_name,
+                field="assignees",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"added assignee ",
+                new_identifier=assignee.id,
+                epoch=epoch,
+            )
+        )
+
+    for dropped_assignee in dropped_assginees:
+        assignee = User.objects.get(pk=dropped_assignee)
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=assignee.display_name,
+                new_value="",
+                field="assignees",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed assignee ",
+                old_identifier=assignee.id,
+                epoch=epoch,
+            )
+        )
 
 
-# Track changes in blocking issues
-def track_blocks(
+def track_estimate_points(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
-    if len(requested_data.get("blocks_list")) > len(
-        current_instance.get("blocked_issues")
-    ):
-        for block in requested_data.get("blocks_list"):
-            if (
-                len(
-                    [
-                        blocked
-                        for blocked in current_instance.get("blocked_issues")
-                        if blocked.get("block") == block
-                    ]
-                )
-                == 0
-            ):
-                issue = Issue.objects.get(pk=block)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=f"{issue.project.identifier}-{issue.sequence_id}",
-                        field="blocks",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added blocking issue {project.identifier}-{issue.sequence_id}",
-                        new_identifier=issue.id,
-                    )
-                )
-
-    # Blocked Issue Removal
-    if len(requested_data.get("blocks_list")) < len(
-        current_instance.get("blocked_issues")
-    ):
-        for blocked in current_instance.get("blocked_issues"):
-            if blocked.get("block") not in requested_data.get("blocks_list"):
-                issue = Issue.objects.get(pk=blocked.get("block"))
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=f"{issue.project.identifier}-{issue.sequence_id}",
-                        new_value="",
-                        field="blocks",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed blocking issue {project.identifier}-{issue.sequence_id}",
-                        old_identifier=issue.id,
-                    )
-                )
+    if current_instance.get("estimate_point") != requested_data.get("estimate_point"):
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=current_instance.get("estimate_point")
+                if current_instance.get("estimate_point") is not None
+                else "",
+                new_value=requested_data.get("estimate_point")
+                if requested_data.get("estimate_point") is not None
+                else "",
+                field="estimate_point",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the estimate point to ",
+                epoch=epoch,
+            )
+        )
 
 
-# Track changes in blocked_by issues
-def track_blockings(
+def track_archive_at(
     requested_data,
     current_instance,
     issue_id,
-    project,
-    actor,
+    project_id,
+    workspace_id,
+    actor_id,
     issue_activities,
+    epoch,
 ):
-    if len(requested_data.get("blockers_list")) > len(
-        current_instance.get("blocker_issues")
-    ):
-        for block in requested_data.get("blockers_list"):
-            if (
-                len(
-                    [
-                        blocked
-                        for blocked in current_instance.get("blocker_issues")
-                        if blocked.get("blocked_by") == block
-                    ]
-                )
-                == 0
-            ):
-                issue = Issue.objects.get(pk=block)
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value="",
-                        new_value=f"{issue.project.identifier}-{issue.sequence_id}",
-                        field="blocking",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"added blocked by issue {project.identifier}-{issue.sequence_id}",
-                        new_identifier=issue.id,
-                    )
-                )
-
-    # Blocked Issue Removal
-    if len(requested_data.get("blockers_list")) < len(
-        current_instance.get("blocker_issues")
-    ):
-        for blocked in current_instance.get("blocker_issues"):
-            if blocked.get("blocked_by") not in requested_data.get("blockers_list"):
-                issue = Issue.objects.get(pk=blocked.get("blocked_by"))
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=f"{issue.project.identifier}-{issue.sequence_id}",
-                        new_value="",
-                        field="blocking",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"removed blocked by issue {project.identifier}-{issue.sequence_id}",
-                        old_identifier=issue.id,
-                    )
-                )
-
-
-def create_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
-):
-    issue_activities.append(
-        IssueActivity(
-            issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
-            comment=f"created the issue",
-            verb="created",
-            actor=actor,
-        )
-    )
-
-
-def track_estimate_points(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
-):
-    if current_instance.get("estimate_point") != requested_data.get("estimate_point"):
-        if requested_data.get("estimate_point") == None:
+    if current_instance.get("archived_at") != requested_data.get("archived_at"):
+        if requested_data.get("archived_at") is None:
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="has restored the issue",
                     verb="updated",
-                    old_value=current_instance.get("estimate_point"),
-                    new_value=requested_data.get("estimate_point"),
-                    field="estimate_point",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the estimate point to None",
+                    actor_id=actor_id,
+                    field="archived_at",
+                    old_value="archive",
+                    new_value="restore",
+                    epoch=epoch,
                 )
             )
         else:
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
-                    actor=actor,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="Plane has archived the issue",
                     verb="updated",
-                    old_value=current_instance.get("estimate_point"),
-                    new_value=requested_data.get("estimate_point"),
-                    field="estimate_point",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the estimate point to {requested_data.get('estimate_point')}",
+                    actor_id=actor_id,
+                    field="archived_at",
+                    old_value=None,
+                    new_value="archive",
+                    epoch=epoch,
                 )
             )
 
 
-def track_archive_at(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
-):
-    if requested_data.get("archived_at") is None:
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"has restored the issue",
-                verb="updated",
-                actor=actor,
-                field="archived_at",
-                old_value="archive",
-                new_value="restore",
-            )
-        )
-    else:
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
-                comment=f"Plane has archived the issue",
-                verb="updated",
-                actor=actor,
-                field="archived_at",
-                old_value=None,
-                new_value="archive",
-            )
-        )
-
-
 def track_closed_to(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     if requested_data.get("closed_to") is not None:
         updated_state = State.objects.get(
-            pk=requested_data.get("closed_to"), project=project
+            pk=requested_data.get("closed_to"), project_id=project_id
         )
-
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=None,
                 new_value=updated_state.name,
                 field="state",
-                project=project,
-                workspace=project.workspace,
-                comment=f"Plane updated the state to {updated_state.name}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"Plane updated the state to ",
                 old_identifier=None,
                 new_identifier=updated_state.id,
+                epoch=epoch,
             )
         )
 
 
+def create_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            issue_id=issue_id,
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"created the issue",
+            verb="created",
+            actor_id=actor_id,
+            epoch=epoch,
+        )
+    )
+
+
 def update_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     ISSUE_ACTIVITY_MAPPER = {
         "name": track_name,
         "parent": track_parent,
         "priority": track_priority,
         "state": track_state,
-        "description": track_description,
+        "description_html": track_description,
         "target_date": track_target_date,
         "start_date": track_start_date,
-        "labels_list": track_labels,
-        "assignees_list": track_assignees,
-        "blocks_list": track_blocks,
-        "blockers_list": track_blockings,
+        "labels": track_labels,
+        "assignees": track_assignees,
         "estimate_point": track_estimate_points,
         "archived_at": track_archive_at,
         "closed_to": track_closed_to,
@@ -647,35 +537,52 @@ def update_issue_activity(
     )
 
     for key in requested_data:
-        func = ISSUE_ACTIVITY_MAPPER.get(key, None)
+        func = ISSUE_ACTIVITY_MAPPER.get(key)
         if func is not None:
             func(
-                requested_data,
-                current_instance,
-                issue_id,
-                project,
-                actor,
-                issue_activities,
+                requested_data=requested_data,
+                current_instance=current_instance,
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                actor_id=actor_id,
+                issue_activities=issue_activities,
+                epoch=epoch,
             )
 
 
 def delete_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
-):
-    issue_activities.append(
-        IssueActivity(
-            project=project,
-            workspace=project.workspace,
-            comment=f"deleted the issue",
-            verb="deleted",
-            actor=actor,
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"deleted the issue",
+            verb="deleted",
+            actor_id=actor_id,
             field="issue",
+            epoch=epoch,
         )
     )
 
 
 def create_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -685,21 +592,29 @@ def create_comment_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created a comment",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="comment",
             new_value=requested_data.get("comment_html", ""),
             new_identifier=requested_data.get("id", None),
             issue_comment_id=requested_data.get("id", None),
+            epoch=epoch,
         )
     )
 
 
 def update_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -710,39 +625,55 @@ def update_comment_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"updated a comment",
                 verb="updated",
-                actor=actor,
+                actor_id=actor_id,
                 field="comment",
                 old_value=current_instance.get("comment_html", ""),
                 old_identifier=current_instance.get("id"),
                 new_value=requested_data.get("comment_html", ""),
                 new_identifier=current_instance.get("id", None),
                 issue_comment_id=current_instance.get("id", None),
+                epoch=epoch,
             )
         )
 
 
 def delete_comment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the comment",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="comment",
+            epoch=epoch,
         )
     )
 
 
 def create_cycle_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -764,16 +695,17 @@ def create_cycle_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=updated_record.get("issue_id"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=old_cycle.name,
                 new_value=new_cycle.name,
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
+                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,
+                epoch=epoch,
             )
         )
 
@@ -785,21 +717,29 @@ def create_cycle_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=created_record.get("fields").get("issue"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="created",
                 old_value="",
                 new_value=cycle.name,
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"added cycle {cycle.name}",
                 new_identifier=cycle.id,
+                epoch=epoch,
             )
         )
 
 
 def delete_cycle_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -814,21 +754,29 @@ def delete_cycle_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
                 old_value=cycle.name if cycle is not None else "",
                 new_value="",
                 field="cycles",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"removed this issue from {cycle.name if cycle is not None else None}",
                 old_identifier=cycle.id if cycle is not None else None,
+                epoch=epoch,
             )
         )
 
 
 def create_module_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -850,16 +798,17 @@ def create_module_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=updated_record.get("issue_id"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="updated",
                 old_value=old_module.name,
                 new_value=new_module.name,
                 field="modules",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated module from {old_module.name} to {new_module.name}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated module to ",
                 old_identifier=old_module.id,
                 new_identifier=new_module.id,
+                epoch=epoch,
             )
         )
 
@@ -870,21 +819,29 @@ def create_module_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=created_record.get("fields").get("issue"),
-                actor=actor,
+                actor_id=actor_id,
                 verb="created",
                 old_value="",
                 new_value=module.name,
                 field="modules",
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"added module {module.name}",
                 new_identifier=module.id,
+                epoch=epoch,
             )
         )
 
 
 def delete_module_issue_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -899,21 +856,29 @@ def delete_module_issue_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue,
-                actor=actor,
+                actor_id=actor_id,
                 verb="deleted",
                 old_value=module.name if module is not None else "",
                 new_value="",
                 field="modules",
-                project=project,
-                workspace=project.workspace,
-                comment=f"removed this issue from {module.name if module is not None else None}",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed this issue from ",
                 old_identifier=module.id if module is not None else None,
+                epoch=epoch,
             )
         )
 
 
 def create_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    actor_id,
+    workspace_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -923,20 +888,28 @@ def create_link_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created a link",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="link",
             new_value=requested_data.get("url", ""),
             new_identifier=requested_data.get("id", None),
+            epoch=epoch,
         )
     )
 
 
 def update_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -947,24 +920,31 @@ def update_link_activity(
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
-                project=project,
-                workspace=project.workspace,
+                project_id=project_id,
+                workspace_id=workspace_id,
                 comment=f"updated a link",
                 verb="updated",
-                actor=actor,
+                actor_id=actor_id,
                 field="link",
                 old_value=current_instance.get("url", ""),
                 old_identifier=current_instance.get("id"),
                 new_value=requested_data.get("url", ""),
                 new_identifier=current_instance.get("id", None),
+                epoch=epoch,
             )
         )
 
 
 def delete_link_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
-
     current_instance = (
         json.loads(current_instance) if current_instance is not None else None
     )
@@ -972,20 +952,28 @@ def delete_link_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the link",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="link",
             old_value=current_instance.get("url", ""),
-            new_value=""
+            new_value="",
+            epoch=epoch,
         )
     )
 
 
 def create_attachment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    actor_id,
+    workspace_id,
+    issue_activities,
+    epoch,
 ):
     requested_data = json.loads(requested_data) if requested_data is not None else None
     current_instance = (
@@ -995,30 +983,455 @@ def create_attachment_activity(
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"created an attachment",
             verb="created",
-            actor=actor,
+            actor_id=actor_id,
             field="attachment",
             new_value=current_instance.get("asset", ""),
             new_identifier=current_instance.get("id", None),
+            epoch=epoch,
         )
     )
 
 
 def delete_attachment_activity(
-    requested_data, current_instance, issue_id, project, actor, issue_activities
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
 ):
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
+            project_id=project_id,
+            workspace_id=workspace_id,
             comment=f"deleted the attachment",
             verb="deleted",
-            actor=actor,
+            actor_id=actor_id,
             field="attachment",
+            epoch=epoch,
+        )
+    )
+
+
+def create_issue_reaction_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        issue_reaction = (
+            IssueReaction.objects.filter(
+                reaction=requested_data.get("reaction"),
+                project_id=project_id,
+                actor_id=actor_id,
+            )
+            .values_list("id", flat=True)
+            .first()
+        )
+        if issue_reaction is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor_id=actor_id,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=issue_reaction,
+                    epoch=epoch,
+                )
+            )
+
+
+def delete_issue_reaction_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=current_instance.get("reaction"),
+                new_value=None,
+                field="reaction",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment="removed the reaction",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+                epoch=epoch,
+            )
+        )
+
+
+def create_comment_reaction_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        comment_reaction_id, comment_id = (
+            CommentReaction.objects.filter(
+                reaction=requested_data.get("reaction"),
+                project_id=project_id,
+                actor_id=actor_id,
+            )
+            .values_list("id", "comment__id")
+            .first()
+        )
+        comment = IssueComment.objects.get(pk=comment_id, project_id=project_id)
+        if (
+            comment is not None
+            and comment_reaction_id is not None
+            and comment_id is not None
+        ):
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=comment.issue_id,
+                    actor_id=actor_id,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=comment_reaction_id,
+                    epoch=epoch,
+                )
+            )
+
+
+def delete_comment_reaction_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_id = (
+            IssueComment.objects.filter(
+                pk=current_instance.get("comment_id"), project_id=project_id
+            )
+            .values_list("issue_id", flat=True)
+            .first()
+        )
+        if issue_id is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor_id=actor_id,
+                    verb="deleted",
+                    old_value=current_instance.get("reaction"),
+                    new_value=None,
+                    field="reaction",
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment="removed the reaction",
+                    old_identifier=current_instance.get("identifier"),
+                    new_identifier=None,
+                    epoch=epoch,
+                )
+            )
+
+
+def create_issue_vote_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="created",
+                old_value=None,
+                new_value=requested_data.get("vote"),
+                field="vote",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment="added the vote",
+                old_identifier=None,
+                new_identifier=None,
+                epoch=epoch,
+            )
+        )
+
+
+def delete_issue_vote_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance and current_instance.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=current_instance.get("vote"),
+                new_value=None,
+                field="vote",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment="removed the vote",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+                epoch=epoch,
+            )
+        )
+
+
+def create_issue_relation_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance is None and requested_data.get("related_list") is not None:
+        for issue_relation in requested_data.get("related_list"):
+            if issue_relation.get("relation_type") == "blocked_by":
+                relation_type = "blocking"
+            else:
+                relation_type = issue_relation.get("relation_type")
+            issue = Issue.objects.get(pk=issue_relation.get("issue"))
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_relation.get("related_issue"),
+                    actor_id=actor_id,
+                    verb="created",
+                    old_value="",
+                    new_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                    field=relation_type,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment=f"added {relation_type} relation",
+                    old_identifier=issue_relation.get("issue"),
+                )
+            )
+            issue = Issue.objects.get(pk=issue_relation.get("related_issue"))
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_relation.get("issue"),
+                    actor_id=actor_id,
+                    verb="created",
+                    old_value="",
+                    new_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                    field=f'{issue_relation.get("relation_type")}',
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    comment=f'added {issue_relation.get("relation_type")} relation',
+                    old_identifier=issue_relation.get("related_issue"),
+                    epoch=epoch,
+                )
+            )
+
+
+def delete_issue_relation_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if current_instance is not None and requested_data.get("related_list") is None:
+        if current_instance.get("relation_type") == "blocked_by":
+            relation_type = "blocking"
+        else:
+            relation_type = current_instance.get("relation_type")
+        issue = Issue.objects.get(pk=current_instance.get("issue"))
+        issue_activities.append(
+            IssueActivity(
+                issue_id=current_instance.get("related_issue"),
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                new_value="",
+                field=relation_type,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"deleted {relation_type} relation",
+                old_identifier=current_instance.get("issue"),
+                epoch=epoch,
+            )
+        )
+        issue = Issue.objects.get(pk=current_instance.get("related_issue"))
+        issue_activities.append(
+            IssueActivity(
+                issue_id=current_instance.get("issue"),
+                actor_id=actor_id,
+                verb="deleted",
+                old_value=f"{issue.project.identifier}-{issue.sequence_id}",
+                new_value="",
+                field=f'{current_instance.get("relation_type")}',
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f'deleted {current_instance.get("relation_type")} relation',
+                old_identifier=current_instance.get("related_issue"),
+                epoch=epoch,
+            )
+        )
+
+
+def create_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            issue_id=issue_id,
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"drafted the issue",
+            field="draft",
+            verb="created",
+            actor_id=actor_id,
+            epoch=epoch,
+        )
+    )
+
+
+def update_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    if (
+        requested_data.get("is_draft") is not None
+        and requested_data.get("is_draft") == False
+    ):
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"created the issue",
+                verb="updated",
+                actor_id=actor_id,
+                epoch=epoch,
+            )
+        )
+    else:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"updated the draft issue",
+                field="draft",
+                verb="updated",
+                actor_id=actor_id,
+                epoch=epoch,
+            )
+        )
+
+
+def delete_draft_issue_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    issue_activities.append(
+        IssueActivity(
+            project_id=project_id,
+            workspace_id=workspace_id,
+            comment=f"deleted the draft issue",
+            field="draft",
+            verb="deleted",
+            actor_id=actor_id,
+            epoch=epoch,
         )
     )
 
@@ -1032,37 +1445,22 @@ def issue_activity(
     issue_id,
     actor_id,
     project_id,
+    epoch,
     subscriber=True,
 ):
     try:
         issue_activities = []
 
-        actor = User.objects.get(pk=actor_id)
         project = Project.objects.get(pk=project_id)
+        issue = Issue.objects.filter(pk=issue_id).first()
+        workspace_id = project.workspace_id
 
-        if type not in [
-            "cycle.activity.created",
-            "cycle.activity.deleted",
-            "module.activity.created",
-            "module.activity.deleted",
-        ]:
-            issue = Issue.objects.filter(pk=issue_id).first()
-
-            if issue is not None:
-                try:
-                    issue.updated_at = timezone.now()
-                    issue.save(update_fields=["updated_at"])
-                except Exception as e:
-                    pass
-
-            if subscriber:
-                # add the user to issue subscriber
-                try:
-                    _ = IssueSubscriber.objects.get_or_create(
-                        issue_id=issue_id, subscriber=actor
-                    )
-                except Exception as e:
-                    pass
+        if issue is not None:
+            try:
+                issue.updated_at = timezone.now()
+                issue.save(update_fields=["updated_at"])
+            except Exception as e:
+                pass
 
         ACTIVITY_MAPPER = {
             "issue.activity.created": create_issue_activity,
@@ -1080,17 +1478,30 @@ def issue_activity(
             "link.activity.deleted": delete_link_activity,
             "attachment.activity.created": create_attachment_activity,
             "attachment.activity.deleted": delete_attachment_activity,
+            "issue_relation.activity.created": create_issue_relation_activity,
+            "issue_relation.activity.deleted": delete_issue_relation_activity,
+            "issue_reaction.activity.created": create_issue_reaction_activity,
+            "issue_reaction.activity.deleted": delete_issue_reaction_activity,
+            "comment_reaction.activity.created": create_comment_reaction_activity,
+            "comment_reaction.activity.deleted": delete_comment_reaction_activity,
+            "issue_vote.activity.created": create_issue_vote_activity,
+            "issue_vote.activity.deleted": delete_issue_vote_activity,
+            "issue_draft.activity.created": create_draft_issue_activity,
+            "issue_draft.activity.updated": update_draft_issue_activity,
+            "issue_draft.activity.deleted": delete_draft_issue_activity,
         }
 
         func = ACTIVITY_MAPPER.get(type)
         if func is not None:
             func(
-                requested_data,
-                current_instance,
-                issue_id,
-                project,
-                actor,
-                issue_activities,
+                requested_data=requested_data,
+                current_instance=current_instance,
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                actor_id=actor_id,
+                issue_activities=issue_activities,
+                epoch=epoch,
             )
 
         # Save all the values to database
@@ -1114,80 +1525,19 @@ def issue_activity(
             except Exception as e:
                 capture_exception(e)
 
-        if type not in [
-            "cycle.activity.created",
-            "cycle.activity.deleted",
-            "module.activity.created",
-            "module.activity.deleted",
-        ]:
-            # Create Notifications
-            bulk_notifications = []
-
-            issue_subscribers = list(
-                IssueSubscriber.objects.filter(project=project, issue_id=issue_id)
-                .exclude(subscriber_id=actor_id)
-                .values_list("subscriber", flat=True)
-            )
-
-            issue_assignees = list(
-                IssueAssignee.objects.filter(project=project, issue_id=issue_id)
-                .exclude(assignee_id=actor_id)
-                .values_list("assignee", flat=True)
-            )
-
-            issue_subscribers = issue_subscribers + issue_assignees
-
-            issue = Issue.objects.filter(pk=issue_id).first()
-
-            # Add bot filtering
-            if (
-                issue is not None
-                and issue.created_by_id is not None
-                and not issue.created_by.is_bot
-                and str(issue.created_by_id) != str(actor_id)
-            ):
-                issue_subscribers = issue_subscribers + [issue.created_by_id]
-
-            for subscriber in issue_subscribers:
-                for issue_activity in issue_activities_created:
-                    bulk_notifications.append(
-                        Notification(
-                            workspace=project.workspace,
-                            sender="in_app:issue_activities",
-                            triggered_by_id=actor_id,
-                            receiver_id=subscriber,
-                            entity_identifier=issue_id,
-                            entity_name="issue",
-                            project=project,
-                            title=issue_activity.comment,
-                            data={
-                                "issue": {
-                                    "id": str(issue_id),
-                                    "name": str(issue.name),
-                                    "identifier": str(issue.project.identifier),
-                                    "sequence_id": issue.sequence_id,
-                                    "state_name": issue.state.name,
-                                    "state_group": issue.state.group,
-                                },
-                                "issue_activity": {
-                                    "id": str(issue_activity.id),
-                                    "verb": str(issue_activity.verb),
-                                    "field": str(issue_activity.field),
-                                    "actor": str(issue_activity.actor_id),
-                                    "new_value": str(issue_activity.new_value),
-                                    "old_value": str(issue_activity.old_value),
-                                    "issue_comment": str(
-                                        issue_activity.issue_comment.comment_stripped
-                                        if issue_activity.issue_comment is not None
-                                        else ""
-                                    ),
-                                },
-                            },
-                        )
-                    )
-
-            # Bulk create notifications
-            Notification.objects.bulk_create(bulk_notifications, batch_size=100)
+        notifications.delay(
+            type=type,
+            issue_id=issue_id,
+            actor_id=actor_id,
+            project_id=project_id,
+            subscriber=subscriber,
+            issue_activities_created=json.dumps(
+                IssueActivitySerializer(issue_activities_created, many=True).data,
+                cls=DjangoJSONEncoder,
+            ),
+            requested_data=requested_data,
+            current_instance=current_instance,
+        )
 
         return
     except Exception as e:
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
index a1f4a3e920e..4d77eb1246e 100644
--- a/apiserver/plane/bgtasks/issue_automation_task.py
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -32,7 +32,7 @@ def archive_old_issues():
             archive_in = project.archive_in
 
             # Get all the issues whose updated_at in less that the archive_in month
-            issues = Issue.objects.filter(
+            issues = Issue.issue_objects.filter(
                 Q(
                     project=project_id,
                     archived_at__isnull=True,
@@ -58,27 +58,32 @@ def archive_old_issues():
 
             # Check if Issues
             if issues:
+                # Set the archive time to current time
+                archive_at = timezone.now().date()
+
                 issues_to_update = []
                 for issue in issues:
-                    issue.archived_at = timezone.now()
+                    issue.archived_at = archive_at
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                updated_issues = Issue.objects.bulk_update(
-                    issues_to_update, ["archived_at"], batch_size=100
-                )
-                [
-                    issue_activity.delay(
-                        type="issue.activity.updated",
-                        requested_data=json.dumps({"archived_at": str(issue.archived_at)}),
-                        actor_id=str(project.created_by_id),
-                        issue_id=issue.id,
-                        project_id=project_id,
-                        current_instance=None,
-                        subscriber=False,
+                if issues_to_update: 
+                    Issue.objects.bulk_update(
+                        issues_to_update, ["archived_at"], batch_size=100
                     )
-                    for issue in updated_issues
-                ]
+                    _ = [
+                        issue_activity.delay(
+                            type="issue.activity.updated",
+                            requested_data=json.dumps({"archived_at": str(archive_at)}),
+                            actor_id=str(project.created_by_id),
+                            issue_id=issue.id,
+                            project_id=project_id,
+                            current_instance=json.dumps({"archived_at": None}),
+                            subscriber=False,
+                            epoch=int(timezone.now().timestamp())
+                        )
+                        for issue in issues_to_update
+                    ]
         return
     except Exception as e:
         if settings.DEBUG:
@@ -99,7 +104,7 @@ def close_old_issues():
             close_in = project.close_in
 
             # Get all the issues whose updated_at in less that the close_in month
-            issues = Issue.objects.filter(
+            issues = Issue.issue_objects.filter(
                 Q(
                     project=project_id,
                     archived_at__isnull=True,
@@ -136,19 +141,21 @@ def close_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                updated_issues = Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
-                [
-                    issue_activity.delay(
-                        type="issue.activity.updated",
-                        requested_data=json.dumps({"closed_to": str(issue.state_id)}),
-                        actor_id=str(project.created_by_id),
-                        issue_id=issue.id,
-                        project_id=project_id,
-                        current_instance=None,
-                        subscriber=False,
-                    )
-                    for issue in updated_issues
-                ]
+                if issues_to_update:
+                    Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
+                    [
+                        issue_activity.delay(
+                            type="issue.activity.updated",
+                            requested_data=json.dumps({"closed_to": str(issue.state_id)}),
+                            actor_id=str(project.created_by_id),
+                            issue_id=issue.id,
+                            project_id=project_id,
+                            current_instance=None,
+                            subscriber=False,
+                            epoch=int(timezone.now().timestamp())
+                        )
+                        for issue in issues_to_update
+                    ]
         return
     except Exception as e:
         if settings.DEBUG:
diff --git a/apiserver/plane/bgtasks/magic_link_code_task.py b/apiserver/plane/bgtasks/magic_link_code_task.py
index 91cc461bb20..71f6db8da84 100644
--- a/apiserver/plane/bgtasks/magic_link_code_task.py
+++ b/apiserver/plane/bgtasks/magic_link_code_task.py
@@ -17,7 +17,7 @@ def magic_link(email, key, token, current_site):
 
         from_email_string = settings.EMAIL_FROM
 
-        subject = f"Login for Plane"
+        subject = "Login for Plane"
 
         context = {"magic_url": abs_url, "code": token}
 
diff --git a/apiserver/plane/bgtasks/notification_task.py b/apiserver/plane/bgtasks/notification_task.py
new file mode 100644
index 00000000000..4380f4ee90e
--- /dev/null
+++ b/apiserver/plane/bgtasks/notification_task.py
@@ -0,0 +1,274 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+
+# Module imports
+from plane.db.models import (
+    IssueMention,
+    IssueSubscriber,
+    Project,
+    User,
+    IssueAssignee,
+    Issue,
+    Notification,
+    IssueComment,
+)
+
+# Third Party imports
+from celery import shared_task
+from bs4 import BeautifulSoup
+
+
+def get_new_mentions(requested_instance, current_instance):
+    # requested_data is the newer instance of the current issue
+    # current_instance is the older instance of the current issue, saved in the database
+
+    # extract mentions from both the instance of data
+    mentions_older = extract_mentions(current_instance)
+    mentions_newer = extract_mentions(requested_instance)
+
+    # Getting Set Difference from mentions_newer
+    new_mentions = [
+        mention for mention in mentions_newer if mention not in mentions_older]
+
+    return new_mentions
+
+# Get Removed Mention
+
+
+def get_removed_mentions(requested_instance, current_instance):
+    # requested_data is the newer instance of the current issue
+    # current_instance is the older instance of the current issue, saved in the database
+
+    # extract mentions from both the instance of data
+    mentions_older = extract_mentions(current_instance)
+    mentions_newer = extract_mentions(requested_instance)
+
+    # Getting Set Difference from mentions_newer
+    removed_mentions = [
+        mention for mention in mentions_older if mention not in mentions_newer]
+
+    return removed_mentions
+
+# Adds mentions as subscribers
+
+
+def extract_mentions_as_subscribers(project_id, issue_id, mentions):
+    # mentions is an array of User IDs representing the FILTERED set of mentioned users
+
+    bulk_mention_subscribers = []
+
+    for mention_id in mentions:
+        # If the particular mention has not already been subscribed to the issue, he must be sent the mentioned notification
+        if not IssueSubscriber.objects.filter(
+            issue_id=issue_id,
+            subscriber=mention_id,
+            project=project_id,
+        ).exists():
+            mentioned_user = User.objects.get(pk=mention_id)
+
+            project = Project.objects.get(pk=project_id)
+            issue = Issue.objects.get(pk=issue_id)
+
+            bulk_mention_subscribers.append(IssueSubscriber(
+                workspace=project.workspace,
+                project=project,
+                issue=issue,
+                subscriber=mentioned_user,
+            ))
+    return bulk_mention_subscribers
+
+# Parse Issue Description & extracts mentions
+
+
+def extract_mentions(issue_instance):
+    try:
+        # issue_instance has to be a dictionary passed, containing the description_html and other set of activity data.
+        mentions = []
+        # Convert string to dictionary
+        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'})
+
+        mentions = [mention_tag['id'] for mention_tag in mention_tags]
+
+        return list(set(mentions))
+    except Exception as e:
+        return []
+
+
+@shared_task
+def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activities_created, requested_data, current_instance):
+    issue_activities_created = (
+        json.loads(
+            issue_activities_created) if issue_activities_created is not None else None
+    )
+    if type not in [
+        "cycle.activity.created",
+        "cycle.activity.deleted",
+        "module.activity.created",
+        "module.activity.deleted",
+        "issue_reaction.activity.created",
+        "issue_reaction.activity.deleted",
+        "comment_reaction.activity.created",
+        "comment_reaction.activity.deleted",
+        "issue_vote.activity.created",
+        "issue_vote.activity.deleted",
+        "issue_draft.activity.created",
+        "issue_draft.activity.updated",
+        "issue_draft.activity.deleted",
+    ]:
+        # Create Notifications
+        bulk_notifications = []
+
+        """
+            Mention Tasks
+            1. Perform Diffing and Extract the mentions, that mention notification needs to be sent
+            2. From the latest set of mentions, extract the users which are not a subscribers & make them subscribers
+            """
+
+        # Get new mentions from the newer instance
+        new_mentions = get_new_mentions(
+            requested_instance=requested_data, current_instance=current_instance)
+        removed_mention = get_removed_mentions(
+            requested_instance=requested_data, current_instance=current_instance)
+
+        # Get New Subscribers from the mentions of the newer instance
+        requested_mentions = extract_mentions(
+            issue_instance=requested_data)
+        mention_subscribers = extract_mentions_as_subscribers(
+            project_id=project_id, issue_id=issue_id, mentions=requested_mentions)
+
+        issue_subscribers = list(
+            IssueSubscriber.objects.filter(
+                project_id=project_id, issue_id=issue_id)
+            .exclude(subscriber_id__in=list(new_mentions + [actor_id]))
+            .values_list("subscriber", flat=True)
+        )
+
+        issue_assignees = list(
+            IssueAssignee.objects.filter(
+                project_id=project_id, issue_id=issue_id)
+            .exclude(assignee_id=actor_id)
+            .values_list("assignee", flat=True)
+        )
+
+        issue_subscribers = issue_subscribers + issue_assignees
+
+        issue = Issue.objects.filter(pk=issue_id).first()
+
+        if subscriber:
+            # add the user to issue subscriber
+            try:
+                _ = IssueSubscriber.objects.get_or_create(
+                    issue_id=issue_id, subscriber_id=actor_id
+                )
+            except Exception as e:
+                pass
+
+        project = Project.objects.get(pk=project_id)
+
+        for subscriber in list(set(issue_subscribers)):
+            for issue_activity in issue_activities_created:
+                issue_comment = issue_activity.get("issue_comment")
+                if issue_comment is not None:
+                    issue_comment = IssueComment.objects.get(id=issue_comment, issue_id=issue_id, project_id=project_id, workspace_id=project.workspace_id)
+                bulk_notifications.append(
+                    Notification(
+                        workspace=project.workspace,
+                        sender="in_app:issue_activities",
+                        triggered_by_id=actor_id,
+                        receiver_id=subscriber,
+                        entity_identifier=issue_id,
+                        entity_name="issue",
+                        project=project,
+                        title=issue_activity.get("comment"),
+                        data={
+                            "issue": {
+                                "id": str(issue_id),
+                                "name": str(issue.name),
+                                "identifier": str(issue.project.identifier),
+                                "sequence_id": issue.sequence_id,
+                                "state_name": issue.state.name,
+                                "state_group": issue.state.group,
+                            },
+                            "issue_activity": {
+                                "id": str(issue_activity.get("id")),
+                                "verb": str(issue_activity.get("verb")),
+                                "field": str(issue_activity.get("field")),
+                                "actor": str(issue_activity.get("actor_id")),
+                                "new_value": str(issue_activity.get("new_value")),
+                                "old_value": str(issue_activity.get("old_value")),
+                                "issue_comment": str(
+                                    issue_comment.comment_stripped
+                                    if issue_activity.get("issue_comment") is not None
+                                    else ""
+                                ),
+                            },
+                        },
+                    )
+                )
+
+        # Add Mentioned as Issue Subscribers
+        IssueSubscriber.objects.bulk_create(
+            mention_subscribers, batch_size=100)
+
+        for mention_id in new_mentions:
+            if (mention_id != actor_id):
+                for issue_activity in issue_activities_created:
+                    bulk_notifications.append(
+                        Notification(
+                            workspace=project.workspace,
+                            sender="in_app:issue_activities:mention",
+                            triggered_by_id=actor_id,
+                            receiver_id=mention_id,
+                            entity_identifier=issue_id,
+                            entity_name="issue",
+                            project=project,
+                            message=f"You have been mentioned in the issue {issue.name}",
+                            data={
+                                "issue": {
+                                    "id": str(issue_id),
+                                    "name": str(issue.name),
+                                    "identifier": str(issue.project.identifier),
+                                    "sequence_id": issue.sequence_id,
+                                    "state_name": issue.state.name,
+                                    "state_group": issue.state.group,
+                                },
+                                "issue_activity": {
+                                    "id": str(issue_activity.get("id")),
+                                    "verb": str(issue_activity.get("verb")),
+                                    "field": str(issue_activity.get("field")),
+                                    "actor": str(issue_activity.get("actor_id")),
+                                    "new_value": str(issue_activity.get("new_value")),
+                                    "old_value": str(issue_activity.get("old_value")),
+                                },
+                            },
+                        )
+                    )
+
+        # Create New Mentions Here
+        aggregated_issue_mentions = []
+
+        for mention_id in new_mentions:
+            mentioned_user = User.objects.get(pk=mention_id)
+            aggregated_issue_mentions.append(
+                IssueMention(
+                    mention=mentioned_user,
+                    issue=issue,
+                    project=project,
+                    workspace=project.workspace
+                )
+            )
+
+        IssueMention.objects.bulk_create(
+            aggregated_issue_mentions, batch_size=100)
+        IssueMention.objects.filter(
+            issue=issue, mention__in=removed_mention).delete()
+
+        # Bulk create notifications
+        Notification.objects.bulk_create(bulk_notifications, batch_size=100)
diff --git a/apiserver/plane/bgtasks/workspace_invitation_task.py b/apiserver/plane/bgtasks/workspace_invitation_task.py
index d84a0b414f6..94be6f879d1 100644
--- a/apiserver/plane/bgtasks/workspace_invitation_task.py
+++ b/apiserver/plane/bgtasks/workspace_invitation_task.py
@@ -11,7 +11,7 @@
 from slack_sdk.errors import SlackApiError
 
 # Module imports
-from plane.db.models import Workspace, User, WorkspaceMemberInvite
+from plane.db.models import Workspace, WorkspaceMemberInvite
 
 
 @shared_task
diff --git a/apiserver/plane/celery.py b/apiserver/plane/celery.py
index 15fe8af52b9..dfb094339b1 100644
--- a/apiserver/plane/celery.py
+++ b/apiserver/plane/celery.py
@@ -29,4 +29,4 @@
 # Load task modules from all registered Django app configs.
 app.autodiscover_tasks()
 
-app.conf.beat_scheduler = 'django_celery_beat.schedulers.DatabaseScheduler'
\ No newline at end of file
+app.conf.beat_scheduler = 'django_celery_beat.schedulers.DatabaseScheduler'
diff --git a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
index f7d6a979de1..01af46d20cf 100644
--- a/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
+++ b/apiserver/plane/db/migrations/0042_alter_analyticview_created_by_and_more.py
@@ -3,7 +3,7 @@
 from django.conf import settings
 from django.db import migrations, models
 import django.db.models.deletion
-
+import uuid
 
 def update_user_timezones(apps, schema_editor):
     UserModel = apps.get_model("db", "User")
@@ -31,5 +31,30 @@ class Migration(migrations.Migration):
             name='title',
             field=models.CharField(blank=True, max_length=255, null=True),
         ),
-        migrations.RunPython(update_user_timezones)
+        migrations.RunPython(update_user_timezones),
+        migrations.AlterField(
+            model_name='issuevote',
+            name='vote',
+            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
+        ),
+        migrations.CreateModel(
+            name='ProjectPublicMember',
+            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')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=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')),
+                ('member', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='public_project_members', 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': 'Project Public Member',
+                'verbose_name_plural': 'Project Public Members',
+                'db_table': 'project_public_members',
+                'ordering': ('-created_at',),
+                'unique_together': {('project', 'member')},
+            },
+        ),
     ]
diff --git a/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py b/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
deleted file mode 100644
index d8063acc052..00000000000
--- a/apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py
+++ /dev/null
@@ -1,26 +0,0 @@
-# Generated by Django 4.2.3 on 2023-08-29 07:58
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0041_cycle_sort_order_issuecomment_access_and_more'),
-    ]
-
-    operations = [
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together=set(),
-        ),
-        migrations.AlterField(
-            model_name='issuevote',
-            name='vote',
-            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
-        ),
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together={('issue', 'actor', 'vote')},
-        ),
-    ]
diff --git a/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py
new file mode 100644
index 00000000000..5a806c7046a
--- /dev/null
+++ b/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py
@@ -0,0 +1,83 @@
+# Generated by Django 4.2.3 on 2023-09-12 07:29
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+from plane.db.models import IssueRelation
+from sentry_sdk import capture_exception
+import uuid
+
+
+def create_issue_relation(apps, schema_editor):
+    try:
+        IssueBlockerModel = apps.get_model("db", "IssueBlocker")
+        updated_issue_relation = []
+        for blocked_issue in IssueBlockerModel.objects.all():
+            updated_issue_relation.append(
+                IssueRelation(
+                    issue_id=blocked_issue.block_id,
+                    related_issue_id=blocked_issue.blocked_by_id,
+                    relation_type="blocked_by",
+                    project_id=blocked_issue.project_id,
+                    workspace_id=blocked_issue.workspace_id,
+                    created_by_id=blocked_issue.created_by_id,
+                    updated_by_id=blocked_issue.updated_by_id,
+                )
+            )
+        IssueRelation.objects.bulk_create(updated_issue_relation, batch_size=100)
+    except Exception as e:
+        print(e)
+        capture_exception(e)
+
+
+def update_issue_priority_choice(apps, schema_editor):
+    IssueModel = apps.get_model("db", "Issue")
+    updated_issues = []
+    for obj in IssueModel.objects.filter(priority=None):
+        obj.priority = "none"
+        updated_issues.append(obj)
+    IssueModel.objects.bulk_update(updated_issues, ["priority"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0042_alter_analyticview_created_by_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='IssueRelation',
+            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')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('relation_type', models.CharField(choices=[('duplicate', 'Duplicate'), ('relates_to', 'Relates To'), ('blocked_by', 'Blocked By')], default='blocked_by', max_length=20, verbose_name='Issue Relation Type')),
+                ('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='issue_relation', to='db.issue')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_%(class)s', to='db.project')),
+                ('related_issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_related', to='db.issue')),
+                ('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 Relation',
+                'verbose_name_plural': 'Issue Relations',
+                'db_table': 'issue_relations',
+                'ordering': ('-created_at',),
+                'unique_together': {('issue', 'related_issue')},
+            },
+        ),
+        migrations.AddField(
+            model_name='issue',
+            name='is_draft',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name='issue',
+            name='priority',
+            field=models.CharField(choices=[('urgent', 'Urgent'), ('high', 'High'), ('medium', 'Medium'), ('low', 'Low'), ('none', 'None')], default='none', max_length=30, verbose_name='Issue Priority'),
+        ),
+        migrations.RunPython(create_issue_relation),
+        migrations.RunPython(update_issue_priority_choice),
+    ]
diff --git a/apiserver/plane/db/migrations/0044_auto_20230913_0709.py b/apiserver/plane/db/migrations/0044_auto_20230913_0709.py
new file mode 100644
index 00000000000..19a1449af46
--- /dev/null
+++ b/apiserver/plane/db/migrations/0044_auto_20230913_0709.py
@@ -0,0 +1,138 @@
+# Generated by Django 4.2.3 on 2023-09-13 07:09
+
+from django.db import migrations
+
+
+def workspace_member_props(old_props):
+    new_props = {
+        "filters": {
+            "priority": old_props.get("filters", {}).get("priority", None),
+            "state": old_props.get("filters", {}).get("state", None),
+            "state_group": old_props.get("filters", {}).get("state_group", None),
+            "assignees": old_props.get("filters", {}).get("assignees", None),
+            "created_by": old_props.get("filters", {}).get("created_by", None),
+            "labels": old_props.get("filters", {}).get("labels", None),
+            "start_date": old_props.get("filters", {}).get("start_date", None),
+            "target_date": old_props.get("filters", {}).get("target_date", None),
+            "subscriber": old_props.get("filters", {}).get("subscriber", None),
+        },
+        "display_filters": {
+            "group_by": old_props.get("groupByProperty", None),
+            "order_by": old_props.get("orderBy", "-created_at"),
+            "type": old_props.get("filters", {}).get("type", None),
+            "sub_issue": old_props.get("showSubIssues", True),
+            "show_empty_groups": old_props.get("showEmptyGroups", True),
+            "layout": old_props.get("issueView", "list"),
+            "calendar_date_range": old_props.get("calendarDateRange", ""),
+        },
+        "display_properties": {
+            "assignee": old_props.get("properties", {}).get("assignee", True),
+            "attachment_count": old_props.get("properties", {}).get("attachment_count", True),
+            "created_on": old_props.get("properties", {}).get("created_on", True),
+            "due_date": old_props.get("properties", {}).get("due_date", True),
+            "estimate": old_props.get("properties", {}).get("estimate", True),
+            "key": old_props.get("properties", {}).get("key", True),
+            "labels": old_props.get("properties", {}).get("labels", True),
+            "link": old_props.get("properties", {}).get("link", True),
+            "priority": old_props.get("properties", {}).get("priority", True),
+            "start_date": old_props.get("properties", {}).get("start_date", True),
+            "state": old_props.get("properties", {}).get("state", True),
+            "sub_issue_count": old_props.get("properties", {}).get("sub_issue_count", True),
+            "updated_on": old_props.get("properties", {}).get("updated_on", True),
+        },
+    }
+    return new_props
+
+
+def project_member_props(old_props):
+    new_props = {
+        "filters": {
+            "priority": old_props.get("filters", {}).get("priority", None),
+            "state": old_props.get("filters", {}).get("state", None),
+            "state_group": old_props.get("filters", {}).get("state_group", None),
+            "assignees": old_props.get("filters", {}).get("assignees", None),
+            "created_by": old_props.get("filters", {}).get("created_by", None),
+            "labels": old_props.get("filters", {}).get("labels", None),
+            "start_date": old_props.get("filters", {}).get("start_date", None),
+            "target_date": old_props.get("filters", {}).get("target_date", None),
+            "subscriber": old_props.get("filters", {}).get("subscriber", None),
+        },
+        "display_filters": {
+            "group_by": old_props.get("groupByProperty", None),
+            "order_by": old_props.get("orderBy", "-created_at"),
+            "type": old_props.get("filters", {}).get("type", None),
+            "sub_issue": old_props.get("showSubIssues", True),
+            "show_empty_groups": old_props.get("showEmptyGroups", True),
+            "layout": old_props.get("issueView", "list"),
+            "calendar_date_range": old_props.get("calendarDateRange", ""),
+        },
+    }
+    return new_props
+
+
+def cycle_module_props(old_props):
+    new_props = {
+        "filters": {
+            "priority": old_props.get("filters", {}).get("priority", None),
+            "state": old_props.get("filters", {}).get("state", None),
+            "state_group": old_props.get("filters", {}).get("state_group", None),
+            "assignees": old_props.get("filters", {}).get("assignees", None),
+            "created_by": old_props.get("filters", {}).get("created_by", None),
+            "labels": old_props.get("filters", {}).get("labels", None),
+            "start_date": old_props.get("filters", {}).get("start_date", None),
+            "target_date": old_props.get("filters", {}).get("target_date", None),
+            "subscriber": old_props.get("filters", {}).get("subscriber", None),
+        },
+    }
+    return new_props
+     
+
+def update_workspace_member_view_props(apps, schema_editor):
+    WorkspaceMemberModel = apps.get_model("db", "WorkspaceMember")
+    updated_workspace_member = []
+    for obj in WorkspaceMemberModel.objects.all():
+            obj.view_props = workspace_member_props(obj.view_props)
+            obj.default_props = workspace_member_props(obj.default_props)
+            updated_workspace_member.append(obj)
+    WorkspaceMemberModel.objects.bulk_update(updated_workspace_member, ["view_props", "default_props"], batch_size=100)
+
+def update_project_member_view_props(apps, schema_editor):
+    ProjectMemberModel = apps.get_model("db", "ProjectMember")
+    updated_project_member = []
+    for obj in ProjectMemberModel.objects.all():
+            obj.view_props = project_member_props(obj.view_props)
+            obj.default_props = project_member_props(obj.default_props)
+            updated_project_member.append(obj)
+    ProjectMemberModel.objects.bulk_update(updated_project_member, ["view_props", "default_props"], batch_size=100)
+
+def update_cycle_props(apps, schema_editor):
+    CycleModel = apps.get_model("db", "Cycle")
+    updated_cycle = []
+    for obj in CycleModel.objects.all():
+            if "filter" in obj.view_props:
+                obj.view_props = cycle_module_props(obj.view_props)
+                updated_cycle.append(obj)
+    CycleModel.objects.bulk_update(updated_cycle, ["view_props"], batch_size=100)
+
+def update_module_props(apps, schema_editor):
+    ModuleModel = apps.get_model("db", "Module")
+    updated_module = []
+    for obj in ModuleModel.objects.all():
+            if "filter" in obj.view_props:
+                obj.view_props = cycle_module_props(obj.view_props)
+                updated_module.append(obj)
+    ModuleModel.objects.bulk_update(updated_module, ["view_props"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0043_alter_analyticview_created_by_and_more'),
+    ]
+
+    operations = [
+        migrations.RunPython(update_workspace_member_view_props),
+        migrations.RunPython(update_project_member_view_props),
+        migrations.RunPython(update_cycle_props),
+        migrations.RunPython(update_module_props),
+    ]
diff --git a/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py b/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py
new file mode 100644
index 00000000000..4b9c1b1eb94
--- /dev/null
+++ b/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py
@@ -0,0 +1,79 @@
+# Generated by Django 4.2.5 on 2023-09-29 10:14
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.workspace
+import uuid
+
+
+def update_issue_activity_priority(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="priority"):
+        # Set the old and new value to none if it is empty for Priority
+        obj.new_value = obj.new_value or "none"
+        obj.old_value = obj.old_value or "none"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["new_value", "old_value"],
+        batch_size=2000,
+    )
+
+def update_issue_activity_blocked(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="blocks"):
+        # Set the field to blocked_by
+        obj.field = "blocked_by"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["field"],
+        batch_size=1000,
+    )
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0044_auto_20230913_0709'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GlobalView',
+            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')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('name', models.CharField(max_length=255, verbose_name='View Name')),
+                ('description', models.TextField(blank=True, verbose_name='View Description')),
+                ('query', models.JSONField(verbose_name='View Query')),
+                ('access', models.PositiveSmallIntegerField(choices=[(0, 'Private'), (1, 'Public')], default=1)),
+                ('query_data', models.JSONField(default=dict)),
+                ('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')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='global_views', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Global View',
+                'verbose_name_plural': 'Global Views',
+                'db_table': 'global_views',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='issue_props',
+            field=models.JSONField(default=plane.db.models.workspace.get_issue_props),
+        ),
+        migrations.AddField(
+            model_name='issueactivity',
+            name='epoch',
+            field=models.FloatField(null=True),
+        ),
+        migrations.RunPython(update_issue_activity_priority),
+        migrations.RunPython(update_issue_activity_blocked),
+    ]
diff --git a/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py
new file mode 100644
index 00000000000..ae5753e0710
--- /dev/null
+++ b/apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.5 on 2023-10-18 12:04
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.issue
+import uuid
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0045_issueactivity_epoch_workspacemember_issue_props_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="issue_mentions",
+            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')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4,editable=False, primary_key=True, serialize=False, unique=True)),
+                ('mention', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to=settings.AUTH_USER_MODEL)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL,related_name='issuemention_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to='db.issue')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_issuemention', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='issuemention_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_issuemention', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'IssueMention',
+                'verbose_name_plural': 'IssueMentions',
+                'db_table': 'issue_mentions',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AlterField(
+            model_name='issueproperty',
+            name='properties',
+            field=models.JSONField(default=plane.db.models.issue.get_default_properties),
+        ),
+    ]
\ No newline at end of file
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index 90532dc64e3..d8286f8f8a1 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -27,11 +27,12 @@
     IssueActivity,
     IssueProperty,
     IssueComment,
-    IssueBlocker,
     IssueLabel,
     IssueAssignee,
     Label,
     IssueBlocker,
+    IssueRelation,
+    IssueMention,
     IssueLink,
     IssueSequence,
     IssueAttachment,
@@ -49,7 +50,7 @@
 
 from .cycle import Cycle, CycleIssue, CycleFavorite
 
-from .view import IssueView, IssueViewFavorite
+from .view import GlobalView, IssueView, IssueViewFavorite
 
 from .module import Module, ModuleMember, ModuleIssue, ModuleLink, ModuleFavorite
 
@@ -77,4 +78,4 @@
 
 from .notification import Notification
 
-from .exporter import ExporterHistory
\ No newline at end of file
+from .exporter import ExporterHistory
diff --git a/apiserver/plane/db/models/exporter.py b/apiserver/plane/db/models/exporter.py
index fce31c8e7d2..0383807b702 100644
--- a/apiserver/plane/db/models/exporter.py
+++ b/apiserver/plane/db/models/exporter.py
@@ -53,4 +53,4 @@ class Meta:
 
     def __str__(self):
         """Return name of the service"""
-        return f"{self.provider} <{self.workspace.name}>"
\ No newline at end of file
+        return f"{self.provider} <{self.workspace.name}>"
diff --git a/apiserver/plane/db/models/integration/__init__.py b/apiserver/plane/db/models/integration/__init__.py
index 3f2be93b861..3bef687084a 100644
--- a/apiserver/plane/db/models/integration/__init__.py
+++ b/apiserver/plane/db/models/integration/__init__.py
@@ -1,3 +1,3 @@
 from .base import Integration, WorkspaceIntegration
 from .github import GithubRepository, GithubRepositorySync, GithubIssueSync, GithubCommentSync
-from .slack import SlackProjectSync
\ No newline at end of file
+from .slack import SlackProjectSync
diff --git a/apiserver/plane/db/models/integration/github.py b/apiserver/plane/db/models/integration/github.py
index 130925c21d6..f4d152bb1b4 100644
--- a/apiserver/plane/db/models/integration/github.py
+++ b/apiserver/plane/db/models/integration/github.py
@@ -6,7 +6,6 @@
 
 # Module imports
 from plane.db.models import ProjectBaseModel
-from plane.db.mixins import AuditModel
 
 
 class GithubRepository(ProjectBaseModel):
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 1633cbaf917..0c227a158d5 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -16,6 +16,24 @@
 from plane.utils.html_processor import strip_tags
 
 
+def get_default_properties():
+    return {
+        "assignee": True,
+        "start_date": True,
+        "due_date": True,
+        "labels": True,
+        "key": True,
+        "priority": True,
+        "state": True,
+        "sub_issue_count": True,
+        "link": True,
+        "attachment_count": True,
+        "estimate": True,
+        "created_on": True,
+        "updated_on": True,
+    }
+
+
 # TODO: Handle identifiers for Bulk Inserts - nk
 class IssueManager(models.Manager):
     def get_queryset(self):
@@ -29,6 +47,7 @@ def get_queryset(self):
                 | models.Q(issue_inbox__isnull=True)
             )
             .exclude(archived_at__isnull=False)
+            .exclude(is_draft=True)
         )
 
 
@@ -38,6 +57,7 @@ class Issue(ProjectBaseModel):
         ("high", "High"),
         ("medium", "Medium"),
         ("low", "Low"),
+        ("none", "None"),
     )
     parent = models.ForeignKey(
         "self",
@@ -64,8 +84,7 @@ class Issue(ProjectBaseModel):
         max_length=30,
         choices=PRIORITY_CHOICES,
         verbose_name="Issue Priority",
-        null=True,
-        blank=True,
+        default="none",
     )
     start_date = models.DateField(null=True, blank=True)
     target_date = models.DateField(null=True, blank=True)
@@ -83,6 +102,7 @@ class Issue(ProjectBaseModel):
     sort_order = models.FloatField(default=65535)
     completed_at = models.DateTimeField(null=True)
     archived_at = models.DateField(null=True)
+    is_draft = models.BooleanField(default=False)
 
     objects = models.Manager()
     issue_objects = IssueManager()
@@ -178,6 +198,56 @@ def __str__(self):
         return f"{self.block.name} {self.blocked_by.name}"
 
 
+class IssueRelation(ProjectBaseModel):
+    RELATION_CHOICES = (
+        ("duplicate", "Duplicate"),
+        ("relates_to", "Relates To"),
+        ("blocked_by", "Blocked By"),
+    )
+
+    issue = models.ForeignKey(
+        Issue, related_name="issue_relation", on_delete=models.CASCADE
+    )
+    related_issue = models.ForeignKey(
+        Issue, related_name="issue_related", on_delete=models.CASCADE
+    )
+    relation_type = models.CharField(
+        max_length=20,
+        choices=RELATION_CHOICES,
+        verbose_name="Issue Relation Type",
+        default="blocked_by",
+    )
+
+    class Meta:
+        unique_together = ["issue", "related_issue"]
+        verbose_name = "Issue Relation"
+        verbose_name_plural = "Issue Relations"
+        db_table = "issue_relations"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.related_issue.name}"    
+    
+class IssueMention(ProjectBaseModel):
+    issue = models.ForeignKey(
+        Issue, on_delete=models.CASCADE, related_name="issue_mention"
+    )
+    mention = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="issue_mention",
+    )
+    class Meta:
+        unique_together = ["issue", "mention"]
+        verbose_name = "Issue Mention"
+        verbose_name_plural = "Issue Mentions"
+        db_table = "issue_mentions"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.mention.email}" 
+
+
 class IssueAssignee(ProjectBaseModel):
     issue = models.ForeignKey(
         Issue, on_delete=models.CASCADE, related_name="issue_assignee"
@@ -276,6 +346,7 @@ class IssueActivity(ProjectBaseModel):
     )
     old_identifier = models.UUIDField(null=True)
     new_identifier = models.UUIDField(null=True)
+    epoch = models.FloatField(null=True)
 
     class Meta:
         verbose_name = "Issue Activity"
@@ -293,7 +364,9 @@ class IssueComment(ProjectBaseModel):
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
-    issue = models.ForeignKey(Issue, on_delete=models.CASCADE)
+    issue = models.ForeignKey(
+        Issue, on_delete=models.CASCADE, related_name="issue_comments"
+    )
     # System can also create comment
     actor = models.ForeignKey(
         settings.AUTH_USER_MODEL,
@@ -333,7 +406,7 @@ class IssueProperty(ProjectBaseModel):
         on_delete=models.CASCADE,
         related_name="issue_property_user",
     )
-    properties = models.JSONField(default=dict)
+    properties = models.JSONField(default=get_default_properties)
 
     class Meta:
         verbose_name = "Issue Property"
@@ -481,7 +554,10 @@ class IssueVote(ProjectBaseModel):
     )
 
     class Meta:
-        unique_together = ["issue", "actor", "vote"]
+        unique_together = [
+            "issue",
+            "actor",
+        ]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index da155af4029..f4ace65e5a0 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -4,9 +4,6 @@
 # Django imports
 from django.db import models
 from django.conf import settings
-from django.template.defaultfilters import slugify
-from django.db.models.signals import post_save
-from django.dispatch import receiver
 from django.core.validators import MinValueValidator, MaxValueValidator
 
 # Modeule imports
@@ -25,13 +22,26 @@
 
 def get_default_props():
     return {
-        "filters": {"type": None},
-        "orderBy": "-created_at",
-        "collapsed": True,
-        "issueView": "list",
-        "filterIssue": None,
-        "groupByProperty": None,
-        "showEmptyGroups": True,
+        "filters": {
+            "priority": None,
+            "state": None,
+            "state_group": None,
+            "assignees": None,
+            "created_by": None,
+            "labels": None,
+            "start_date": None,
+            "target_date": None,
+            "subscriber": None,
+        },
+        "display_filters": {
+            "group_by": None,
+            "order_by": '-created_at',
+            "type": None,
+            "sub_issue": True,
+            "show_empty_groups": True,
+            "layout": "list",
+            "calendar_date_range": "",
+        },
     }
 
 
diff --git a/apiserver/plane/db/models/view.py b/apiserver/plane/db/models/view.py
index 6a968af5345..44bc994d0c8 100644
--- a/apiserver/plane/db/models/view.py
+++ b/apiserver/plane/db/models/view.py
@@ -3,7 +3,41 @@
 from django.conf import settings
 
 # Module import
-from . import ProjectBaseModel
+from . import ProjectBaseModel, BaseModel
+
+
+class GlobalView(BaseModel):
+    workspace = models.ForeignKey(
+        "db.Workspace", on_delete=models.CASCADE, related_name="global_views"
+    )
+    name = models.CharField(max_length=255, verbose_name="View Name")
+    description = models.TextField(verbose_name="View Description", blank=True)
+    query = models.JSONField(verbose_name="View Query")
+    access = models.PositiveSmallIntegerField(
+        default=1, choices=((0, "Private"), (1, "Public"))
+    )
+    query_data = models.JSONField(default=dict)
+    sort_order = models.FloatField(default=65535)
+
+    class Meta:
+        verbose_name = "Global View"
+        verbose_name_plural = "Global Views"
+        db_table = "global_views"
+        ordering = ("-created_at",)
+    
+    def save(self, *args, **kwargs):
+        if self._state.adding:
+            largest_sort_order = GlobalView.objects.filter(
+                workspace=self.workspace
+            ).aggregate(largest=models.Max("sort_order"))["largest"]
+            if largest_sort_order is not None:
+                self.sort_order = largest_sort_order + 10000
+
+        super(GlobalView, self).save(*args, **kwargs)
+
+    def __str__(self):
+        """Return name of the View"""
+        return f"{self.name} <{self.workspace.name}>"
 
 
 class IssueView(ProjectBaseModel):
diff --git a/apiserver/plane/db/models/workspace.py b/apiserver/plane/db/models/workspace.py
index 48d8c9f2d03..d1012f54914 100644
--- a/apiserver/plane/db/models/workspace.py
+++ b/apiserver/plane/db/models/workspace.py
@@ -16,26 +16,50 @@
 
 def get_default_props():
     return {
-        "filters": {"type": None},
-        "groupByProperty": None,
-        "issueView": "list",
-        "orderBy": "-created_at",
-        "properties": {
+        "filters": {
+            "priority": None,
+            "state": None,
+            "state_group": None,
+            "assignees": None,
+            "created_by": None,
+            "labels": None,
+            "start_date": None,
+            "target_date": None,
+            "subscriber": None,
+        },
+        "display_filters": {
+            "group_by": None,
+            "order_by": "-created_at",
+            "type": None,
+            "sub_issue": True,
+            "show_empty_groups": True,
+            "layout": "list",
+            "calendar_date_range": "",
+        },
+        "display_properties": {
             "assignee": True,
+            "attachment_count": True,
+            "created_on": True,
             "due_date": True,
+            "estimate": True,
             "key": True,
             "labels": True,
+            "link": True,
             "priority": True,
+            "start_date": True,
             "state": True,
             "sub_issue_count": True,
-            "attachment_count": True,
-            "link": True,
-            "estimate": True,
-            "created_on": True,
             "updated_on": True,
-            "start_date": True,
-        },
-        "showEmptyGroups": True,
+        }
+    }
+
+
+def get_issue_props():
+    return {
+        "subscribed": True,
+        "assigned": True,
+        "created": True,
+        "all_issues": True,
     }
 
 
@@ -74,6 +98,7 @@ class WorkspaceMember(BaseModel):
     company_role = models.TextField(null=True, blank=True)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
+    issue_props = models.JSONField(default=get_issue_props)
 
     class Meta:
         unique_together = ["workspace", "member"]
diff --git a/apiserver/plane/middleware/user_middleware.py b/apiserver/plane/middleware/user_middleware.py
deleted file mode 100644
index 60dee9b731e..00000000000
--- a/apiserver/plane/middleware/user_middleware.py
+++ /dev/null
@@ -1,33 +0,0 @@
-import jwt
-import pytz
-from django.conf import settings
-from django.utils import timezone
-from plane.db.models import User
-
-
-class UserMiddleware(object):
-
-    def __init__(self, get_response):
-        self.get_response = get_response
-
-    def __call__(self, request):
-
-        try:
-            if request.headers.get("Authorization"):
-                authorization_header = request.headers.get("Authorization")
-                access_token = authorization_header.split(" ")[1]
-                decoded = jwt.decode(
-                    access_token, settings.SECRET_KEY, algorithms=["HS256"]
-                )
-                id = decoded['user_id']
-                user = User.objects.get(id=id)
-                user.last_active = timezone.now()
-                user.token_updated_at = None
-                user.save()
-                timezone.activate(pytz.timezone(user.user_timezone))
-        except Exception as e:
-            print(e)
-        
-        response = self.get_response(request)
-
-        return response
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index 9d293c0191e..76586b0feb6 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -12,6 +12,10 @@
 
 DEBUG = int(os.environ.get("DEBUG", 1)) == 1
 
+ALLOWED_HOSTS = [
+    "*",
+]
+
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
 
@@ -114,3 +118,6 @@
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index acc1f34fedd..541a0cfd4c6 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -1,33 +1,34 @@
 """Production settings and globals."""
-from urllib.parse import urlparse
 import ssl
 import certifi
 
 import dj_database_url
-from urllib.parse import urlparse
 
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
 from sentry_sdk.integrations.redis import RedisIntegration
+from urllib.parse import urlparse
 
 from .common import *  # noqa
 
 # Database
 DEBUG = int(os.environ.get("DEBUG", 0)) == 1
 
-DATABASES = {
-    "default": {
-        "ENGINE": "django.db.backends.postgresql",
-        "NAME": "plane",
-        "USER": os.environ.get("PGUSER", ""),
-        "PASSWORD": os.environ.get("PGPASSWORD", ""),
-        "HOST": os.environ.get("PGHOST", ""),
+if bool(os.environ.get("DATABASE_URL")):
+    # Parse database configuration from $DATABASE_URL
+    DATABASES["default"] = dj_database_url.config()
+else:
+    DATABASES = {
+        "default": {
+            "ENGINE": "django.db.backends.postgresql",
+            "NAME": os.environ.get("POSTGRES_DB"),
+            "USER": os.environ.get("POSTGRES_USER"),
+            "PASSWORD": os.environ.get("POSTGRES_PASSWORD"),
+            "HOST": os.environ.get("POSTGRES_HOST"),
+        }
     }
-}
 
 
-# Parse database configuration from $DATABASE_URL
-DATABASES["default"] = dj_database_url.config()
 SITE_ID = 1
 
 # Set the variable true if running in docker environment
@@ -197,7 +198,6 @@
     STORAGES["default"] = {
         "BACKEND": "django_s3_storage.storage.S3Storage",
     }
-
 # AWS Settings End
 
 # Enable Connection Pooling (if desired)
@@ -265,15 +265,18 @@
     CELERY_BROKER_URL = REDIS_URL
     CELERY_RESULT_BACKEND = REDIS_URL
 else:
-    CELERY_RESULT_BACKEND = broker_url
     CELERY_BROKER_URL = broker_url
+    CELERY_RESULT_BACKEND = broker_url
 
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
-
+# Enable or Disable signups
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
 
 # Scout Settings
 SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
 SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
 SCOUT_NAME = "Plane"
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
diff --git a/apiserver/plane/settings/selfhosted.py b/apiserver/plane/settings/selfhosted.py
new file mode 100644
index 00000000000..ee529a7c332
--- /dev/null
+++ b/apiserver/plane/settings/selfhosted.py
@@ -0,0 +1,129 @@
+"""Self hosted settings and globals."""
+from urllib.parse import urlparse
+
+import dj_database_url
+from urllib.parse import urlparse
+
+
+from .common import *  # noqa
+
+# Database
+DEBUG = int(os.environ.get("DEBUG", 0)) == 1
+
+# Docker configurations
+DOCKERIZED = 1
+USE_MINIO = 1
+
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.postgresql",
+        "NAME": "plane",
+        "USER": os.environ.get("PGUSER", ""),
+        "PASSWORD": os.environ.get("PGPASSWORD", ""),
+        "HOST": os.environ.get("PGHOST", ""),
+    }
+}
+
+# Parse database configuration from $DATABASE_URL
+DATABASES["default"] = dj_database_url.config()
+SITE_ID = 1
+
+# File size limit
+FILE_SIZE_LIMIT = int(os.environ.get("FILE_SIZE_LIMIT", 5242880))
+
+CORS_ALLOW_METHODS = [
+    "DELETE",
+    "GET",
+    "OPTIONS",
+    "PATCH",
+    "POST",
+    "PUT",
+]
+
+CORS_ALLOW_HEADERS = [
+    "accept",
+    "accept-encoding",
+    "authorization",
+    "content-type",
+    "dnt",
+    "origin",
+    "user-agent",
+    "x-csrftoken",
+    "x-requested-with",
+]
+
+CORS_ALLOW_CREDENTIALS = True
+CORS_ALLOW_ALL_ORIGINS = True
+
+STORAGES = {
+    "staticfiles": {
+        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
+    },
+}
+
+INSTALLED_APPS += ("storages",)
+STORAGES["default"] = {"BACKEND": "storages.backends.s3boto3.S3Boto3Storage"}
+# The AWS access key to use.
+AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "access-key")
+# The AWS secret access key to use.
+AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "secret-key")
+# The name of the bucket to store files in.
+AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "uploads")
+# The full URL to the S3 endpoint. Leave blank to use the default region URL.
+AWS_S3_ENDPOINT_URL = os.environ.get(
+    "AWS_S3_ENDPOINT_URL", "http://plane-minio:9000"
+)
+# Default permissions
+AWS_DEFAULT_ACL = "public-read"
+AWS_QUERYSTRING_AUTH = False
+AWS_S3_FILE_OVERWRITE = False
+
+# Custom Domain settings
+parsed_url = urlparse(os.environ.get("WEB_URL", "http://localhost"))
+AWS_S3_CUSTOM_DOMAIN = f"{parsed_url.netloc}/{AWS_STORAGE_BUCKET_NAME}"
+AWS_S3_URL_PROTOCOL = f"{parsed_url.scheme}:"
+
+# Honor the 'X-Forwarded-Proto' header for request.is_secure()
+SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
+
+# Allow all host headers
+ALLOWED_HOSTS = [
+    "*",
+]
+
+# Security settings
+SESSION_COOKIE_SECURE = True
+CSRF_COOKIE_SECURE = True
+
+# Redis URL
+REDIS_URL = os.environ.get("REDIS_URL")
+
+# Caches 
+CACHES = {
+    "default": {
+        "BACKEND": "django_redis.cache.RedisCache",
+        "LOCATION": REDIS_URL,
+        "OPTIONS": {
+            "CLIENT_CLASS": "django_redis.client.DefaultClient",
+        },
+    }
+}
+
+# URL used for email redirects
+WEB_URL = os.environ.get("WEB_URL", "http://localhost")
+
+# Celery settings
+CELERY_BROKER_URL = REDIS_URL
+CELERY_RESULT_BACKEND = REDIS_URL
+
+# Enable or Disable signups
+ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+# Analytics
+ANALYTICS_BASE_API = False
+
+# OPEN AI Settings
+OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
+OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
+GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
+
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index 5e274f8f32e..fe473234312 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -4,7 +4,6 @@
 import certifi
 
 import dj_database_url
-from urllib.parse import urlparse
 
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
@@ -218,3 +217,7 @@
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
diff --git a/apiserver/plane/tests/__init__.py b/apiserver/plane/tests/__init__.py
index f77d5060c01..0a0e47b0b01 100644
--- a/apiserver/plane/tests/__init__.py
+++ b/apiserver/plane/tests/__init__.py
@@ -1 +1 @@
-from .api import *
\ No newline at end of file
+from .api import *
diff --git a/apiserver/plane/urls.py b/apiserver/plane/urls.py
index 2b83ef8cf25..90643749c79 100644
--- a/apiserver/plane/urls.py
+++ b/apiserver/plane/urls.py
@@ -2,16 +2,13 @@
 
 """
 
-# from django.contrib import admin
 from django.urls import path, include, re_path
 from django.views.generic import TemplateView
 
 from django.conf import settings
 
-# from django.conf.urls.static import static
 
 urlpatterns = [
-    # path("admin/", admin.site.urls),
     path("", TemplateView.as_view(template_name="index.html")),
     path("api/", include("plane.api.urls")),
     path("", include("plane.web.urls")),
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 033452e0dcd..be52bcce445 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -12,34 +12,47 @@
 from plane.db.models import Issue
 
 
-def build_graph_plot(queryset, x_axis, y_axis, segment=None):
-
-    temp_axis = x_axis
-
+def annotate_with_monthly_dimension(queryset, field_name, attribute):
+    # Get the year and the months
+    year = ExtractYear(field_name)
+    month = ExtractMonth(field_name)
+    # Concat the year and month
+    dimension = Concat(year, Value("-"), month, output_field=CharField())
+    # Annotate the dimension
+    return queryset.annotate(**{attribute: dimension})
+
+def extract_axis(queryset, x_axis):
+    # Format the dimension when the axis is in date
     if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
-        year = ExtractYear(x_axis)
-        month = ExtractMonth(x_axis)
-        dimension = Concat(year, Value("-"), month, output_field=CharField())
-        queryset = queryset.annotate(dimension=dimension)
-        x_axis = "dimension"
+        queryset = annotate_with_monthly_dimension(queryset, x_axis, "dimension")
+        return queryset, "dimension"
     else:
-        queryset = queryset.annotate(dimension=F(x_axis))
-        x_axis = "dimension"
+        return queryset.annotate(dimension=F(x_axis)), "dimension"
 
-    if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
-        queryset = queryset.exclude(x_axis__is_null=True)
+def sort_data(data, temp_axis):
+    # When the axis is in priority order by
+    if temp_axis == "priority":
+        order = ["low", "medium", "high", "urgent", "none"]
+        return {key: data[key] for key in order if key in data}
+    else:
+        return dict(sorted(data.items(), key=lambda x: (x[0] == "none", x[0])))
 
+def build_graph_plot(queryset, x_axis, y_axis, segment=None):
+    # temp x_axis
+    temp_axis = x_axis
+    # Extract the x_axis and queryset
+    queryset, x_axis = extract_axis(queryset, x_axis)
+    if x_axis == "dimension":
+        queryset = queryset.exclude(dimension__isnull=True)
+
+    # 
     if segment in ["created_at", "start_date", "target_date", "completed_at"]:
-        year = ExtractYear(segment)
-        month = ExtractMonth(segment)
-        dimension = Concat(year, Value("-"), month, output_field=CharField())
-        queryset = queryset.annotate(segmented=dimension)
+        queryset = annotate_with_monthly_dimension(queryset, segment, "segmented")
         segment = "segmented"
 
     queryset = queryset.values(x_axis)
 
-    # Group queryset by x_axis field
-
+    # Issue count
     if y_axis == "issue_count":
         queryset = queryset.annotate(
             is_null=Case(
@@ -49,43 +62,25 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
             ),
             dimension_ex=Coalesce("dimension", Value("null")),
         ).values("dimension")
-        if segment:
-            queryset = queryset.annotate(segment=F(segment)).values(
-                "dimension", "segment"
-            )
-        else:
-            queryset = queryset.values("dimension")
-
+        queryset = queryset.annotate(segment=F(segment)) if segment else queryset
+        queryset = queryset.values("dimension", "segment") if segment else queryset.values("dimension")
         queryset = queryset.annotate(count=Count("*")).order_by("dimension")
 
-    if y_axis == "estimate":
+    # Estimate
+    else:
         queryset = queryset.annotate(estimate=Sum("estimate_point")).order_by(x_axis)
-        if segment:
-            queryset = queryset.annotate(segment=F(segment)).values(
-                "dimension", "segment", "estimate"
-            )
-        else:
-            queryset = queryset.values("dimension", "estimate")
+        queryset = queryset.annotate(segment=F(segment)) if segment else queryset
+        queryset = queryset.values("dimension", "segment", "estimate") if segment else queryset.values("dimension", "estimate")
 
     result_values = list(queryset)
-    grouped_data = {}
-    for key, items in groupby(result_values, key=lambda x: x[str("dimension")]):
-        grouped_data[str(key)] = list(items)
-
-    sorted_data = grouped_data
-    if temp_axis == "priority":
-        order = ["low", "medium", "high", "urgent", "None"]
-        sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
-    else:
-        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "None", x[0])))
-    return sorted_data
+    grouped_data = {str(key): list(items) for key, items in groupby(result_values, key=lambda x: x[str("dimension")])}
 
+    return sort_data(grouped_data, temp_axis)
 
 def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
     # Total Issues in Cycle or Module
     total_issues = queryset.total_issues
 
-
     if cycle_id:
         # Get all dates between the two dates
         date_range = [
@@ -96,7 +91,7 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
         chart_data = {str(date): 0 for date in date_range}
 
         completed_issues_distribution = (
-            Issue.objects.filter(
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
                 project_id=project_id,
                 issue_cycle__cycle_id=cycle_id,
@@ -107,7 +102,7 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
             .values("date", "total_completed")
             .order_by("date")
         )
-    
+
     if module_id:
         # Get all dates between the two dates
         date_range = [
@@ -118,7 +113,7 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
         chart_data = {str(date): 0 for date in date_range}
 
         completed_issues_distribution = (
-            Issue.objects.filter(
+            Issue.issue_objects.filter(
                 workspace__slug=slug,
                 project_id=project_id,
                 issue_module__module_id=module_id,
@@ -130,18 +125,15 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
             .order_by("date")
         )
 
-
     for date in date_range:
         cumulative_pending_issues = total_issues
         total_completed = 0
         total_completed = sum(
-            [
-                item["total_completed"]
-                for item in completed_issues_distribution
-                if item["date"] is not None and item["date"] <= date
-            ]
+            item["total_completed"]
+            for item in completed_issues_distribution
+            if item["date"] is not None and item["date"] <= date
         )
         cumulative_pending_issues -= total_completed
         chart_data[str(date)] = cumulative_pending_issues
 
-    return chart_data
\ No newline at end of file
+    return chart_data
diff --git a/apiserver/plane/utils/grouper.py b/apiserver/plane/utils/grouper.py
index 535bf6ebab4..853874b3178 100644
--- a/apiserver/plane/utils/grouper.py
+++ b/apiserver/plane/utils/grouper.py
@@ -15,7 +15,7 @@ def resolve_keys(group_keys, value):
     return value
 
 
-def group_results(results_data, group_by):
+def group_results(results_data, group_by, sub_group_by=False):
     """group results data into certain group_by
 
     Args:
@@ -25,38 +25,140 @@ def group_results(results_data, group_by):
     Returns:
         obj: grouped results
     """
-    response_dict = dict()
-
-    if group_by == "priority":
-        response_dict = {
-            "urgent": [],
-            "high": [],
-            "medium": [],
-            "low": [],
-            "None": [],
-        }
-
-    for value in results_data:
-        group_attribute = resolve_keys(group_by, value)
-        if isinstance(group_attribute, list):
-            if len(group_attribute):
-                for attrib in group_attribute:
-                    if str(attrib) in response_dict:
-                        response_dict[str(attrib)].append(value)
+    if sub_group_by:
+        main_responsive_dict = dict()
+
+        if sub_group_by == "priority":
+            main_responsive_dict = {
+                "urgent": {},
+                "high": {},
+                "medium": {},
+                "low": {},
+                "none": {},
+            }
+
+        for value in results_data:
+            main_group_attribute = resolve_keys(sub_group_by, value)
+            group_attribute = resolve_keys(group_by, value)
+            if isinstance(main_group_attribute, list) and not isinstance(group_attribute, list):
+                if len(main_group_attribute):
+                    for attrib in main_group_attribute:
+                        if str(attrib) not in main_responsive_dict:
+                            main_responsive_dict[str(attrib)] = {}
+                        if str(group_attribute) in main_responsive_dict[str(attrib)]:
+                            main_responsive_dict[str(attrib)][str(group_attribute)].append(value)
+                        else:
+                            main_responsive_dict[str(attrib)][str(group_attribute)] = []
+                            main_responsive_dict[str(attrib)][str(group_attribute)].append(value)
+                else:
+                    if str(None) not in main_responsive_dict:
+                        main_responsive_dict[str(None)] = {}
+
+                    if str(group_attribute) in main_responsive_dict[str(None)]:
+                        main_responsive_dict[str(None)][str(group_attribute)].append(value)
+                    else:
+                        main_responsive_dict[str(None)][str(group_attribute)] = []
+                        main_responsive_dict[str(None)][str(group_attribute)].append(value)
+
+            elif isinstance(group_attribute, list) and not isinstance(main_group_attribute, list):
+                if str(main_group_attribute) not in main_responsive_dict:
+                    main_responsive_dict[str(main_group_attribute)] = {}
+                if len(group_attribute):
+                    for attrib in group_attribute:
+                        if str(attrib) in main_responsive_dict[str(main_group_attribute)]:
+                            main_responsive_dict[str(main_group_attribute)][str(attrib)].append(value)
+                        else:
+                            main_responsive_dict[str(main_group_attribute)][str(attrib)] = []
+                            main_responsive_dict[str(main_group_attribute)][str(attrib)].append(value)
+                else:
+                    if str(None) in main_responsive_dict[str(main_group_attribute)]:
+                        main_responsive_dict[str(main_group_attribute)][str(None)].append(value)
+                    else:
+                        main_responsive_dict[str(main_group_attribute)][str(None)] = []
+                        main_responsive_dict[str(main_group_attribute)][str(None)].append(value)
+
+            elif isinstance(group_attribute, list) and isinstance(main_group_attribute, list):
+                if len(main_group_attribute):
+                    for main_attrib in main_group_attribute:
+                        if str(main_attrib) not in main_responsive_dict:
+                            main_responsive_dict[str(main_attrib)] = {}
+                        if len(group_attribute):
+                            for attrib in group_attribute:
+                                if str(attrib) in main_responsive_dict[str(main_attrib)]:
+                                    main_responsive_dict[str(main_attrib)][str(attrib)].append(value)
+                                else:
+                                    main_responsive_dict[str(main_attrib)][str(attrib)] = []
+                                    main_responsive_dict[str(main_attrib)][str(attrib)].append(value)
+                        else:
+                            if str(None) in main_responsive_dict[str(main_attrib)]:
+                                main_responsive_dict[str(main_attrib)][str(None)].append(value)
+                            else:
+                                main_responsive_dict[str(main_attrib)][str(None)] = []
+                                main_responsive_dict[str(main_attrib)][str(None)].append(value)
+                else:
+                    if str(None) not in main_responsive_dict:
+                        main_responsive_dict[str(None)] = {}
+                    if len(group_attribute):
+                        for attrib in group_attribute:
+                            if str(attrib) in main_responsive_dict[str(None)]:
+                                main_responsive_dict[str(None)][str(attrib)].append(value)
+                            else:
+                                main_responsive_dict[str(None)][str(attrib)] = []
+                                main_responsive_dict[str(None)][str(attrib)].append(value)
                     else:
-                        response_dict[str(attrib)] = []
-                        response_dict[str(attrib)].append(value)
+                        if str(None) in main_responsive_dict[str(None)]:
+                            main_responsive_dict[str(None)][str(None)].append(value)
+                        else:
+                            main_responsive_dict[str(None)][str(None)] = []
+                            main_responsive_dict[str(None)][str(None)].append(value)
             else:
-                if str(None) in response_dict:
-                    response_dict[str(None)].append(value)
+                main_group_attribute = resolve_keys(sub_group_by, value)
+                group_attribute = resolve_keys(group_by, value)
+
+                if str(main_group_attribute) not in main_responsive_dict:
+                    main_responsive_dict[str(main_group_attribute)] = {}
+
+                if str(group_attribute) in main_responsive_dict[str(main_group_attribute)]:
+                    main_responsive_dict[str(main_group_attribute)][str(group_attribute)].append(value)
                 else:
-                    response_dict[str(None)] = []
-                    response_dict[str(None)].append(value)
-        else:
-            if str(group_attribute) in response_dict:
-                response_dict[str(group_attribute)].append(value)
+                    main_responsive_dict[str(main_group_attribute)][str(group_attribute)] = []
+                    main_responsive_dict[str(main_group_attribute)][str(group_attribute)].append(value)   
+
+        return main_responsive_dict            
+
+    else:
+        response_dict = {}
+
+        if group_by == "priority":
+            response_dict = {
+                "urgent": [],
+                "high": [],
+                "medium": [],
+                "low": [],
+                "none": [],
+            }
+
+        for value in results_data:
+            group_attribute = resolve_keys(group_by, value)
+            if isinstance(group_attribute, list):
+                if len(group_attribute):
+                    for attrib in group_attribute:
+                        if str(attrib) in response_dict:
+                            response_dict[str(attrib)].append(value)
+                        else:
+                            response_dict[str(attrib)] = []
+                            response_dict[str(attrib)].append(value)
+                else:
+                    if str(None) in response_dict:
+                        response_dict[str(None)].append(value)
+                    else:
+                        response_dict[str(None)] = []
+                        response_dict[str(None)].append(value)
             else:
-                response_dict[str(group_attribute)] = []
-                response_dict[str(group_attribute)].append(value)
+                if str(group_attribute) in response_dict:
+                    response_dict[str(group_attribute)].append(value)
+                else:
+                    response_dict[str(group_attribute)] = []
+                    response_dict[str(group_attribute)].append(value)
 
-    return response_dict
+        return response_dict
diff --git a/apiserver/plane/utils/imports.py b/apiserver/plane/utils/imports.py
index 1a0d2924ec4..5f9f1c98c56 100644
--- a/apiserver/plane/utils/imports.py
+++ b/apiserver/plane/utils/imports.py
@@ -17,4 +17,4 @@ def import_submodules(context, root_module, path):
         for k, v in six.iteritems(vars(module)):
             if not k.startswith('_'):
                 context[k] = v
-        context[module_name] = module
\ No newline at end of file
+        context[module_name] = module
diff --git a/apiserver/plane/utils/integrations/slack.py b/apiserver/plane/utils/integrations/slack.py
new file mode 100644
index 00000000000..70f26e16091
--- /dev/null
+++ b/apiserver/plane/utils/integrations/slack.py
@@ -0,0 +1,20 @@
+import os
+import requests
+
+def slack_oauth(code):
+    SLACK_OAUTH_URL = os.environ.get("SLACK_OAUTH_URL", False)
+    SLACK_CLIENT_ID = os.environ.get("SLACK_CLIENT_ID", False)
+    SLACK_CLIENT_SECRET = os.environ.get("SLACK_CLIENT_SECRET", False)
+
+    # Oauth Slack
+    if SLACK_OAUTH_URL and SLACK_CLIENT_ID and SLACK_CLIENT_SECRET:
+        response = requests.get(
+            SLACK_OAUTH_URL,
+            params={
+                "code": code,
+                "client_id": SLACK_CLIENT_ID,
+                "client_secret": SLACK_CLIENT_SECRET,
+            },
+        )
+        return response.json()
+    return {}
diff --git a/apiserver/plane/utils/ip_address.py b/apiserver/plane/utils/ip_address.py
index 29a2fa520c7..06ca4353d64 100644
--- a/apiserver/plane/utils/ip_address.py
+++ b/apiserver/plane/utils/ip_address.py
@@ -4,4 +4,4 @@ def get_client_ip(request):
         ip = x_forwarded_for.split(',')[0]
     else:
         ip = request.META.get('REMOTE_ADDR')
-    return ip
\ No newline at end of file
+    return ip
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index 34e1e820384..75437fbee45 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -1,106 +1,175 @@
-from django.utils.timezone import make_aware
-from django.utils.dateparse import parse_datetime
+import re
+import uuid
+from datetime import timedelta
+from django.utils import timezone
+
+
+# The date from pattern
+pattern = re.compile(r"\d+_(weeks|months)$")
+
+# check the valid uuids
+def filter_valid_uuids(uuid_list):
+    valid_uuids = []
+    for uuid_str in uuid_list:
+        try:
+            uuid_obj = uuid.UUID(uuid_str)
+            valid_uuids.append(uuid_obj)
+        except ValueError:
+            # ignore the invalid uuids
+            pass
+    return valid_uuids
+
+
+# Get the 2_weeks, 3_months
+def string_date_filter(filter, duration, subsequent, term, date_filter, offset):
+    now = timezone.now().date()
+    if term == "months":
+        if subsequent == "after":
+            if offset == "fromnow":
+                filter[f"{date_filter}__gte"] = now + timedelta(days=duration * 30)
+            else:
+                filter[f"{date_filter}__gte"] = now - timedelta(days=duration * 30)
+        else:
+            if offset == "fromnow":
+                filter[f"{date_filter}__lte"] = now + timedelta(days=duration * 30)
+            else:
+                filter[f"{date_filter}__lte"] = now - timedelta(days=duration * 30)
+    if term == "weeks":
+        if subsequent == "after":
+            if offset == "fromnow":
+                filter[f"{date_filter}__gte"] = now + timedelta(weeks=duration)
+            else:
+                filter[f"{date_filter}__gte"] = now - timedelta(weeks=duration)
+        else:
+            if offset == "fromnow":
+                filter[f"{date_filter}__lte"] = now + timedelta(days=duration)
+            else:
+                filter[f"{date_filter}__lte"] = now - timedelta(days=duration)
+
+
+def date_filter(filter, date_term, queries):
+    """
+        Handle all date filters
+    """
+    for query in queries:
+        date_query = query.split(";")
+        if len(date_query) >= 2:
+            match = pattern.match(date_query[0])
+            if match:
+                if len(date_query) == 3:
+                    digit, term = date_query[0].split("_")
+                    string_date_filter(
+                        filter=filter,
+                        duration=int(digit),
+                        subsequent=date_query[1],
+                        term=term,
+                        date_filter="created_at__date",
+                        offset=date_query[2],
+                    )
+            else:
+                if "after" in date_query:
+                    filter[f"{date_term}__gte"] = date_query[0]
+                else:
+                    filter[f"{date_term}__lte"] = date_query[0]
+
 
 def filter_state(params, filter, method):
     if method == "GET":
-        states = params.get("state").split(",")
+        states = [item for item in params.get("state").split(",") if item != 'null']
+        states = filter_valid_uuids(states)
         if len(states) and "" not in states:
             filter["state__in"] = states
     else:
-        if params.get("state", None) and len(params.get("state")):
+        if params.get("state", None) and len(params.get("state")) and params.get("state") != 'null':
             filter["state__in"] = params.get("state")
     return filter
 
 
 def filter_state_group(params, filter, method):
     if method == "GET":
-        state_group = params.get("state_group").split(",")
+        state_group = [item for item in params.get("state_group").split(",") if item != 'null']
         if len(state_group) and "" not in state_group:
             filter["state__group__in"] = state_group
     else:
-        if params.get("state_group", None) and len(params.get("state_group")):
+        if params.get("state_group", None) and len(params.get("state_group")) and params.get("state_group") != 'null':
             filter["state__group__in"] = params.get("state_group")
     return filter
 
 
-
 def filter_estimate_point(params, filter, method):
     if method == "GET":
-        estimate_points = params.get("estimate_point").split(",")
+        estimate_points = [item for item in params.get("estimate_point").split(",") if item != 'null']
         if len(estimate_points) and "" not in estimate_points:
             filter["estimate_point__in"] = estimate_points
     else:
-        if params.get("estimate_point", None) and len(params.get("estimate_point")):
+        if params.get("estimate_point", None) and len(params.get("estimate_point")) and params.get("estimate_point") != 'null':
             filter["estimate_point__in"] = params.get("estimate_point")
     return filter
 
 
 def filter_priority(params, filter, method):
     if method == "GET":
-        priorities = params.get("priority").split(",")
+        priorities = [item for item in params.get("priority").split(",") if item != 'null']
         if len(priorities) and "" not in priorities:
-            if len(priorities) == 1 and "null" in priorities:
-                filter["priority__isnull"] = True
-            elif len(priorities) > 1 and "null" in priorities:
-                filter["priority__isnull"] = True
-                filter["priority__in"] = [p for p in priorities if p != "null"]
-            else:
-                filter["priority__in"] = [p for p in priorities if p != "null"]
-
-    else:
-        if params.get("priority", None) and len(params.get("priority")):
-            priorities = params.get("priority")
-            if len(priorities) == 1 and "null" in priorities:
-                filter["priority__isnull"] = True
-            elif len(priorities) > 1 and "null" in priorities:
-                filter["priority__isnull"] = True
-                filter["priority__in"] = [p for p in priorities if p != "null"]
-            else:
-                filter["priority__in"] = [p for p in priorities if p != "null"]
-
+            filter["priority__in"] = priorities
     return filter
 
 
 def filter_parent(params, filter, method):
     if method == "GET":
-        parents = params.get("parent").split(",")
+        parents = [item for item in params.get("parent").split(",") if item != 'null']
+        parents = filter_valid_uuids(parents)
         if len(parents) and "" not in parents:
             filter["parent__in"] = parents
     else:
-        if params.get("parent", None) and len(params.get("parent")):
+        if params.get("parent", None) and len(params.get("parent")) and params.get("parent") != 'null':
             filter["parent__in"] = params.get("parent")
     return filter
 
 
 def filter_labels(params, filter, method):
     if method == "GET":
-        labels = params.get("labels").split(",")
+        labels = [item for item in params.get("labels").split(",") if item != 'null']
+        labels = filter_valid_uuids(labels)
         if len(labels) and "" not in labels:
             filter["labels__in"] = labels
     else:
-        if params.get("labels", None) and len(params.get("labels")):
+        if params.get("labels", None) and len(params.get("labels")) and params.get("labels") != 'null':
             filter["labels__in"] = params.get("labels")
     return filter
 
 
 def filter_assignees(params, filter, method):
     if method == "GET":
-        assignees = params.get("assignees").split(",")
+        assignees = [item for item in params.get("assignees").split(",") if item != 'null']
+        assignees = filter_valid_uuids(assignees)
         if len(assignees) and "" not in assignees:
             filter["assignees__in"] = assignees
     else:
-        if params.get("assignees", None) and len(params.get("assignees")):
+        if params.get("assignees", None) and len(params.get("assignees")) and params.get("assignees") != 'null':
             filter["assignees__in"] = params.get("assignees")
     return filter
 
+def filter_mentions(params, filter, method):
+    if method == "GET":
+        mentions = [item for item in params.get("mentions").split(",") if item != 'null']
+        mentions = filter_valid_uuids(mentions)
+        if len(mentions) and "" not in mentions:
+            filter["issue_mention__mention__id__in"] = mentions
+    else:
+        if params.get("mentions", None) and len(params.get("mentions")) and params.get("mentions") != 'null':
+            filter["issue_mention__mention__id__in"] = params.get("mentions")
+    return filter
+
 
 def filter_created_by(params, filter, method):
     if method == "GET":
-        created_bys = params.get("created_by").split(",")
+        created_bys = [item for item in params.get("created_by").split(",") if item != 'null']
+        created_bys = filter_valid_uuids(created_bys)
         if len(created_bys) and "" not in created_bys:
             filter["created_by__in"] = created_bys
     else:
-        if params.get("created_by", None) and len(params.get("created_by")):
+        if params.get("created_by", None) and len(params.get("created_by")) and params.get("created_by") != 'null':
             filter["created_by__in"] = params.get("created_by")
     return filter
 
@@ -115,20 +184,10 @@ def filter_created_at(params, filter, method):
     if method == "GET":
         created_ats = params.get("created_at").split(",")
         if len(created_ats) and "" not in created_ats:
-            for query in created_ats:
-                created_at_query = query.split(";")
-                if len(created_at_query) == 2 and "after" in created_at_query:
-                    filter["created_at__date__gte"] = created_at_query[0]
-                else:
-                    filter["created_at__date__lte"] = created_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=created_ats)
     else:
         if params.get("created_at", None) and len(params.get("created_at")):
-            for query in params.get("created_at"):
-                created_at_query = query.split(";")
-                if len(created_at_query) == 2 and "after" in created_at_query:
-                    filter["created_at__date__gte"] = created_at_query[0]
-                else:
-                    filter["created_at__date__lte"] = created_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=params.get("created_at", []))
     return filter
 
 
@@ -136,20 +195,10 @@ def filter_updated_at(params, filter, method):
     if method == "GET":
         updated_ats = params.get("updated_at").split(",")
         if len(updated_ats) and "" not in updated_ats:
-            for query in updated_ats:
-                updated_at_query = query.split(";")
-                if len(updated_at_query) == 2 and "after" in updated_at_query:
-                    filter["updated_at__date__gte"] = updated_at_query[0]
-                else:
-                    filter["updated_at__date__lte"] = updated_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=updated_ats)
     else:
         if params.get("updated_at", None) and len(params.get("updated_at")):
-            for query in params.get("updated_at"):
-                updated_at_query = query.split(";")
-                if len(updated_at_query) == 2 and "after" in updated_at_query:
-                    filter["updated_at__date__gte"] = updated_at_query[0]
-                else:
-                    filter["updated_at__date__lte"] = updated_at_query[0]
+            date_filter(filter=filter, date_term="created_at__date", queries=params.get("updated_at", []))
     return filter
 
 
@@ -157,20 +206,10 @@ def filter_start_date(params, filter, method):
     if method == "GET":
         start_dates = params.get("start_date").split(",")
         if len(start_dates) and "" not in start_dates:
-            for query in start_dates:
-                start_date_query = query.split(";")
-                if len(start_date_query) == 2 and "after" in start_date_query:
-                    filter["start_date__gte"] = start_date_query[0]
-                else:
-                    filter["start_date__lte"] = start_date_query[0]
+            date_filter(filter=filter, date_term="start_date", queries=start_dates)
     else:
         if params.get("start_date", None) and len(params.get("start_date")):
-            for query in params.get("start_date"):
-                start_date_query = query.split(";")
-                if len(start_date_query) == 2 and "after" in start_date_query:
-                    filter["start_date__gte"] = start_date_query[0]
-                else:
-                    filter["start_date__lte"] = start_date_query[0]
+            filter["start_date"] = params.get("start_date")
     return filter
 
 
@@ -178,21 +217,10 @@ def filter_target_date(params, filter, method):
     if method == "GET":
         target_dates = params.get("target_date").split(",")
         if len(target_dates) and "" not in target_dates:
-            for query in target_dates:
-                target_date_query = query.split(";")
-                if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gt"] = target_date_query[0]
-                else:
-                    filter["target_date__lt"] = target_date_query[0]
+            date_filter(filter=filter, date_term="target_date", queries=target_dates)
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
-            for query in params.get("target_date"):
-                target_date_query = query.split(";")
-                if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gt"] = target_date_query[0]
-                else:
-                    filter["target_date__lt"] = target_date_query[0]
-
+            filter["target_date"] = params.get("target_date")
     return filter
 
 
@@ -200,20 +228,10 @@ def filter_completed_at(params, filter, method):
     if method == "GET":
         completed_ats = params.get("completed_at").split(",")
         if len(completed_ats) and "" not in completed_ats:
-            for query in completed_ats:
-                completed_at_query = query.split(";")
-                if len(completed_at_query) == 2 and "after" in completed_at_query:
-                    filter["completed_at__date__gte"] = completed_at_query[0]
-                else:
-                    filter["completed_at__lte"] = completed_at_query[0]
+            date_filter(filter=filter, date_term="completed_at__date", queries=completed_ats)
     else:
         if params.get("completed_at", None) and len(params.get("completed_at")):
-            for query in params.get("completed_at"):
-                completed_at_query = query.split(";")
-                if len(completed_at_query) == 2 and "after" in completed_at_query:
-                    filter["completed_at__date__gte"] = completed_at_query[0]
-                else:
-                    filter["completed_at__lte"] = completed_at_query[0]
+            date_filter(filter=filter, date_term="completed_at__date", queries=params.get("completed_at", []))
     return filter
 
 
@@ -229,47 +247,49 @@ def filter_issue_state_type(params, filter, method):
     return filter
 
 
-
 def filter_project(params, filter, method):
     if method == "GET":
-        projects = params.get("project").split(",")
+        projects = [item for item in params.get("project").split(",") if item != 'null']
+        projects = filter_valid_uuids(projects)
         if len(projects) and "" not in projects:
             filter["project__in"] = projects
     else:
-        if params.get("project", None) and len(params.get("project")):
+        if params.get("project", None) and len(params.get("project")) and params.get("project") != 'null':
             filter["project__in"] = params.get("project")
     return filter
 
 
 def filter_cycle(params, filter, method):
     if method == "GET":
-        cycles = params.get("cycle").split(",")
+        cycles = [item for item in params.get("cycle").split(",") if item != 'null']
+        cycles = filter_valid_uuids(cycles)
         if len(cycles) and "" not in cycles:
             filter["issue_cycle__cycle_id__in"] = cycles
     else:
-        if params.get("cycle", None) and len(params.get("cycle")):
+        if params.get("cycle", None) and len(params.get("cycle")) and params.get("cycle") != 'null':
             filter["issue_cycle__cycle_id__in"] = params.get("cycle")
     return filter
 
 
 def filter_module(params, filter, method):
     if method == "GET":
-        modules = params.get("module").split(",")
+        modules = [item for item in params.get("module").split(",") if item != 'null']
+        modules = filter_valid_uuids(modules)
         if len(modules) and "" not in modules:
             filter["issue_module__module_id__in"] = modules
     else:
-        if params.get("module", None) and len(params.get("module")):
+        if params.get("module", None) and len(params.get("module")) and params.get("module") != 'null':
             filter["issue_module__module_id__in"] = params.get("module")
     return filter
 
 
 def filter_inbox_status(params, filter, method):
     if method == "GET":
-        status = params.get("inbox_status").split(",")
+        status = [item for item in params.get("inbox_status").split(",") if item != 'null']
         if len(status) and "" not in status:
             filter["issue_inbox__status__in"] = status
     else:
-        if params.get("inbox_status", None) and len(params.get("inbox_status")):
+        if params.get("inbox_status", None) and len(params.get("inbox_status")) and params.get("inbox_status") != 'null':
             filter["issue_inbox__status__in"] = params.get("inbox_status")
     return filter
 
@@ -288,11 +308,12 @@ def filter_sub_issue_toggle(params, filter, method):
 
 def filter_subscribed_issues(params, filter, method):
     if method == "GET":
-        subscribers = params.get("subscriber").split(",")
+        subscribers = [item for item in params.get("subscriber").split(",") if item != 'null']
+        subscribers = filter_valid_uuids(subscribers)
         if len(subscribers) and "" not in subscribers:
             filter["issue_subscribers__subscriber_id__in"] = subscribers
     else:
-        if params.get("subscriber", None) and len(params.get("subscriber")):
+        if params.get("subscriber", None) and len(params.get("subscriber")) and params.get("subscriber") != 'null':
             filter["issue_subscribers__subscriber_id__in"] = params.get("subscriber")
     return filter
 
@@ -306,7 +327,7 @@ def filter_start_target_date_issues(params, filter, method):
 
 
 def issue_filters(query_params, method):
-    filter = dict()
+    filter = {}
 
     ISSUE_FILTER = {
         "state": filter_state,
@@ -316,6 +337,7 @@ def issue_filters(query_params, method):
         "parent": filter_parent,
         "labels": filter_labels,
         "assignees": filter_assignees,
+        "mentions": filter_mentions,
         "created_by": filter_created_by,
         "name": filter_name,
         "created_at": filter_created_at,
@@ -329,7 +351,7 @@ def issue_filters(query_params, method):
         "module": filter_module,
         "inbox_status": filter_inbox_status,
         "sub_issue": filter_sub_issue_toggle,
-        "subscriber":  filter_subscribed_issues,
+        "subscriber": filter_subscribed_issues,
         "start_target_date": filter_start_target_date_issues,
     }
 
diff --git a/apiserver/plane/utils/markdown.py b/apiserver/plane/utils/markdown.py
index 15d5b4dce62..188c54fec3b 100644
--- a/apiserver/plane/utils/markdown.py
+++ b/apiserver/plane/utils/markdown.py
@@ -1,3 +1,3 @@
 import mistune
 
-markdown = mistune.Markdown()
\ No newline at end of file
+markdown = mistune.Markdown()
diff --git a/apiserver/plane/utils/paginator.py b/apiserver/plane/utils/paginator.py
index b3c50abd199..544ed8fef95 100644
--- a/apiserver/plane/utils/paginator.py
+++ b/apiserver/plane/utils/paginator.py
@@ -21,12 +21,7 @@ def __eq__(self, other):
         )
 
     def __repr__(self):
-        return "<{}: value={} offset={} is_prev={}>".format(
-            type(self).__name__,
-            self.value,
-            self.offset,
-            int(self.is_prev),
-        )
+        return f"{type(self).__name__,}: value={self.value} offset={self.offset}, is_prev={int(self.is_prev)}"
 
     def __bool__(self):
         return bool(self.has_results)
@@ -176,10 +171,6 @@ def paginate(
         **paginator_kwargs,
     ):
         """Paginate the request"""
-        assert (paginator and not paginator_kwargs) or (
-            paginator_cls and paginator_kwargs
-        )
-
         per_page = self.get_per_page(request, default_per_page, max_per_page)
 
         # Convert the cursor value to integer and float from string
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index ca9d881ef49..249b29d48c2 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,36 +1,37 @@
 # base requirements
 
-Django==4.2.3
+Django==4.2.5
 django-braces==1.15.0
 django-taggit==4.0.0
-psycopg==3.1.9
+psycopg==3.1.10
 django-oauth-toolkit==2.3.0
 mistune==3.0.1
 djangorestframework==3.14.0
 redis==4.6.0
 django-nested-admin==4.0.2
-django-cors-headers==4.1.0
+django-cors-headers==4.2.0
 whitenoise==6.5.0
-django-allauth==0.54.0
+django-allauth==0.55.2
 faker==18.11.2
 django-filter==23.2
 jsonmodels==2.6.0
-djangorestframework-simplejwt==5.2.2
-sentry-sdk==1.27.0
+djangorestframework-simplejwt==5.3.0
+sentry-sdk==1.30.0
 django-s3-storage==0.14.0
 django-crum==0.7.9
 django-guardian==2.4.0
 dj_rest_auth==2.2.5
-google-auth==2.21.0
-google-api-python-client==2.92.0
+google-auth==2.22.0
+google-api-python-client==2.97.0
 django-redis==5.3.0
-uvicorn==0.22.0
+uvicorn==0.23.2
 channels==4.0.0
-openai==0.27.8
+openai==0.28.0
 slack-sdk==3.21.3
-celery==5.3.1
+celery==5.3.4
 django_celery_beat==2.5.0
-psycopg-binary==3.1.9
-psycopg-c==3.1.9
+psycopg-binary==3.1.10
+psycopg-c==3.1.10
 scout-apm==2.26.1
-openpyxl==3.1.2
\ No newline at end of file
+openpyxl==3.1.2
+beautifulsoup4==4.12.2
\ No newline at end of file
diff --git a/apiserver/requirements/production.txt b/apiserver/requirements/production.txt
index 4da619d491b..5e3483a96ec 100644
--- a/apiserver/requirements/production.txt
+++ b/apiserver/requirements/production.txt
@@ -1,11 +1,11 @@
 -r base.txt
 
-dj-database-url==2.0.0
-gunicorn==20.1.0
+dj-database-url==2.1.0
+gunicorn==21.2.0
 whitenoise==6.5.0
-django-storages==1.13.2
-boto3==1.27.0
-django-anymail==10.0
+django-storages==1.14
+boto3==1.28.40
+django-anymail==10.1
 django-debug-toolbar==4.1.0
 gevent==23.7.0
 psycogreen==1.0.2
\ No newline at end of file
diff --git a/apiserver/runtime.txt b/apiserver/runtime.txt
index d5831c54fb3..dfe813b8606 100644
--- a/apiserver/runtime.txt
+++ b/apiserver/runtime.txt
@@ -1 +1 @@
-python-3.11.5
\ No newline at end of file
+python-3.11.6
\ No newline at end of file
diff --git a/apps/app/.eslintrc.js b/apps/app/.eslintrc.js
deleted file mode 100644
index 38e6a5f4c82..00000000000
--- a/apps/app/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-  rules: {
-    "@next/next/no-img-element": "off",
-  },
-};
diff --git a/apps/app/.prettierrc b/apps/app/.prettierrc
deleted file mode 100644
index d5cb26e5447..00000000000
--- a/apps/app/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/apps/app/Dockerfile.dev b/apps/app/Dockerfile.dev
deleted file mode 100644
index 789d01af0f0..00000000000
--- a/apps/app/Dockerfile.dev
+++ /dev/null
@@ -1,22 +0,0 @@
-FROM node:18-alpine
-RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-
-
-COPY . .
-RUN yarn config set registry https://registry.npm.taobao.org/
-RUN yarn config set sentrycli_cdnurl https://npmmirror.com/mirrors/sentry-cli/
-#RUN yarn --update-checksums
-RUN yarn global add turbo
-# RUN yarn add sentry-cli  --registry=https://cdn.npm.taobao.org/dist/sentry-cli
-#RUN npm set ENTRYCLI_CDNURL=https://cdn.npm.taobao.org/dist/sentry-cli
-#RUN npm set sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli
-
-#RUN yarn install --network-timeout 500000 --silent 2>&1 >/dev/null | grep "error"
-
-RUN yarn install --network-timeout 500000 --severity error
-
-EXPOSE 3000
-CMD ["yarn","dev"]
diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
deleted file mode 100644
index 3a94263f781..00000000000
--- a/apps/app/components/account/email-code-form.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-// ui
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-// services
-import authenticationService from "services/authentication.service";
-import useToast from "hooks/use-toast";
-import useTimer from "hooks/use-timer";
-// icons
-
-// types
-type EmailCodeFormValues = {
-  email: string;
-  key?: string;
-  token?: string;
-};
-
-export const EmailCodeForm = ({ handleSignIn }: any) => {
-  const [codeSent, setCodeSent] = useState(false);
-  const [codeResent, setCodeResent] = useState(false);
-  const [isCodeResending, setIsCodeResending] = useState(false);
-  const [errorResendingCode, setErrorResendingCode] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { setToastAlert } = useToast();
-  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
-
-  const {
-    register,
-    handleSubmit,
-    setError,
-    setValue,
-    getValues,
-    watch,
-    formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailCodeFormValues>({
-    defaultValues: {
-      email: "",
-      key: "",
-      token: "",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  const isResendDisabled =
-    resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
-
-  const onSubmit = async ({ email }: EmailCodeFormValues) => {
-    setErrorResendingCode(false);
-    await authenticationService
-      .emailCode({ email })
-      .then((res) => {
-        setValue("key", res.key);
-        setCodeSent(true);
-      })
-      .catch((err) => {
-        setErrorResendingCode(true);
-        setToastAlert({
-          title: "Oops!",
-          type: "error",
-          message: err?.error,
-        });
-      });
-  };
-
-  const handleSignin = async (formData: EmailCodeFormValues) => {
-    setIsLoading(true);
-    await authenticationService
-      .magicSignIn(formData)
-      .then((response) => {
-        handleSignIn(response);
-      })
-      .catch((error) => {
-        setIsLoading(false);
-        setToastAlert({
-          title: "Oops!",
-          type: "error",
-          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
-        });
-        setError("token" as keyof EmailCodeFormValues, {
-          type: "manual",
-          message: error?.error,
-        });
-      });
-  };
-
-  const emailOld = getValues("email");
-
-  useEffect(() => {
-    setErrorResendingCode(false);
-  }, [emailOld]);
-
-  useEffect(() => {
-    const submitForm = (e: KeyboardEvent) => {
-      if (!codeSent && e.key === "Enter") {
-        e.preventDefault();
-        handleSubmit(onSubmit)().then(() => {
-          setResendCodeTimer(30);
-        });
-      }
-    };
-
-    if (!codeSent) {
-      window.addEventListener("keydown", submitForm);
-    }
-
-    return () => {
-      window.removeEventListener("keydown", submitForm);
-    };
-  }, [handleSubmit, codeSent]);
-
-  return (
-    <>
-      {(codeSent || codeResent) && (
-        <p className="text-center mt-4">
-          We have sent the sign in code.
-          <br />
-          Please check your inbox at <span className="font-medium">{watch("email")}</span>
-        </p>
-      )}
-      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
-        <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
-            name="email"
-            register={register}
-            validations={{
-              required: "电子邮件地址为必填项",
-              validate: (value) =>
-                /^(([^<>()[\]\\.,;:\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(
-                  value
-                ) || "电子邮件地址无效",
-            }}
-            error={errors.email}
-            placeholder="请输入您的电子邮件地址..."
-            className="border-custom-border-300 h-[46px]"
-          />
-        </div>
-
-        {codeSent && (
-          <>
-            <Input
-              id="token"
-              type="token"
-              name="token"
-              register={register}
-              validations={{
-                required: "验证码是必填项",
-              }}
-              error={errors.token}
-              placeholder="输入代码..."
-              className="border-custom-border-300 h-[46px]"
-            />
-            <button
-              type="button"
-              className={`flex w-full justify-end text-xs outline-none ${
-                isResendDisabled
-                  ? "cursor-default text-custom-text-200"
-                  : "cursor-pointer text-custom-primary-100"
-              } `}
-              onClick={() => {
-                setIsCodeResending(true);
-                onSubmit({ email: getValues("email") }).then(() => {
-                  setCodeResent(true);
-                  setIsCodeResending(false);
-                  setResendCodeTimer(30);
-                });
-              }}
-              disabled={isResendDisabled}
-            >
-              {resendCodeTimer > 0 ? (
-                <span className="text-right">在{resendCodeTimer}秒后申请验证码</span>
-              ) : isCodeResending ? (
-                "发送新代码..."
-              ) : errorResendingCode ? (
-                "请稍后再试"
-              ) : (
-                <span className="font-medium">重新发送验证码</span>
-              )}
-            </button>
-          </>
-        )}
-        {codeSent ? (
-          <PrimaryButton
-            type="submit"
-            className="w-full text-center h-[46px]"
-            size="md"
-            onClick={handleSubmit(handleSignin)}
-            disabled={!isValid && isDirty}
-            loading={isLoading}
-          >
-            {isLoading ? "登录中..." : "登录"}
-          </PrimaryButton>
-        ) : (
-          <PrimaryButton
-            className="w-full text-center h-[46px]"
-            size="md"
-            onClick={() => {
-              handleSubmit(onSubmit)().then(() => {
-                setResendCodeTimer(30);
-              });
-            }}
-            disabled={!isValid && isDirty}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? "发送新代码..." : "发送验证码"}
-          </PrimaryButton>
-        )}
-      </form>
-    </>
-  );
-};
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
deleted file mode 100644
index 950ca5aeb3a..00000000000
--- a/apps/app/components/account/email-password-form.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// react hook form
-import { useForm } from "react-hook-form";
-// components
-import { EmailResetPasswordForm } from "components/account";
-// ui
-import { Input, PrimaryButton } from "components/ui";
-// types
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  medium?: string;
-};
-
-type Props = {
-  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
-};
-
-export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
-  const [isResettingPassword, setIsResettingPassword] = useState(false);
-
-  const router = useRouter();
-  const isSignUpPage = router.pathname === "/sign-up";
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailPasswordFormValues>({
-    defaultValues: {
-      email: "",
-      password: "",
-      medium: "email",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  return (
-    <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-        {isResettingPassword
-          ? "重置密码"
-          : isSignUpPage
-          ? "注册MissionPlan"
-          : "登录MissionPlan"}
-      </h1>
-      {isResettingPassword ? (
-        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
-      ) : (
-        <form
-          className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <div className="space-y-1">
-            <Input
-              id="email"
-              type="email"
-              name="email"
-              register={register}
-              validations={{
-                required: "电子邮件地址为必填项",
-                validate: (value) =>
-                  /^(([^<>()[\]\\.,;:\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(
-                    value
-                  ) || "电子邮件地址无效",
-              }}
-              error={errors.email}
-              placeholder="输入您的电子邮件地址..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="space-y-1">
-            <Input
-              id="password"
-              type="password"
-              name="password"
-              register={register}
-              validations={{
-                required: "密码是必填项",
-              }}
-              error={errors.password}
-              placeholder="输入您的密码..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="text-right text-xs">
-            {isSignUpPage ? (
-              <Link href="/">
-                <a className="text-custom-text-200 hover:text-custom-primary-100">
-                  已有账号？去登录
-                </a>
-              </Link>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setIsResettingPassword(true)}
-                className="text-custom-text-200 hover:text-custom-primary-100"
-              >
-                忘记密码?
-              </button>
-            )}
-          </div>
-          <div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              disabled={!isValid && isDirty}
-              loading={isSubmitting}
-            >
-              {isSignUpPage
-                ? isSubmitting
-                  ? "注册中..."
-                  : "注册"
-                : isSubmitting
-                ? "登录中..."
-                : "登录"}
-            </PrimaryButton>
-            {!isSignUpPage && (
-              <Link href="/sign-up">
-                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
-                  还没有账号？去注册
-                </a>
-              </Link>
-            )}
-          </div>
-          <p className="text-custom-text-200 m-1 text-red-400 ">演示账号：captain@plane.so</p>
-          <p className="text-custom-text-200 m-1 text-red-400"> 密码：password123</p>
-        </form>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/account/email-reset-password-form.tsx b/apps/app/components/account/email-reset-password-form.tsx
deleted file mode 100644
index 436760ff846..00000000000
--- a/apps/app/components/account/email-reset-password-form.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-
-// react hook form
-import { useForm } from "react-hook-form";
-// services
-import userService from "services/user.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-// types
-type Props = {
-  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm({
-    defaultValues: {
-      email: "",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  const forgotPassword = async (formData: any) => {
-    const payload = {
-      email: formData.email,
-    };
-
-    await userService
-      .forgotPassword(payload)
-      .then(() =>
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "密码重置链接已发送至您的电子邮件地址。",
-        })
-      )
-      .catch((err) => {
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "请核对输入的电子邮件 ID。",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "出错了。请重试。",
-          });
-      });
-  };
-
-  return (
-    <form
-      className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-      onSubmit={handleSubmit(forgotPassword)}
-    >
-      <div className="space-y-1">
-        <Input
-          id="email"
-          type="email"
-          name="email"
-          register={register}
-          validations={{
-            required: "电子邮件地址为必填项",
-            validate: (value) =>
-              /^(([^<>()[\]\\.,;:\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(
-                value
-              ) || "Email address is not valid",
-          }}
-          error={errors.email}
-          placeholder="请输入注册的电子邮件地址.."
-          className="border-custom-border-300 h-[46px]"
-        />
-      </div>
-      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton
-          className="w-full text-center h-[46px]"
-          onClick={() => setIsResettingPassword(false)}
-        >
-          Go Back
-        </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
-          {isSubmitting ? "发送链接..." : "发送重置链接"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
deleted file mode 100644
index 30eb3d0df5a..00000000000
--- a/apps/app/components/account/github-login-button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useEffect, useState, FC } from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-// next-themes
-import { useTheme } from "next-themes";
-// images
-import githubBlackImage from "/public/logos/github-black.png";
-import githubWhiteImage from "/public/logos/github-white.png";
-
-const { NEXT_PUBLIC_GITHUB_ID } = process.env;
-
-export interface GithubLoginButtonProps {
-  handleSignIn: React.Dispatch<string>;
-}
-
-export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
-  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
-  const [gitCode, setGitCode] = useState<null | string>(null);
-
-  const {
-    query: { code },
-  } = useRouter();
-
-  const { theme } = useTheme();
-
-  useEffect(() => {
-    if (code && !gitCode) {
-      setGitCode(code.toString());
-      handleSignIn(code.toString());
-    }
-  }, [code, gitCode, handleSignIn]);
-
-  useEffect(() => {
-    const origin =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    setLoginCallBackURL(`${origin}/` as any);
-  }, []);
-
-  return (
-    <div className="w-full flex justify-center items-center">
-      <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
-      >
-        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
-          <Image
-            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
-            height={20}
-            width={20}
-            alt="GitHub Logo"
-          />
-          <span>使用 GitHub 登录</span>
-        </button>
-      </Link>
-    </div>
-  );
-};
diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx
deleted file mode 100644
index c814c658c06..00000000000
--- a/apps/app/components/account/google-login.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-
-import Script from "next/script";
-
-export interface IGoogleLoginButton {
-  text?: string;
-  handleSignIn: React.Dispatch<any>;
-  styles?: CSSProperties;
-}
-
-export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
-  const googleSignInButton = useRef<HTMLDivElement>(null);
-  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
-
-  const loadScript = useCallback(() => {
-    if (!googleSignInButton.current || gsiScriptLoaded) return;
-
-    window?.google?.accounts.id.initialize({
-      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
-      callback: handleSignIn,
-    });
-
-    try {
-      window?.google?.accounts.id.renderButton(
-        googleSignInButton.current,
-        {
-          type: "standard",
-          theme: "outline",
-          size: "large",
-          logo_alignment: "center",
-          width: 360,
-          text: "signin_with",
-        } as GsiButtonConfiguration // customization attributes
-      );
-    } catch (err) {
-      console.log(err);
-    }
-
-    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
-
-    setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded]);
-
-  useEffect(() => {
-    if (window?.google?.accounts?.id) {
-      loadScript();
-    }
-    return () => {
-      window?.google?.accounts.id.cancel();
-    };
-  }, [loadScript]);
-
-  return (
-    <>
-      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div
-        className="overflow-hidden rounded w-full"
-        id="googleSignInButton"
-        ref={googleSignInButton}
-      />
-    </>
-  );
-};
diff --git a/apps/app/components/account/index.ts b/apps/app/components/account/index.ts
deleted file mode 100644
index dee3e3251a2..00000000000
--- a/apps/app/components/account/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./email-code-form";
-export * from "./email-password-form";
-export * from "./email-reset-password-form";
-export * from "./github-login-button";
-export * from "./google-login";
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
deleted file mode 100644
index 349f9884db0..00000000000
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// nivo
-import { BarDatum } from "@nivo/bar";
-// components
-import { CustomTooltip } from "./custom-tooltip";
-// ui
-import { BarGraph } from "components/ui";
-// helpers
-import { findStringWithMostCharacters } from "helpers/array.helper";
-import { generateBarColor } from "helpers/analytics.helper";
-// types
-import { IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
-
-type Props = {
-  analytics: IAnalyticsResponse;
-  barGraphData: {
-    data: BarDatum[];
-    xAxisKeys: string[];
-  };
-  params: IAnalyticsParams;
-  yAxisKey: "count" | "estimate";
-  fullScreen: boolean;
-};
-
-export const AnalyticsGraph: React.FC<Props> = ({
-  analytics,
-  barGraphData,
-  params,
-  yAxisKey,
-  fullScreen,
-}) => {
-  const renderAssigneeName = (assigneeId: string): string => {
-    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
-
-    if (!assignee) return "?";
-
-    return assignee.assignees__display_name || "?";
-  };
-
-  const generateYAxisTickValues = () => {
-    if (!analytics) return [];
-
-    let data: number[] = [];
-
-    if (params.segment)
-      // find the total no of issues in each segment
-      data = Object.keys(analytics.distribution).map((segment) => {
-        let totalSegmentIssues = 0;
-
-        analytics.distribution[segment].map((s) => {
-          totalSegmentIssues += s[yAxisKey] as number;
-        });
-
-        return totalSegmentIssues;
-      });
-    else data = barGraphData.data.map((d) => d[yAxisKey] as number);
-
-    return data;
-  };
-
-  const longestXAxisLabel = findStringWithMostCharacters(barGraphData.data.map((d) => `${d.name}`));
-
-  return (
-    <BarGraph
-      data={barGraphData.data}
-      indexBy="name"
-      keys={barGraphData.xAxisKeys}
-      colors={(datum) =>
-        generateBarColor(
-          params.segment ? `${datum.id}` : `${datum.indexValue}`,
-          analytics,
-          params,
-          params.segment ? "segment" : "x_axis"
-        )
-      }
-      customYAxisTickValues={generateYAxisTickValues()}
-      tooltip={(datum) => <CustomTooltip datum={datum} analytics={analytics} params={params} />}
-      height={fullScreen ? "400px" : "300px"}
-      margin={{
-        right: 20,
-        bottom: params.x_axis === "assignees__id" ? 50 : longestXAxisLabel.length * 5 + 20,
-      }}
-      axisBottom={{
-        tickSize: 0,
-        tickPadding: 10,
-        tickRotation: barGraphData.data.length > 7 ? -45 : 0,
-        renderTick:
-          params.x_axis === "assignees__id"
-            ? (datum) => {
-                const avatar = analytics.extras.assignee_details?.find(
-                  (a) => a?.assignees__display_name === datum?.value
-                )?.assignees__avatar;
-
-                if (avatar && avatar !== "")
-                  return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <image
-                        x={-8}
-                        y={10}
-                        width={16}
-                        height={16}
-                        xlinkHref={avatar}
-                        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">
-                        {params.x_axis === "assignees__id"
-                          ? datum.value && datum.value !== "None"
-                            ? renderAssigneeName(datum.value)[0].toUpperCase()
-                            : "?"
-                          : datum.value && datum.value !== "None"
-                          ? `${datum.value}`.toUpperCase()[0]
-                          : "?"}
-                      </text>
-                    </g>
-                  );
-              }
-            : undefined,
-      }}
-      theme={{
-        axis: {},
-      }}
-    />
-  );
-};
diff --git a/apps/app/components/analytics/custom-analytics/index.ts b/apps/app/components/analytics/custom-analytics/index.ts
deleted file mode 100644
index ecdb29b74cf..00000000000
--- a/apps/app/components/analytics/custom-analytics/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./graph";
-export * from "./create-update-analytics-modal";
-export * from "./custom-analytics";
-export * from "./select-bar";
-export * from "./sidebar";
-export * from "./table";
diff --git a/apps/app/components/analytics/custom-analytics/select-bar.tsx b/apps/app/components/analytics/custom-analytics/select-bar.tsx
deleted file mode 100644
index 8c2b822e5b8..00000000000
--- a/apps/app/components/analytics/custom-analytics/select-bar.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// react-hook-form
-import { Control, Controller, UseFormSetValue } from "react-hook-form";
-// components
-import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
-// types
-import { IAnalyticsParams, IProject } from "types";
-
-type Props = {
-  control: Control<IAnalyticsParams, any>;
-  setValue: UseFormSetValue<IAnalyticsParams>;
-  projects: IProject[];
-  params: IAnalyticsParams;
-  fullScreen: boolean;
-  isProjectLevel: boolean;
-};
-
-export const AnalyticsSelectBar: React.FC<Props> = ({
-  control,
-  setValue,
-  projects,
-  params,
-  fullScreen,
-  isProjectLevel,
-}) => (
-  <div
-    className={`grid items-center gap-4 px-5 py-2.5 ${
-      isProjectLevel ? "grid-cols-3" : "grid-cols-2"
-    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
-  >
-    {!isProjectLevel && (
-      <div>
-        <h6 className="text-xs text-custom-text-200">Project</h6>
-        <Controller
-          name="project"
-          control={control}
-          render={({ field: { value, onChange } }) => (
-            <SelectProject value={value} onChange={onChange} projects={projects} />
-          )}
-        />
-      </div>
-    )}
-    <div>
-      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
-      <Controller
-        name="y_axis"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectYAxis value={value} onChange={onChange} />
-        )}
-      />
-    </div>
-    <div>
-      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
-      <Controller
-        name="x_axis"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectXAxis
-            value={value}
-            onChange={(val: string) => {
-              if (params.segment === val) setValue("segment", null);
-
-              onChange(val);
-            }}
-          />
-        )}
-      />
-    </div>
-    <div>
-      <h6 className="text-xs text-custom-text-200">Group</h6>
-      <Controller
-        name="segment"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectSegment value={value} onChange={onChange} params={params} />
-        )}
-      />
-    </div>
-  </div>
-);
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
deleted file mode 100644
index 75d1d7d400f..00000000000
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// nivo
-import { BarDatum } from "@nivo/bar";
-// icons
-import { getPriorityIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// helpers
-import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
-// types
-import { IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
-
-type Props = {
-  analytics: IAnalyticsResponse;
-  barGraphData: {
-    data: BarDatum[];
-    xAxisKeys: string[];
-  };
-  params: IAnalyticsParams;
-  yAxisKey: "count" | "estimate";
-};
-
-export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
-  const renderAssigneeName = (assigneeId: string): string => {
-    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
-
-    if (!assignee) return "No assignee";
-
-    return assignee.assignees__display_name || "No assignee";
-  };
-
-  return (
-    <div className="flow-root">
-      <div className="overflow-x-auto">
-        <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
-            <thead className="bg-custom-background-80">
-              <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
-                <th scope="col" className="py-3 px-2.5 text-left font-medium">
-                  {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
-                </th>
-                {params.segment ? (
-                  barGraphData.xAxisKeys.map((key) => (
-                    <th
-                      key={`segment-${key}`}
-                      scope="col"
-                      className={`px-2.5 py-3 text-left font-medium ${
-                        params.segment === "priority" || params.segment === "state__group"
-                          ? "capitalize"
-                          : ""
-                      }`}
-                    >
-                      <div className="flex items-center gap-2">
-                        {params.segment === "priority" ? (
-                          getPriorityIcon(key)
-                        ) : (
-                          <span
-                            className="h-3 w-3 flex-shrink-0 rounded"
-                            style={{
-                              backgroundColor: generateBarColor(key, analytics, params, "segment"),
-                            }}
-                          />
-                        )}
-                        {params.segment === "assignees__id"
-                          ? renderAssigneeName(key)
-                          : DATE_KEYS.includes(params.segment ?? "")
-                          ? renderMonthAndYear(key)
-                          : key}
-                      </div>
-                    </th>
-                  ))
-                ) : (
-                  <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
-                    {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
-                  </th>
-                )}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-custom-border-200">
-              {barGraphData.data.map((item, index) => (
-                <tr
-                  key={`table-row-${index}`}
-                  className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
-                >
-                  <td
-                    className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
-                      params.x_axis === "priority" || params.x_axis === "state__group"
-                        ? "capitalize"
-                        : ""
-                    }`}
-                  >
-                    {params.x_axis === "priority" ? (
-                      getPriorityIcon(`${item.name}`)
-                    ) : (
-                      <span
-                        className="h-3 w-3 rounded"
-                        style={{
-                          backgroundColor: generateBarColor(
-                            `${item.name}`,
-                            analytics,
-                            params,
-                            "x_axis"
-                          ),
-                        }}
-                      />
-                    )}
-                    {params.x_axis === "assignees__id"
-                      ? renderAssigneeName(`${item.name}`)
-                      : addSpaceIfCamelCase(`${item.name}`)}
-                  </td>
-                  {params.segment ? (
-                    barGraphData.xAxisKeys.map((key, index) => (
-                      <td
-                        key={`segment-value-${index}`}
-                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
-                      >
-                        {item[key] ?? 0}
-                      </td>
-                    ))
-                  ) : (
-                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/analytics/index.ts b/apps/app/components/analytics/index.ts
deleted file mode 100644
index ec0fd5dc13f..00000000000
--- a/apps/app/components/analytics/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./custom-analytics";
-export * from "./scope-and-demand";
-export * from "./select";
-export * from "./project-modal";
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
deleted file mode 100644
index 15193bf66ce..00000000000
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// icons
-import { PlayIcon } from "@heroicons/react/24/outline";
-// types
-import { IDefaultAnalyticsResponse } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  defaultAnalytics: IDefaultAnalyticsResponse;
-};
-
-export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
-    <h5 className="text-xs text-red-500">需求量</h5>
-    <div>
-      <h4 className="text-custom-text-100 text-base font-medium">未完成任务总数</h4>
-      <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
-    </div>
-    <div className="space-y-6">
-      {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_GROUP_COLORS[group.state_group],
-                  }}
-                />
-                <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 top-0 left-0 h-1 rounded duration-300"
-                style={{
-                  width: `${percentage}%`,
-                  backgroundColor: STATE_GROUP_COLORS[group.state_group],
-                }}
-              />
-            </div>
-          </div>
-        );
-      })}
-    </div>
-    {/*<div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">*/}
-    {/*  <p className="flex items-center gap-1 text-custom-text-200">*/}
-    {/*    <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />*/}
-    {/*    <span>需求估算:</span>*/}
-    {/*  </p>*/}
-    {/*  <p className="font-medium">*/}
-    {/*    {defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum}*/}
-    {/*  </p>*/}
-    {/*</div>*/}
-  </div>
-);
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
deleted file mode 100644
index 56cd9469525..00000000000
--- a/apps/app/components/analytics/scope-and-demand/scope.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-// ui
-import { BarGraph, ProfileEmptyState } from "components/ui";
-// image
-import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
-// types
-import { IDefaultAnalyticsResponse } from "types";
-
-type Props = {
-  defaultAnalytics: IDefaultAnalyticsResponse;
-};
-
-export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200">
-    <h5 className="p-3 text-xs text-green-500">范围</h5>
-    <div className="divide-y divide-custom-border-200">
-      <div>
-        <h6 className="px-3 text-base font-medium">待处理问题</h6>
-        {defaultAnalytics.pending_issue_user.length > 0 ? (
-          <BarGraph
-            data={defaultAnalytics.pending_issue_user}
-            indexBy="assignees__display_name"
-            keys={["count"]}
-            height="250px"
-            colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
-            tooltip={(datum) => {
-              const assignee = defaultAnalytics.pending_issue_user.find(
-                (a) => a.assignees__display_name === `${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 : "无负责人"}:{" "}
-                  </span>
-                  {datum.value}
-                </div>
-              );
-            }}
-            axisBottom={{
-              renderTick: (datum) => {
-                const avatar =
-                  defaultAnalytics.pending_issue_user[datum.tickIndex]?.assignees__avatar ?? "";
-
-                if (avatar && avatar !== "")
-                  return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <image
-                        x={-8}
-                        y={10}
-                        width={16}
-                        height={16}
-                        xlinkHref={avatar}
-                        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 ? `${datum.value}`.toUpperCase()[0] : "?"}
-                      </text>
-                    </g>
-                  );
-              },
-            }}
-            margin={{ top: 20 }}
-            theme={{
-              axis: {},
-            }}
-          />
-        ) : (
-          <div className="px-7 py-4">
-            <ProfileEmptyState
-              title="暂无数据"
-              description="Analysis of pending issues by co-workers appears here."
-              image={emptyBarGraph}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  </div>
-);
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
deleted file mode 100644
index 5d625bd02d0..00000000000
--- a/apps/app/components/analytics/select/project.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// ui
-import { CustomSearchSelect } from "components/ui";
-// types
-import { IProject } from "types";
-
-type Props = {
-  value: string[] | null | undefined;
-  onChange: (val: string[] | null) => void;
-  projects: IProject[];
-};
-
-export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) => {
-  const options = projects?.map((project) => ({
-    value: project.id,
-    query: project.name + project.identifier,
-    content: (
-      <div className="flex items-center gap-2">
-        <span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
-        {project.name}
-      </div>
-    ),
-  }));
-
-  return (
-    <CustomSearchSelect
-      value={value ?? []}
-      onChange={(val: string[]) => onChange(val)}
-      options={options}
-      label={
-        value && value.length > 0
-          ? projects
-              .filter((p) => value.includes(p.id))
-              .map((p) => p.identifier)
-              .join(", ")
-          : "All projects"
-      }
-      optionsClassName="min-w-full"
-      multiple
-    />
-  );
-};
diff --git a/apps/app/components/analytics/select/x-axis.tsx b/apps/app/components/analytics/select/x-axis.tsx
deleted file mode 100644
index a403cad3993..00000000000
--- a/apps/app/components/analytics/select/x-axis.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { CustomSelect } from "components/ui";
-// types
-import { TXAxisValues } from "types";
-// constants
-import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
-
-type Props = {
-  value: TXAxisValues;
-  onChange: (val: string) => void;
-};
-
-export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-
-  return (
-    <CustomSelect
-      value={value}
-      label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
-      onChange={onChange}
-      width="w-full"
-      maxHeight="lg"
-    >
-      {ANALYTICS_X_AXIS_VALUES.map((item) => {
-        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
-        if (moduleId && item.value === "issue_module__module__name") return null;
-
-        return (
-          <CustomSelect.Option key={item.value} value={item.value}>
-            {item.label}
-          </CustomSelect.Option>
-        );
-      })}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/auth-screens/project/join-project.tsx b/apps/app/components/auth-screens/project/join-project.tsx
deleted file mode 100644
index 73b824b639d..00000000000
--- a/apps/app/components/auth-screens/project/join-project.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useState } from "react";
-
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import projectService from "services/project.service";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { AssignmentClipboardIcon } from "components/icons";
-// images
-import JoinProjectImg from "public/auth/project-not-authorized.svg";
-// fetch-keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-
-export const JoinProject: React.FC = () => {
-  const [isJoiningProject, setIsJoiningProject] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const handleJoin = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIsJoiningProject(true);
-    projectService
-      .joinProject(workspaceSlug as string, {
-        project_ids: [projectId as string],
-      })
-      .then(async () => {
-        await mutate(USER_PROJECT_VIEW(projectId.toString()));
-        setIsJoiningProject(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsJoiningProject(false);
-      });
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
-      <div className="h-44 w-72">
-        <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
-      </div>
-      <h1 className="text-xl font-medium text-custom-text-100">
-        You are not a member of this project
-      </h1>
-
-      <div className="w-full max-w-md text-base text-custom-text-200">
-        <p className="mx-auto w-full text-sm md:w-3/4">
-          You are not a member of this project, but you can join this project by clicking the button
-          below.
-        </p>
-      </div>
-      <div>
-        <PrimaryButton
-          className="flex items-center gap-1"
-          loading={isJoiningProject}
-          onClick={handleJoin}
-        >
-          <AssignmentClipboardIcon height={16} width={16} color="white" />
-          {isJoiningProject ? "Joining..." : "Click to join"}
-        </PrimaryButton>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/auth-screens/workspace/not-a-member.tsx b/apps/app/components/auth-screens/workspace/not-a-member.tsx
deleted file mode 100644
index ad6d9d4effd..00000000000
--- a/apps/app/components/auth-screens/workspace/not-a-member.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import Link from "next/link";
-
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-
-export const NotAWorkspaceMember = () => (
-  <DefaultLayout>
-    <div className="grid h-full place-items-center p-4">
-      <div className="space-y-8 text-center">
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold">未授权！</h3>
-          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
-            您不是此工作区的成员。请联系工作区管理员获取邀请或查看您的待发邀请。
-          </p>
-        </div>
-        <div className="flex items-center justify-center gap-2">
-          <Link href="/invitations">
-            <a>
-              <SecondaryButton>检查待处理的邀请</SecondaryButton>
-            </a>
-          </Link>
-          <Link href="/create-workspace">
-            <a>
-              <PrimaryButton>创建新工作区</PrimaryButton>
-            </a>
-          </Link>
-        </div>
-      </div>
-    </div>
-  </DefaultLayout>
-);
diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
deleted file mode 100644
index 0e5cfb9c4b0..00000000000
--- a/apps/app/components/breadcrumbs/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-// icons
-import { Icon } from "components/ui";
-
-type BreadcrumbsProps = {
-  children: any;
-};
-
-const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
-  const router = useRouter();
-
-  return (
-    <>
-      <div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
-        <button
-          type="button"
-          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
-          onClick={() => router.back()}
-        >
-          <Icon
-            iconName="keyboard_backspace"
-            className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
-          />
-        </button>
-        {children}
-      </div>
-    </>
-  );
-};
-
-type BreadcrumbItemProps = {
-  title: string;
-  link?: string;
-  icon?: any;
-  linkTruncate?: boolean;
-  unshrinkTitle?: boolean;
-};
-
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
-  title,
-  link,
-  icon,
-  linkTruncate = false,
-  unshrinkTitle = false,
-}) => (
-  <>
-    {link ? (
-      <Link href={link}>
-        <a
-          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
-            linkTruncate ? "truncate" : ""
-          }`}
-        >
-          <p
-            className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
-          >
-            {icon ?? null}
-            {title}
-          </p>
-        </a>
-      </Link>
-    ) : (
-      <div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
-        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
-          {icon}
-          <span className="break-words">{title}</span>
-        </p>
-      </div>
-    )}
-  </>
-);
-
-Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
-
-export { Breadcrumbs, BreadcrumbItem };
diff --git a/apps/app/components/command-palette/change-interface-theme.tsx b/apps/app/components/command-palette/change-interface-theme.tsx
deleted file mode 100644
index 87d1289aec0..00000000000
--- a/apps/app/components/command-palette/change-interface-theme.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-// cmdk
-import { Command } from "cmdk";
-import { THEMES_OBJ } from "constants/themes";
-import { useTheme } from "next-themes";
-import { SettingIcon } from "components/icons";
-import userService from "services/user.service";
-import useUser from "hooks/use-user";
-// helper
-import { unsetCustomCssVariables } from "helpers/theme.helper";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-type Props = {
-  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpen }) => {
-  const store: any = useMobxStore();
-
-  const [mounted, setMounted] = useState(false);
-
-  const { setTheme } = useTheme();
-
-  const { user, mutateUser } = useUser();
-
-  const updateUserTheme = (newTheme: string) => {
-    if (!user) return;
-    setTheme(newTheme);
-    return store.user
-      .updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } })
-      .then((response: any) => response)
-      .catch((error: any) => error);
-  };
-
-  // useEffect only runs on the client, so now we can safely show the UI
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return (
-    <>
-      {THEMES_OBJ.filter((t) => t.value !== "custom").map((theme) => (
-        <Command.Item
-          key={theme.value}
-          onSelect={() => {
-            updateUserTheme(theme.value);
-            setIsPaletteOpen(false);
-          }}
-          className="focus:outline-none"
-        >
-          <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-            {theme.label}
-          </div>
-        </Command.Item>
-      ))}
-    </>
-  );
-});
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
deleted file mode 100644
index 4dc29afecf9..00000000000
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// hooks
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-// components
-import { CommandK, ShortcutsModal } from "components/command-palette";
-import { BulkDeleteIssuesModal } from "components/core";
-import { CreateUpdateCycleModal } from "components/cycles";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateModuleModal } from "components/modules";
-import { CreateProjectModal } from "components/project";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdatePageModal } from "components/pages";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// services
-import issuesService from "services/issues.service";
-import inboxService from "services/inbox.service";
-// fetch keys
-import { INBOX_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { observable } from "mobx";
-import { observer } from "mobx-react-lite";
-
-export const CommandPalette: React.FC = observer(() => {
-  const store: any = useMobxStore();
-
-  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
-  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
-  const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
-  const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
-  const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
-  const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
-  const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId, inboxId } = router.query;
-
-  const { user } = useUser();
-
-  const { setToastAlert } = useToast();
-
-  const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-        issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
-  const copyIssueUrlToClipboard = useCallback(() => {
-    if (!router.query.issueId) return;
-
-    const url = new URL(window.location.href);
-    copyTextToClipboard(url.href)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Copied to clipboard",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Some error occurred",
-        });
-      });
-  }, [router, setToastAlert]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
-      if (!key) return;
-
-      const keyPressed = key.toLowerCase();
-      const cmdClicked = ctrlKey || metaKey;
-      // if on input, textarea or editor, don't do anything
-      if (
-        e.target instanceof HTMLTextAreaElement ||
-        e.target instanceof HTMLInputElement ||
-        (e.target as Element).classList?.contains("ProseMirror")
-      )
-        return;
-
-        if (cmdClicked) {
-          if (keyPressed === "k") {
-            e.preventDefault();
-            setIsPaletteOpen(true);
-          } else if (keyPressed === "c" && altKey) {
-            e.preventDefault();
-            copyIssueUrlToClipboard();
-          } else if (keyPressed === "b") {
-            e.preventDefault();
-            store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed);
-          }
-        } else {
-          if (keyPressed === "c") {
-            setIsIssueModalOpen(true);
-          } else if (keyPressed === "p") {
-            setIsProjectModalOpen(true);
-          } else if (keyPressed === "v") {
-            setIsCreateViewModalOpen(true);
-          } else if (keyPressed === "d") {
-            setIsCreateUpdatePageModalOpen(true);
-          } else if (keyPressed === "h") {
-            setIsShortcutsModalOpen(true);
-          } else if (keyPressed === "q") {
-            setIsCreateCycleModalOpen(true);
-          } else if (keyPressed === "m") {
-            setIsCreateModuleModalOpen(true);
-          } else if (keyPressed === "backspace" || keyPressed === "delete") {
-            e.preventDefault();
-            setIsBulkDeleteIssuesModalOpen(true);
-          }
-        }
-    },
-    [copyIssueUrlToClipboard]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
-  if (!user) return null;
-
-  const deleteIssue = () => {
-    setIsPaletteOpen(false);
-    setDeleteIssueModal(true);
-  };
-
-  return (
-    <>
-      <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
-      {workspaceSlug && (
-        <CreateProjectModal
-          isOpen={isProjectModalOpen}
-          setIsOpen={setIsProjectModalOpen}
-          user={user}
-        />
-      )}
-      {projectId && (
-        <>
-          <CreateUpdateCycleModal
-            isOpen={isCreateCycleModalOpen}
-            handleClose={() => setIsCreateCycleModalOpen(false)}
-            user={user}
-          />
-          <CreateUpdateModuleModal
-            isOpen={isCreateModuleModalOpen}
-            setIsOpen={setIsCreateModuleModalOpen}
-            user={user}
-          />
-          <CreateUpdateViewModal
-            handleClose={() => setIsCreateViewModalOpen(false)}
-            isOpen={isCreateViewModalOpen}
-            user={user}
-          />
-          <CreateUpdatePageModal
-            isOpen={isCreateUpdatePageModalOpen}
-            handleClose={() => setIsCreateUpdatePageModalOpen(false)}
-            user={user}
-          />
-        </>
-      )}
-      {issueId && issueDetails && (
-        <DeleteIssueModal
-          handleClose={() => setDeleteIssueModal(false)}
-          isOpen={deleteIssueModal}
-          data={issueDetails}
-          user={user}
-        />
-      )}
-      <CreateUpdateIssueModal
-        isOpen={isIssueModalOpen}
-        handleClose={() => setIsIssueModalOpen(false)}
-        fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
-      />
-      <BulkDeleteIssuesModal
-        isOpen={isBulkDeleteIssuesModalOpen}
-        setIsOpen={setIsBulkDeleteIssuesModalOpen}
-        user={user}
-      />
-      <CommandK
-        deleteIssue={deleteIssue}
-        isPaletteOpen={isPaletteOpen}
-        setIsPaletteOpen={setIsPaletteOpen}
-      />
-    </>
-  );
-})
\ No newline at end of file
diff --git a/apps/app/components/command-palette/index.ts b/apps/app/components/command-palette/index.ts
deleted file mode 100644
index 6c137d6df8a..00000000000
--- a/apps/app/components/command-palette/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./issue";
-export * from "./change-interface-theme";
-export * from "./command-k";
-export * from "./command-pallette";
-export * from "./helpers";
-export * from "./shortcuts-modal";
diff --git a/apps/app/components/command-palette/issue/change-issue-assignee.tsx b/apps/app/components/command-palette/issue/change-issue-assignee.tsx
deleted file mode 100644
index ad3d4dfdb32..00000000000
--- a/apps/app/components/command-palette/issue/change-issue-assignee.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { Dispatch, SetStateAction, useCallback } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// cmdk
-import { Command } from "cmdk";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useProjectMembers from "hooks/use-project-members";
-// constants
-import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-// ui
-import { Avatar } from "components/ui";
-// icons
-import { CheckIcon } from "components/icons";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-
-type Props = {
-  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
-  issue: IIssue;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
-
-  const options =
-    members?.map(({ member }) => ({
-      value: member.id,
-      query: member.display_name,
-      content: (
-        <>
-          <div className="flex items-center gap-2">
-            <Avatar user={member} />
-            {member.display_name}
-          </div>
-          {issue.assignees.includes(member.id) && (
-            <div>
-              <CheckIcon className="h-3 w-3" />
-            </div>
-          )}
-        </>
-      ),
-    })) ?? [];
-
-  const updateIssue = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-        async (prevData) => {
-          if (!prevData) return prevData;
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload = { ...formData };
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, user]
-  );
-
-  const handleIssueAssignees = (assignee: string) => {
-    const updatedAssignees = issue.assignees_list ?? [];
-
-    if (updatedAssignees.includes(assignee)) {
-      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
-    } else {
-      updatedAssignees.push(assignee);
-    }
-
-    updateIssue({ assignees_list: updatedAssignees });
-    setIsPaletteOpen(false);
-  };
-
-  return (
-    <>
-      {options.map((option) => (
-        <Command.Item
-          key={option.value}
-          onSelect={() => handleIssueAssignees(option.value)}
-          className="focus:outline-none"
-        >
-          {option.content}
-        </Command.Item>
-      ))}
-    </>
-  );
-};
diff --git a/apps/app/components/command-palette/issue/change-issue-priority.tsx b/apps/app/components/command-palette/issue/change-issue-priority.tsx
deleted file mode 100644
index 8d5a73dc6b2..00000000000
--- a/apps/app/components/command-palette/issue/change-issue-priority.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useRouter } from "next/router";
-import React, { Dispatch, SetStateAction, useCallback } from "react";
-import { mutate } from "swr";
-
-// cmdk
-import { Command } from "cmdk";
-// services
-import issuesService from "services/issues.service";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-// constants
-import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-import { PRIORITIES } from "constants/project";
-// icons
-import { CheckIcon, getPriorityIcon } from "components/icons";
-
-type Props = {
-  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
-  issue: IIssue;
-  user: ICurrentUserResponse;
-};
-
-export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-        async (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload = { ...formData };
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, user]
-  );
-
-  const handleIssueState = (priority: string | null) => {
-    submitChanges({ priority });
-    setIsPaletteOpen(false);
-  };
-
-  return (
-    <>
-      {PRIORITIES.map((priority) => (
-        <Command.Item
-          key={priority}
-          onSelect={() => handleIssueState(priority)}
-          className="focus:outline-none"
-        >
-          <div className="flex items-center space-x-3">
-            {getPriorityIcon(priority)}
-            <span className="capitalize">{priority ?? "无"}</span>
-          </div>
-          <div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>
-        </Command.Item>
-      ))}
-    </>
-  );
-};
diff --git a/apps/app/components/command-palette/issue/change-issue-state.tsx b/apps/app/components/command-palette/issue/change-issue-state.tsx
deleted file mode 100644
index 30e2cdb772a..00000000000
--- a/apps/app/components/command-palette/issue/change-issue-state.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useRouter } from "next/router";
-import React, { Dispatch, SetStateAction, useCallback } from "react";
-import useSWR, { mutate } from "swr";
-
-// cmdk
-import { Command } from "cmdk";
-// ui
-import { Spinner } from "components/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-// fetch keys
-import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys";
-// icons
-import { CheckIcon, getStateGroupIcon } from "components/icons";
-
-type Props = {
-  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
-  issue: IIssue;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-        async (prevData) => {
-          if (!prevData) return prevData;
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload = { ...formData };
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutateIssueDetails();
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
-  );
-
-  const handleIssueState = (stateId: string) => {
-    submitChanges({ state: stateId });
-    setIsPaletteOpen(false);
-  };
-
-  return (
-    <>
-      {states ? (
-        states.length > 0 ? (
-          states.map((state) => (
-            <Command.Item
-              key={state.id}
-              onSelect={() => handleIssueState(state.id)}
-              className="focus:outline-none"
-            >
-              <div className="flex items-center space-x-3">
-                {getStateGroupIcon(state.group, "16", "16", state.color)}
-                <p>{state.name}</p>
-              </div>
-              <div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div>
-            </Command.Item>
-          ))
-        ) : (
-          <div className="text-center">No states found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
deleted file mode 100644
index 5b53e3e95ea..00000000000
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { useEffect, useState } from "react";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { CommandIcon } from "components/icons";
-// ui
-import { Input } from "components/ui";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const shortcuts = [
-  {
-    title: "导航",
-    shortcuts: [
-      { keys: "Ctrl,K", description: "打开导航仪" },
-      { keys: "↑", description: "向上" },
-      { keys: "↓", description: "向下" },
-      { keys: "←", description: "向左" },
-      { keys: "→", description: "向右" },
-      { keys: "Enter", description: "选择" },
-      { keys: "Esc", description: "关闭" },
-    ],
-  },
-  {
-    title: "公共",
-    shortcuts: [
-      { keys: "P", description: "创建项目" },
-      { keys: "C", description: "创建任务" },
-      // { keys: "Q", description: "创建周期" },
-      // { keys: "M", description: "创建模块" },
-      // { keys: "V", description: "创建视图" },
-      // { keys: "D", description: "创建页面" },
-      { keys: "Delete", description: "批量删除任务" },
-      { keys: "H", description: "打开快捷方式指南" },
-      {
-        keys: "Ctrl,Alt,C",
-        description: "在任务详细信息页面复制任务网址",
-      },
-    ],
-  },
-];
-
-const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
-
-export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
-  const [query, setQuery] = useState("");
-  const filteredShortcuts = allShortcuts.filter((shortcut) =>
-    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === ""
-      ? true
-      : false
-  );
-
-  useEffect(() => {
-    if (!isOpen) setQuery("");
-  }, [isOpen]);
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
-        <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-[#131313] bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-custom-background-80 p-5">
-                  <div className="sm:flex sm:items-start">
-                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        <span>快捷键</span>
-                        <span>
-                          <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </span>
-                      </Dialog.Title>
-                      <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
-                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
-                          <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
-                            id="search"
-                            name="search"
-                            type="text"
-                            placeholder="搜索快捷键"
-                            onChange={(e) => setQuery(e.target.value)}
-                          />
-                        </div>
-                      </div>
-                      <div className="flex w-full flex-col gap-y-3">
-                        {query.trim().length > 0 ? (
-                          filteredShortcuts.length > 0 ? (
-                            filteredShortcuts.map((shortcut) => (
-                              <div key={shortcut.keys} className="flex w-full flex-col">
-                                <div className="flex flex-col gap-y-3">
-                                  <div className="flex items-center justify-between">
-                                    <p className="text-sm text-custom-text-200">
-                                      {shortcut.description}
-                                    </p>
-                                    <div className="flex items-center gap-x-2.5">
-                                      {shortcut.keys.split(",").map((key, index) => (
-                                        <span key={index} className="flex items-center gap-1">
-                                          {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
-                                            </span>
-                                          ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
-                                            </kbd>
-                                          ) : (
-                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
-                                              {key}
-                                            </kbd>
-                                          )}
-                                        </span>
-                                      ))}
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            ))
-                          ) : (
-                            <div className="flex flex-col gap-y-3">
-                              <p className="text-sm text-custom-text-200">
-                                未找到以下快捷键{" "}
-                                <span className="font-semibold italic">
-                                  {`"`}
-                                  {query}
-                                  {`"`}
-                                </span>
-                              </p>
-                            </div>
-                          )
-                        ) : (
-                          shortcuts.map(({ title, shortcuts }) => (
-                            <div key={title} className="flex w-full flex-col">
-                              <p className="mb-4 font-medium">{title}</p>
-                              <div className="flex flex-col gap-y-3">
-                                {shortcuts.map(({ keys, description }, index) => (
-                                  <div key={index} className="flex items-center justify-between">
-                                    <p className="text-sm text-custom-text-200">{description}</p>
-                                    <div className="flex items-center gap-x-2.5">
-                                      {keys.split(",").map((key, index) => (
-                                        <span key={index} className="flex items-center gap-1">
-                                          {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
-                                            </span>
-                                          ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
-                                            </kbd>
-                                          ) : (
-                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
-                                              {key}
-                                            </kbd>
-                                          )}
-                                        </span>
-                                      ))}
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          ))
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/core/activity.tsx b/apps/app/components/core/activity.tsx
deleted file mode 100644
index 13624c95108..00000000000
--- a/apps/app/components/core/activity.tsx
+++ /dev/null
@@ -1,618 +0,0 @@
-import { useRouter } from "next/router";
-
-// icons
-import { Icon, Tooltip } from "components/ui";
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon } from "components/icons";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { capitalizeFirstLetter } from "helpers/string.helper";
-// types
-import { IIssueActivity } from "types";
-import React from "react";
-
-const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <Tooltip
-      tooltipContent={
-        activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-      }
-    >
-      <a
-        href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-      >
-        {activity.issue_detail
-          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
-          : "Issue"}
-        <Icon iconName="launch" className="!text-xs" />
-      </a>
-    </Tooltip>
-  );
-};
-
-const UserLink = ({ activity }: { activity: IIssueActivity }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <a
-      href={`/${workspaceSlug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
-    >
-      {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
-    </a>
-  );
-};
-
-const activityDetails: {
-  [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
-    icon: React.ReactNode;
-  };
-} = {
-  assignees: {
-    message: (activity, showIssue) => {
-      if (activity.old_value === "")
-        return (
-          <>
-            新增负责人 <UserLink activity={activity} />
-            {showIssue && (
-              <>
-                {" "}
-                to <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            移除负责人 <UserLink activity={activity} />
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
-  },
-  archived_at: {
-    message: (activity) => {
-      if (activity.new_value === "restore") return "restored the issue.";
-      else return "archived the issue.";
-    },
-    icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
-  },
-  attachment: {
-    message: (activity, showIssue) => {
-      if (activity.verb === "created")
-        return (
-          <>
-            上传了新的{" "}
-            <a
-              href={`${activity.new_value}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              附件
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-            {showIssue && (
-              <>
-                {" "}
-                to <IssueLink activity={activity} />
-              </>
-            )}
-          </>
-        );
-      else
-        return (
-          <>
-            删除了一个附件
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
-  },
-  blocking: {
-    message: (activity) => {
-      if (activity.old_value === "")
-        return (
-          <>
-            标记此任务为阻塞任务{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
-          </>
-        );
-      else
-        return (
-          <>
-            移除了阻塞任务{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
-          </>
-        );
-    },
-    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
-  },
-  blocks: {
-    message: (activity) => {
-      if (activity.old_value === "")
-        return (
-          <>
-           标明这一任务被以下因素所阻挡{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
-          </>
-        );
-      else
-        return (
-          <>
-            删除被任务阻止的此任务{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
-          </>
-        );
-    },
-    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
-  },
-  cycles: {
-    message: (activity, showIssue, workspaceSlug) => {
-      if (activity.verb === "created")
-        return (
-          <>
-            将此任务加入周期{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-      else if (activity.verb === "updated")
-        return (
-          <>
-            set the cycle to{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-      else
-        return (
-          <>
-            removed the issue from the cycle{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.old_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-    },
-    icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
-  },
-  description: {
-    message: (activity, showIssue) => (
-      <>
-        更新了说明
-        {showIssue && (
-          <>
-            {" "}
-            of <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
-  },
-  estimate_point: {
-    message: (activity, showIssue) => {
-      if (!activity.new_value)
-        return (
-          <>
-            removed the estimate point
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            set the estimate point to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-            {showIssue && (
-              <>
-                {" "}
-                for <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
-  },
-  issue: {
-    message: (activity) => {
-      if (activity.verb === "created") return "创建任务";
-      else return "删除了一个任务";
-    },
-    icon: <Icon iconName="stack" className="!text-sm" aria-hidden="true" />,
-  },
-  labels: {
-    message: (activity, showIssue) => {
-      if (activity.old_value === "")
-        return (
-          <>
-            新增标签{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
-              <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-            </span>
-            {showIssue && (
-              <>
-                {" "}
-                to <IssueLink activity={activity} />
-              </>
-            )}
-          </>
-        );
-      else
-        return (
-          <>
-            移除标签{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
-              <span className="font-medium text-custom-text-100">{activity.old_value}</span>
-            </span>
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-          </>
-        );
-    },
-    icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
-  },
-  link: {
-    message: (activity, showIssue) => {
-      if (activity.verb === "created")
-        return (
-          <>
-            添加了{" "}
-            <a
-              href={`${activity.new_value}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              链接
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-            {showIssue && (
-              <>
-                {" "}
-                to <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            删除了此{" "}
-            <a
-              href={`${activity.old_value}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              链接
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
-  },
-  modules: {
-    message: (activity, showIssue, workspaceSlug) => {
-      if (activity.verb === "created")
-        return (
-          <>
-            added this issue to the module{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-      else if (activity.verb === "updated")
-        return (
-          <>
-            set the module to{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-      else
-        return (
-          <>
-            removed the issue from the module{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.old_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
-          </>
-        );
-    },
-    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
-  },
-  name: {
-    message: (activity, showIssue) => (
-      <>
-        将名称设为 {activity.new_value}
-        {showIssue && (
-          <>
-            {" "}
-            of <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
-  },
-  parent: {
-    message: (activity, showIssue) => {
-      if (!activity.new_value)
-        return (
-          <>
-            移除了父任务{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            设置父任务为{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-            {showIssue && (
-              <>
-                {" "}
-                for <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
-  },
-  priority: {
-    message: (activity, showIssue) => (
-      <>
-        将优先级设为{" "}
-        <span className="font-medium text-custom-text-100">
-             {activity.new_value !== null && activity.new_value !== undefined ? <>
-                     {activity.new_value === "urgent" && <span>急</span>}
-                     {activity.new_value === "high" && <span>高</span>}
-                     {activity.new_value === "medium" && <span>中</span>}
-                     {activity.new_value === "low" && <span>低</span>}
-                     {activity.new_value === "null" && <span>无</span>}
-                     {activity.new_value === null && <span>无</span>}
-                     {activity.new_value == undefined && <span>无</span>}
-
-                 </>
-                 : "无"}
-          {/*{activity.new_value ? capitalizeFirstLetter(activity.new_value) : "无"}*/}
-        </span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
-  },
-  start_date: {
-    message: (activity, showIssue) => {
-      if (!activity.new_value)
-        return (
-          <>
-            删除了开始日期
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            将开始日期设为{" "}
-            <span className="font-medium text-custom-text-100">
-              {renderShortDateWithYearFormat(activity.new_value)}
-            </span>
-            {showIssue && (
-              <>
-                {" "}
-                for <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
-  },
-  state: {
-    message: (activity, showIssue) => (
-      <>
-        将状态设为{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-        {showIssue && (
-          <>
-            {" "}
-            for <IssueLink activity={activity} />
-          </>
-        )}
-        .
-      </>
-    ),
-    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
-  },
-  target_date: {
-    message: (activity, showIssue) => {
-      if (!activity.new_value)
-        return (
-          <>
-            删除了结束时间
-            {showIssue && (
-              <>
-                {" "}
-                from <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-      else
-        return (
-          <>
-            将结束时间定为{" "}
-            <span className="font-medium text-custom-text-100">
-              {renderShortDateWithYearFormat(activity.new_value)}
-            </span>
-            {showIssue && (
-              <>
-                {" "}
-                for <IssueLink activity={activity} />
-              </>
-            )}
-            .
-          </>
-        );
-    },
-    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
-  },
-};
-
-export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
-  <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
-);
-
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <>
-      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
-        activity,
-        showIssue,
-        workspaceSlug?.toString() ?? ""
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/core/filters/date-filter-modal.tsx b/apps/app/components/core/filters/date-filter-modal.tsx
deleted file mode 100644
index abc2cc7c470..00000000000
--- a/apps/app/components/core/filters/date-filter-modal.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import { Fragment } from "react";
-
-import { useRouter } from "next/router";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// react-datepicker
-import DatePicker from "react-datepicker";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// components
-import { DateFilterSelect } from "./date-filter-select";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
-// helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { IIssueFilterOptions } from "types";
-
-type Props = {
-  title: string;
-  field: keyof IIssueFilterOptions;
-  isOpen: boolean;
-  handleClose: () => void;
-};
-
-type TFormValues = {
-  filterType: "before" | "after" | "range";
-  date1: Date;
-  date2: Date;
-};
-
-const defaultValues: TFormValues = {
-  filterType: "range",
-  date1: new Date(),
-  date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
-};
-
-export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleClose }) => {
-  const { filters, setFilters } = useIssuesView();
-
-  const router = useRouter();
-  const { viewId } = router.query;
-
-  const { handleSubmit, watch, control } = useForm<TFormValues>({
-    defaultValues,
-  });
-
-  const handleFormSubmit = (formData: TFormValues) => {
-    const { filterType, date1, date2 } = formData;
-
-    if (filterType === "range") {
-      setFilters(
-        { [field]: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
-        !Boolean(viewId)
-      );
-    } else {
-      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
-        if (item?.includes(filterType)) return false;
-
-        return true;
-      });
-
-      const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
-      if (filterOne)
-        setFilters(
-          { [field]: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
-          !Boolean(viewId)
-        );
-      else
-        setFilters(
-          {
-            [field]: [`${renderDateFormat(date1)};${filterType}`],
-          },
-          !Boolean(viewId)
-        );
-    }
-    handleClose();
-  };
-
-  const isInvalid =
-    watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
-
-  const nextDay = new Date(watch("date1"));
-  nextDay.setDate(nextDay.getDate() + 1);
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-        <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
-                  <div className="flex w-full justify-between">
-                    <Controller
-                      control={control}
-                      name="filterType"
-                      render={({ field: { value, onChange } }) => (
-                        <DateFilterSelect title={title} value={value} onChange={onChange} />
-                      )}
-                    />
-                    <XMarkIcon
-                      className="border-base h-4 w-4 cursor-pointer"
-                      onClick={handleClose}
-                    />
-                  </div>
-                  <div className="flex w-full justify-between gap-4">
-                    <Controller
-                      control={control}
-                      name="date1"
-                      render={({ field: { value, onChange } }) => (
-                        <DatePicker
-                          selected={value}
-                          onChange={(val) => onChange(val)}
-                          dateFormat="dd-MM-yyyy"
-                          calendarClassName="h-full"
-                          inline
-                        />
-                      )}
-                    />
-                    {watch("filterType") === "range" && (
-                      <Controller
-                        control={control}
-                        name="date2"
-                        render={({ field: { value, onChange } }) => (
-                          <DatePicker
-                            selected={value}
-                            onChange={onChange}
-                            dateFormat="dd-MM-yyyy"
-                            calendarClassName="h-full"
-                            minDate={nextDay}
-                            inline
-                          />
-                        )}
-                      />
-                    )}
-                  </div>
-                  {watch("filterType") === "range" && (
-                    <h6 className="text-xs flex items-center gap-1">
-                      <span className="text-custom-text-200">After:</span>
-                      <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
-                      <span className="text-custom-text-200 ml-1">Before:</span>
-                      {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
-                    </h6>
-                  )}
-                  <div className="flex justify-end gap-4">
-                    <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
-                      Cancel
-                    </SecondaryButton>
-                    <PrimaryButton
-                      type="submit"
-                      className="flex items-center gap-2"
-                      disabled={isInvalid}
-                    >
-                      Apply
-                    </PrimaryButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/core/filters/index.ts b/apps/app/components/core/filters/index.ts
deleted file mode 100644
index d6455151ee1..00000000000
--- a/apps/app/components/core/filters/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./date-filter-modal";
-export * from "./date-filter-select";
-export * from "./filters-list";
-export * from "./issues-view-filter";
diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
deleted file mode 100644
index 402cba022f8..00000000000
--- a/apps/app/components/core/image-picker-popover.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
-
-// next
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-// swr
-import useSWR from "swr";
-
-// react-dropdown
-import { useDropzone } from "react-dropzone";
-
-// headless ui
-import { Tab, Transition, Popover } from "@headlessui/react";
-
-// services
-import fileService from "services/file.service";
-
-// components
-import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
-// hooks
-import useWorkspaceDetails from "hooks/use-workspace-details";
-
-const unsplashEnabled =
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
-
-const tabOptions = [
-  {
-    key: "images",
-    title: "Images",
-  },
-  {
-    key: "upload",
-    title: "Upload",
-  },
-];
-
-type Props = {
-  label: string | React.ReactNode;
-  value: string | null;
-  onChange: (data: string) => void;
-};
-
-export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const [image, setImage] = useState<File | null>(null);
-  const [isImageUploading, setIsImageUploading] = useState(false);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchParams, setSearchParams] = useState("");
-  const [formData, setFormData] = useState({
-    search: "",
-  });
-
-  const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () =>
-    fileService.getUnsplashImages(1, searchParams)
-  );
-
-  const { workspaceDetails } = useWorkspaceDetails();
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    setImage(acceptedFiles[0]);
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
-    onDrop,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
-    },
-    maxSize: 5 * 1024 * 1024,
-  });
-
-  const handleSubmit = async () => {
-    setIsImageUploading(true);
-
-    if (!image || !workspaceSlug) return;
-
-    const formData = new FormData();
-    formData.append("asset", image);
-    formData.append("attributes", JSON.stringify({}));
-
-    fileService
-      .uploadFile(workspaceSlug.toString(), formData)
-      .then((res) => {
-        const oldValue = value;
-        const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
-
-        const imageUrl = res.asset;
-        onChange(imageUrl);
-        setIsImageUploading(false);
-        setImage(null);
-        setIsOpen(false);
-
-        if (isUnsplashImage) return;
-
-        if (oldValue && workspaceDetails) fileService.deleteFile(workspaceDetails.id, oldValue);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  useEffect(() => {
-    if (!images || value !== null) return;
-    onChange(images[0].urls.regular);
-  }, [value, onChange, images]);
-
-  if (!unsplashEnabled) return null;
-
-  return (
-    <Popover className="relative z-[2]" ref={ref}>
-      <Popover.Button
-        className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
-        onClick={() => setIsOpen((prev) => !prev)}
-      >
-        {label}
-      </Popover.Button>
-      <Transition
-        show={isOpen}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl">
-            <Tab.Group>
-              <div>
-                <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                  {tabOptions.map((tab) => (
-                    <Tab
-                      key={tab.key}
-                      className={({ selected }) =>
-                        `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
-                          selected ? "bg-custom-primary text-white" : "text-custom-text-100"
-                        }`
-                      }
-                    >
-                      {tab.title}
-                    </Tab>
-                  ))}
-                </Tab.List>
-              </div>
-              <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                <Tab.Panel className="h-full w-full space-y-4">
-                  <div className="flex gap-x-2 pt-7">
-                    <Input
-                      name="search"
-                      className="text-sm"
-                      id="search"
-                      value={formData.search}
-                      onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                      placeholder="Search for images"
-                    />
-                    <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
-                      Search
-                    </PrimaryButton>
-                  </div>
-                  {images ? (
-                    <div className="grid grid-cols-4 gap-4">
-                      {images.map((image) => (
-                        <div
-                          key={image.id}
-                          className="relative col-span-2 aspect-video md:col-span-1"
-                        >
-                          <img
-                            src={image.urls.small}
-                            alt={image.alt_description}
-                            className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
-                            onClick={() => {
-                              setIsOpen(false);
-                              onChange(image.urls.regular);
-                            }}
-                          />
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="flex justify-center pt-20">
-                      <Spinner />
-                    </div>
-                  )}
-                </Tab.Panel>
-                <Tab.Panel className="h-full w-full pt-5">
-                  <div className="w-full h-full flex flex-col gap-y-2">
-                    <div className="flex items-center gap-3 w-full flex-1">
-                      <div
-                        {...getRootProps()}
-                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
-                          (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
-                            : ""
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
-                        >
-                          Edit
-                        </button>
-                        {image !== null || (value && value !== "") ? (
-                          <>
-                            <Image
-                              layout="fill"
-                              objectFit="cover"
-                              src={image ? URL.createObjectURL(image) : value ? value : ""}
-                              alt="image"
-                              className="rounded-lg"
-                            />
-                          </>
-                        ) : (
-                          <div>
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "Drop image here to upload"
-                                : "Drag & drop image here"}
-                            </span>
-                          </div>
-                        )}
-
-                        <input {...getInputProps()} type="text" />
-                      </div>
-                    </div>
-                    {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
-                        {fileRejections[0].errors[0].code === "file-too-large"
-                          ? "The image size cannot exceed 5 MB."
-                          : "Please upload a file in a valid format."}
-                      </p>
-                    )}
-
-                    <p className="text-custom-text-200 text-sm">
-                      File formats supported- .jpeg, .jpg, .png, .webp, .svg
-                    </p>
-
-                    <div className="flex items-center justify-end gap-2">
-                      <SecondaryButton
-                        className="w-full"
-                        onClick={() => {
-                          setIsOpen(false);
-                          setImage(null);
-                        }}
-                      >
-                        Cancel
-                      </SecondaryButton>
-                      <PrimaryButton
-                        className="w-full"
-                        onClick={handleSubmit}
-                        disabled={!image}
-                        loading={isImageUploading}
-                      >
-                        {isImageUploading ? "Uploading..." : "Upload & Save"}
-                      </PrimaryButton>
-                    </div>
-                  </div>
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </div>
-        </Popover.Panel>
-      </Transition>
-    </Popover>
-  );
-};
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
deleted file mode 100644
index 6989b05c0a3..00000000000
--- a/apps/app/components/core/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./filters";
-export * from "./modals";
-export * from "./sidebar";
-export * from "./theme";
-export * from "./views";
-export * from "./activity";
-export * from "./reaction-selector";
-export * from "./image-picker-popover";
diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
deleted file mode 100644
index 81c9b7d7129..00000000000
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, { useEffect, useState, forwardRef, useRef } from "react";
-import { useRouter } from "next/router";
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import aiService from "services/ai.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
-// types
-import { IIssue, IPageBlock } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  inset?: string;
-  content: string;
-  htmlContent?: string;
-  onResponse: (response: string) => void;
-  projectId: string;
-  block?: IPageBlock;
-  issue?: IIssue;
-};
-
-type FormData = {
-  prompt: string;
-  task: string;
-};
-
-export const GptAssistantModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  inset = "top-0 left-0",
-  content,
-  htmlContent,
-  onResponse,
-  projectId,
-  block,
-  issue,
-}) => {
-  const [response, setResponse] = useState("");
-  const [invalidResponse, setInvalidResponse] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUserAuth();
-
-  const editorRef = useRef<any>(null);
-
-  const { setToastAlert } = useToast();
-
-  const {
-    handleSubmit,
-    register,
-    reset,
-    setFocus,
-    formState: { isSubmitting },
-  } = useForm({
-    defaultValues: {
-      prompt: content,
-      task: "",
-    },
-  });
-
-  const onClose = () => {
-    handleClose();
-    setResponse("");
-    setInvalidResponse(false);
-    reset();
-  };
-
-  const handleResponse = async (formData: FormData) => {
-    if (!workspaceSlug || !projectId) return;
-
-    if (formData.task === "") {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Please enter some task to get AI assistance.",
-      });
-      return;
-    }
-
-    await aiService
-      .createGptTask(
-        workspaceSlug as string,
-        projectId as string,
-        {
-          prompt: content && content !== "" ? content : htmlContent ?? "",
-          task: formData.task,
-        },
-        user
-      )
-      .then((res) => {
-        setResponse(res.response_html);
-        setFocus("task");
-
-        if (res.response === "") setInvalidResponse(true);
-        else setInvalidResponse(false);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message:
-              error ||
-              "You have reached the maximum number of requests of 50 requests per month per user.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: error || "Some error occurred. Please try again.",
-          });
-      });
-  };
-
-  useEffect(() => {
-    if (isOpen) setFocus("task");
-  }, [isOpen, setFocus]);
-
-  useEffect(() => {
-    editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
-  }, [htmlContent, editorRef, content]);
-
-  return (
-    <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
-        isOpen ? "block" : "hidden"
-      }`}
-    >
-      {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
-        <div className="text-sm">
-          Content:
-          <TipTapEditor
-            workspaceSlug={workspaceSlug as string}
-            value={htmlContent ?? `<p>${content}</p>`}
-            customClassName="-m-3"
-            noBorder
-            borderOnFocus={false}
-            editable={false}
-            ref={editorRef}
-          />
-        </div>
-      )}
-      {response !== "" && (
-        <div className="page-block-section text-sm">
-          Response:
-          <TipTapEditor
-            workspaceSlug={workspaceSlug as string}
-            value={`<p>${response}</p>`}
-            customClassName="-mx-3 -my-3"
-            noBorder
-            borderOnFocus={false}
-            editable={false}
-          />
-        </div>
-      )}
-      {invalidResponse && (
-        <div className="text-sm text-red-500">
-          No response could be generated. This may be due to insufficient content or task
-          information. Please try again.
-        </div>
-      )}
-      <Input
-        type="text"
-        name="task"
-        register={register}
-        placeholder={`${
-          content && content !== ""
-            ? "Tell AI what action to perform on this content..."
-            : "Ask AI anything..."
-        }`}
-        autoComplete="off"
-      />
-      <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
-        {response !== "" && (
-          <PrimaryButton
-            onClick={() => {
-              onResponse(response);
-              onClose();
-              if (block)
-                trackEventServices.trackUseGPTResponseEvent(
-                  block,
-                  "USE_GPT_RESPONSE_IN_PAGE_BLOCK",
-                  user
-                );
-              else if (issue)
-                trackEventServices.trackUseGPTResponseEvent(
-                  issue,
-                  "USE_GPT_RESPONSE_IN_ISSUE",
-                  user
-                );
-            }}
-          >
-            Use this response
-          </PrimaryButton>
-        )}
-        <div className="flex items-center gap-2">
-          <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-          <PrimaryButton
-            type="button"
-            onClick={handleSubmit(handleResponse)}
-            loading={isSubmitting}
-          >
-            {isSubmitting
-              ? "Generating response..."
-              : response === ""
-              ? "Generate response"
-              : "Generate again"}
-          </PrimaryButton>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/core/modals/image-upload-modal.tsx b/apps/app/components/core/modals/image-upload-modal.tsx
deleted file mode 100644
index 1d9e09a978a..00000000000
--- a/apps/app/components/core/modals/image-upload-modal.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import NextImage from "next/image";
-import { useRouter } from "next/router";
-
-// react-dropzone
-import { useDropzone } from "react-dropzone";
-// headless ui
-import { Transition, Dialog } from "@headlessui/react";
-// services
-import fileServices from "services/file.service";
-// hooks
-import useWorkspaceDetails from "hooks/use-workspace-details";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { UserCircleIcon } from "components/icons";
-
-type Props = {
-  value?: string | null;
-  onClose: () => void;
-  isOpen: boolean;
-  onSuccess: (url: string) => void;
-  userImage?: boolean;
-};
-
-export const ImageUploadModal: React.FC<Props> = ({
-  value,
-  onSuccess,
-  isOpen,
-  onClose,
-  userImage,
-}) => {
-  const [image, setImage] = useState<File | null>(null);
-  const [isImageUploading, setIsImageUploading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { workspaceDetails } = useWorkspaceDetails();
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    setImage(acceptedFiles[0]);
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
-    onDrop,
-    accept: {
-      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
-    },
-    maxSize: 5 * 1024 * 1024,
-  });
-
-  const handleSubmit = async () => {
-    setIsImageUploading(true);
-
-    if (!image || !workspaceSlug) return;
-
-    const formData = new FormData();
-    formData.append("asset", image);
-    formData.append("attributes", JSON.stringify({}));
-
-    if (userImage) {
-      fileServices
-        .uploadUserFile(formData)
-        .then((res) => {
-          const imageUrl = res.asset;
-
-          onSuccess(imageUrl);
-          setIsImageUploading(false);
-          setImage(null);
-
-          if (value) fileServices.deleteUserFile(value);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    } else
-      fileServices
-        .uploadFile(workspaceSlug as string, formData)
-        .then((res) => {
-          const imageUrl = res.asset;
-          onSuccess(imageUrl);
-          setIsImageUploading(false);
-          setImage(null);
-
-          if (value && workspaceDetails) fileServices.deleteFile(workspaceDetails.id, value);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-  };
-
-  const handleClose = () => {
-    setImage(null);
-    onClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" 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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-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 border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
-                <div className="space-y-5">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-custom-text-100"
-                  >
-                    上传图片
-                  </Dialog.Title>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-center gap-3">
-                      <div
-                        {...getRootProps()}
-                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
-                          (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
-                            : ""
-                        }`}
-                      >
-                        {image !== null || (value && value !== "") ? (
-                          <>
-                            <button
-                              type="button"
-                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
-                            >
-                              编辑
-                            </button>
-                            <NextImage
-                              layout="fill"
-                              objectFit="cover"
-                              src={image ? URL.createObjectURL(image) : value ? value : ""}
-                              alt="image"
-                              className="rounded-lg"
-                            />
-                          </>
-                        ) : (
-                          <div>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
-                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "将图片放在此处上传"
-                                : "将图像拖放到此处"}
-                            </span>
-                          </div>
-                        )}
-
-                        <input {...getInputProps()} type="text" />
-                      </div>
-                    </div>
-                    {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
-                        {fileRejections[0].errors[0].code === "file-too-large"
-                          ? "The image size cannot exceed 5 MB."
-                          : "Please upload a file in a valid format."}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <p className="my-4 text-custom-text-200 text-sm">
-                  支持的文件格式- .jpeg, .jpg, .png, .webp, .svg
-                </p>
-                <div className="flex items-center justify-end gap-2">
-                  <SecondaryButton onClick={handleClose}>取消</SecondaryButton>
-                  <PrimaryButton
-                    onClick={handleSubmit}
-                    disabled={!image}
-                    loading={isImageUploading}
-                  >
-                    {isImageUploading ? "上传..." : "上传并保存"}
-                  </PrimaryButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/core/modals/link-modal.tsx b/apps/app/components/core/modals/link-modal.tsx
deleted file mode 100644
index bb8b2fa2844..00000000000
--- a/apps/app/components/core/modals/link-modal.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useEffect } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-// types
-import type { IIssueLink, linkDetails, ModuleLink } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data?: linkDetails | null;
-  status: boolean;
-  createIssueLink: (formData: IIssueLink | ModuleLink) => Promise<void>;
-  updateIssueLink: (formData: IIssueLink | ModuleLink, linkId: string) => Promise<void>;
-};
-
-const defaultValues: IIssueLink | ModuleLink = {
-  title: "",
-  url: "",
-};
-
-export const LinkModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  createIssueLink,
-  updateIssueLink,
-  status,
-  data,
-}) => {
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<ModuleLink>({
-    defaultValues,
-  });
-
-  const onClose = () => {
-    handleClose();
-    const timeout = setTimeout(() => {
-      reset(defaultValues);
-      clearTimeout(timeout);
-    }, 500);
-  };
-
-  const handleFormSubmit = async (formData: IIssueLink | ModuleLink) => {
-    if (!data) await createIssueLink({ title: formData.title, url: formData.url });
-    else await updateIssueLink({ title: formData.title, url: formData.url }, data.id);
-    onClose();
-  };
-
-  const handleCreateUpdatePage = async (formData: IIssueLink | ModuleLink) => {
-    await handleFormSubmit(formData);
-
-    reset({
-      ...defaultValues,
-    });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-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 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
-                  <div>
-                    <div className="space-y-5">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        {status ? "更新链接" : "添加链接"}
-                      </Dialog.Title>
-                      <div className="mt-2 space-y-3">
-                        <div>
-                          <Input
-                            id="url"
-                            label="网址"
-                            name="url"
-                            type="url"
-                            placeholder="https://..."
-                            autoComplete="off"
-                            error={errors.url}
-                            register={register}
-                            validations={{
-                              required: "网址是必填项",
-                            }}
-                          />
-                        </div>
-                        <div>
-                          <Input
-                            id="title"
-                            label="标题（可选）"
-                            name="title"
-                            type="text"
-                            placeholder="输入标题"
-                            autoComplete="off"
-                            error={errors.title}
-                            register={register}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>取消</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
-                      {status
-                        ? isSubmitting
-                          ? "更新链接..."
-                          : "更新链接"
-                        : isSubmitting
-                        ? "添加链接..."
-                        : "添加链接"}
-                    </PrimaryButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/core/reaction-selector.tsx b/apps/app/components/core/reaction-selector.tsx
deleted file mode 100644
index 06b4107854c..00000000000
--- a/apps/app/components/core/reaction-selector.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Fragment } from "react";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-
-// helper
-import { renderEmoji } from "helpers/emoji.helper";
-
-// icons
-import { Icon } from "components/ui";
-
-const reactionEmojis = [
-  "128077",
-  "128078",
-  "128516",
-  "128165",
-  "128533",
-  "129505",
-  "9992",
-  "128064",
-];
-
-interface Props {
-  size?: "sm" | "md" | "lg";
-  position?: "top" | "bottom";
-  value?: string | string[] | null;
-  onSelect: (emoji: string) => void;
-}
-
-export const ReactionSelector: React.FC<Props> = (props) => {
-  const { value, onSelect, position, size } = props;
-
-  return (
-    <Popover className="relative">
-      {({ open, close: closePopover }) => (
-        <>
-          <Popover.Button
-            className={`${
-              open ? "" : "text-opacity-90"
-            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
-          >
-            <span
-              className={`flex justify-center items-center rounded-md px-2 ${
-                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
-              }`}
-            >
-              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
-            </span>
-          </Popover.Button>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel
-              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
-                position === "top" ? "-top-12" : "-bottom-12"
-              }`}
-            >
-              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
-                <div className="flex gap-x-1">
-                  {reactionEmojis.map((emoji) => (
-                    <button
-                      key={emoji}
-                      type="button"
-                      onClick={() => {
-                        onSelect(emoji);
-                        closePopover();
-                      }}
-                      className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
-                    >
-                      {renderEmoji(emoji)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </Popover.Panel>
-          </Transition>
-        </>
-      )}
-    </Popover>
-  );
-};
diff --git a/apps/app/components/core/theme/theme-switch.tsx b/apps/app/components/core/theme/theme-switch.tsx
deleted file mode 100644
index 687998c259c..00000000000
--- a/apps/app/components/core/theme/theme-switch.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// next-themes
-import { useTheme } from "next-themes";
-// hooks
-import useUser from "hooks/use-user";
-// constants
-import { THEMES_OBJ } from "constants/themes";
-// ui
-import { CustomSelect } from "components/ui";
-// types
-import { ICustomTheme } from "types";
-import { unsetCustomCssVariables } from "helpers/theme.helper";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-type Props = {
-  setPreLoadedData: React.Dispatch<React.SetStateAction<ICustomTheme | null>>;
-  customThemeSelectorOptions: boolean;
-  setCustomThemeSelectorOptions: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const ThemeSwitch: React.FC<Props> = observer(
-  ({ setPreLoadedData, customThemeSelectorOptions, setCustomThemeSelectorOptions }) => {
-    const store: any = useMobxStore();
-
-    const { user, mutateUser } = useUser();
-    const { theme, setTheme } = useTheme();
-
-    const updateUserTheme = (newTheme: string) => {
-      if (!user) return;
-      setTheme(newTheme);
-      return store.user
-        .updateCurrentUserSettings({ theme: { ...user.theme, theme: newTheme } })
-        .then((response: any) => response)
-        .catch((error: any) => error);
-    };
-
-    const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
-
-    return (
-      <CustomSelect
-        value={theme}
-        label={
-          currentThemeObj ? (
-            <div className="flex items-center gap-2">
-              <div
-                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
-                style={{
-                  borderColor: currentThemeObj.icon.border,
-                }}
-              >
-                <div
-                  className="h-full w-1/2 rounded-l-full"
-                  style={{
-                    background: currentThemeObj.icon.color1,
-                  }}
-                />
-                <div
-                  className="h-full w-1/2 rounded-r-full border-l"
-                  style={{
-                    borderLeftColor: currentThemeObj.icon.border,
-                    background: currentThemeObj.icon.color2,
-                  }}
-                />
-              </div>
-              {currentThemeObj.label}
-            </div>
-          ) : (
-            "Select your theme"
-          )
-        }
-        onChange={({ value, type }: { value: string; type: string }) => {
-          if (value === "custom") {
-            if (user?.theme.palette) {
-              setPreLoadedData({
-                background: user.theme.background !== "" ? user.theme.background : "#0d101b",
-                text: user.theme.text !== "" ? user.theme.text : "#c5c5c5",
-                primary: user.theme.primary !== "" ? user.theme.primary : "#3f76ff",
-                sidebarBackground:
-                  user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
-                sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
-                darkPalette: false,
-                palette:
-                  user.theme.palette !== ",,,,"
-                    ? user.theme.palette
-                    : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-                theme: "custom",
-              });
-            }
-
-            if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
-          } else {
-            if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
-            unsetCustomCssVariables();
-          }
-
-          updateUserTheme(value);
-          document.documentElement.style.setProperty("--color-scheme", type);
-        }}
-        input
-        width="w-full"
-        position="right"
-      >
-        {THEMES_OBJ.map(({ value, label, type, icon }) => (
-          <CustomSelect.Option key={value} value={{ value, type }}>
-            <div className="flex items-center gap-2">
-              <div
-                className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
-                style={{
-                  borderColor: icon.border,
-                }}
-              >
-                <div
-                  className="h-full w-1/2 rounded-l-full"
-                  style={{
-                    background: icon.color1,
-                  }}
-                />
-                <div
-                  className="h-full w-1/2 rounded-r-full border-l"
-                  style={{
-                    borderLeftColor: icon.border,
-                    background: icon.color2,
-                  }}
-                />
-              </div>
-              {label}
-            </div>
-          </CustomSelect.Option>
-        ))}
-      </CustomSelect>
-    );
-  }
-);
diff --git a/apps/app/components/core/views/board-view/board-header.tsx b/apps/app/components/core/views/board-view/board-header.tsx
deleted file mode 100644
index d5b11f5f01d..00000000000
--- a/apps/app/components/core/views/board-view/board-header.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
-// hooks
-import useProjects from "hooks/use-projects";
-// component
-import { Avatar, Icon } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon, getStateGroupIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import { IIssueViewProps, IState } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  currentState?: IState | null;
-  groupTitle: string;
-  addIssueToGroup: () => void;
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  disableUserActions: boolean;
-  viewProps: IIssueViewProps;
-};
-
-export const BoardHeader: React.FC<Props> = ({
-  currentState,
-  groupTitle,
-  addIssueToGroup,
-  isCollapsed,
-  setIsCollapsed,
-  disableUserActions,
-  viewProps,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
-
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId && selectedGroup === "labels"
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && selectedGroup === "labels"
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
-      ? PROJECT_MEMBERS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
-      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { projects } = useProjects();
-
-  const getGroupTitle = () => {
-    let title = addSpaceIfCamelCase(groupTitle);
-
-    switch (selectedGroup) {
-      case "state":
-        title = addSpaceIfCamelCase(currentState?.name ?? "");
-        break;
-      case "labels":
-        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
-        break;
-      case "project":
-        title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member ? member.display_name : "None";
-
-        break;
-    }
-
-    return title;
-  };
-
-  const getGroupIcon = () => {
-    let icon;
-
-    switch (selectedGroup) {
-      case "state":
-        icon =
-          currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
-        break;
-      case "state_detail.group":
-        icon = getStateGroupIcon(groupTitle as any, "16", "16");
-        break;
-      case "priority":
-        icon = getPriorityIcon(groupTitle, "text-lg");
-        break;
-      case "project":
-        const project = projects?.find((p) => p.id === groupTitle);
-        icon =
-          project &&
-          (project.emoji !== null
-            ? renderEmoji(project.emoji)
-            : project.icon_prop !== null
-            ? renderEmoji(project.icon_prop)
-            : null);
-        break;
-      case "labels":
-        const labelColor =
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
-        icon = (
-          <span
-            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
-            style={{ backgroundColor: labelColor }}
-          />
-        );
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
-
-        break;
-    }
-
-    return icon;
-  };
-
-  return (
-    <div
-      className={`flex items-center justify-between px-1 ${
-        !isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
-      }`}
-    >
-      <div className={`flex items-center ${isCollapsed ? "gap-1" : "flex-col gap-2"}`}>
-        <div
-          className={`flex cursor-pointer items-center gap-x-2 max-w-[316px] ${
-            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
-          }`}
-        >
-          <span className="flex items-center">{getGroupIcon()}</span>
-          <h2
-            className={`text-lg font-semibold truncate ${
-              selectedGroup === "created_by" ? "" : "capitalize"
-            }`}
-            style={{
-              writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
-            }}
-          >
-            {getGroupTitle()}
-          </h2>
-          <span className={`${isCollapsed ? "ml-0.5" : ""} py-1 text-center text-sm`}>
-            {groupedIssues?.[groupTitle].length ?? 0}
-          </span>
-        </div>
-      </div>
-
-      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
-        <button
-          type="button"
-          className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
-          onClick={() => {
-            setIsCollapsed((prevData) => !prevData);
-          }}
-        >
-          {isCollapsed ? (
-            <Icon
-              iconName="close_fullscreen"
-              className="text-base font-medium text-custom-text-900"
-            />
-          ) : (
-            <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
-          )}
-        </button>
-        {!disableUserActions && selectedGroup !== "created_by" && (
-          <button
-            type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
-            onClick={addIssueToGroup}
-          >
-            <PlusIcon className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/core/views/board-view/index.ts b/apps/app/components/core/views/board-view/index.ts
deleted file mode 100644
index 6e5cdf8bf67..00000000000
--- a/apps/app/components/core/views/board-view/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./all-boards";
-export * from "./board-header";
-export * from "./single-board";
-export * from "./single-issue";
diff --git a/apps/app/components/core/views/board-view/single-issue.tsx b/apps/app/components/core/views/board-view/single-issue.tsx
deleted file mode 100644
index b676e809cea..00000000000
--- a/apps/app/components/core/views/board-view/single-issue.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import {
-  DraggableProvided,
-  DraggableStateSnapshot,
-  DraggingStyle,
-  NotDraggingStyle,
-} from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import {
-  ViewAssigneeSelect,
-  ViewDueDateSelect,
-  ViewEstimateSelect,
-  ViewIssueLabel,
-  ViewPrioritySelect,
-  ViewStartDateSelect,
-  ViewStateSelect,
-} from "components/issues";
-// ui
-import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
-// icons
-import {
-  ClipboardDocumentCheckIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  XMarkIcon,
-  ArrowTopRightOnSquareIcon,
-  PaperClipIcon,
-  EllipsisHorizontalIcon,
-} from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helpers
-import { handleIssuesMutation } from "constants/issue";
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, ISubIssueResponse, UserAuth } from "types";
-// fetch-keys
-import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  type?: string;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
-  issue: IIssue;
-  groupTitle?: string;
-  index: number;
-  editIssue: () => void;
-  makeIssueCopy: () => void;
-  removeIssue?: (() => void) | null;
-  handleDeleteIssue: (issue: IIssue) => void;
-  handleTrashBox: (isDragging: boolean) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleBoardIssue: React.FC<Props> = ({
-  type,
-  provided,
-  snapshot,
-  issue,
-  index,
-  editIssue,
-  makeIssueCopy,
-  removeIssue,
-  groupTitle,
-  handleDeleteIssue,
-  handleTrashBox,
-  disableUserActions,
-  user,
-  userAuth,
-  viewProps,
-}) => {
-  // context menu
-  const [contextMenu, setContextMenu] = useState(false);
-  const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
-
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  const [isDropdownActive, setIsDropdownActive] = useState(false);
-
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
-
-  const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) return;
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutateIssues(
-          (prevData: any) =>
-            handleIssuesMutation(
-              formData,
-              groupTitle ?? "",
-              selectedGroup,
-              index,
-              orderBy,
-              prevData
-            ),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
-
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
-    },
-    [
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      groupTitle,
-      index,
-      selectedGroup,
-      mutateIssues,
-      orderBy,
-      user,
-    ]
-  );
-
-  const getStyle = (
-    style: DraggingStyle | NotDraggingStyle | undefined,
-    snapshot: DraggableStateSnapshot
-  ) => {
-    if (orderBy === "sort_order") return style;
-    if (!snapshot.isDragging) return {};
-    if (!snapshot.isDropAnimating) return style;
-
-    return {
-      ...style,
-      transitionDuration: `0.001s`,
-    };
-  };
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-      setIsMenuActive(false);
-    });
-  };
-
-  useEffect(() => {
-    if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
-  }, [snapshot, handleTrashBox]);
-
-  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
-
-  return (
-    <>
-      <ContextMenu
-        clickEvent={contextMenuPosition}
-        title="Quick actions"
-        isOpen={contextMenu}
-        setIsOpen={setContextMenu}
-      >
-        {!isNotAllowed && (
-          <>
-            <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
-              Edit issue
-            </ContextMenu.Item>
-            <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
-              Make a copy...
-            </ContextMenu.Item>
-            <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
-              Delete issue
-            </ContextMenu.Item>
-          </>
-        )}
-        <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
-          Copy issue link
-        </ContextMenu.Item>
-        <a
-          href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-            Open issue in new tab
-          </ContextMenu.Item>
-        </a>
-      </ContextMenu>
-      <div
-        className={`mb-3 rounded bg-custom-background-100 shadow ${
-          snapshot.isDragging ? "border-2 border-custom-primary shadow-lg" : ""
-        }`}
-        ref={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-        style={getStyle(provided.draggableProps.style, snapshot)}
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu(true);
-          setContextMenuPosition(e);
-        }}
-      >
-        <div className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px]">
-          {!isNotAllowed && (
-            <div
-              ref={actionSectionRef}
-              className={`z-1 absolute top-1.5 right-1.5 hidden group-hover/card:!flex ${
-                isMenuActive ? "!flex" : ""
-              }`}
-            >
-              {type && !isNotAllowed && (
-                <CustomMenu
-                  customButton={
-                    <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-custom-background-80"
-                      onClick={() => setIsMenuActive(!isMenuActive)}
-                    >
-                      <EllipsisHorizontalIcon className="h-4 w-4" />
-                    </button>
-                  }
-                >
-                  <CustomMenu.MenuItem onClick={editIssue}>
-                    <div className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-4 w-4" />
-                      <span>Edit issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                  {type !== "issue" && removeIssue && (
-                    <CustomMenu.MenuItem onClick={removeIssue}>
-                      <div className="flex items-center justify-start gap-2">
-                        <XMarkIcon className="h-4 w-4" />
-                        <span>Remove from {type}</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                    <div className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <div className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-4 w-4" />
-                      <span>Copy issue Link</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              )}
-            </div>
-          )}
-          <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-            <a className="flex flex-col gap-1.5">
-              {properties.key && (
-                <div className="text-xs font-medium text-custom-text-200">
-                  {issue.project_detail.identifier}-{issue.sequence_id}
-                </div>
-              )}
-              <h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
-            </a>
-          </Link>
-          <div
-            className={`flex items-center gap-2 text-xs ${
-              isDropdownActive ? "" : "overflow-x-scroll"
-            }`}
-          >
-            {properties.priority && (
-              <ViewPrioritySelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
-            )}
-            {properties.state && (
-              <ViewStateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
-            )}
-            {properties.start_date && issue.start_date && (
-              <ViewStartDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                handleOnOpen={() => setIsDropdownActive(true)}
-                handleOnClose={() => setIsDropdownActive(false)}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.due_date && issue.target_date && (
-              <ViewDueDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                handleOnOpen={() => setIsDropdownActive(true)}
-                handleOnClose={() => setIsDropdownActive(false)}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.labels && issue.labels.length > 0 && (
-              <ViewIssueLabel issue={issue} maxRender={2} />
-            )}
-            {properties.assignee && (
-              <ViewAssigneeSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                customButton
-                user={user}
-                selfPositioned
-              />
-            )}
-            {properties.estimate && issue.estimate_point !== null && (
-              <ViewEstimateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
-            )}
-            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                    {issue.sub_issues_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.link && issue.link_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LinkIcon className="h-3.5 w-3.5" />
-                    {issue.link_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.attachment_count && issue.attachment_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                    {issue.attachment_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/core/views/calendar-view/calendar.tsx b/apps/app/components/core/views/calendar-view/calendar.tsx
deleted file mode 100644
index 5a8a07260b4..00000000000
--- a/apps/app/components/core/views/calendar-view/calendar.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
-// components
-import { SingleCalendarDate, CalendarHeader } from "components/core";
-// ui
-import { Spinner } from "components/ui";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
-import {
-  startOfWeek,
-  lastDayOfWeek,
-  eachDayOfInterval,
-  weekDayInterval,
-  formatDate,
-} from "helpers/calendar.helper";
-// types
-import { ICalendarRange, ICurrentUserResponse, IIssue, UserAuth } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-type Props = {
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  addIssueToDate: (date: string) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-};
-
-export const CalendarView: React.FC<Props> = ({
-  handleIssueAction,
-  addIssueToDate,
-  disableUserActions,
-  user,
-  userAuth,
-}) => {
-  const [showWeekEnds, setShowWeekEnds] = useState(false);
-  const [currentDate, setCurrentDate] = useState(new Date());
-  const [isMonthlyView, setIsMonthlyView] = useState(true);
-
-  const [calendarDates, setCalendarDates] = useState<ICalendarRange>({
-    startDate: startOfWeek(currentDate),
-    endDate: lastDayOfWeek(currentDate),
-  });
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const { calendarIssues, params, setCalendarDateRange } = useCalendarIssuesView();
-
-  const totalDate = eachDayOfInterval({
-    start: calendarDates.startDate,
-    end: calendarDates.endDate,
-  });
-
-  const onlyWeekDays = weekDayInterval({
-    start: calendarDates.startDate,
-    end: calendarDates.endDate,
-  });
-
-  const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
-
-  const currentViewDaysData = currentViewDays.map((date: Date) => {
-    const filterIssue =
-      calendarIssues.length > 0
-        ? calendarIssues.filter(
-            (issue) =>
-              issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
-          )
-        : [];
-    return {
-      date: renderDateFormat(date),
-      issues: filterIssue,
-    };
-  });
-
-  const weeks = ((date: Date[]) => {
-    const weeks = [];
-    if (showWeekEnds) {
-      for (let day = 0; day <= 6; day++) {
-        weeks.push(date[day]);
-      }
-    } else {
-      for (let day = 0; day <= 4; day++) {
-        weeks.push(date[day]);
-      }
-    }
-
-    return weeks;
-  })(currentViewDays);
-
-  const onDragEnd = (result: DropResult) => {
-    const { source, destination, draggableId } = result;
-
-    if (!destination || !workspaceSlug || !projectId) return;
-
-    if (source.droppableId === destination.droppableId) return;
-
-    const fetchKey = cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-      : moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : viewId
-      ? VIEW_ISSUES(viewId.toString(), params)
-      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-    mutate<IIssue[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((p) => {
-          if (p.id === draggableId)
-            return {
-              ...p,
-              target_date: destination.droppableId,
-            };
-
-          return p;
-        }),
-      false
-    );
-
-    issuesService
-      .patchIssue(
-        workspaceSlug as string,
-        projectId as string,
-        draggableId,
-        {
-          target_date: destination?.droppableId,
-        },
-        user
-      )
-      .then(() => mutate(fetchKey));
-  };
-
-  const changeDateRange = (startDate: Date, endDate: Date) => {
-    setCalendarDates({
-      startDate,
-      endDate,
-    });
-
-    setCalendarDateRange(
-      `${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`
-    );
-  };
-
-  useEffect(() => {
-    setCalendarDateRange(
-      `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
-        lastDayOfWeek(currentDate)
-      )};before`
-    );
-  }, [currentDate]);
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
-
-  return calendarIssues ? (
-    <div className="h-full overflow-y-auto">
-      <DragDropContext onDragEnd={onDragEnd}>
-        <div className="h-full rounded-lg p-8 text-custom-text-200">
-          <CalendarHeader
-            isMonthlyView={isMonthlyView}
-            setIsMonthlyView={setIsMonthlyView}
-            showWeekEnds={showWeekEnds}
-            setShowWeekEnds={setShowWeekEnds}
-            currentDate={currentDate}
-            setCurrentDate={setCurrentDate}
-            changeDateRange={changeDateRange}
-          />
-
-          <div
-            className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
-              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-            }`}
-          >
-            {weeks.map((date, index) => (
-              <div
-                key={index}
-                className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
-                  !isMonthlyView
-                    ? showWeekEnds
-                      ? (index + 1) % 7 === 0
-                        ? ""
-                        : "border-r"
-                      : (index + 1) % 5 === 0
-                      ? ""
-                      : "border-r"
-                    : ""
-                }`}
-              >
-                <span>
-                  {isMonthlyView
-                    ? formatDate(date, "eee").substring(0, 3)
-                    : formatDate(date, "eee")}
-                </span>
-                {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
-              </div>
-            ))}
-          </div>
-
-          <div
-            className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
-              showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-            } `}
-          >
-            {currentViewDaysData.map((date, index) => (
-              <SingleCalendarDate
-                key={`${date}-${index}`}
-                index={index}
-                date={date}
-                handleIssueAction={handleIssueAction}
-                addIssueToDate={addIssueToDate}
-                isMonthlyView={isMonthlyView}
-                showWeekEnds={showWeekEnds}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            ))}
-          </div>
-        </div>
-      </DragDropContext>
-    </div>
-  ) : (
-    <div className="flex h-full w-full items-center justify-center">
-      <Spinner />
-    </div>
-  );
-};
diff --git a/apps/app/components/core/views/calendar-view/index.ts b/apps/app/components/core/views/calendar-view/index.ts
deleted file mode 100644
index 625ff1fb4b1..00000000000
--- a/apps/app/components/core/views/calendar-view/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./calendar-header";
-export * from "./calendar";
-export * from "./single-date";
-export * from "./single-issue";
diff --git a/apps/app/components/core/views/calendar-view/single-issue.tsx b/apps/app/components/core/views/calendar-view/single-issue.tsx
deleted file mode 100644
index f6c1cc2f734..00000000000
--- a/apps/app/components/core/views/calendar-view/single-issue.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import React, { useCallback } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
-import useIssuesProperties from "hooks/use-issue-properties";
-import useToast from "hooks/use-toast";
-// components
-import { CustomMenu, Tooltip } from "components/ui";
-import {
-  ViewAssigneeSelect,
-  ViewDueDateSelect,
-  ViewEstimateSelect,
-  ViewLabelSelect,
-  ViewPrioritySelect,
-  ViewStartDateSelect,
-  ViewStateSelect,
-} from "components/issues";
-// icons
-import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helper
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// type
-import { ICurrentUserResponse, IIssue, ISubIssueResponse } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-type Props = {
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  index: number;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
-  issue: IIssue;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SingleCalendarIssue: React.FC<Props> = ({
-  handleEditIssue,
-  handleDeleteIssue,
-  index,
-  provided,
-  snapshot,
-  issue,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { params } = useCalendarIssuesView();
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !projectId) return;
-
-      const fetchKey = cycleId
-        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-        : moduleId
-        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-        : viewId
-        ? VIEW_ISSUES(viewId.toString(), params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutate<IIssue[]>(
-          fetchKey,
-          (prevData) =>
-            (prevData ?? []).map((p) => {
-              if (p.id === issue.id) {
-                return {
-                  ...p,
-                  ...formData,
-                  assignees: formData?.assignees_list ?? p.assignees,
-                };
-              }
-
-              return p;
-            }),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          issue.id as string,
-          formData,
-          user
-        )
-        .then(() => {
-          mutate(fetchKey);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const displayProperties = properties
-    ? Object.values(properties).some((value) => value === true)
-    : false;
-
-  return (
-    <div
-      key={index}
-      ref={provided.innerRef}
-      {...provided.draggableProps}
-      {...provided.dragHandleProps}
-      className={`w-full relative cursor-pointer rounded border border-custom-border-200 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
-        snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
-      }`}
-    >
-      <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
-        {!isNotAllowed && (
-          <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem onClick={() => handleEditIssue(issue)}>
-                <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-4 w-4" />
-                  <span>Edit issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                <div className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
-                  <span>Delete issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <div className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-4 w-4" />
-                  <span>Copy issue Link</span>
-                </div>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
-          </div>
-        )}
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5">
-            {properties.key && (
-              <Tooltip
-                tooltipHeading="Issue ID"
-                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-              >
-                <span className="flex-shrink-0 text-xs text-custom-text-200">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              </Tooltip>
-            )}
-            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
-            </Tooltip>
-          </a>
-        </Link>
-        {displayProperties && (
-          <div className="relative mt-1.5 w-full flex flex-wrap items-center gap-2 text-xs">
-            {properties.priority && (
-              <ViewPrioritySelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.state && (
-              <ViewStateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                className="max-w-full"
-                isNotAllowed={isNotAllowed}
-                user={user}
-              />
-            )}
-            {properties.start_date && issue.start_date && (
-              <ViewStartDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.due_date && issue.target_date && (
-              <ViewDueDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.labels && issue.labels.length > 0 && (
-              <ViewLabelSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.assignee && (
-              <ViewAssigneeSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.estimate && issue.estimate_point !== null && (
-              <ViewEstimateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                    {issue.sub_issues_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.link && issue.link_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LinkIcon className="h-3.5 w-3.5" />
-                    {issue.link_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.attachment_count && issue.attachment_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                    {issue.attachment_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/core/views/gantt-chart-view/index.tsx b/apps/app/components/core/views/gantt-chart-view/index.tsx
deleted file mode 100644
index a881cb7aaed..00000000000
--- a/apps/app/components/core/views/gantt-chart-view/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useRouter } from "next/router";
-
-// components
-import { CycleIssuesGanttChartView } from "components/cycles";
-import { IssueGanttChartView } from "components/issues";
-import { ModuleIssuesGanttChartView } from "components/modules";
-import { ViewIssuesGanttChartView } from "components/views";
-
-export const GanttChartView = () => {
-  const router = useRouter();
-  const { cycleId, moduleId, viewId } = router.query;
-
-  return (
-    <>
-      {cycleId ? (
-        <CycleIssuesGanttChartView />
-      ) : moduleId ? (
-        <ModuleIssuesGanttChartView />
-      ) : viewId ? (
-        <ViewIssuesGanttChartView />
-      ) : (
-        <IssueGanttChartView />
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/core/views/index.ts b/apps/app/components/core/views/index.ts
deleted file mode 100644
index 8b2dc87cbf2..00000000000
--- a/apps/app/components/core/views/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./board-view";
-export * from "./calendar-view";
-export * from "./gantt-chart-view";
-export * from "./list-view";
-export * from "./spreadsheet-view";
-export * from "./all-views";
-export * from "./issues-view";
diff --git a/apps/app/components/core/views/list-view/all-lists.tsx b/apps/app/components/core/views/list-view/all-lists.tsx
deleted file mode 100644
index 64cbebdcd14..00000000000
--- a/apps/app/components/core/views/list-view/all-lists.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// components
-import { SingleList } from "components/core/views/list-view/single-list";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
-
-// types
-type Props = {
-  states: IState[] | undefined;
-  addIssueToGroup: (groupTitle: string) => void;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  openIssuesListModal?: (() => void) | null;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const AllLists: React.FC<Props> = ({
-  addIssueToGroup,
-  handleIssueAction,
-  disableUserActions,
-  openIssuesListModal,
-  removeIssue,
-  states,
-  user,
-  userAuth,
-  viewProps,
-}) => {
-  const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
-
-  return (
-    <>
-      {groupedIssues && (
-        <div className="h-full overflow-y-auto">
-          {Object.keys(groupedIssues).map((singleGroup) => {
-            const currentState =
-              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
-
-            if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
-
-            return (
-              <SingleList
-                key={singleGroup}
-                groupTitle={singleGroup}
-                currentState={currentState}
-                addIssueToGroup={() => addIssueToGroup(singleGroup)}
-                handleIssueAction={handleIssueAction}
-                openIssuesListModal={openIssuesListModal}
-                removeIssue={removeIssue}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={userAuth}
-                viewProps={viewProps}
-              />
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/core/views/list-view/index.ts b/apps/app/components/core/views/list-view/index.ts
deleted file mode 100644
index c515ed1c247..00000000000
--- a/apps/app/components/core/views/list-view/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./all-lists";
-export * from "./single-issue";
-export * from "./single-list";
diff --git a/apps/app/components/core/views/list-view/single-issue.tsx b/apps/app/components/core/views/list-view/single-issue.tsx
deleted file mode 100644
index eafe74612e1..00000000000
--- a/apps/app/components/core/views/list-view/single-issue.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import {
-  ViewAssigneeSelect,
-  ViewDueDateSelect,
-  ViewEstimateSelect,
-  ViewIssueLabel,
-  ViewPrioritySelect,
-  ViewStartDateSelect,
-  ViewStateSelect,
-} from "components/issues";
-// ui
-import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
-// icons
-import {
-  ClipboardDocumentCheckIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  XMarkIcon,
-  ArrowTopRightOnSquareIcon,
-  PaperClipIcon,
-} from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { handleIssuesMutation } from "constants/issue";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, ISubIssueResponse, UserAuth } from "types";
-// fetch-keys
-import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  type?: string;
-  issue: IIssue;
-  groupTitle?: string;
-  editIssue: () => void;
-  index: number;
-  makeIssueCopy: () => void;
-  removeIssue?: (() => void) | null;
-  handleDeleteIssue: (issue: IIssue) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleListIssue: React.FC<Props> = ({
-  type,
-  issue,
-  editIssue,
-  index,
-  makeIssueCopy,
-  removeIssue,
-  groupTitle,
-  handleDeleteIssue,
-  disableUserActions,
-  user,
-  userAuth,
-  viewProps,
-}) => {
-  // context menu
-  const [contextMenu, setContextMenu] = useState(false);
-  const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-
-  const { setToastAlert } = useToast();
-
-  const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) return;
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutateIssues(
-          (prevData: any) =>
-            handleIssuesMutation(
-              formData,
-              groupTitle ?? "",
-              selectedGroup,
-              index,
-              orderBy,
-              prevData
-            ),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
-
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
-    },
-    [
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      groupTitle,
-      index,
-      selectedGroup,
-      mutateIssues,
-      orderBy,
-      user,
-    ]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const issuePath = isArchivedIssues
-    ? `/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`
-    : `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`;
-
-  const isNotAllowed =
-    userAuth.isGuest || userAuth.isViewer || disableUserActions || isArchivedIssues;
-
-  return (
-    <>
-      <ContextMenu
-        clickEvent={contextMenuPosition}
-        title="Quick actions"
-        isOpen={contextMenu}
-        setIsOpen={setContextMenu}
-      >
-        {!isNotAllowed && (
-          <>
-            <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
-              Edit issue
-            </ContextMenu.Item>
-            <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
-              Make a copy...
-            </ContextMenu.Item>
-            <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
-              Delete issue
-            </ContextMenu.Item>
-          </>
-        )}
-        <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
-          Copy issue link
-        </ContextMenu.Item>
-        <a href={issuePath} target="_blank" rel="noreferrer noopener">
-          <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-            Open issue in new tab
-          </ContextMenu.Item>
-        </a>
-      </ContextMenu>
-      <div
-        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0"
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu(true);
-          setContextMenuPosition(e);
-        }}
-      >
-        <div className="flex-grow cursor-pointer min-w-[200px] whitespace-nowrap overflow-hidden overflow-ellipsis">
-          <Link href={issuePath}>
-            <a className="group relative flex items-center gap-2">
-              {properties.key && (
-                <Tooltip
-                  tooltipHeading="Issue ID"
-                  tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-                >
-                  <span className="flex-shrink-0 text-xs text-custom-text-200">
-                    {issue.project_detail?.identifier}-{issue.sequence_id}
-                  </span>
-                </Tooltip>
-              )}
-              <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="truncate text-[0.825rem] text-custom-text-100">{issue.name}</span>
-              </Tooltip>
-            </a>
-          </Link>
-        </div>
-
-        <div
-          className={`flex flex-shrink-0 items-center gap-2 text-xs ${
-            isArchivedIssues ? "opacity-60" : ""
-          }`}
-        >
-          {properties.priority && (
-            <ViewPrioritySelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.state && (
-            <ViewStateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.start_date && issue.start_date && (
-            <ViewStartDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.due_date && issue.target_date && (
-            <ViewDueDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.labels && <ViewIssueLabel issue={issue} maxRender={3} />}
-          {properties.assignee && (
-            <ViewAssigneeSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.estimate && issue.estimate_point !== null && (
-            <ViewEstimateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                  {issue.sub_issues_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.link && issue.link_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LinkIcon className="h-3.5 w-3.5" />
-                  {issue.link_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.attachment_count && issue.attachment_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                  {issue.attachment_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {type && !isNotAllowed && (
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem onClick={editIssue}>
-                <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-4 w-4" />
-                  <span>Edit issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              {type !== "issue" && removeIssue && (
-                <CustomMenu.MenuItem onClick={removeIssue}>
-                  <div className="flex items-center justify-start gap-2">
-                    <XMarkIcon className="h-4 w-4" />
-                    <span>Remove from {type}</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                <div className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
-                  <span>Delete issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <div className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-4 w-4" />
-                  <span>Copy issue link</span>
-                </div>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/core/views/spreadsheet-view/index.ts b/apps/app/components/core/views/spreadsheet-view/index.ts
deleted file mode 100644
index 7729d5e9353..00000000000
--- a/apps/app/components/core/views/spreadsheet-view/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./spreadsheet-view";
-export * from "./single-issue";
-export * from "./spreadsheet-columns";
-export * from "./spreadsheet-issues";
diff --git a/apps/app/components/core/views/spreadsheet-view/spreadsheet-issues.tsx b/apps/app/components/core/views/spreadsheet-view/spreadsheet-issues.tsx
deleted file mode 100644
index 6677e884976..00000000000
--- a/apps/app/components/core/views/spreadsheet-view/spreadsheet-issues.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useState } from "react";
-
-// components
-import { SingleSpreadsheetIssue } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
-
-type Props = {
-  issue: IIssue;
-  index: number;
-  expandedIssues: string[];
-  setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
-  properties: Properties;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  gridTemplateColumns: string;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  nestingLevel?: number;
-};
-
-export const SpreadsheetIssues: React.FC<Props> = ({
-  index,
-  issue,
-  expandedIssues,
-  setExpandedIssues,
-  gridTemplateColumns,
-  properties,
-  handleIssueAction,
-  disableUserActions,
-  user,
-  userAuth,
-  nestingLevel = 0,
-}) => {
-  const handleToggleExpand = (issueId: string) => {
-    setExpandedIssues((prevState) => {
-      const newArray = [...prevState];
-      const index = newArray.indexOf(issueId);
-      if (index > -1) {
-        newArray.splice(index, 1);
-      } else {
-        newArray.push(issueId);
-      }
-      return newArray;
-    });
-  };
-
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.id, isExpanded);
-
-  return (
-    <div>
-      <SingleSpreadsheetIssue
-        issue={issue}
-        index={index}
-        expanded={isExpanded}
-        handleToggleExpand={handleToggleExpand}
-        gridTemplateColumns={gridTemplateColumns}
-        properties={properties}
-        handleEditIssue={() => handleIssueAction(issue, "edit")}
-        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-        disableUserActions={disableUserActions}
-        user={user}
-        userAuth={userAuth}
-        nestingLevel={nestingLevel}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetIssues
-            key={subIssue.id}
-            issue={subIssue}
-            index={index}
-            expandedIssues={expandedIssues}
-            setExpandedIssues={setExpandedIssues}
-            gridTemplateColumns={gridTemplateColumns}
-            properties={properties}
-            handleIssueAction={handleIssueAction}
-            disableUserActions={disableUserActions}
-            user={user}
-            userAuth={userAuth}
-            nestingLevel={nestingLevel + 1}
-          />
-        ))}
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
deleted file mode 100644
index bec200bd959..00000000000
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ /dev/null
@@ -1,589 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { LinearProgressIndicator, Loader, Tooltip } from "components/ui";
-import { AssigneesList } from "components/ui/avatar";
-import { SingleProgressStats } from "components/core";
-// components
-import ProgressChart from "components/core/sidebar/progress-chart";
-import { ActiveCycleProgressStats } from "components/cycles";
-
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { getPriorityIcon } from "components/icons/priority-icon";
-import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-  LayerDiagonalIcon,
-  CompletedStateIcon,
-} from "components/icons";
-import { StarIcon } from "@heroicons/react/24/outline";
-// helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
-import { truncateText } from "helpers/string.helper";
-// types
-import { ICycle, IIssue } from "types";
-// fetch-keys
-import { CURRENT_CYCLE_LIST, CYCLES_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
-
-export const ActiveCycleDetails: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { data: currentCycle } = useSWR(
-    workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
-      : null
-  );
-  const cycle = currentCycle ? currentCycle[0] : null;
-
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId && cycle?.id
-      ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" })
-      : null,
-    workspaceSlug && projectId && cycle?.id
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycle.id,
-            { priority: "urgent,high" }
-          )
-      : null
-  ) as { data: IIssue[] | undefined };
-
-  if (!currentCycle)
-    return (
-      <Loader>
-        <Loader.Item height="250px" />
-      </Loader>
-    );
-
-  if (!cycle)
-    return (
-      <div className="h-full grid place-items-center text-center">
-        <div className="space-y-2">
-          <div className="mx-auto flex justify-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="66"
-              height="66"
-              viewBox="0 0 66 66"
-              fill="none"
-            >
-              <circle
-                cx="34.375"
-                cy="34.375"
-                r="22"
-                stroke="rgb(var(--color-text-400))"
-                stroke-linecap="round"
-              />
-              <path
-                d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
-                fill="rgb(var(--color-text-400))"
-              />
-            </svg>
-          </div>
-          <h4 className="text-sm text-custom-text-200">No active cycle</h4>
-          <button
-            type="button"
-            className="text-custom-primary-100 text-sm outline-none"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "q",
-              });
-              document.dispatchEvent(e);
-            }}
-          >
-            Create a new cycle
-          </button>
-        </div>
-      </div>
-    );
-
-  const endDate = new Date(cycle.end_date ?? "");
-  const startDate = new Date(cycle.start_date ?? "");
-
-  const groupedIssues: any = {
-    backlog: cycle.backlog_issues,
-    unstarted: cycle.unstarted_issues,
-    started: cycle.started_issues,
-    completed: cycle.completed_issues,
-    cancelled: cycle.cancelled_issues,
-  };
-
-  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
-
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
-        cycle: cycle.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !projectId || !cycle) return;
-
-    mutate<ICycle[]>(
-      CURRENT_CYCLE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the cycle from favorites. Please try again.",
-        });
-      });
-  };
-
-  const progressIndicatorData = stateGroups.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value:
-      cycle.total_issues > 0
-        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-        : 0,
-    color: group.color,
-  }));
-
-  return (
-    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-200">
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
-        <div className="flex flex-col text-xs">
-          <div className="h-full w-full">
-            <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
-              <div className="flex items-center justify-between gap-1">
-                <span className="flex items-center gap-1">
-                  <span className="h-5 w-5">
-                    <ContrastIcon
-                      className="h-5 w-5"
-                      color={`${
-                        cycleStatus === "current"
-                          ? "#09A953"
-                          : cycleStatus === "upcoming"
-                          ? "#F7AE59"
-                          : cycleStatus === "completed"
-                          ? "#3F76FF"
-                          : cycleStatus === "draft"
-                          ? "rgb(var(--color-text-200))"
-                          : ""
-                      }`}
-                    />
-                  </span>
-                  <Tooltip tooltipContent={cycle.name} position="top-left">
-                    <h3 className="break-words text-lg font-semibold">
-                      {truncateText(cycle.name, 70)}
-                    </h3>
-                  </Tooltip>
-                </span>
-                <span className="flex items-center gap-1 capitalize">
-                  <span
-                    className={`rounded-full px-1.5 py-0.5
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClockIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        {cycle.total_issues - cycle.completed_issues > 0 && (
-                          <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
-                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
-                            }`}
-                          >
-                            <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
-                            </span>
-                          </Tooltip>
-                        )}{" "}
-                        Completed
-                      </span>
-                    ) : (
-                      cycleStatus
-                    )}
-                  </span>
-                  {cycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )}
-                </span>
-              </div>
-
-              <div className="flex items-center justify-start gap-5 text-custom-text-200">
-                <div className="flex items-start gap-1">
-                  <CalendarDaysIcon className="h-4 w-4" />
-                  <span>{renderShortDateWithYearFormat(startDate)}</span>
-                </div>
-                <ArrowRightIcon className="h-4 w-4 text-custom-text-200" />
-                <div className="flex items-start gap-1">
-                  <TargetIcon className="h-4 w-4" />
-                  <span>{renderShortDateWithYearFormat(endDate)}</span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2.5 text-custom-text-200">
-                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                    <img
-                      src={cycle.owned_by.avatar}
-                      height={16}
-                      width={16}
-                      className="rounded-full"
-                      alt={cycle.owned_by.display_name}
-                    />
-                  ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
-                      {cycle.owned_by.display_name.charAt(0)}
-                    </span>
-                  )}
-                  <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
-                </div>
-
-                {cycle.assignees.length > 0 && (
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <AssigneesList users={cycle.assignees} length={4} />
-                  </div>
-                )}
-              </div>
-
-              <div className="flex items-center gap-4 text-custom-text-200">
-                <div className="flex gap-2">
-                  <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
-                  {cycle.total_issues} issues
-                </div>
-                <div className="flex gap-2">
-                  <CompletedStateIcon width={16} height={16} color="#438AF3" />
-                  {cycle.completed_issues} issues
-                </div>
-              </div>
-
-              <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-                <a className="bg-custom-primary text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-custom-primary/90">
-                  View Cycle
-                </a>
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-200 md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-60 flex-col border-custom-border-200">
-            <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
-              <div className="flex w-full items-center gap-2 py-1">
-                <span>Progress</span>
-                <LinearProgressIndicator data={progressIndicatorData} />
-              </div>
-              <div className="flex flex-col mt-2 gap-1 items-center">
-                {Object.keys(groupedIssues).map((group, index) => (
-                  <SingleProgressStats
-                    key={index}
-                    title={
-                      <div className="flex items-center gap-2">
-                        <span
-                          className="block h-3 w-3 rounded-full "
-                          style={{
-                            backgroundColor: stateGroups[index].color,
-                          }}
-                        />
-                        <span className="text-xs capitalize">{group}</span>
-                      </div>
-                    }
-                    completed={groupedIssues[group]}
-                    total={cycle.total_issues}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-          <div className="border-custom-border-200 h-60 overflow-y-scroll">
-            <ActiveCycleProgressStats cycle={cycle} />
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
-        <div className="flex flex-col justify-between p-4">
-          <div>
-            <div className="text-custom-primary">High Priority Issues</div>
-            <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
-              {issues ? (
-                issues.length > 0 ? (
-                  issues.map((issue) => (
-                    <div
-                      key={issue.id}
-                      className="flex flex-wrap rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
-                    >
-                      <div className="flex flex-col gap-1">
-                        <div>
-                          <Tooltip
-                            tooltipHeading="Issue ID"
-                            tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-                          >
-                            <span className="flex-shrink-0 text-xs text-custom-text-200">
-                              {issue.project_detail?.identifier}-{issue.sequence_id}
-                            </span>
-                          </Tooltip>
-                        </div>
-                        <Tooltip
-                          position="top-left"
-                          tooltipHeading="Title"
-                          tooltipContent={issue.name}
-                        >
-                          <span className="text-[0.825rem] text-custom-text-100">
-                            {truncateText(issue.name, 30)}
-                          </span>
-                        </Tooltip>
-                      </div>
-                      <div className="flex items-center gap-1.5">
-                        <div
-                          className={`grid h-6 w-6 place-items-center items-center rounded border shadow-sm flex-shrink-0 ${
-                            issue.priority === "urgent"
-                              ? "border-red-500/20 bg-red-500/20 text-red-500"
-                              : "border-orange-500/20 bg-orange-500/20 text-orange-500"
-                          }`}
-                        >
-                          {getPriorityIcon(issue.priority, "text-sm")}
-                        </div>
-                        {issue.label_details.length > 0 ? (
-                          <div className="flex flex-wrap gap-1">
-                            {issue.label_details.map((label) => (
-                              <span
-                                key={label.id}
-                                className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs text-custom-text-200"
-                              >
-                                <span
-                                  className="h-1.5 w-1.5  rounded-full"
-                                  style={{
-                                    backgroundColor:
-                                      label?.color && label.color !== "" ? label.color : "#000",
-                                  }}
-                                />
-                                {label.name}
-                              </span>
-                            ))}
-                          </div>
-                        ) : (
-                          ""
-                        )}
-                        <div className={`flex items-center gap-2 text-custom-text-200`}>
-                          {issue.assignees &&
-                          issue.assignees.length > 0 &&
-                          Array.isArray(issue.assignees) ? (
-                            <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AssigneesList
-                                users={issue.assignee_details}
-                                length={3}
-                                showLength={false}
-                              />
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  <div className="grid place-items-center text-custom-text-200 text-sm text-center">
-                    No issues present in the cycle.
-                  </div>
-                )
-              ) : (
-                <Loader className="space-y-3">
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                </Loader>
-              )}
-            </div>
-          </div>
-
-          {issues && issues.length > 0 && (
-            <div className="flex items-center justify-between gap-2">
-              <div className="h-1 w-full rounded-full bg-custom-background-80">
-                <div
-                  className="h-1 rounded-full bg-green-600"
-                  style={{
-                    width:
-                      issues &&
-                      `${
-                        (issues.filter((issue) => issue?.state_detail?.group === "completed")
-                          ?.length /
-                          issues.length) *
-                          100 ?? 0
-                      }%`,
-                  }}
-                />
-              </div>
-              <div className="w-16 text-end text-xs text-custom-text-200">
-                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "}
-                {issues?.length}
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col justify-between border-custom-border-200 p-4">
-          <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
-            <div className="flex items-center gap-3 text-custom-text-100">
-              <div className="flex items-center justify-center gap-1">
-                <span className="h-2.5 w-2.5 rounded-full bg-[#a9bbd0]" />
-                <span>Ideal</span>
-              </div>
-              <div className="flex items-center justify-center gap-1">
-                <span className="h-2.5 w-2.5 rounded-full bg-[#4c8fff]" />
-                <span>Current</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-1">
-              <span>
-                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
-              </span>
-              <span>
-                Pending Issues -{" "}
-                {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}
-              </span>
-            </div>
-          </div>
-          <div className="relative h-64">
-            <ProgressChart
-              distribution={cycle.distribution.completion_chart}
-              startDate={cycle.start_date ?? ""}
-              endDate={cycle.end_date ?? ""}
-              totalIssues={cycle.total_issues}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/cycles-list/all-cycles-list.tsx b/apps/app/components/cycles/cycles-list/all-cycles-list.tsx
deleted file mode 100644
index 26bf0799c36..00000000000
--- a/apps/app/components/cycles/cycles-list/all-cycles-list.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const AllCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: allCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "all")
-      : null
-  );
-
-  return <CyclesView cycles={allCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/apps/app/components/cycles/cycles-list/completed-cycles-list.tsx b/apps/app/components/cycles/cycles-list/completed-cycles-list.tsx
deleted file mode 100644
index 552596d931d..00000000000
--- a/apps/app/components/cycles/cycles-list/completed-cycles-list.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { COMPLETED_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const CompletedCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: completedCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? COMPLETED_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            "completed"
-          )
-      : null
-  );
-
-  return <CyclesView cycles={completedCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/apps/app/components/cycles/cycles-list/draft-cycles-list.tsx b/apps/app/components/cycles/cycles-list/draft-cycles-list.tsx
deleted file mode 100644
index 05815dc9c6c..00000000000
--- a/apps/app/components/cycles/cycles-list/draft-cycles-list.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { DRAFT_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const DraftCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: draftCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? DRAFT_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "draft")
-      : null
-  );
-
-  return <CyclesView cycles={draftCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/apps/app/components/cycles/cycles-list/index.ts b/apps/app/components/cycles/cycles-list/index.ts
deleted file mode 100644
index b4b4fdfb524..00000000000
--- a/apps/app/components/cycles/cycles-list/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./all-cycles-list";
-export * from "./completed-cycles-list";
-export * from "./draft-cycles-list";
-export * from "./upcoming-cycles-list";
diff --git a/apps/app/components/cycles/cycles-list/upcoming-cycles-list.tsx b/apps/app/components/cycles/cycles-list/upcoming-cycles-list.tsx
deleted file mode 100644
index eba212af242..00000000000
--- a/apps/app/components/cycles/cycles-list/upcoming-cycles-list.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { UPCOMING_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const UpcomingCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: upcomingCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? UPCOMING_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            "upcoming"
-          )
-      : null
-  );
-
-  return <CyclesView cycles={upcomingCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
deleted file mode 100644
index 6e07d896e11..00000000000
--- a/apps/app/components/cycles/cycles-view.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { KeyedMutator, mutate } from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-import useLocalStorage from "hooks/use-local-storage";
-// components
-import {
-  CreateUpdateCycleModal,
-  CyclesListGanttChartView,
-  DeleteCycleModal,
-  SingleCycleCard,
-  SingleCycleList,
-} from "components/cycles";
-// ui
-import { Loader } from "components/ui";
-// helpers
-import { getDateRangeStatus } from "helpers/date-time.helper";
-// types
-import { ICycle } from "types";
-// fetch-keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
-
-type Props = {
-  cycles: ICycle[] | undefined;
-  mutateCycles: KeyedMutator<ICycle[]>;
-  viewType: string | null;
-};
-
-export const CyclesView: React.FC<Props> = ({ cycles, mutateCycles, viewType }) => {
-  const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
-  const [selectedCycleToUpdate, setSelectedCycleToUpdate] = useState<ICycle | null>(null);
-
-  const [deleteCycleModal, setDeleteCycleModal] = useState(false);
-  const [selectedCycleToDelete, setSelectedCycleToDelete] = useState<ICycle | null>(null);
-
-  const { storedValue: cycleTab } = useLocalStorage("cycleTab", "All");
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-  const { setToastAlert } = useToast();
-
-  const handleEditCycle = (cycle: ICycle) => {
-    setSelectedCycleToUpdate(cycle);
-    setCreateUpdateCycleModal(true);
-  };
-
-  const handleDeleteCycle = (cycle: ICycle) => {
-    setSelectedCycleToDelete(cycle);
-    setDeleteCycleModal(true);
-  };
-
-  const handleAddToFavorites = (cycle: ICycle) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
-    const fetchKey =
-      cycleStatus === "current"
-        ? CURRENT_CYCLE_LIST(projectId as string)
-        : cycleStatus === "upcoming"
-        ? UPCOMING_CYCLES_LIST(projectId as string)
-        : cycleStatus === "completed"
-        ? COMPLETED_CYCLES_LIST(projectId as string)
-        : DRAFT_CYCLES_LIST(projectId as string);
-
-    mutate<ICycle[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
-        cycle: cycle.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = (cycle: ICycle) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
-    const fetchKey =
-      cycleStatus === "current"
-        ? CURRENT_CYCLE_LIST(projectId as string)
-        : cycleStatus === "upcoming"
-        ? UPCOMING_CYCLES_LIST(projectId as string)
-        : cycleStatus === "completed"
-        ? COMPLETED_CYCLES_LIST(projectId as string)
-        : DRAFT_CYCLES_LIST(projectId as string);
-
-    mutate<ICycle[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the cycle from favorites. Please try again.",
-        });
-      });
-  };
-
-  return (
-    <>
-      <CreateUpdateCycleModal
-        isOpen={createUpdateCycleModal}
-        handleClose={() => setCreateUpdateCycleModal(false)}
-        data={selectedCycleToUpdate}
-        user={user}
-      />
-      <DeleteCycleModal
-        isOpen={deleteCycleModal}
-        setIsOpen={setDeleteCycleModal}
-        data={selectedCycleToDelete}
-        user={user}
-      />
-      {cycles ? (
-        cycles.length > 0 ? (
-          viewType === "list" ? (
-            <div className="divide-y divide-custom-border-200">
-              {cycles.map((cycle) => (
-                <div className="hover:bg-custom-background-80">
-                  <div className="flex flex-col border-custom-border-200">
-                    <SingleCycleList
-                      key={cycle.id}
-                      cycle={cycle}
-                      handleDeleteCycle={() => handleDeleteCycle(cycle)}
-                      handleEditCycle={() => handleEditCycle(cycle)}
-                      handleAddToFavorites={() => handleAddToFavorites(cycle)}
-                      handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : viewType === "board" ? (
-            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
-              {cycles.map((cycle) => (
-                <SingleCycleCard
-                  key={cycle.id}
-                  cycle={cycle}
-                  handleDeleteCycle={() => handleDeleteCycle(cycle)}
-                  handleEditCycle={() => handleEditCycle(cycle)}
-                  handleAddToFavorites={() => handleAddToFavorites(cycle)}
-                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
-                />
-              ))}
-            </div>
-          ) : (
-            <CyclesListGanttChartView cycles={cycles ?? []} mutateCycles={mutateCycles} />
-          )
-        ) : (
-          <div className="h-full grid place-items-center text-center">
-            <div className="space-y-2">
-              <div className="mx-auto flex justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="66"
-                  height="66"
-                  viewBox="0 0 66 66"
-                  fill="none"
-                >
-                  <circle
-                    cx="34.375"
-                    cy="34.375"
-                    r="22"
-                    stroke="rgb(var(--color-text-400))"
-                    stroke-linecap="round"
-                  />
-                  <path
-                    d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
-                    fill="rgb(var(--color-text-400))"
-                  />
-                </svg>
-              </div>
-              <h4 className="text-sm text-custom-text-200">
-                {cycleTab === "All"
-                  ? "No cycles"
-                  : `No ${cycleTab === "Drafts" ? "draft" : cycleTab?.toLowerCase()} cycles`}
-              </h4>
-              <button
-                type="button"
-                className="text-custom-primary-100 text-sm outline-none"
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "q",
-                  });
-                  document.dispatchEvent(e);
-                }}
-              >
-                Create a new cycle
-              </button>
-            </div>
-          </div>
-        )
-      ) : viewType === "list" ? (
-        <Loader className="space-y-4">
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-        </Loader>
-      ) : viewType === "board" ? (
-        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-          <Loader.Item height="200px" />
-          <Loader.Item height="200px" />
-          <Loader.Item height="200px" />
-        </Loader>
-      ) : (
-        <Loader>
-          <Loader.Item height="300px" />
-        </Loader>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
deleted file mode 100644
index 35b8e118e66..00000000000
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState } from "react";
-// next
-import { useRouter } from "next/router";
-// swr
-import { mutate } from "swr";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import cycleService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, ICycle, IProject } from "types";
-type TConfirmCycleDeletionProps = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
-};
-// fetch-keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  PROJECT_DETAILS,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
-import { getDateRangeStatus } from "helpers/date-time.helper";
-
-export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    if (!data || !workspaceSlug || !projectId) return;
-
-    setIsDeleteLoading(true);
-
-    await cycleService
-      .deleteCycle(workspaceSlug as string, data.project, data.id, user)
-      .then(() => {
-        const cycleType = getDateRangeStatus(data.start_date, data.end_date);
-        const fetchKey =
-          cycleType === "current"
-            ? CURRENT_CYCLE_LIST(projectId as string)
-            : cycleType === "upcoming"
-            ? UPCOMING_CYCLES_LIST(projectId as string)
-            : cycleType === "completed"
-            ? COMPLETED_CYCLES_LIST(projectId as string)
-            : DRAFT_CYCLES_LIST(projectId as string);
-
-        mutate<ICycle[]>(
-          fetchKey,
-          (prevData) => {
-            if (!prevData) return;
-
-            return prevData.filter((cycle) => cycle.id !== data?.id);
-          },
-          false
-        );
-
-        mutate(
-          CYCLES_LIST(projectId as string),
-          (prevData: any) => {
-            if (!prevData) return;
-            return prevData.filter((cycle: any) => cycle.id !== data?.id);
-          },
-          false
-        );
-
-        // update total cycles count in the project details
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              total_cycles: prevData.total_cycles - 1,
-            };
-          },
-          false
-        );
-
-        handleClose();
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Cycle deleted successfully",
-        });
-      })
-      .catch(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete Cycle
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete cycle-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the cycle will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
deleted file mode 100644
index 4643a58bcc0..00000000000
--- a/apps/app/components/cycles/form.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { useEffect } from "react";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-
-// ui
-import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// types
-import { ICycle } from "types";
-
-type Props = {
-  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
-  handleClose: () => void;
-  status: boolean;
-  data?: ICycle | null;
-};
-
-const defaultValues: Partial<ICycle> = {
-  name: "",
-  description: "",
-  start_date: null,
-  end_date: null,
-};
-
-export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    control,
-    reset,
-    watch,
-  } = useForm<ICycle>({
-    defaultValues,
-  });
-
-  const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
-    await handleFormSubmit(formData);
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
-  const startDate = watch("start_date");
-  const endDate = watch("end_date");
-
-  const minDate = startDate ? new Date(startDate) : new Date();
-  minDate.setDate(minDate.getDate() + 1);
-
-  const maxDate = endDate ? new Date(endDate) : null;
-  maxDate?.setDate(maxDate.getDate() - 1);
-
-  return (
-    <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Cycle
-        </h3>
-        <div className="space-y-3">
-          <div>
-            <Input
-              autoComplete="off"
-              id="name"
-              name="name"
-              type="name"
-              className="resize-none text-xl"
-              placeholder="Title"
-              error={errors.name}
-              register={register}
-              validations={{
-                required: "Name is required",
-                maxLength: {
-                  value: 255,
-                  message: "Name should be less than 255 characters",
-                },
-              }}
-            />
-          </div>
-          <div>
-            <TextArea
-              id="description"
-              name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
-            />
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
-            <div>
-              <Controller
-                control={control}
-                name="start_date"
-                render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="Start date"
-                    value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={new Date()}
-                    maxDate={maxDate ?? undefined}
-                  />
-                )}
-              />
-            </div>
-            <div>
-              <Controller
-                control={control}
-                name="end_date"
-                render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="End date"
-                    value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={minDate}
-                  />
-                )}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
-            ? isSubmitting
-              ? "Updating Cycle..."
-              : "Update Cycle"
-            : isSubmitting
-            ? "Creating Cycle..."
-            : "Create Cycle"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/cycles/gantt-chart/blocks.tsx b/apps/app/components/cycles/gantt-chart/blocks.tsx
deleted file mode 100644
index 9d90c0adff8..00000000000
--- a/apps/app/components/cycles/gantt-chart/blocks.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { ContrastIcon } from "components/icons";
-// helpers
-import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
-// types
-import { ICycle } from "types";
-
-export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
-
-  return (
-    <div
-      className="flex items-center relative h-full w-full rounded"
-      style={{
-        backgroundColor:
-          cycleStatus === "current"
-            ? "#09a953"
-            : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : "",
-      }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
-            </div>
-          </div>
-        }
-        position="top-left"
-      >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
-
-  return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
-    >
-      <ContrastIcon
-        className="h-5 w-5 flex-shrink-0"
-        color={`${
-          cycleStatus === "current"
-            ? "#09a953"
-            : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : ""
-        }`}
-      />
-      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx b/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx
deleted file mode 100644
index 7741432ceb6..00000000000
--- a/apps/app/components/cycles/gantt-chart/cycle-issues-layout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
-// components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
-// types
-import { IIssue } from "types";
-
-export const CycleIssuesGanttChartView = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
-
-  const { orderBy } = useIssuesView();
-
-  const { user } = useUser();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
-    workspaceSlug as string,
-    projectId as string,
-    cycleId as string
-  );
-
-  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
-        bottomSpacing
-      />
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx b/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx
deleted file mode 100644
index a5b576bca70..00000000000
--- a/apps/app/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { FC } from "react";
-
-import { useRouter } from "next/router";
-
-import { KeyedMutator } from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useUser from "hooks/use-user";
-// components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
-import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
-// types
-import { ICycle } from "types";
-
-type Props = {
-  cycles: ICycle[];
-  mutateCycles: KeyedMutator<ICycle[]>;
-};
-
-export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
-    if (!workspaceSlug || !user) return;
-
-    mutateCycles((prevData: any) => {
-      if (!prevData) return prevData;
-
-      const newList = prevData.map((p: any) => ({
-        ...p,
-        ...(p.id === cycle.id
-          ? {
-              start_date: payload.start_date ? payload.start_date : p.start_date,
-              target_date: payload.target_date ? payload.target_date : p.end_date,
-              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
-            }
-          : {}),
-      }));
-
-      if (payload.sort_order) {
-        const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-        newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-      }
-
-      return newList;
-    }, false);
-
-    const newPayload: any = { ...payload };
-
-    if (newPayload.sort_order && payload.sort_order)
-      newPayload.sort_order = payload.sort_order.newSortOrder;
-
-    cyclesService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload, user);
-  };
-
-  const blockFormat = (blocks: ICycle[]) =>
-    blocks && blocks.length > 0
-      ? blocks
-          .filter((b) => b.start_date && b.end_date)
-          .map((block) => ({
-            data: block,
-            id: block.id,
-            sort_order: block.sort_order,
-            start_date: new Date(block.start_date ?? ""),
-            target_date: new Date(block.end_date ?? ""),
-          }))
-      : [];
-
-  return (
-    <div className="w-full h-full overflow-y-auto">
-      <GanttChartRoot
-        title="Cycles"
-        loaderTitle="Cycles"
-        blocks={cycles ? blockFormat(cycles) : null}
-        blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
-        SidebarBlockRender={CycleGanttSidebarBlock}
-        BlockRender={CycleGanttBlock}
-        enableBlockLeftResize={false}
-        enableBlockRightResize={false}
-        enableBlockMove={false}
-      />
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/gantt-chart/index.ts b/apps/app/components/cycles/gantt-chart/index.ts
deleted file mode 100644
index e4850b2e259..00000000000
--- a/apps/app/components/cycles/gantt-chart/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./blocks";
-export * from "./cycle-issues-layout";
-export * from "./cycles-list-layout";
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
deleted file mode 100644
index 4b43b3a74db..00000000000
--- a/apps/app/components/cycles/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export * from "./cycles-list";
-export * from "./active-cycle-details";
-export * from "./active-cycle-stats";
-export * from "./gantt-chart";
-export * from "./cycles-view";
-export * from "./delete-cycle-modal";
-export * from "./form";
-export * from "./modal";
-export * from "./select";
-export * from "./sidebar";
-export * from "./single-cycle-card";
-export * from "./single-cycle-list";
-export * from "./transfer-issues-modal";
-export * from "./transfer-issues";
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
deleted file mode 100644
index 7036362560e..00000000000
--- a/apps/app/components/cycles/modal.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Fragment } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import cycleService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { CycleForm } from "components/cycles";
-// helper
-import { getDateRangeStatus } from "helpers/date-time.helper";
-// types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IProject } from "types";
-// fetch keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  INCOMPLETE_CYCLES_LIST,
-  PROJECT_DETAILS,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
-
-type CycleModalProps = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
-  isOpen,
-  handleClose,
-  data,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const createCycle = async (payload: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    await cycleService
-      .createCycle(workspaceSlug.toString(), projectId.toString(), payload, user)
-      .then((res) => {
-        switch (getDateRangeStatus(res.start_date, res.end_date)) {
-          case "completed":
-            mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-            break;
-          case "current":
-            mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-            break;
-          case "upcoming":
-            mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-            break;
-          default:
-            mutate(DRAFT_CYCLES_LIST(projectId.toString()));
-        }
-        mutate(INCOMPLETE_CYCLES_LIST(projectId.toString()));
-        mutate(CYCLES_LIST(projectId.toString()));
-
-        // update total cycles count in the project details
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              total_cycles: prevData.total_cycles + 1,
-            };
-          },
-          false
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Cycle created successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Error in creating cycle. Please try again.",
-        });
-      });
-  };
-
-  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    await cycleService
-      .updateCycle(workspaceSlug.toString(), projectId.toString(), cycleId, payload, user)
-      .then((res) => {
-        switch (getDateRangeStatus(data?.start_date, data?.end_date)) {
-          case "completed":
-            mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-            break;
-          case "current":
-            mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-            break;
-          case "upcoming":
-            mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-            break;
-          default:
-            mutate(DRAFT_CYCLES_LIST(projectId.toString()));
-        }
-        mutate(CYCLES_LIST(projectId.toString()));
-        if (
-          getDateRangeStatus(data?.start_date, data?.end_date) !=
-          getDateRangeStatus(res.start_date, res.end_date)
-        ) {
-          switch (getDateRangeStatus(res.start_date, res.end_date)) {
-            case "completed":
-              mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
-              break;
-            case "current":
-              mutate(CURRENT_CYCLE_LIST(projectId.toString()));
-              break;
-            case "upcoming":
-              mutate(UPCOMING_CYCLES_LIST(projectId.toString()));
-              break;
-            default:
-              mutate(DRAFT_CYCLES_LIST(projectId.toString()));
-          }
-        }
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Cycle updated successfully.",
-        });
-      })
-      .catch((err) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Error in updating cycle. Please try again.",
-        });
-      });
-  };
-
-  const dateChecker = async (payload: CycleDateCheckData) => {
-    let status = false;
-
-    await cycleService
-      .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
-      .then((res) => {
-        status = res.status;
-      });
-
-    return status;
-  };
-
-  const handleFormSubmit = async (formData: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload: Partial<ICycle> = {
-      ...formData,
-    };
-
-    let isDateValid: boolean = true;
-
-    if (payload.start_date && payload.end_date) {
-      if (data?.start_date && data?.end_date)
-        isDateValid = await dateChecker({
-          start_date: payload.start_date,
-          end_date: payload.end_date,
-          cycle_id: data.id,
-        });
-      else
-        isDateValid = await dateChecker({
-          start_date: payload.start_date,
-          end_date: payload.end_date,
-        });
-    }
-
-    if (isDateValid) {
-      if (data) await updateCycle(data.id, payload);
-      else await createCycle(payload);
-
-      handleClose();
-    } else
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message:
-          "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <CycleForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  data={data}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/cycles/single-cycle-list.tsx b/apps/app/components/cycles/single-cycle-list.tsx
deleted file mode 100644
index ec01da9e760..00000000000
--- a/apps/app/components/cycles/single-cycle-list.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-} from "components/icons";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
-// helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// types
-import { ICycle } from "types";
-
-type TSingleStatProps = {
-  cycle: ICycle;
-  handleEditCycle: () => void;
-  handleDeleteCycle: () => void;
-  handleAddToFavorites: () => void;
-  handleRemoveFromFavorites: () => void;
-};
-
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
-
-type progress = {
-  progress: number;
-};
-
-function RadialProgressBar({ progress }: progress) {
-  const [circumference, setCircumference] = useState(0);
-
-  useEffect(() => {
-    const radius = 40;
-    const circumference = 2 * Math.PI * radius;
-    setCircumference(circumference);
-  }, []);
-
-  const progressOffset = ((100 - progress) / 100) * circumference;
-
-  return (
-    <div className="relative h-4 w-4">
-      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
-        <circle
-          className={"stroke-current opacity-10"}
-          cx="50"
-          cy="50"
-          r="40"
-          strokeWidth="12"
-          fill="none"
-          strokeDasharray={`${circumference} ${circumference}`}
-        />
-        <circle
-          className={`stroke-current`}
-          cx="50"
-          cy="50"
-          r="40"
-          strokeWidth="12"
-          fill="none"
-          strokeDasharray={`${circumference} ${circumference}`}
-          strokeDashoffset={progressOffset}
-          transform="rotate(-90 50 50)"
-        />
-      </svg>
-    </div>
-  );
-}
-
-export const SingleCycleList: React.FC<TSingleStatProps> = ({
-  cycle,
-  handleEditCycle,
-  handleDeleteCycle,
-  handleAddToFavorites,
-  handleRemoveFromFavorites,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-  const isCompleted = cycleStatus === "completed";
-  const endDate = new Date(cycle.end_date ?? "");
-  const startDate = new Date(cycle.start_date ?? "");
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
-  const progressIndicatorData = stateGroups.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value:
-      cycle.total_issues > 0
-        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-        : 0,
-    color: group.color,
-  }));
-
-  return (
-    <div>
-      <div className="flex flex-col text-xs hover:bg-custom-background-80">
-        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-          <a className="w-full">
-            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
-              <div className="flex items-center justify-between gap-1">
-                <div className="flex items-start gap-2">
-                  <ContrastIcon
-                    className="mt-1 h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "rgb(var(--color-text-200))"
-                        : ""
-                    }`}
-                  />
-                  <div className="max-w-2xl">
-                    <Tooltip
-                      tooltipContent={cycle.name}
-                      className="break-words"
-                      position="top-left"
-                    >
-                      <h3 className="break-words w-full text-base font-semibold">
-                        {truncateText(cycle.name, 60)}
-                      </h3>
-                    </Tooltip>
-                    <p className="mt-2 text-custom-text-200 break-words w-full">
-                      {cycle.description}
-                    </p>
-                  </div>
-                </div>
-                <div className="flex-shrink-0 flex items-center gap-4">
-                  <span
-                    className={`rounded-full px-1.5 py-0.5
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
-                        <AlarmClockIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex items-center gap-1">
-                        {cycle.total_issues - cycle.completed_issues > 0 && (
-                          <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
-                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
-                            }`}
-                          >
-                            <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
-                            </span>
-                          </Tooltip>
-                        )}{" "}
-                        Completed
-                      </span>
-                    ) : (
-                      cycleStatus
-                    )}
-                  </span>
-
-                  {cycleStatus !== "draft" && (
-                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
-                      <div className="flex items-start gap-1 whitespace-nowrap">
-                        <CalendarDaysIcon className="h-4 w-4" />
-                        <span>{renderShortDateWithYearFormat(startDate)}</span>
-                      </div>
-                      <ArrowRightIcon className="h-4 w-4" />
-                      <div className="flex items-start gap-1 whitespace-nowrap">
-                        <TargetIcon className="h-4 w-4" />
-                        <span>{renderShortDateWithYearFormat(endDate)}</span>
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="flex items-center gap-2.5 text-custom-text-200">
-                    {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
-                      <img
-                        src={cycle.owned_by.avatar}
-                        height={16}
-                        width={16}
-                        className="rounded-full"
-                        alt={cycle.owned_by.display_name}
-                      />
-                    ) : (
-                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
-                        {cycle.owned_by.display_name.charAt(0)}
-                      </span>
-                    )}
-                  </div>
-                  <Tooltip
-                    position="top-right"
-                    tooltipContent={
-                      <div className="flex w-80 items-center gap-2 px-4 py-1">
-                        <span>Progress</span>
-                        <LinearProgressIndicator data={progressIndicatorData} />
-                      </div>
-                    }
-                  >
-                    <span
-                      className={`rounded-md px-1.5 py-1
-                    ${
-                      cycleStatus === "current"
-                        ? "border border-green-600 bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                    >
-                      {cycleStatus === "current" ? (
-                        <span className="flex gap-1 whitespace-nowrap">
-                          {cycle.total_issues > 0 ? (
-                            <>
-                              <RadialProgressBar
-                                progress={(cycle.completed_issues / cycle.total_issues) * 100}
-                              />
-                              <span>
-                                {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %
-                              </span>
-                            </>
-                          ) : (
-                            <span className="normal-case">No issues present</span>
-                          )}
-                        </span>
-                      ) : cycleStatus === "upcoming" ? (
-                        <span className="flex gap-1">
-                          <RadialProgressBar progress={100} /> Yet to start
-                        </span>
-                      ) : cycleStatus === "completed" ? (
-                        <span className="flex gap-1">
-                          <RadialProgressBar progress={100} />
-                          <span>{100} %</span>
-                        </span>
-                      ) : (
-                        <span className="flex gap-1">
-                          <RadialProgressBar
-                            progress={(cycle.total_issues / cycle.completed_issues) * 100}
-                          />
-                          {cycleStatus}
-                        </span>
-                      )}
-                    </span>
-                  </Tooltip>
-                  {cycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )}
-                  <div className="flex items-center">
-                    <CustomMenu width="auto" verticalEllipsis>
-                      {!isCompleted && (
-                        <CustomMenu.MenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleEditCycle();
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
-                            <span>Edit Cycle</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                      )}
-                      {!isCompleted && (
-                        <CustomMenu.MenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleDeleteCycle();
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
-                            <span>Delete cycle</span>
-                          </span>
-                        </CustomMenu.MenuItem>
-                      )}
-                      <CustomMenu.MenuItem
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleCopyText();
-                        }}
-                      >
-                        <span className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy cycle link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </Link>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
deleted file mode 100644
index a49c7665f83..00000000000
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// component
-import { PrimaryButton, Tooltip } from "components/ui";
-// icon
-import { ExclamationIcon, TransferIcon } from "components/icons";
-// services
-import cycleServices from "services/cycles.service";
-// fetch-key
-import { CYCLE_DETAILS } from "constants/fetch-keys";
-
-type Props = {
-  handleClick: () => void;
-};
-
-export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
-
-  const { data: cycleDetails } = useSWR(
-    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cycleServices.getCycleDetails(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string
-          )
-      : null
-  );
-
-  const transferableIssuesCount = cycleDetails
-    ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
-    : 0;
-  return (
-    <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
-      <div className="flex items-center gap-2 text-sm text-custom-text-200">
-        <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
-        <span>Completed cycles are not editable.</span>
-      </div>
-
-      {transferableIssuesCount > 0 && (
-        <div>
-          <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
-            <TransferIcon className="h-4 w-4" color="white" />
-            <span className="text-white">Transfer Issues</span>
-          </PrimaryButton>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
deleted file mode 100644
index b33a2f65a8a..00000000000
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { useEffect, useState } from "react";
-// headless ui
-import { Tab, Transition, Popover } from "@headlessui/react";
-// react colors
-import { TwitterPicker } from "react-color";
-// types
-import { Props } from "./types";
-// emojis
-import emojis from "./emojis.json";
-import icons from "./icons.json";
-// helpers
-import { getRecentEmojis, saveRecentEmoji } from "./helpers";
-import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
-
-const tabOptions = [
-  {
-    key: "emoji",
-    title: "Emoji",
-  },
-  {
-    key: "icon",
-    title: "Icon",
-  },
-];
-
-const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [openColorPicker, setOpenColorPicker] = useState(false);
-  const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
-
-  const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
-
-  useEffect(() => {
-    setRecentEmojis(getRecentEmojis());
-  }, []);
-
-  useEffect(() => {
-    if (!value || value?.length === 0) onChange(getRandomEmoji());
-  }, [value, onChange]);
-
-  return (
-    <Popover className="relative z-[1]">
-      <Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none">
-        {label}
-      </Popover.Button>
-      <Transition
-        show={isOpen}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
-            <Tab.Group as="div" className="flex h-full w-full flex-col">
-              <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
-                {tabOptions.map((tab) => (
-                  <Tab key={tab.key} as={React.Fragment}>
-                    {({ selected }) => (
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setOpenColorPicker(false);
-                        }}
-                        className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
-                          selected ? "" : "border-transparent text-custom-text-200"
-                        }`}
-                      >
-                        {tab.title}
-                      </button>
-                    )}
-                  </Tab>
-                ))}
-              </Tab.List>
-              <Tab.Panels className="flex-1 overflow-y-auto">
-                <Tab.Panel>
-                  {recentEmojis.length > 0 && (
-                    <div className="py-2">
-                      <h3 className="mb-2 text-xs text-custom-text-200">最近</h3>
-                      <div className="grid grid-cols-8 gap-2">
-                        {recentEmojis.map((emoji) => (
-                          <button
-                            key={emoji}
-                            type="button"
-                            className="flex h-4 w-4 select-none items-center justify-between text-sm"
-                            onClick={() => {
-                              onChange(emoji);
-                              setIsOpen(false);
-                            }}
-                          >
-                            {renderEmoji(emoji)}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                  <hr className="mb-2 h-[1px] w-full border-custom-border-200" />
-                  <div>
-                    <div className="grid grid-cols-8 gap-x-2 gap-y-3">
-                      {emojis.map((emoji) => (
-                        <button
-                          type="button"
-                          className="mb-1 flex h-4 w-4 select-none items-center text-sm"
-                          key={emoji}
-                          onClick={() => {
-                            onChange(emoji);
-                            saveRecentEmoji(emoji);
-                            setIsOpen(false);
-                          }}
-                        >
-                          {renderEmoji(emoji)}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                </Tab.Panel>
-                <div className="py-2">
-                  <Tab.Panel className="flex h-full w-full flex-col justify-center">
-                    <div className="relative">
-                      <div className="flex items-center justify-between px-1 pb-2">
-                        {[
-                          "#FF6B00",
-                          "#8CC1FF",
-                          "#FCBE1D",
-                          "#18904F",
-                          "#ADF672",
-                          "#05C3FF",
-                          "#000000",
-                        ].map((curCol) => (
-                          <span
-                            key={curCol}
-                            className="h-4 w-4 cursor-pointer rounded-full"
-                            style={{ backgroundColor: curCol }}
-                            onClick={() => setActiveColor(curCol)}
-                          />
-                        ))}
-                        <button
-                          type="button"
-                          onClick={() => setOpenColorPicker((prev) => !prev)}
-                          className="flex items-center gap-1"
-                        >
-                          <span
-                            className="conical-gradient h-4 w-4 rounded-full"
-                            style={{ backgroundColor: activeColor }}
-                          />
-                        </button>
-                      </div>
-                      <div>
-                        <TwitterPicker
-                          className={`!absolute top-4 left-4 z-10 m-2 ${
-                            openColorPicker ? "block" : "hidden"
-                          }`}
-                          color={activeColor}
-                          onChange={(color) => {
-                            setActiveColor(color.hex);
-                            if (onIconColorChange) onIconColorChange(color.hex);
-                          }}
-                          triangle="hide"
-                          width="205px"
-                        />
-                      </div>
-                    </div>
-                    <hr className="mb-1 h-[1px] w-full border-custom-border-200" />
-                    <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
-                      {icons.material_rounded.map((icon, index) => (
-                        <button
-                          key={`${icon.name}-${index}`}
-                          type="button"
-                          className="mb-1 flex h-4 w-4 select-none items-center text-lg"
-                          onClick={() => {
-                            onChange({ name: icon.name, color: activeColor });
-                            setIsOpen(false);
-                          }}
-                        >
-                          <span
-                            style={{ color: activeColor }}
-                            className="material-symbols-rounded text-lg"
-                          >
-                            {icon.name}
-                          </span>
-                        </button>
-                      ))}
-                    </div>
-                  </Tab.Panel>
-                </div>
-              </Tab.Panels>
-            </Tab.Group>
-          </div>
-        </Popover.Panel>
-      </Transition>
-    </Popover>
-  );
-};
-
-export default EmojiIconPicker;
diff --git a/apps/app/components/emoji-icon-picker/types.d.ts b/apps/app/components/emoji-icon-picker/types.d.ts
deleted file mode 100644
index fed55372e17..00000000000
--- a/apps/app/components/emoji-icon-picker/types.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type Props = {
-  label: React.ReactNode;
-  value: any;
-  onChange: (
-    data:
-      | string
-      | {
-          name: string;
-          color: string;
-        }
-  ) => void;
-  onIconColorChange?: (data: any) => void;
-};
diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
deleted file mode 100644
index bc5c445e499..00000000000
--- a/apps/app/components/estimates/delete-estimate-modal.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// types
-import { IEstimate } from "types";
-
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { SecondaryButton, DangerButton } from "components/ui";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data: IEstimate;
-  handleDelete: () => void;
-};
-
-export const DeleteEstimateModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  handleDelete,
-}) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  useEffect(() => {
-    setIsDeleteLoading(false);
-  }, [isOpen]);
-
-  const onClose = () => {
-    setIsDeleteLoading(false);
-    handleClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div 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">
-                      <ExclamationTriangleIcon
-                        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 Estimate</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="break-words text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {data.name}
-                      </span>
-                      {""}? All of the data related to the estiamte will be permanently removed.
-                      This action cannot be undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton
-                      onClick={() => {
-                        setIsDeleteLoading(true);
-                        handleDelete();
-                      }}
-                      loading={isDeleteLoading}
-                    >
-                      {isDeleteLoading ? "刪除..." : "删除估算"}
-                    </DangerButton>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/estimates/index.tsx b/apps/app/components/estimates/index.tsx
deleted file mode 100644
index f20c747808d..00000000000
--- a/apps/app/components/estimates/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./create-update-estimate-modal";
-export * from "./single-estimate";
-export * from "./delete-estimate-modal";
diff --git a/apps/app/components/estimates/single-estimate.tsx b/apps/app/components/estimates/single-estimate.tsx
deleted file mode 100644
index cf2bc493f1b..00000000000
--- a/apps/app/components/estimates/single-estimate.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-// components
-import { DeleteEstimateModal } from "components/estimates";
-// ui
-import { CustomMenu, SecondaryButton } from "components/ui";
-//icons
-import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { ICurrentUserResponse, IEstimate } from "types";
-
-type Props = {
-  user: ICurrentUserResponse | undefined;
-  estimate: IEstimate;
-  editEstimate: (estimate: IEstimate) => void;
-  handleEstimateDelete: (estimateId: string) => void;
-};
-
-export const SingleEstimate: React.FC<Props> = ({
-  user,
-  estimate,
-  editEstimate,
-  handleEstimateDelete,
-}) => {
-  const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { projectDetails, mutateProjectDetails } = useProjectDetails();
-
-  const handleUseEstimate = async () => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload = {
-      estimate: estimate.id,
-    };
-
-    mutateProjectDetails((prevData: any) => {
-      if (!prevData) return prevData;
-
-      return { ...prevData, estimate: estimate.id };
-    }, false);
-
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "无法使用估算点数。请重试。",
-        });
-      });
-  };
-
-  return (
-    <>
-      <div className="gap-2 py-3">
-        <div className="flex items-center justify-between">
-          <div>
-            <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
-              {estimate.name}
-              {projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
-                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
-                  In use
-                </span>
-              )}
-            </h6>
-            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
-              {estimate.description}
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <SecondaryButton
-                onClick={handleUseEstimate}
-                className="!py-1 text-custom-text-200 hover:text-custom-text-100"
-              >
-                Use
-              </SecondaryButton>
-            )}
-            <CustomMenu ellipsis>
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  editEstimate(estimate);
-                }}
-              >
-                <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-3.5 w-3.5" />
-                  <span>Edit estimate</span>
-                </div>
-              </CustomMenu.MenuItem>
-              {projectDetails?.estimate !== estimate.id && (
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    setIsDeleteEstimateModalOpen(true);
-                  }}
-                >
-                  <div className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
-                    <span>Delete estimate</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-            </CustomMenu>
-          </div>
-        </div>
-        {estimate.points.length > 0 ? (
-          <div className="flex text-xs text-custom-text-200">
-            Estimate points (
-            <span className="flex gap-1">
-              {orderArrayBy(estimate.points, "key").map((point, index) => (
-                <h6 key={point.id} className="text-custom-text-200">
-                  {point.value}
-                  {index !== estimate.points.length - 1 && ","}{" "}
-                </h6>
-              ))}
-            </span>
-            )
-          </div>
-        ) : (
-          <div>
-            <p className="text-xs text-custom-text-200">No estimate points</p>
-          </div>
-        )}
-      </div>
-
-      <DeleteEstimateModal
-        isOpen={isDeleteEstimateModalOpen}
-        handleClose={() => setIsDeleteEstimateModalOpen(false)}
-        data={estimate}
-        handleDelete={() => {
-          handleEstimateDelete(estimate.id);
-          setIsDeleteEstimateModalOpen(false);
-        }}
-      />
-    </>
-  );
-};
diff --git a/apps/app/components/exporter/guide.tsx b/apps/app/components/exporter/guide.tsx
deleted file mode 100644
index dd6fab9dce9..00000000000
--- a/apps/app/components/exporter/guide.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useState } from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import IntegrationService from "services/integration";
-// components
-import { Exporter, SingleExport } from "components/exporter";
-// ui
-import { Icon, Loader, PrimaryButton } from "components/ui";
-// icons
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
-// fetch-keys
-import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
-// constants
-import { EXPORTERS_LIST } from "constants/workspace";
-
-const IntegrationGuide = () => {
-  const [refreshing, setRefreshing] = useState(false);
-  const per_page = 10;
-  const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
-
-  const router = useRouter();
-  const { workspaceSlug, provider } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: exporterServices } = useSWR(
-    workspaceSlug && cursor
-      ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`)
-      : null,
-    workspaceSlug && cursor
-      ? () => IntegrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
-      : null
-  );
-
-  const handleCsvClose = () => {
-    router.replace(`/plane/settings/exports`);
-  };
-
-  return (
-    <>
-      <div className="h-full space-y-2">
-        <>
-          <div className="space-y-2">
-            {EXPORTERS_LIST.map((service) => (
-              <div
-                key={service.provider}
-                className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4"
-              >
-                <div className="flex items-center gap-4 whitespace-nowrap">
-                  <div className="relative h-10 w-10 flex-shrink-0">
-                    <Image
-                      src={service.logo}
-                      layout="fill"
-                      objectFit="cover"
-                      alt={`${service.title} Logo`}
-                    />
-                  </div>
-                  <div className="w-full">
-                    <h3>{service.title}</h3>
-                    <p className="text-sm text-custom-text-200">{service.description}</p>
-                  </div>
-                  <div className="flex-shrink-0">
-                    <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
-                      <a>
-                        <PrimaryButton>
-                          <span className="capitalize">{service.type}</span> now
-                        </PrimaryButton>
-                      </a>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
-            <h3 className="mb-2 flex gap-2 text-lg font-medium justify-between">
-              <div className="flex gap-2">
-                <div className="">Previous Exports</div>
-                <button
-                  type="button"
-                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
-                  onClick={() => {
-                    setRefreshing(true);
-                    mutate(
-                      EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)
-                    ).then(() => setRefreshing(false));
-                  }}
-                >
-                  <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-                  {refreshing ? "Refreshing..." : "Refresh status"}
-                </button>
-              </div>
-              <div className="flex gap-2 items-center text-xs">
-                <button
-                  disabled={!exporterServices?.prev_page_results}
-                  onClick={() =>
-                    exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)
-                  }
-                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
-                    exporterServices?.prev_page_results
-                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
-                      : "cursor-not-allowed opacity-75"
-                  }`}
-                >
-                  <Icon iconName="keyboard_arrow_left" className="!text-lg" />
-                  <div className="pr-1">Prev</div>
-                </button>
-                <button
-                  disabled={!exporterServices?.next_page_results}
-                  onClick={() =>
-                    exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)
-                  }
-                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
-                    exporterServices?.next_page_results
-                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
-                      : "cursor-not-allowed opacity-75"
-                  }`}
-                >
-                  <div className="pl-1">Next</div>
-                  <Icon iconName="keyboard_arrow_right" className="!text-lg" />
-                </button>
-              </div>
-            </h3>
-            {exporterServices && exporterServices?.results ? (
-              exporterServices?.results?.length > 0 ? (
-                <div className="space-y-2">
-                  <div className="divide-y divide-custom-border-200">
-                    {exporterServices?.results.map((service) => (
-                      <SingleExport key={service.id} service={service} refreshing={refreshing} />
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <p className="py-2 text-sm text-custom-text-200">No previous export available.</p>
-              )
-            ) : (
-              <Loader className="mt-6 grid grid-cols-1 gap-3">
-                <Loader.Item height="40px" width="100%" />
-                <Loader.Item height="40px" width="100%" />
-                <Loader.Item height="40px" width="100%" />
-                <Loader.Item height="40px" width="100%" />
-              </Loader>
-            )}
-          </div>
-        </>
-        {provider && (
-          <Exporter
-            isOpen={true}
-            handleClose={() => handleCsvClose()}
-            data={null}
-            user={user}
-            provider={provider}
-            mutateServices={() =>
-              mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))
-            }
-          />
-        )}
-      </div>
-    </>
-  );
-};
-
-export default IntegrationGuide;
diff --git a/apps/app/components/gantt-chart/chart/index.tsx b/apps/app/components/gantt-chart/chart/index.tsx
deleted file mode 100644
index 83d0509cc6e..00000000000
--- a/apps/app/components/gantt-chart/chart/index.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-import { FC, useEffect, useState } from "react";
-// icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
-// components
-import { GanttChartBlocks } from "components/gantt-chart";
-import { GanttSidebar } from "../sidebar";
-// import { HourChartView } from "./hours";
-// import { DayChartView } from "./day";
-// import { WeekChartView } from "./week";
-// import { BiWeekChartView } from "./bi-week";
-import { MonthChartView } from "./month";
-// import { QuarterChartView } from "./quarter";
-// import { YearChartView } from "./year";
-// views
-import {
-  // generateHourChart,
-  // generateDayChart,
-  generateWeekChart,
-  generateBiWeekChart,
-  generateMonthChart,
-  generateQuarterChart,
-  generateYearChart,
-  getNumberOfDaysBetweenTwoDatesInMonth,
-  getNumberOfDaysBetweenTwoDatesInQuarter,
-  getNumberOfDaysBetweenTwoDatesInYear,
-  getMonthChartItemPositionWidthInMonth,
-} from "../views";
-// types
-import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
-// data
-import { currentViewDataWithView } from "../data";
-// context
-import { useChart } from "../hooks";
-
-type ChartViewRootProps = {
-  border: boolean;
-  title: string;
-  loaderTitle: string;
-  blocks: IGanttBlock[] | null;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: React.FC<any>;
-  BlockRender: React.FC<any>;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
-  enableReorder: boolean;
-  bottomSpacing: boolean;
-};
-
-export const ChartViewRoot: FC<ChartViewRootProps> = ({
-  border,
-  title,
-  blocks = null,
-  loaderTitle,
-  blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
-  enableBlockLeftResize,
-  enableBlockRightResize,
-  enableBlockMove,
-  enableReorder,
-  bottomSpacing,
-}) => {
-  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
-  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-
-  // blocks state management starts
-  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
-
-  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
-    useChart();
-
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
-    blocks && blocks.length > 0
-      ? blocks.map((block: any) => ({
-          ...block,
-          position: getMonthChartItemPositionWidthInMonth(view, block),
-        }))
-      : [];
-
-  useEffect(() => {
-    if (currentViewData && blocks)
-      setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
-  }, [currentViewData, blocks]);
-
-  // blocks state management ends
-
-  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
-
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
-    const selectedCurrentView: TGanttViews = view;
-    const selectedCurrentViewData: ChartDataType | undefined =
-      selectedCurrentView && selectedCurrentView === currentViewData?.key
-        ? currentViewData
-        : currentViewDataWithView(view);
-
-    if (selectedCurrentViewData === undefined) return;
-
-    let currentRender: any;
-
-    // if (view === "hours") currentRender = generateHourChart(selectedCurrentViewData, side);
-    // if (view === "day") currentRender = generateDayChart(selectedCurrentViewData, side);
-    // if (view === "week") currentRender = generateWeekChart(selectedCurrentViewData, side);
-    // if (view === "bi_week") currentRender = generateBiWeekChart(selectedCurrentViewData, side);
-    if (selectedCurrentView === "month")
-      currentRender = generateMonthChart(selectedCurrentViewData, side);
-    // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
-    // if (selectedCurrentView === "year")
-    //   currentRender = generateYearChart(selectedCurrentViewData, side);
-
-    // updating the prevData, currentData and nextData
-    if (currentRender.payload.length > 0) {
-      if (side === "left") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: selectedCurrentView,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload, ...renderView],
-          },
-        });
-        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
-        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
-      } else if (side === "right") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...renderView, ...currentRender.payload],
-          },
-        });
-        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
-      } else {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload],
-          },
-        });
-        setItemsContainerWidth(currentRender.scrollWidth);
-        setTimeout(() => {
-          handleScrollToCurrentSelectedDate(
-            currentRender.state,
-            currentRender.state.data.currentDate
-          );
-        }, 50);
-      }
-    }
-  };
-
-  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
-
-  // handling the scroll positioning from left and right
-  useEffect(() => {
-    handleToday();
-  }, []);
-
-  const updatingCurrentLeftScrollPosition = (width: number) => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    if (!scrollContainer) return;
-
-    scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
-    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
-  };
-
-  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    const clientVisibleWidth: number = scrollContainer?.clientWidth;
-    let scrollWidth: number = 0;
-    let daysDifference: number = 0;
-
-    // if (currentView === "hours")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "day")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "week")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "bi_week")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    if (currentView === "month")
-      daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "quarter")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
-    // if (currentView === "year")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
-
-    scrollWidth =
-      daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
-
-    scrollContainer.scrollLeft = scrollWidth;
-  };
-
-  // handling scroll functionality
-  const onScroll = () => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    const scrollWidth: number = scrollContainer?.scrollWidth;
-    const clientVisibleWidth: number = scrollContainer?.clientWidth;
-    const currentScrollPosition: number = scrollContainer?.scrollLeft;
-
-    updateScrollLeft(currentScrollPosition);
-
-    const approxRangeLeft: number =
-      scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
-    const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
-
-    if (currentScrollPosition >= approxRangeRight)
-      updateCurrentViewRenderPayload("right", currentView);
-    if (currentScrollPosition <= approxRangeLeft)
-      updateCurrentViewRenderPayload("left", currentView);
-  };
-
-  return (
-    <div
-      className={`${
-        fullScreenMode
-          ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
-          : `relative`
-      } ${
-        border ? `border border-custom-border-200` : ``
-      } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
-    >
-      {/* chart header */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
-        {title && (
-          <div className="text-lg font-medium flex gap-2 items-center">
-            <div>
-              {/*{title}*/}
-
-              {title === "Issues" && <span> 任务</span>}
-            </div>
-            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
-              Gantt View Beta
-            </div> */}
-          </div>
-        )}
-
-        <div className="ml-auto">
-          {blocks === null ? (
-            <div className="text-sm font-medium ml-auto">正在加载...</div>
-          ) : (
-            <div className="text-sm font-medium ml-auto">
-              {blocks.length}
-              {/*{loaderTitle}*/}
-              {loaderTitle === "Issues" && <span> 任务</span>}
-            </div>
-          )}
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2">
-          {allViews &&
-            allViews.length > 0 &&
-            allViews.map((_chatView: any, _idx: any) => (
-              <div
-                key={_chatView?.key}
-                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
-                  currentView === _chatView?.key
-                    ? `bg-custom-background-80`
-                    : `hover:bg-custom-background-90`
-                }`}
-                onClick={() => handleChartView(_chatView?.key)}
-              >
-                {/*{_chatView?.title}*/}
-
-                {_chatView?.title === "Month" && <span>月</span>}
-              </div>
-            ))}
-        </div>
-
-        <div className="flex items-center gap-1">
-          <div
-            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
-            onClick={handleToday}
-          >
-            今日
-          </div>
-        </div>
-
-        <div
-          className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
-          onClick={() => setFullScreenMode((prevData) => !prevData)}
-        >
-          {fullScreenMode ? (
-            <ArrowsPointingInIcon className="h-4 w-4" />
-          ) : (
-            <ArrowsPointingOutIcon className="h-4 w-4" />
-          )}
-        </div>
-      </div>
-
-      {/* content */}
-      <div
-        id="gantt-container"
-        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
-          bottomSpacing ? "mb-8" : ""
-        }`}
-      >
-        <div
-          id="gantt-sidebar"
-          className="h-full w-1/4 flex flex-col border-r border-custom-border-200 space-y-3"
-        >
-          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
-          <GanttSidebar
-            title={title}
-            blockUpdateHandler={blockUpdateHandler}
-            blocks={chartBlocks}
-            SidebarBlockRender={SidebarBlockRender}
-            enableReorder={enableReorder}
-          />
-        </div>
-        <div
-          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
-          id="scroll-container"
-          onScroll={onScroll}
-        >
-          {/* {currentView && currentView === "hours" && <HourChartView />} */}
-          {/* {currentView && currentView === "day" && <DayChartView />} */}
-          {/* {currentView && currentView === "week" && <WeekChartView />} */}
-          {/* {currentView && currentView === "bi_week" && <BiWeekChartView />} */}
-          {currentView && currentView === "month" && <MonthChartView />}
-          {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
-          {/* {currentView && currentView === "year" && <YearChartView />} */}
-
-          {/* blocks */}
-          {currentView && currentViewData && (
-            <GanttChartBlocks
-              itemsContainerWidth={itemsContainerWidth}
-              blocks={chartBlocks}
-              BlockRender={BlockRender}
-              blockUpdateHandler={blockUpdateHandler}
-              enableBlockLeftResize={enableBlockLeftResize}
-              enableBlockRightResize={enableBlockRightResize}
-              enableBlockMove={enableBlockMove}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/gantt-chart/contexts/index.tsx b/apps/app/components/gantt-chart/contexts/index.tsx
deleted file mode 100644
index 05dfbe67879..00000000000
--- a/apps/app/components/gantt-chart/contexts/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { createContext, useState } from "react";
-// types
-import { ChartContextData, ChartContextActionPayload, ChartContextReducer } from "../types";
-// data
-import { allViewsWithData, currentViewDataWithView } from "../data";
-
-export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);
-
-const chartReducer = (
-  state: ChartContextData,
-  action: ChartContextActionPayload
-): ChartContextData => {
-  switch (action.type) {
-    case "CURRENT_VIEW":
-      return { ...state, currentView: action.payload };
-    case "CURRENT_VIEW_DATA":
-      return { ...state, currentViewData: action.payload };
-    case "RENDER_VIEW":
-      return { ...state, currentViewData: action.payload };
-    case "PARTIAL_UPDATE":
-      return { ...state, ...action.payload };
-    default:
-      return state;
-  }
-};
-
-const initialView = "month";
-
-export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useState<ChartContextData>({
-    currentView: initialView,
-    currentViewData: currentViewDataWithView(initialView),
-    renderView: [],
-    allViews: allViewsWithData,
-    activeBlock: null,
-  });
-
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
-    const newState = chartReducer(state, action);
-
-    dispatch(() => newState);
-
-    return newState;
-  };
-
-  const updateScrollLeft = (scrollLeft: number) => {
-    setScrollLeft(scrollLeft);
-  };
-
-  return (
-    <ChartContext.Provider
-      value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}
-    >
-      {children}
-    </ChartContext.Provider>
-  );
-};
diff --git a/apps/app/components/gantt-chart/helpers/block-structure.tsx b/apps/app/components/gantt-chart/helpers/block-structure.tsx
deleted file mode 100644
index ab2475bdd17..00000000000
--- a/apps/app/components/gantt-chart/helpers/block-structure.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// types
-import { IIssue } from "types";
-import { IGanttBlock } from "components/gantt-chart";
-
-export const renderIssueBlocksStructure = (blocks: IIssue[]): IGanttBlock[] =>
-  blocks && blocks.length > 0
-    ? blocks.map((block) => ({
-        data: block,
-        id: block.id,
-        sort_order: block.sort_order,
-        start_date: new Date(block.start_date ?? ""),
-        target_date: new Date(block.target_date ?? ""),
-      }))
-    : [];
diff --git a/apps/app/components/gantt-chart/hooks/block-update.tsx b/apps/app/components/gantt-chart/hooks/block-update.tsx
deleted file mode 100644
index 68e1f6d1216..00000000000
--- a/apps/app/components/gantt-chart/hooks/block-update.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { KeyedMutator } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-import { IBlockUpdateData } from "../types";
-
-export const updateGanttIssue = (
-  issue: IIssue,
-  payload: IBlockUpdateData,
-  mutate: KeyedMutator<any>,
-  user: ICurrentUserResponse | undefined,
-  workspaceSlug: string | undefined
-) => {
-  if (!issue || !workspaceSlug || !user) return;
-
-  mutate((prevData: any) => {
-    if (!prevData) return prevData;
-
-    const newList = prevData.map((p: any) => ({
-      ...p,
-      ...(p.id === issue.id ? payload : {}),
-    }));
-
-    if (payload.sort_order) {
-      const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-      removedElement.sort_order = payload.sort_order.newSortOrder;
-      newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-    }
-
-    return newList;
-  }, false);
-
-  const newPayload: any = { ...payload };
-
-  if (newPayload.sort_order && payload.sort_order)
-    newPayload.sort_order = payload.sort_order.newSortOrder;
-
-  issuesService.patchIssue(workspaceSlug, issue.project, issue.id, newPayload, user);
-};
diff --git a/apps/app/components/gantt-chart/root.tsx b/apps/app/components/gantt-chart/root.tsx
deleted file mode 100644
index 5acedd53e59..00000000000
--- a/apps/app/components/gantt-chart/root.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FC } from "react";
-// components
-import { ChartViewRoot } from "./chart";
-// context
-import { ChartContextProvider } from "./contexts";
-// types
-import { IBlockUpdateData, IGanttBlock } from "./types";
-
-type GanttChartRootProps = {
-  border?: boolean;
-  title: string;
-  loaderTitle: string;
-  blocks: IGanttBlock[] | null;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: FC<any>;
-  BlockRender: FC<any>;
-  enableBlockLeftResize?: boolean;
-  enableBlockRightResize?: boolean;
-  enableBlockMove?: boolean;
-  enableReorder?: boolean;
-  bottomSpacing?: boolean;
-};
-
-export const GanttChartRoot: FC<GanttChartRootProps> = ({
-  border = true,
-  title,
-  blocks,
-  loaderTitle = "blocks",
-  blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
-  enableBlockLeftResize = true,
-  enableBlockRightResize = true,
-  enableBlockMove = true,
-  enableReorder = true,
-  bottomSpacing = false,
-}) => (
-  <ChartContextProvider>
-    <ChartViewRoot
-      border={border}
-      title={title}
-      blocks={blocks}
-      loaderTitle={loaderTitle}
-      blockUpdateHandler={blockUpdateHandler}
-      SidebarBlockRender={SidebarBlockRender}
-      BlockRender={BlockRender}
-      enableBlockLeftResize={enableBlockLeftResize}
-      enableBlockRightResize={enableBlockRightResize}
-      enableBlockMove={enableBlockMove}
-      enableReorder={enableReorder}
-      bottomSpacing={bottomSpacing}
-    />
-  </ChartContextProvider>
-);
diff --git a/apps/app/components/gantt-chart/sidebar.tsx b/apps/app/components/gantt-chart/sidebar.tsx
deleted file mode 100644
index 92e7a603d9f..00000000000
--- a/apps/app/components/gantt-chart/sidebar.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-// hooks
-import { useChart } from "./hooks";
-// ui
-import { Loader } from "components/ui";
-// icons
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-// types
-import { IBlockUpdateData, IGanttBlock } from "./types";
-
-type Props = {
-  title: string;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  SidebarBlockRender: React.FC<any>;
-  enableReorder: boolean;
-};
-
-export const GanttSidebar: React.FC<Props> = ({
-  title,
-  blockUpdateHandler,
-  blocks,
-  SidebarBlockRender,
-  enableReorder,
-}) => {
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1)
-      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <DragDropContext onDragEnd={handleOrderChange}>
-      <StrictModeDroppable droppableId="gantt-sidebar">
-        {(droppableProvided) => (
-          <div
-            className="h-full overflow-y-auto pl-2.5"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
-            <>
-              {blocks ? (
-                blocks.length > 0 ? (
-                  blocks.map((block, index) => (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={`h-11 ${
-                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
-                          }`}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <EllipsisVerticalIcon className="h-4" />
-                                <EllipsisVerticalIcon className="h-4 -ml-5" />
-                              </button>
-                            )}
-                            <div className="flex-grow truncate w-full h-full">
-                              <SidebarBlockRender data={block.data} />
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  ))
-                ) : (
-                  <div className="text-custom-text-200 text-sm text-center mt-8">
-                    No <span className="lowercase">{title}</span> found
-                  </div>
-                )
-              ) : (
-                <Loader className="pr-2 space-y-3">
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                </Loader>
-              )}
-              {droppableProvided.placeholder}
-            </>
-          </div>
-        )}
-      </StrictModeDroppable>
-    </DragDropContext>
-  );
-};
diff --git a/apps/app/components/icons/backlog-state-icon.tsx b/apps/app/components/icons/backlog-state-icon.tsx
deleted file mode 100644
index 2c140a1122f..00000000000
--- a/apps/app/components/icons/backlog-state-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const BacklogStateIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "rgb(var(--color-text-200))",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
-  </svg>
-);
diff --git a/apps/app/components/icons/blocked-icon.tsx b/apps/app/components/icons/blocked-icon.tsx
deleted file mode 100644
index ee0024fa093..00000000000
--- a/apps/app/components/icons/blocked-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const BlockedIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 23 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
-        fill="#F76659"
-      />
-      <path
-        d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
-        fill="#F76659"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/blocker-icon.tsx b/apps/app/components/icons/blocker-icon.tsx
deleted file mode 100644
index 093728cd8e5..00000000000
--- a/apps/app/components/icons/blocker-icon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const BlockerIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 23 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
-        fill="#F7AE59"
-      />
-      <path
-        d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
-        fill="#F7AE59"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/bolt-icon.tsx b/apps/app/components/icons/bolt-icon.tsx
deleted file mode 100644
index 569767aa52c..00000000000
--- a/apps/app/components/icons/bolt-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const BoltIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M10.6002 21C10.4169 21 10.2752 20.9417 10.1752 20.825C10.0752 20.7083 10.0419 20.5583 10.0752 20.375L11.0002 13.95H7.3502C7.16686 13.95 7.03353 13.8667 6.9502 13.7C6.86686 13.5333 6.86686 13.375 6.9502 13.225L12.8752 3.325C12.9252 3.24167 13.0085 3.16667 13.1252 3.1C13.2419 3.03333 13.3585 3 13.4752 3C13.6585 3 13.8002 3.05833 13.9002 3.175C14.0002 3.29167 14.0335 3.44167 14.0002 3.625L13.0752 10.025H16.6752C16.8585 10.025 16.996 10.1083 17.0877 10.275C17.1794 10.4417 17.1835 10.6 17.1002 10.75L11.2002 20.675C11.1502 20.7583 11.0669 20.8333 10.9502 20.9C10.8335 20.9667 10.7169 21 10.6002 21V21Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/cancel-icon.tsx b/apps/app/components/icons/cancel-icon.tsx
deleted file mode 100644
index c3170ca329d..00000000000
--- a/apps/app/components/icons/cancel-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CancelIcon: React.FC<Props> = ({ width, height, className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M7.725 16.275C7.875 16.425 8.05 16.5 8.25 16.5C8.45 16.5 8.625 16.425 8.775 16.275L12 13.05L15.25 16.3C15.3833 16.4333 15.5542 16.4958 15.7625 16.4875C15.9708 16.4792 16.1417 16.4083 16.275 16.275C16.425 16.125 16.5 15.95 16.5 15.75C16.5 15.55 16.425 15.375 16.275 15.225L13.05 12L16.3 8.75C16.4333 8.61667 16.4958 8.44583 16.4875 8.2375C16.4792 8.02917 16.4083 7.85833 16.275 7.725C16.125 7.575 15.95 7.5 15.75 7.5C15.55 7.5 15.375 7.575 15.225 7.725L12 10.95L8.75 7.7C8.61667 7.56667 8.44583 7.50417 8.2375 7.5125C8.02917 7.52083 7.85833 7.59167 7.725 7.725C7.575 7.875 7.5 8.05 7.5 8.25C7.5 8.45 7.575 8.625 7.725 8.775L10.95 12L7.7 15.25C7.56667 15.3833 7.50417 15.5542 7.5125 15.7625C7.52083 15.9708 7.59167 16.1417 7.725 16.275ZM12 22C10.5833 22 9.26667 21.7458 8.05 21.2375C6.83333 20.7292 5.775 20.025 4.875 19.125C3.975 18.225 3.27083 17.1667 2.7625 15.95C2.25417 14.7333 2 13.4167 2 12C2 10.6 2.25417 9.29167 2.7625 8.075C3.27083 6.85833 3.975 5.8 4.875 4.9C5.775 4 6.83333 3.29167 8.05 2.775C9.26667 2.25833 10.5833 2 12 2C13.4 2 14.7083 2.25833 15.925 2.775C17.1417 3.29167 18.2 4 19.1 4.9C20 5.8 20.7083 6.85833 21.225 8.075C21.7417 9.29167 22 10.6 22 12C22 13.4167 21.7417 14.7333 21.225 15.95C20.7083 17.1667 20 18.225 19.1 19.125C18.2 20.025 17.1417 20.7292 15.925 21.2375C14.7083 21.7458 13.4 22 12 22ZM12 20.5C14.3333 20.5 16.3333 19.6667 18 18C19.6667 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6667 7.66667 18 6C16.3333 4.33333 14.3333 3.5 12 3.5C9.66667 3.5 7.66667 4.33333 6 6C4.33333 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.33333 16.3333 6 18C7.66667 19.6667 9.66667 20.5 12 20.5Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/cancelled-state-icon.tsx b/apps/app/components/icons/cancelled-state-icon.tsx
deleted file mode 100644
index 5829146ff8d..00000000000
--- a/apps/app/components/icons/cancelled-state-icon.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CancelledStateIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#f2655a",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 84.36 84.36"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,32.44q9.54,9.75,19.09,19.48"
-        />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,51.92,51.73,32.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/app/components/icons/clipboard-icon.tsx b/apps/app/components/icons/clipboard-icon.tsx
deleted file mode 100644
index c96aa3fde30..00000000000
--- a/apps/app/components/icons/clipboard-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const ClipboardIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.5 21C4.08333 21 3.72917 20.8542 3.4375 20.5625C3.14583 20.2708 3 19.9167 3 19.5V4.5C3 4.08333 3.14583 3.72917 3.4375 3.4375C3.72917 3.14583 4.08333 3 4.5 3H9.625C9.70833 2.41667 9.975 1.9375 10.425 1.5625C10.875 1.1875 11.4 1 12 1C12.6 1 13.125 1.1875 13.575 1.5625C14.025 1.9375 14.2917 2.41667 14.375 3H19.5C19.9167 3 20.2708 3.14583 20.5625 3.4375C20.8542 3.72917 21 4.08333 21 4.5V19.5C21 19.9167 20.8542 20.2708 20.5625 20.5625C20.2708 20.8542 19.9167 21 19.5 21H4.5ZM4.5 19.5H19.5V4.5H4.5V19.5ZM7 17H13.825V15.5H7V17ZM7 12.75H17V11.25H7V12.75ZM7 8.5H17V7H7V8.5ZM12 4.075C12.2333 4.075 12.4375 3.9875 12.6125 3.8125C12.7875 3.6375 12.875 3.43333 12.875 3.2C12.875 2.96667 12.7875 2.7625 12.6125 2.5875C12.4375 2.4125 12.2333 2.325 12 2.325C11.7667 2.325 11.5625 2.4125 11.3875 2.5875C11.2125 2.7625 11.125 2.96667 11.125 3.2C11.125 3.43333 11.2125 3.6375 11.3875 3.8125C11.5625 3.9875 11.7667 4.075 12 4.075ZM4.5 19.5V4.5V19.5Z"
-        fill="black"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/comment-icon.tsx b/apps/app/components/icons/comment-icon.tsx
deleted file mode 100644
index c60cca4a609..00000000000
--- a/apps/app/components/icons/comment-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CommentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M2 16.1V3.05C2 2.81667 2.10833 2.58333 2.325 2.35C2.54167 2.11667 2.76667 2 3 2H15.975C16.225 2 16.4583 2.1125 16.675 2.3375C16.8917 2.5625 17 2.8 17 3.05V11.95C17 12.1833 16.8917 12.4167 16.675 12.65C16.4583 12.8833 16.225 13 15.975 13H6L2.65 16.35C2.53333 16.4667 2.39583 16.4958 2.2375 16.4375C2.07917 16.3792 2 16.2667 2 16.1ZM3.5 3.5V11.5V3.5ZM7.025 18C6.79167 18 6.5625 17.8833 6.3375 17.65C6.1125 17.4167 6 17.1833 6 16.95V14.5H18.5V6H21C21.2333 6 21.4583 6.11667 21.675 6.35C21.8917 6.58333 22 6.825 22 7.075V21.075C22 21.2417 21.9208 21.3542 21.7625 21.4125C21.6042 21.4708 21.4667 21.4417 21.35 21.325L18.025 18H7.025ZM15.5 3.5H3.5V11.5H15.5V3.5Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/completed-cycle-icon.tsx b/apps/app/components/icons/completed-cycle-icon.tsx
deleted file mode 100644
index 615fbcb9a9e..00000000000
--- a/apps/app/components/icons/completed-cycle-icon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CompletedCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
-    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
-      <path
-        d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
-        fill={color}
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/completed-state-icon.tsx b/apps/app/components/icons/completed-state-icon.tsx
deleted file mode 100644
index 584245d58a2..00000000000
--- a/apps/app/components/icons/completed-state-icon.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CompletedStateIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#438af3",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 84.36 84.36"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M30.45,43.75l6.61,6.61L53.92,34"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/app/components/icons/current-cycle-icon.tsx b/apps/app/components/icons/current-cycle-icon.tsx
deleted file mode 100644
index 2b07edf2e6d..00000000000
--- a/apps/app/components/icons/current-cycle-icon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CurrentCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
-    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
-      <path
-        d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
-        fill={color}
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/edit-icon.tsx b/apps/app/components/icons/edit-icon.tsx
deleted file mode 100644
index c4e012e4dfe..00000000000
--- a/apps/app/components/icons/edit-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const EditIcon: React.FC<Props> = ({ width, height, className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
-        fill="#212529"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/ellipsis-horizontal-icon.tsx b/apps/app/components/icons/ellipsis-horizontal-icon.tsx
deleted file mode 100644
index cfdd66751e7..00000000000
--- a/apps/app/components/icons/ellipsis-horizontal-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const EllipsisHorizontalIcon: React.FC<Props> = ({ width, height, className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M5.2 13.1998C4.86667 13.1998 4.58333 13.0831 4.35 12.8498C4.11667 12.6165 4 12.3331 4 11.9998C4 11.6665 4.11667 11.3831 4.35 11.1498C4.58333 10.9165 4.86667 10.7998 5.2 10.7998C5.53333 10.7998 5.81667 10.9165 6.05 11.1498C6.28333 11.3831 6.4 11.6665 6.4 11.9998C6.4 12.3331 6.28333 12.6165 6.05 12.8498C5.81667 13.0831 5.53333 13.1998 5.2 13.1998ZM12 13.1998C11.6667 13.1998 11.3833 13.0831 11.15 12.8498C10.9167 12.6165 10.8 12.3331 10.8 11.9998C10.8 11.6665 10.9167 11.3831 11.15 11.1498C11.3833 10.9165 11.6667 10.7998 12 10.7998C12.3333 10.7998 12.6167 10.9165 12.85 11.1498C13.0833 11.3831 13.2 11.6665 13.2 11.9998C13.2 12.3331 13.0833 12.6165 12.85 12.8498C12.6167 13.0831 12.3333 13.1998 12 13.1998ZM18.8 13.1998C18.4667 13.1998 18.1833 13.0831 17.95 12.8498C17.7167 12.6165 17.6 12.3331 17.6 11.9998C17.6 11.6665 17.7167 11.3831 17.95 11.1498C18.1833 10.9165 18.4667 10.7998 18.8 10.7998C19.1333 10.7998 19.4167 10.9165 19.65 11.1498C19.8833 11.3831 20 11.6665 20 11.9998C20 12.3331 19.8833 12.6165 19.65 12.8498C19.4167 13.0831 19.1333 13.1998 18.8 13.1998Z"
-        fill="black"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
deleted file mode 100644
index d3b311e404a..00000000000
--- a/apps/app/components/icons/index.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-export * from "./alarm-clock-icon";
-export * from "./attachment-icon";
-export * from "./backlog-state-icon";
-export * from "./blocked-icon";
-export * from "./blocker-icon";
-export * from "./bolt-icon";
-export * from "./calendar-before-icon";
-export * from "./calendar-after-icon";
-export * from "./calendar-month-icon";
-export * from "./cancel-icon";
-export * from "./cancelled-state-icon";
-export * from "./clipboard-icon";
-export * from "./color-pallette-icon";
-export * from "./comment-icon";
-export * from "./completed-cycle-icon";
-export * from "./completed-state-icon";
-export * from "./current-cycle-icon";
-export * from "./cycle-icon";
-export * from "./discord-icon";
-export * from "./document-icon";
-export * from "./edit-icon";
-export * from "./ellipsis-horizontal-icon";
-export * from "./external-link-icon";
-export * from "./github-icon";
-export * from "./heartbeat-icon";
-export * from "./started-state-icon";
-export * from "./layer-diagonal-icon";
-export * from "./lock-icon";
-export * from "./menu-icon";
-export * from "./module";
-export * from "./pencil-scribble-icon";
-export * from "./plus-icon";
-export * from "./person-running-icon";
-export * from "./priority-icon";
-export * from "./question-mark-circle-icon";
-export * from "./setting-icon";
-export * from "./signal-cellular-icon";
-export * from "./stacked-layers-icon";
-export * from "./started-state-icon";
-export * from "./state-group-icon";
-export * from "./tag-icon";
-export * from "./tune-icon";
-export * from "./unstarted-state-icon";
-export * from "./upcoming-cycle-icon";
-export * from "./user-group-icon";
-export * from "./user-icon-circle";
-export * from "./user-icon";
-export * from "./grid-view-icons";
-export * from "./assignment-clipboard-icon";
-export * from "./tick-mark-icon";
-export * from "./target-icon";
-export * from "./contrast-icon";
-export * from "./people-group-icon";
-export * from "./cmd-icon";
-export * from "./view-list-icon";
-export * from "./exclamation-icon";
-export * from "./arrow-right";
-export * from "./cog";
-export * from "./cloud-upload";
-export * from "./users";
-export * from "./import-layers";
-export * from "./check";
-export * from "./water-drop-icon";
-export * from "./transfer-icon";
-export * from "./pdf-file-icon";
-export * from "./csv-file-icon";
-export * from "./sheet-file-icon";
-export * from "./doc-file-icon";
-export * from "./html-file-icon";
-export * from "./css-file-icon";
-export * from "./js-file-icon";
-export * from "./figma-file-icon";
-export * from "./img-file-icon";
-export * from "./png-file-icon";
-export * from "./jpg-file-icon";
-export * from "./svg-file-icon";
-export * from "./txt-file-icon";
-export * from "./triangle-exclamation-icon";
-export * from "./default-file-icon";
-export * from "./video-file-icon";
-export * from "./audio-file-icon";
-export * from "./command-icon";
-export * from "./color-picker-icon";
-export * from "./inbox-icon";
-export * from "./stacked-layers-horizontal-icon";
-export * from "./sort-icon";
-export * from "./x-mark-icon";
-export * from "./archive-icon";
-export * from "./clock-icon";
-export * from "./bell-icon";
-export * from "./single-comment-icon";
diff --git a/apps/app/components/icons/lock-icon.tsx b/apps/app/components/icons/lock-icon.tsx
deleted file mode 100644
index d0c9cffb74b..00000000000
--- a/apps/app/components/icons/lock-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const LockIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M6 22C5.58333 22 5.22917 21.8542 4.9375 21.5625C4.64583 21.2708 4.5 20.9167 4.5 20.5V9.65C4.5 9.23333 4.64583 8.87917 4.9375 8.5875C5.22917 8.29583 5.58333 8.15 6 8.15H7.75V5.75C7.75 4.43333 8.2125 3.3125 9.1375 2.3875C10.0625 1.4625 11.1833 1 12.5 1C13.8167 1 14.9375 1.4625 15.8625 2.3875C16.7875 3.3125 17.25 4.43333 17.25 5.75V8.15H19C19.4167 8.15 19.7708 8.29583 20.0625 8.5875C20.3542 8.87917 20.5 9.23333 20.5 9.65V20.5C20.5 20.9167 20.3542 21.2708 20.0625 21.5625C19.7708 21.8542 19.4167 22 19 22H6ZM6 20.5H19V9.65H6V20.5ZM12.5 17C13.0333 17 13.4875 16.8167 13.8625 16.45C14.2375 16.0833 14.425 15.6417 14.425 15.125C14.425 14.625 14.2375 14.1708 13.8625 13.7625C13.4875 13.3542 13.0333 13.15 12.5 13.15C11.9667 13.15 11.5125 13.3542 11.1375 13.7625C10.7625 14.1708 10.575 14.625 10.575 15.125C10.575 15.6417 10.7625 16.0833 11.1375 16.45C11.5125 16.8167 11.9667 17 12.5 17ZM9.25 8.15H15.75V5.75C15.75 4.85 15.4333 4.08333 14.8 3.45C14.1667 2.81667 13.4 2.5 12.5 2.5C11.6 2.5 10.8333 2.81667 10.2 3.45C9.56667 4.08333 9.25 4.85 9.25 5.75V8.15ZM6 20.5V9.65V20.5Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/menu-icon.tsx b/apps/app/components/icons/menu-icon.tsx
deleted file mode 100644
index 0a8816b751b..00000000000
--- a/apps/app/components/icons/menu-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const MenuIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3.75 18C3.53333 18 3.35417 17.9292 3.2125 17.7875C3.07083 17.6458 3 17.4667 3 17.25C3 17.0333 3.07083 16.8542 3.2125 16.7125C3.35417 16.5708 3.53333 16.5 3.75 16.5H20.25C20.4667 16.5 20.6458 16.5708 20.7875 16.7125C20.9292 16.8542 21 17.0333 21 17.25C21 17.4667 20.9292 17.6458 20.7875 17.7875C20.6458 17.9292 20.4667 18 20.25 18H3.75ZM3.75 12.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H3.75ZM3.75 7.5C3.53333 7.5 3.35417 7.42917 3.2125 7.2875C3.07083 7.14583 3 6.96667 3 6.75C3 6.53333 3.07083 6.35417 3.2125 6.2125C3.35417 6.07083 3.53333 6 3.75 6H20.25C20.4667 6 20.6458 6.07083 20.7875 6.2125C20.9292 6.35417 21 6.53333 21 6.75C21 6.96667 20.9292 7.14583 20.7875 7.2875C20.6458 7.42917 20.4667 7.5 20.25 7.5H3.75Z"
-        fill="#212529"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/module/cancelled.tsx b/apps/app/components/icons/module/cancelled.tsx
deleted file mode 100644
index 9bfc0294381..00000000000
--- a/apps/app/components/icons/module/cancelled.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-
-type Props = {
-  width?: string;
-  height?: string;
-  className?: string;
-  color?: string;
-};
-
-export const ModuleCancelledIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_4052_100277)">
-      <path
-        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
-        fill="#ef4444"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_4052_100277">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
diff --git a/apps/app/components/icons/module/paused.tsx b/apps/app/components/icons/module/paused.tsx
deleted file mode 100644
index 56ebcfd986f..00000000000
--- a/apps/app/components/icons/module/paused.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-type Props = {
-  width?: string;
-  height?: string;
-  className?: string;
-  color?: string;
-};
-
-export const ModulePausedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_4052_100275)">
-      <path
-        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
-        fill="#525252"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_4052_100275">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
diff --git a/apps/app/components/icons/plus-icon.tsx b/apps/app/components/icons/plus-icon.tsx
deleted file mode 100644
index 0b958a21d67..00000000000
--- a/apps/app/components/icons/plus-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const PlusIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 19C11.7833 19 11.6042 18.9292 11.4625 18.7875C11.3208 18.6458 11.25 18.4667 11.25 18.25V12.75H5.75C5.53333 12.75 5.35417 12.6792 5.2125 12.5375C5.07083 12.3958 5 12.2167 5 12C5 11.7833 5.07083 11.6042 5.2125 11.4625C5.35417 11.3208 5.53333 11.25 5.75 11.25H11.25V5.75C11.25 5.53333 11.3208 5.35417 11.4625 5.2125C11.6042 5.07083 11.7833 5 12 5C12.2167 5 12.3958 5.07083 12.5375 5.2125C12.6792 5.35417 12.75 5.53333 12.75 5.75V11.25H18.25C18.4667 11.25 18.6458 11.3208 18.7875 11.4625C18.9292 11.6042 19 11.7833 19 12C19 12.2167 18.9292 12.3958 18.7875 12.5375C18.6458 12.6792 18.4667 12.75 18.25 12.75H12.75V18.25C12.75 18.4667 12.6792 18.6458 12.5375 18.7875C12.3958 18.9292 12.2167 19 12 19Z"
-        fill="#FFFFFF"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/priority-icon.tsx b/apps/app/components/icons/priority-icon.tsx
deleted file mode 100644
index 58212ca5a32..00000000000
--- a/apps/app/components/icons/priority-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export const getPriorityIcon = (priority: string | null, className?: string) => {
-  if (!className || className === "") className = "text-xs flex items-center";
-
-  priority = priority?.toLowerCase() ?? null;
-
-  switch (priority) {
-    case "urgent":
-      return <span className={`material-symbols-rounded ${className}`}>error</span>;
-    case "high":
-      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
-    case "medium":
-      return (
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
-      );
-    case "low":
-      return (
-        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
-      );
-    default:
-      return <span className={`material-symbols-rounded ${className}`}>block</span>;
-  }
-};
diff --git a/apps/app/components/icons/question-mark-circle-icon.tsx b/apps/app/components/icons/question-mark-circle-icon.tsx
deleted file mode 100644
index 2cdf9d8e575..00000000000
--- a/apps/app/components/icons/question-mark-circle-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const QuestionMarkCircleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M12.1 17.825C12.3667 17.825 12.5917 17.7333 12.775 17.55C12.9583 17.3667 13.05 17.1417 13.05 16.875C13.05 16.6083 12.9583 16.3833 12.775 16.2C12.5917 16.0167 12.3667 15.925 12.1 15.925C11.8333 15.925 11.6083 16.0167 11.425 16.2C11.2417 16.3833 11.15 16.6083 11.15 16.875C11.15 17.1417 11.2417 17.3667 11.425 17.55C11.6083 17.7333 11.8333 17.825 12.1 17.825ZM12.075 7.5C12.6417 7.5 13.1 7.65417 13.45 7.9625C13.8 8.27083 13.975 8.66667 13.975 9.15C13.975 9.48333 13.875 9.8125 13.675 10.1375C13.475 10.4625 13.15 10.8167 12.7 11.2C12.2667 11.5833 11.9208 11.9875 11.6625 12.4125C11.4042 12.8375 11.275 13.225 11.275 13.575C11.275 13.7583 11.3458 13.9042 11.4875 14.0125C11.6292 14.1208 11.7917 14.175 11.975 14.175C12.175 14.175 12.3417 14.1083 12.475 13.975C12.6083 13.8417 12.6917 13.675 12.725 13.475C12.775 13.1417 12.8875 12.8458 13.0625 12.5875C13.2375 12.3292 13.5083 12.05 13.875 11.75C14.375 11.3333 14.7375 10.9167 14.9625 10.5C15.1875 10.0833 15.3 9.61667 15.3 9.1C15.3 8.21667 15.0125 7.50833 14.4375 6.975C13.8625 6.44167 13.1 6.175 12.15 6.175C11.5167 6.175 10.9333 6.3 10.4 6.55C9.86667 6.8 9.425 7.16667 9.075 7.65C8.94167 7.83333 8.8875 8.02083 8.9125 8.2125C8.9375 8.40417 9.01667 8.55 9.15 8.65C9.33333 8.78333 9.52917 8.825 9.7375 8.775C9.94583 8.725 10.1167 8.60833 10.25 8.425C10.4667 8.125 10.7292 7.89583 11.0375 7.7375C11.3458 7.57917 11.6917 7.5 12.075 7.5ZM12 22C10.6 22 9.29167 21.7458 8.075 21.2375C6.85833 20.7292 5.8 20.025 4.9 19.125C4 18.225 3.29167 17.1667 2.775 15.95C2.25833 14.7333 2 13.4167 2 12C2 10.6 2.25833 9.29167 2.775 8.075C3.29167 6.85833 4 5.8 4.9 4.9C5.8 4 6.85833 3.29167 8.075 2.775C9.29167 2.25833 10.6 2 12 2C13.3833 2 14.6833 2.25833 15.9 2.775C17.1167 3.29167 18.175 4 19.075 4.9C19.975 5.8 20.6875 6.85833 21.2125 8.075C21.7375 9.29167 22 10.6 22 12C22 13.4167 21.7375 14.7333 21.2125 15.95C20.6875 17.1667 19.975 18.225 19.075 19.125C18.175 20.025 17.1167 20.7292 15.9 21.2375C14.6833 21.7458 13.3833 22 12 22ZM12 20.5C14.35 20.5 16.3542 19.6667 18.0125 18C19.6708 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6708 7.66667 18.0125 6C16.3542 4.33333 14.35 3.5 12 3.5C9.61667 3.5 7.60417 4.33333 5.9625 6C4.32083 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.32083 16.3333 5.9625 18C7.60417 19.6667 9.61667 20.5 12 20.5Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/signal-cellular-icon.tsx b/apps/app/components/icons/signal-cellular-icon.tsx
deleted file mode 100644
index 0e785d95867..00000000000
--- a/apps/app/components/icons/signal-cellular-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const SignalCellularIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M18.75 20C18.4 20 18.1042 19.8792 17.8625 19.6375C17.6208 19.3958 17.5 19.1 17.5 18.75V5.25C17.5 4.9 17.6208 4.60417 17.8625 4.3625C18.1042 4.12083 18.4 4 18.75 4C19.1 4 19.3958 4.12083 19.6375 4.3625C19.8792 4.60417 20 4.9 20 5.25V18.75C20 19.1 19.8792 19.3958 19.6375 19.6375C19.3958 19.8792 19.1 20 18.75 20ZM6.275 20C6.09167 20 5.92083 19.9667 5.7625 19.9C5.60417 19.8333 5.47083 19.7458 5.3625 19.6375C5.25417 19.5292 5.16667 19.3958 5.1 19.2375C5.03333 19.0792 5 18.9167 5 18.75V15.25C5 14.9 5.12083 14.6042 5.3625 14.3625C5.60417 14.1208 5.9 14 6.25 14C6.6 14 6.89583 14.1208 7.1375 14.3625C7.37917 14.6042 7.5 14.9 7.5 15.25V18.75C7.5 18.9167 7.46667 19.0792 7.4 19.2375C7.33333 19.3958 7.24583 19.5292 7.1375 19.6375C7.02917 19.7458 6.9 19.8333 6.75 19.9C6.6 19.9667 6.44167 20 6.275 20ZM12.5 20C12.15 20 11.8542 19.8792 11.6125 19.6375C11.3708 19.3958 11.25 19.1 11.25 18.75V10.25C11.25 9.9 11.3708 9.60417 11.6125 9.3625C11.8542 9.12083 12.15 9 12.5 9C12.85 9 13.1458 9.12083 13.3875 9.3625C13.6292 9.60417 13.75 9.9 13.75 10.25V18.75C13.75 19.1 13.6292 19.3958 13.3875 19.6375C13.1458 19.8792 12.85 20 12.5 20Z"
-        fill="#212529"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/started-state-icon.tsx b/apps/app/components/icons/started-state-icon.tsx
deleted file mode 100644
index 20de015379d..00000000000
--- a/apps/app/components/icons/started-state-icon.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const StartedStateIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#fbb040",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 83.36 83.36"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/app/components/icons/state-group-icon.tsx b/apps/app/components/icons/state-group-icon.tsx
deleted file mode 100644
index 522e0b9dc40..00000000000
--- a/apps/app/components/icons/state-group-icon.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  BacklogStateIcon,
-  CancelledStateIcon,
-  CompletedStateIcon,
-  StartedStateIcon,
-  UnstartedStateIcon,
-} from "components/icons";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-export const getStateGroupIcon = (
-  stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled",
-  width = "20",
-  height = "20",
-  color?: string
-) => {
-  switch (stateGroup) {
-    case "backlog":
-      return (
-        <BacklogStateIcon
-          width={width}
-          height={height}
-          color={color ?? STATE_GROUP_COLORS["backlog"]}
-          className="flex-shrink-0"
-        />
-      );
-    case "unstarted":
-      return (
-        <UnstartedStateIcon
-          width={width}
-          height={height}
-          color={color ?? STATE_GROUP_COLORS["unstarted"]}
-          className="flex-shrink-0"
-        />
-      );
-    case "started":
-      return (
-        <StartedStateIcon
-          width={width}
-          height={height}
-          color={color ?? STATE_GROUP_COLORS["started"]}
-          className="flex-shrink-0"
-        />
-      );
-    case "completed":
-      return (
-        <CompletedStateIcon
-          width={width}
-          height={height}
-          color={color ?? STATE_GROUP_COLORS["completed"]}
-          className="flex-shrink-0"
-        />
-      );
-    case "cancelled":
-      return (
-        <CancelledStateIcon
-          width={width}
-          height={height}
-          color={color ?? STATE_GROUP_COLORS["cancelled"]}
-          className="flex-shrink-0"
-        />
-      );
-    default:
-      return <></>;
-  }
-};
diff --git a/apps/app/components/icons/tag-icon.tsx b/apps/app/components/icons/tag-icon.tsx
deleted file mode 100644
index a17d4c1e400..00000000000
--- a/apps/app/components/icons/tag-icon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const TagIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M13.975 21.575C13.675 21.875 13.3125 22.025 12.8875 22.025C12.4625 22.025 12.1 21.875 11.8 21.575L2.425 12.2C2.25833 12.0333 2.14583 11.8583 2.0875 11.675C2.02917 11.4917 2 11.3 2 11.1V3.5C2 3.06667 2.14167 2.70833 2.425 2.425C2.70833 2.14167 3.06667 2 3.5 2H11.1C11.3 2 11.5 2.02917 11.7 2.0875C11.9 2.14583 12.0833 2.25833 12.25 2.425L21.575 11.75C21.8917 12.0667 22.05 12.4375 22.05 12.8625C22.05 13.2875 21.8917 13.6583 21.575 13.975L13.975 21.575ZM12.95 20.55L20.55 12.95L11.1 3.5H3.5V11.1L12.95 20.55ZM6.125 7.4C6.475 7.4 6.77917 7.27083 7.0375 7.0125C7.29583 6.75417 7.425 6.45 7.425 6.1C7.425 5.75 7.29583 5.44583 7.0375 5.1875C6.77917 4.92917 6.475 4.8 6.125 4.8C5.775 4.8 5.47083 4.92917 5.2125 5.1875C4.95417 5.44583 4.825 5.75 4.825 6.1C4.825 6.45 4.95417 6.75417 5.2125 7.0125C5.47083 7.27083 5.775 7.4 6.125 7.4Z"
-        fill={color}
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/transfer-icon.tsx b/apps/app/components/icons/transfer-icon.tsx
deleted file mode 100644
index 176c38b2908..00000000000
--- a/apps/app/components/icons/transfer-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const TransferIcon: React.FC<Props> = ({ width, height, className, color }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 18 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-     <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" fill={color}/>
-    </svg>
-  );
diff --git a/apps/app/components/icons/tune-icon.tsx b/apps/app/components/icons/tune-icon.tsx
deleted file mode 100644
index 1221b297679..00000000000
--- a/apps/app/components/icons/tune-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const TuneIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
-        fill="#212529"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/unstarted-state-icon.tsx b/apps/app/components/icons/unstarted-state-icon.tsx
deleted file mode 100644
index 161a0ab2ae0..00000000000
--- a/apps/app/components/icons/unstarted-state-icon.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const UnstartedStateIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "rgb(var(--color-text-200))",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 84.36 84.36"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/app/components/icons/upcoming-cycle-icon.tsx b/apps/app/components/icons/upcoming-cycle-icon.tsx
deleted file mode 100644
index 52961e15ea8..00000000000
--- a/apps/app/components/icons/upcoming-cycle-icon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const UpcomingCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
-    <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
-      <path
-        d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"
-        fill={color}
-      />
-    </svg>
-  );
diff --git a/apps/app/components/icons/user-icon-circle.tsx b/apps/app/components/icons/user-icon-circle.tsx
deleted file mode 100644
index 8bae3413367..00000000000
--- a/apps/app/components/icons/user-icon-circle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const UserCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M5.55 17.625C6.6 16.8917 7.64167 16.3292 8.675 15.9375C9.70833 15.5458 10.8167 15.35 12 15.35C13.1833 15.35 14.2958 15.5458 15.3375 15.9375C16.3792 16.3292 17.425 16.8917 18.475 17.625C19.2083 16.725 19.7292 15.8167 20.0375 14.9C20.3458 13.9833 20.5 13.0167 20.5 12C20.5 9.58333 19.6875 7.5625 18.0625 5.9375C16.4375 4.3125 14.4167 3.5 12 3.5C9.58333 3.5 7.5625 4.3125 5.9375 5.9375C4.3125 7.5625 3.5 9.58333 3.5 12C3.5 13.0167 3.65833 13.9833 3.975 14.9C4.29167 15.8167 4.81667 16.725 5.55 17.625ZM12 12.75C11.0333 12.75 10.2208 12.4208 9.5625 11.7625C8.90417 11.1042 8.575 10.2917 8.575 9.325C8.575 8.35833 8.90417 7.54583 9.5625 6.8875C10.2208 6.22917 11.0333 5.9 12 5.9C12.9667 5.9 13.7792 6.22917 14.4375 6.8875C15.0958 7.54583 15.425 8.35833 15.425 9.325C15.425 10.2917 15.0958 11.1042 14.4375 11.7625C13.7792 12.4208 12.9667 12.75 12 12.75ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6792 2.2625 15.8875 2.7875C17.0958 3.3125 18.1542 4.02917 19.0625 4.9375C19.9708 5.84583 20.6875 6.90417 21.2125 8.1125C21.7375 9.32083 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22ZM12 20.5C12.9167 20.5 13.8125 20.3667 14.6875 20.1C15.5625 19.8333 16.425 19.3667 17.275 18.7C16.425 18.1 15.5583 17.6417 14.675 17.325C13.7917 17.0083 12.9 16.85 12 16.85C11.1 16.85 10.2083 17.0083 9.325 17.325C8.44167 17.6417 7.575 18.1 6.725 18.7C7.575 19.3667 8.4375 19.8333 9.3125 20.1C10.1875 20.3667 11.0833 20.5 12 20.5ZM12 11.25C12.5667 11.25 13.0292 11.0708 13.3875 10.7125C13.7458 10.3542 13.925 9.89167 13.925 9.325C13.925 8.75833 13.7458 8.29583 13.3875 7.9375C13.0292 7.57917 12.5667 7.4 12 7.4C11.4333 7.4 10.9708 7.57917 10.6125 7.9375C10.2542 8.29583 10.075 8.75833 10.075 9.325C10.075 9.89167 10.2542 10.3542 10.6125 10.7125C10.9708 11.0708 11.4333 11.25 12 11.25Z" />
-    </svg>
-  );
diff --git a/apps/app/components/icons/user-icon.tsx b/apps/app/components/icons/user-icon.tsx
deleted file mode 100644
index c0408dad36e..00000000000
--- a/apps/app/components/icons/user-icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const UserIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
-        fill="#212529"
-      />
-    </svg>
-  );
diff --git a/apps/app/components/inbox/delete-issue-modal.tsx b/apps/app/components/inbox/delete-issue-modal.tsx
deleted file mode 100644
index 432d21fb951..00000000000
--- a/apps/app/components/inbox/delete-issue-modal.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import inboxServices from "services/inbox.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useInboxView from "hooks/use-inbox-view";
-import useUser from "hooks/use-user";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { SecondaryButton, DangerButton } from "components/ui";
-// types
-import type { IInboxIssue } from "types";
-// fetch-keys
-import { INBOX_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
-};
-
-export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  const { user } = useUser();
-  const { setToastAlert } = useToast();
-  const { params } = useInboxView();
-
-  const onClose = () => {
-    setIsDeleting(false);
-    handleClose();
-  };
-
-  const handleDelete = () => {
-    if (!workspaceSlug || !projectId || !inboxId || !data) return;
-
-    setIsDeleting(true);
-
-    inboxServices
-      .deleteInboxIssue(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        data.bridge_id.toString(),
-        user
-      )
-      .then(() => {
-        mutate<IInboxIssue[]>(
-          INBOX_ISSUES(inboxId.toString(), params),
-          (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
-          false
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "任务已成功删除",
-        });
-
-        // remove inboxIssueId from the url
-        router.push({
-          pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
-        });
-
-        onClose();
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "任务无法删除。请重试。",
-        })
-      )
-      .finally(() => setIsDeleting(false));
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div 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">
-                      <ExclamationTriangleIcon
-                        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 Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {data?.project_detail?.identifier}-{data?.sequence_id}
-                      </span>
-                      {""}? The issue will only be deleted from the inbox and this action cannot be
-                      undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDelete} loading={isDeleting}>
-                      {isDeleting ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/inbox/filters-dropdown.tsx b/apps/app/components/inbox/filters-dropdown.tsx
deleted file mode 100644
index fdca010257a..00000000000
--- a/apps/app/components/inbox/filters-dropdown.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-// ui
-import { MultiLevelDropdown } from "components/ui";
-// icons
-import { getPriorityIcon } from "components/icons";
-// constants
-import { PRIORITIES } from "constants/project";
-import { INBOX_STATUS } from "constants/inbox";
-import React from "react";
-
-export const FiltersDropdown: React.FC = () => {
-  const { filters, setFilters, filtersLength } = useInboxView();
-
-  return (
-    <div className="relative">
-      <MultiLevelDropdown
-        label="Filters"
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          const valueExists = (filters[key] as any[])?.includes(option.value);
-
-          if (valueExists) {
-            setFilters({
-              [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
-            });
-          } else {
-            setFilters({
-              [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-            });
-          }
-        }}
-        direction="right"
-        height="rg"
-        options={[
-          {
-            id: "priority",
-            label: "Priority",
-            value: PRIORITIES,
-            hasChildren: true,
-            children: PRIORITIES.map((priority) => ({
-              id: priority === null ? "null" : priority,
-              label: (
-                <div className="flex items-center gap-2 capitalize">
-                  {getPriorityIcon(priority)}
-
-                  {priority === "urgent" && <span>急</span>}
-                  {priority === "high" && <span>高</span>}
-                  {priority === "medium" && <span>中</span>}
-                  {priority === "low" && <span>低</span>}
-                  {!priority  && <span>无</span>}
-                  {/*{priority ?? "无"}*/}
-                </div>
-              ),
-              value: {
-                key: "priority",
-                value: priority === null ? "null" : priority,
-              },
-              selected: filters?.priority?.includes(priority === null ? "null" : priority),
-            })),
-          },
-          {
-            id: "inbox_status",
-            label: "Status",
-            value: INBOX_STATUS.map((status) => status.value),
-            hasChildren: true,
-            children: INBOX_STATUS.map((status) => ({
-              id: status.key,
-              label: status.label,
-              value: {
-                key: "inbox_status",
-                value: status.value,
-              },
-              selected: filters?.inbox_status?.includes(status.value),
-            })),
-          },
-        ]}
-      />
-      {filtersLength > 0 && (
-        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-200 z-10">
-          <span>{filtersLength}</span>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/inbox/filters-list.tsx b/apps/app/components/inbox/filters-list.tsx
deleted file mode 100644
index 12e89e6b31f..00000000000
--- a/apps/app/components/inbox/filters-list.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon } from "components/icons";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// constants
-import { INBOX_STATUS } from "constants/inbox";
-
-export const InboxFiltersList = () => {
-  const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView();
-
-  if (filtersLength <= 0) return <></>;
-
-  return (
-    <div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3">
-      {Object.keys(filters).map((key) => {
-        const filterKey = key as keyof typeof filters;
-
-        if (filters[filterKey] !== null)
-          return (
-            <div
-              key={key}
-              className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-            >
-              <span className="capitalize text-custom-text-200">
-                {replaceUnderscoreIfSnakeCase(key)}:
-              </span>
-              {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
-                <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-              ) : (
-                <div className="space-x-2">
-                  {filterKey === "priority" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.priority?.map((priority) => (
-                        <div
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>{getPriorityIcon(priority)}</span>
-                          <button
-                            type="button"
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p) => p !== priority),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </button>
-                        </div>
-                      ))}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            priority: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : filterKey === "inbox_status" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.inbox_status?.map((status) => (
-                        <div
-                          key={status}
-                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-custom-background-90 text-custom-text-200"
-                        >
-                          <span>{INBOX_STATUS.find((s) => s.value === status)?.label}</span>
-                          <button
-                            type="button"
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                inbox_status: filters.inbox_status?.filter((p) => p !== status),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </button>
-                        </div>
-                      ))}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            inbox_status: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : (
-                    (filters[filterKey] as any)?.join(", ")
-                  )}
-                </div>
-              )}
-            </div>
-          );
-      })}
-      <button
-        type="button"
-        onClick={clearAllFilters}
-        className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
-      >
-        <span>清除全部</span>
-        <XMarkIcon className="h-3 w-3" />
-      </button>
-    </div>
-  );
-};
diff --git a/apps/app/components/inbox/inbox-action-headers.tsx b/apps/app/components/inbox/inbox-action-headers.tsx
deleted file mode 100644
index 6f457e3d5a3..00000000000
--- a/apps/app/components/inbox/inbox-action-headers.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-datepicker
-import DatePicker from "react-datepicker";
-// headless ui
-import { Popover } from "@headlessui/react";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import inboxServices from "services/inbox.service";
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
-// components
-import {
-  AcceptIssueModal,
-  DeclineIssueModal,
-  DeleteIssueModal,
-  FiltersDropdown,
-  SelectDuplicateInboxIssueModal,
-} from "components/inbox";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  XCircleIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-// types
-import type { IInboxIssueDetail, TInboxStatus } from "types";
-// fetch-keys
-import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
-
-export const InboxActionHeader = () => {
-  const [date, setDate] = useState(new Date());
-  const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
-  const [acceptIssueModal, setAcceptIssueModal] = useState(false);
-  const [declineIssueModal, setDeclineIssueModal] = useState(false);
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
-
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-  const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView();
-  const { setToastAlert } = useToast();
-
-  const markInboxStatus = async (data: TInboxStatus) => {
-    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return;
-
-    mutate<IInboxIssueDetail>(
-      INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          issue_inbox: [{ ...prevData.issue_inbox[0], ...data }],
-        };
-      },
-      false
-    );
-    mutateInboxIssues(
-      (prevData: any) =>
-        (prevData ?? []).map((i: any) =>
-          i.bridge_id === inboxIssueId
-            ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
-            : i
-        ),
-      false
-    );
-
-    await inboxServices
-      .markInboxStatus(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
-        data,
-        user
-      )
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "在更新收件箱状态时出了问题。请重试。",
-        })
-      )
-      .finally(() => {
-        mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string));
-        mutateInboxIssues();
-      });
-  };
-
-  const issue = inboxIssues?.find((issue) => issue.bridge_id === inboxIssueId);
-  const currentIssueIndex =
-    inboxIssues?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
-
-  useEffect(() => {
-    if (!issue?.issue_inbox[0].snoozed_till) return;
-
-    setDate(new Date(issue.issue_inbox[0].snoozed_till));
-  }, [issue]);
-
-  const issueStatus = issue?.issue_inbox[0].status;
-  const isAllowed = memberRole.isMember || memberRole.isOwner;
-
-  const today = new Date();
-  const tomorrow = new Date(today);
-
-  tomorrow.setDate(today.getDate() + 1);
-
-  return (
-    <>
-      <SelectDuplicateInboxIssueModal
-        isOpen={selectDuplicateIssue}
-        onClose={() => setSelectDuplicateIssue(false)}
-        value={
-          inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0]
-            .duplicate_to
-        }
-        onSubmit={(dupIssueId: string) => {
-          markInboxStatus({
-            status: 2,
-            duplicate_to: dupIssueId,
-          }).finally(() => setSelectDuplicateIssue(false));
-        }}
-      />
-      <AcceptIssueModal
-        isOpen={acceptIssueModal}
-        handleClose={() => setAcceptIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-        onSubmit={async () => {
-          await markInboxStatus({
-            status: 1,
-          }).finally(() => setAcceptIssueModal(false));
-        }}
-      />
-      <DeclineIssueModal
-        isOpen={declineIssueModal}
-        handleClose={() => setDeclineIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-        onSubmit={async () => {
-          await markInboxStatus({
-            status: -1,
-          }).finally(() => setDeclineIssueModal(false));
-        }}
-      />
-      <DeleteIssueModal
-        isOpen={deleteIssueModal}
-        handleClose={() => setDeleteIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
-      />
-      <div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200">
-        <div className="col-span-1 flex justify-between p-4">
-          <div className="flex items-center gap-2">
-            <InboxIcon className="h-4 w-4 text-custom-text-200" />
-            <h3 className="font-medium">Inbox</h3>
-          </div>
-          <FiltersDropdown />
-        </div>
-        {inboxIssueId && (
-          <div className="flex justify-between items-center gap-4 px-4 col-span-3">
-            <div className="flex items-center gap-x-2">
-              <button
-                type="button"
-                className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
-                  document.dispatchEvent(e);
-                }}
-              >
-                <ChevronUpIcon className="h-3.5 w-3.5" />
-              </button>
-              <button
-                type="button"
-                className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
-                  document.dispatchEvent(e);
-                }}
-              >
-                <ChevronDownIcon className="h-3.5 w-3.5" />
-              </button>
-              <div className="text-sm">
-                {currentIssueIndex + 1}/{inboxIssues?.length ?? 0}
-              </div>
-            </div>
-            <div className="flex items-center gap-3 flex-wrap">
-              {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
-                <div className="flex-shrink-0">
-                  <Popover className="relative">
-                    <Popover.Button as="button" type="button">
-                      <SecondaryButton className="flex gap-x-1 items-center" size="sm">
-                        <ClockIcon className="h-4 w-4 text-custom-text-200" />
-                        <span>Snooze</span>
-                      </SecondaryButton>
-                    </Popover.Button>
-                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
-                      {({ close }) => (
-                        <div className="w-full h-full flex flex-col gap-y-1">
-                          <DatePicker
-                            selected={date ? new Date(date) : null}
-                            onChange={(val) => {
-                              if (!val) return;
-                              setDate(val);
-                            }}
-                            dateFormat="dd-MM-yyyy"
-                            minDate={tomorrow}
-                            inline
-                          />
-                          <PrimaryButton
-                            className="ml-auto"
-                            onClick={() => {
-                              close();
-                              markInboxStatus({
-                                status: 0,
-                                snoozed_till: new Date(date),
-                              });
-                            }}
-                          >
-                            Snooze
-                          </PrimaryButton>
-                        </div>
-                      )}
-                    </Popover.Panel>
-                  </Popover>
-                </div>
-              )}
-              {isAllowed && issueStatus === -2 && (
-                <div className="flex-shrink-0">
-                  <SecondaryButton
-                    size="sm"
-                    className="flex gap-2 items-center"
-                    onClick={() => setSelectDuplicateIssue(true)}
-                  >
-                    <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
-                    <span>Mark as duplicate</span>
-                  </SecondaryButton>
-                </div>
-              )}
-              {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
-                <div className="flex-shrink-0">
-                  <SecondaryButton
-                    size="sm"
-                    className="flex gap-2 items-center"
-                    onClick={() => setAcceptIssueModal(true)}
-                  >
-                    <CheckCircleIcon className="h-4 w-4 text-green-500" />
-                    <span>Accept</span>
-                  </SecondaryButton>
-                </div>
-              )}
-              {isAllowed && issueStatus === -2 && (
-                <div className="flex-shrink-0">
-                  <SecondaryButton
-                    size="sm"
-                    className="flex gap-2 items-center"
-                    onClick={() => setDeclineIssueModal(true)}
-                  >
-                    <XCircleIcon className="h-4 w-4 text-red-500" />
-                    <span>Decline</span>
-                  </SecondaryButton>
-                </div>
-              )}
-              {(isAllowed || user?.id === issue?.created_by) && (
-                <div className="flex-shrink-0">
-                  <SecondaryButton
-                    size="sm"
-                    className="flex gap-2 items-center"
-                    onClick={() => setDeleteIssueModal(true)}
-                  >
-                    <TrashIcon className="h-4 w-4 text-red-500" />
-                    <span>Delete</span>
-                  </SecondaryButton>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/inbox/inbox-issue-activity.tsx b/apps/app/components/inbox/inbox-issue-activity.tsx
deleted file mode 100644
index efa2371626b..00000000000
--- a/apps/app/components/inbox/inbox-issue-activity.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// components
-import { AddComment, IssueActivitySection } from "components/issues";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// types
-import { IIssue, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-type Props = { issueDetails: IIssue };
-
-export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { user } = useUser();
-
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && projectId && inboxIssueId
-      ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString())
-      : null,
-    workspaceSlug && projectId && inboxIssueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxIssueId.toString()
-          )
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        commentId,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issueDetails) return;
-
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <div className="space-y-5">
-      <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
-      <IssueActivitySection
-        activity={issueActivity}
-        handleCommentUpdate={handleCommentUpdate}
-        handleCommentDelete={handleCommentDelete}
-      />
-      <AddComment onSubmit={handleAddComment} />
-    </div>
-  );
-};
diff --git a/apps/app/components/inbox/inbox-issue-card.tsx b/apps/app/components/inbox/inbox-issue-card.tsx
deleted file mode 100644
index 9cc8deb7657..00000000000
--- a/apps/app/components/inbox/inbox-issue-card.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { getPriorityIcon } from "components/icons";
-import {
-  CalendarDaysIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  DocumentDuplicateIcon,
-  ExclamationTriangleIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/outline";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import type { IInboxIssue } from "types";
-// constants
-import { INBOX_STATUS } from "constants/inbox";
-
-type Props = {
-  issue: IInboxIssue;
-  active: boolean;
-};
-
-export const InboxIssueCard: React.FC<Props> = (props) => {
-  const { issue, active } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  const issueStatus = issue.issue_inbox[0].status;
-
-  return (
-    <Link
-      href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.bridge_id}`}
-    >
-      <a>
-        <div
-          id={issue.id}
-          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${
-            active ? "bg-custom-primary/5" : " "
-          } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
-        >
-          <div className="flex items-center gap-x-2">
-            <p className="flex-shrink-0 text-custom-text-200 text-xs">
-              {issue.project_detail?.identifier}-{issue.sequence_id}
-            </p>
-            <h5 className="truncate text-sm">{issue.name}</h5>
-          </div>
-          <div className="flex items-center gap-2 flex-wrap">
-            <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
-              <div
-                className={`grid h-6 w-6 place-items-center rounded border items-center shadow-sm ${
-                  issue.priority === "urgent"
-                    ? "border-red-500/20 bg-red-500/20 text-red-500"
-                    : issue.priority === "high"
-                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
-                    : issue.priority === "medium"
-                    ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
-                    : issue.priority === "low"
-                    ? "border-green-500/20 bg-green-500/20 text-green-500"
-                    : "border-custom-border-200"
-                }`}
-              >
-                {getPriorityIcon(
-                  issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                  "text-sm"
-                )}
-              </div>
-            </Tooltip>
-            <Tooltip
-              tooltipHeading="Created on"
-              tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
-            >
-              <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
-                <CalendarDaysIcon className="h-3.5 w-3.5" />
-                <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
-              </div>
-            </Tooltip>
-          </div>
-          <div
-            className={`text-xs flex items-center justify-end gap-1 w-full ${
-              issueStatus === 0 && new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
-                ? "text-red-500"
-                : INBOX_STATUS.find((s) => s.value === issueStatus)?.textColor
-            }`}
-          >
-            {issueStatus === -2 ? (
-              <>
-                <ExclamationTriangleIcon className="h-3.5 w-3.5" />
-                <span>Pending</span>
-              </>
-            ) : issueStatus === -1 ? (
-              <>
-                <XCircleIcon className="h-3.5 w-3.5" />
-                <span>Declined</span>
-              </>
-            ) : issueStatus === 0 ? (
-              <>
-                <ClockIcon className="h-3.5 w-3.5" />
-                <span>
-                  {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
-                    ? "Snoozed date passed"
-                    : "Snoozed"}
-                </span>
-              </>
-            ) : issueStatus === 1 ? (
-              <>
-                <CheckCircleIcon className="h-3.5 w-3.5" />
-                <span>Accepted</span>
-              </>
-            ) : (
-              <>
-                <DocumentDuplicateIcon className="h-3.5 w-3.5" />
-                <span>Duplicate</span>
-              </>
-            )}
-          </div>
-        </div>
-      </a>
-    </Link>
-  );
-};
diff --git a/apps/app/components/inbox/inbox-main-content.tsx b/apps/app/components/inbox/inbox-main-content.tsx
deleted file mode 100644
index 083ab41bca5..00000000000
--- a/apps/app/components/inbox/inbox-main-content.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-import Router, { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react hook form
-import { useForm } from "react-hook-form";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import inboxServices from "services/inbox.service";
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-import useUserAuth from "hooks/use-user-auth";
-// components
-import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
-import { InboxIssueActivity } from "components/inbox";
-// ui
-import { Loader } from "components/ui";
-// icons
-import {
-  ArrowTopRightOnSquareIcon,
-  CheckCircleIcon,
-  ClockIcon,
-  DocumentDuplicateIcon,
-  ExclamationTriangleIcon,
-  InboxIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/outline";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import type { IInboxIssue, IIssue } from "types";
-// fetch-keys
-import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-const defaultValues = {
-  name: "",
-  description_html: "",
-  estimate_point: null,
-  assignees_list: [],
-  priority: "low",
-  target_date: new Date().toString(),
-  labels_list: [],
-};
-
-export const InboxMainContent: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
-
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-  const { params, issues: inboxIssues } = useInboxView();
-
-  const { reset, control, watch } = useForm<IIssue>({
-    defaultValues,
-  });
-
-  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR(
-    workspaceSlug && projectId && inboxId && inboxIssueId
-      ? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString())
-      : null,
-    workspaceSlug && projectId && inboxId && inboxIssueId
-      ? () =>
-          inboxServices.getInboxIssueById(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString(),
-            inboxIssueId.toString()
-          )
-      : null
-  );
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IInboxIssue>) => {
-      if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
-
-      mutateIssueDetails((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          ...formData,
-        };
-      }, false);
-      mutate<IInboxIssue[]>(
-        INBOX_ISSUES(inboxId.toString(), params),
-        (prevData) =>
-          (prevData ?? []).map((i) => {
-            if (i.bridge_id === inboxIssueId) {
-              return {
-                ...i,
-                ...formData,
-              };
-            }
-
-            return i;
-          }),
-        false
-      );
-
-      const payload = { issue: { ...formData } };
-
-      await inboxServices
-        .patchInboxIssue(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          inboxId.toString(),
-          issueDetails.issue_inbox[0].id,
-          payload,
-          user
-        )
-        .then(() => {
-          mutateIssueDetails();
-          mutate(INBOX_ISSUES(inboxId.toString(), params));
-          mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-        });
-    },
-    [
-      workspaceSlug,
-      inboxIssueId,
-      projectId,
-      mutateIssueDetails,
-      inboxId,
-      user,
-      issueDetails,
-      params,
-    ]
-  );
-
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (!inboxIssues || !inboxIssueId) return;
-
-      const currentIssueIndex = inboxIssues.findIndex((issue) => issue.bridge_id === inboxIssueId);
-
-      switch (e.key) {
-        case "ArrowUp":
-          Router.push({
-            pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
-            query: {
-              inboxIssueId:
-                currentIssueIndex === 0
-                  ? inboxIssues[inboxIssues.length - 1].bridge_id
-                  : inboxIssues[currentIssueIndex - 1].bridge_id,
-            },
-          });
-          break;
-        case "ArrowDown":
-          Router.push({
-            pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
-            query: {
-              inboxIssueId:
-                currentIssueIndex === inboxIssues.length - 1
-                  ? inboxIssues[0].bridge_id
-                  : inboxIssues[currentIssueIndex + 1].bridge_id,
-            },
-          });
-          break;
-        default:
-          break;
-      }
-    },
-    [workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", onKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [onKeyDown]);
-
-  useEffect(() => {
-    if (!issueDetails || !inboxIssueId) return;
-
-    reset({
-      ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
-      labels_list: issueDetails.labels_list ?? issueDetails.labels,
-    });
-  }, [issueDetails, reset, inboxIssueId]);
-
-  const issueStatus = issueDetails?.issue_inbox[0].status;
-
-  if (!inboxIssueId)
-    return (
-      <div className="h-full p-4 grid place-items-center text-custom-text-200">
-        <div className="grid h-full place-items-center">
-          <div className="my-5 flex flex-col items-center gap-4">
-            <InboxIcon height={60} width={60} />
-            {inboxIssues && inboxIssues.length > 0 ? (
-              <span className="text-custom-text-200">
-                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
-                details.
-              </span>
-            ) : (
-              <span className="text-custom-text-200">
-                 任务为空。使用快捷键{" "}
-                <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>添加任务
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-
-  return (
-    <>
-      {issueDetails ? (
-        <div className="flex h-full overflow-auto divide-x">
-          <div className="basis-2/3 h-full overflow-auto p-5 space-y-3">
-            <div
-              className={`flex items-center gap-2 p-3 text-sm border rounded-md ${
-                issueStatus === -2
-                  ? "text-yellow-500 border-yellow-500 bg-yellow-500/10"
-                  : issueStatus === -1
-                  ? "text-red-500 border-red-500 bg-red-500/10"
-                  : issueStatus === 0
-                  ? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
-                    ? "text-red-500 border-red-500 bg-red-500/10"
-                    : "text-custom-text-200 border-gray-500 bg-gray-500/10"
-                  : issueStatus === 1
-                  ? "text-green-500 border-green-500 bg-green-500/10"
-                  : issueStatus === 2
-                  ? "text-custom-text-200 border-gray-500 bg-gray-500/10"
-                  : ""
-              }`}
-            >
-              {issueStatus === -2 ? (
-                <>
-                  <ExclamationTriangleIcon className="h-5 w-5" />
-                  <p>This issue is still pending.</p>
-                </>
-              ) : issueStatus === -1 ? (
-                <>
-                  <XCircleIcon className="h-5 w-5" />
-                  <p>This issue has been declined.</p>
-                </>
-              ) : issueStatus === 0 ? (
-                <>
-                  <ClockIcon className="h-5 w-5" />
-                  {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
-                    <p>
-                      This issue was snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
-                    </p>
-                  ) : (
-                    <p>
-                      This issue has been snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
-                    </p>
-                  )}
-                </>
-              ) : issueStatus === 1 ? (
-                <>
-                  <CheckCircleIcon className="h-5 w-5" />
-                  <p>This issue has been accepted.</p>
-                </>
-              ) : issueStatus === 2 ? (
-                <>
-                  <DocumentDuplicateIcon className="h-5 w-5" />
-                  <p className="flex items-center gap-1">
-                    This issue has been marked as a duplicate of
-                    <a
-                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.issue_inbox[0].duplicate_to}`}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="underline flex items-center gap-2"
-                    >
-                      this issue <ArrowTopRightOnSquareIcon className="h-3 w-3" />
-                    </a>
-                    .
-                  </p>
-                </>
-              ) : null}
-            </div>
-            <div>
-              <IssueDescriptionForm
-                workspaceSlug={workspaceSlug as string}
-                issue={{
-                  name: issueDetails.name,
-                  description_html: issueDetails.description_html,
-                }}
-                handleFormSubmit={submitChanges}
-                isAllowed={
-                  memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by
-                }
-              />
-            </div>
-
-            <IssueReaction
-              projectId={projectId}
-              workspaceSlug={workspaceSlug}
-              issueId={issueDetails.id}
-            />
-
-            <InboxIssueActivity issueDetails={issueDetails} />
-          </div>
-
-          <div className="basis-1/3 space-y-5 border-custom-border-200 p-5">
-            <IssueDetailsSidebar
-              control={control}
-              issueDetail={issueDetails}
-              submitChanges={submitChanges}
-              watch={watch}
-              fieldsToShow={["assignee", "priority", "estimate", "dueDate", "label", "state"]}
-            />
-          </div>
-        </div>
-      ) : (
-        <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>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/inbox/index.ts b/apps/app/components/inbox/index.ts
deleted file mode 100644
index 8301d25700c..00000000000
--- a/apps/app/components/inbox/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./accept-issue-modal";
-export * from "./decline-issue-modal";
-export * from "./delete-issue-modal";
-export * from "./filters-dropdown";
-export * from "./filters-list";
-export * from "./inbox-action-headers";
-export * from "./inbox-issue-activity";
-export * from "./inbox-issue-card";
-export * from "./inbox-main-content";
-export * from "./issues-list-sidebar";
-export * from "./select-duplicate";
diff --git a/apps/app/components/inbox/issues-list-sidebar.tsx b/apps/app/components/inbox/issues-list-sidebar.tsx
deleted file mode 100644
index 5f0fd116a2e..00000000000
--- a/apps/app/components/inbox/issues-list-sidebar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-import useInboxView from "hooks/use-inbox-view";
-// components
-import { InboxIssueCard, InboxFiltersList } from "components/inbox";
-// ui
-import { Loader } from "components/ui";
-
-export const IssuesListSidebar = () => {
-  const router = useRouter();
-  const { inboxIssueId } = router.query;
-
-  const { issues: inboxIssues, filtersLength } = useInboxView();
-
-  return (
-    <div className="h-full flex flex-col overflow-hidden">
-      <InboxFiltersList />
-      {inboxIssues ? (
-        inboxIssues.length > 0 ? (
-          <div className="divide-y divide-custom-border-200 overflow-auto h-full">
-            {inboxIssues.map((issue) => (
-              <InboxIssueCard
-                key={issue.id}
-                active={issue.bridge_id === inboxIssueId}
-                issue={issue}
-              />
-            ))}
-          </div>
-        ) : (
-          <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
-            {filtersLength > 0 &&
-              "No issues found for the selected filters. Try changing the filters."}
-          </div>
-        )
-      ) : (
-        <Loader className="p-4 space-y-4">
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-        </Loader>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/github/auth.tsx b/apps/app/components/integration/github/auth.tsx
deleted file mode 100644
index b530b4a24b8..00000000000
--- a/apps/app/components/integration/github/auth.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// hooks
-import useIntegrationPopup from "hooks/use-integration-popup";
-// ui
-import { PrimaryButton } from "components/ui";
-// types
-import { IWorkspaceIntegration } from "types";
-
-type Props = {
-  workspaceIntegration: false | IWorkspaceIntegration | undefined;
-  provider: string | undefined;
-};
-
-export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider }) => {
-  const { startAuth, isConnecting } = useIntegrationPopup(provider);
-
-  return (
-    <div>
-      {workspaceIntegration && workspaceIntegration?.id ? (
-        <PrimaryButton disabled>Successfully Connected</PrimaryButton>
-      ) : (
-        <PrimaryButton onClick={startAuth} loading={isConnecting}>
-          {isConnecting ? "Connecting..." : "Connect"}
-        </PrimaryButton>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/github/import-confirm.tsx b/apps/app/components/integration/github/import-confirm.tsx
deleted file mode 100644
index 8a7383062ef..00000000000
--- a/apps/app/components/integration/github/import-confirm.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { FC } from "react";
-
-// react-hook-form
-import { UseFormWatch } from "react-hook-form";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// types
-import { TFormValues, TIntegrationSteps } from "components/integration";
-
-type Props = {
-  handleStepChange: (value: TIntegrationSteps) => void;
-  watch: UseFormWatch<TFormValues>;
-};
-
-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{'" '}
-      to complete the process.
-    </h4>
-    <div className="mt-6 flex items-center justify-between">
-      <SecondaryButton onClick={() => handleStepChange("import-users")}>Back</SecondaryButton>
-      <PrimaryButton type="submit">Confirm & Import</PrimaryButton>
-    </div>
-  </div>
-);
diff --git a/apps/app/components/integration/github/import-users.tsx b/apps/app/components/integration/github/import-users.tsx
deleted file mode 100644
index e4caf349b96..00000000000
--- a/apps/app/components/integration/github/import-users.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { FC } from "react";
-
-// react-hook-form
-import { UseFormWatch } from "react-hook-form";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// types
-import {
-  IUserDetails,
-  SingleUserSelect,
-  TFormValues,
-  TIntegrationSteps,
-} from "components/integration";
-
-type Props = {
-  handleStepChange: (value: TIntegrationSteps) => void;
-  users: IUserDetails[];
-  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
-  watch: UseFormWatch<TFormValues>;
-};
-
-export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
-  const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
-
-  return (
-    <div className="mt-6">
-      <div>
-        <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
-          <div className="text-custom-text-200">Name</div>
-          <div className="text-custom-text-200">Import as...</div>
-          <div className="text-right">
-            {users.filter((u) => u.import !== false).length} users selected
-          </div>
-        </div>
-        <div className="space-y-2">
-          {watch("collaborators").map((collaborator, index) => (
-            <SingleUserSelect
-              key={collaborator.id}
-              collaborator={collaborator}
-              index={index}
-              users={users}
-              setUsers={setUsers}
-            />
-          ))}
-        </div>
-      </div>
-      <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("repo-details")}>Back</SecondaryButton>
-        <PrimaryButton onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
-          Next
-        </PrimaryButton>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/github/root.tsx b/apps/app/components/integration/github/root.tsx
deleted file mode 100644
index 7b296f4bddb..00000000000
--- a/apps/app/components/integration/github/root.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { useState } from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import IntegrationService from "services/integration";
-import GithubIntegrationService from "services/integration/github.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import {
-  GithubImportConfigure,
-  GithubImportData,
-  GithubRepoDetails,
-  GithubImportUsers,
-  GithubImportConfirm,
-} from "components/integration";
-// icons
-import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
-// images
-import GithubLogo from "public/services/github.png";
-// types
-import { ICurrentUserResponse, IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
-// fetch-keys
-import {
-  APP_INTEGRATIONS,
-  IMPORTER_SERVICES_LIST,
-  WORKSPACE_INTEGRATIONS,
-} from "constants/fetch-keys";
-
-export type TIntegrationSteps =
-  | "import-configure"
-  | "import-data"
-  | "repo-details"
-  | "import-users"
-  | "import-confirm";
-export interface IIntegrationData {
-  state: TIntegrationSteps;
-}
-
-export interface IUserDetails {
-  username: string;
-  import: any;
-  email: string;
-}
-
-export type TFormValues = {
-  github: any;
-  project: string | null;
-  sync: boolean;
-  collaborators: IGithubRepoCollaborator[];
-  users: IUserDetails[];
-};
-
-const defaultFormValues = {
-  github: null,
-  project: null,
-  sync: false,
-};
-
-const integrationWorkflowData = [
-  {
-    title: "Configure",
-    key: "import-configure",
-    icon: CogIcon,
-  },
-  {
-    title: "Import Data",
-    key: "import-data",
-    icon: CloudUploadIcon,
-  },
-  { title: "Issues", key: "repo-details", icon: ListBulletIcon },
-  {
-    title: "Users",
-    key: "import-users",
-    icon: UsersIcon,
-  },
-  {
-    title: "Confirm",
-    key: "import-confirm",
-    icon: CheckIcon,
-  },
-];
-
-type Props = {
-  user: ICurrentUserResponse | undefined;
-};
-
-export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
-  const [currentStep, setCurrentStep] = useState<IIntegrationData>({
-    state: "import-configure",
-  });
-  const [users, setUsers] = useState<IUserDetails[]>([]);
-
-  const router = useRouter();
-  const { workspaceSlug, provider } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
-    defaultValues: defaultFormValues,
-  });
-
-  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () =>
-    IntegrationService.getAppIntegrationsList()
-  );
-
-  const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    workspaceSlug
-      ? () => IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
-      : null
-  );
-
-  const activeIntegrationState = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex(
-      (i) => i?.key === currentStep?.state
-    );
-
-    return currentElementIndex;
-  };
-
-  const handleStepChange = (value: TIntegrationSteps) => {
-    setCurrentStep((prevData) => ({ ...prevData, state: value }));
-  };
-
-  // current integration from all the integrations available
-  const integration =
-    appIntegrations &&
-    appIntegrations.length > 0 &&
-    appIntegrations.find((i) => i.provider === provider);
-
-  // current integration from workspace integrations
-  const workspaceIntegration =
-    integration &&
-    workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
-
-  const createGithubImporterService = async (formData: TFormValues) => {
-    if (!formData.github || !formData.project) return;
-
-    const payload: IGithubServiceImportFormData = {
-      metadata: {
-        owner: formData.github.owner.login,
-        name: formData.github.name,
-        repository_id: formData.github.id,
-        url: formData.github.html_url,
-      },
-      data: {
-        users: users,
-      },
-      config: {
-        sync: formData.sync,
-      },
-      project_id: formData.project,
-    };
-
-    await GithubIntegrationService.createGithubServiceImport(workspaceSlug as string, payload, user)
-      .then(() => {
-        router.push(`/${workspaceSlug}/settings/imports`);
-        mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "导入不成功。请重试。",
-        })
-      );
-  };
-
-  return (
-    <form onSubmit={handleSubmit(createGithubImporterService)}>
-      <div className="space-y-2">
-        <Link href={`/${workspaceSlug}/settings/imports`}>
-          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-            <ArrowLeftIcon className="h-3 w-3" />
-            <div>Cancel import & go back</div>
-          </div>
-        </Link>
-
-        <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" />
-            </div>
-            <div className="flex h-full w-full items-center justify-center">
-              {integrationWorkflowData.map((integration, index) => (
-                <React.Fragment key={integration.key}>
-                  <div
-                    className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
-                      index <= activeIntegrationState()
-                        ? `border-custom-primary bg-custom-primary ${
-                            index === activeIntegrationState()
-                              ? "border-opacity-100 bg-opacity-100"
-                              : "border-opacity-80 bg-opacity-80"
-                          }`
-                        : "border-custom-border-200"
-                    }`}
-                  >
-                    <integration.icon
-                      width="18px"
-                      height="18px"
-                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
-                    />
-                  </div>
-                  {index < integrationWorkflowData.length - 1 && (
-                    <div
-                      key={index}
-                      className={`border-b px-7 ${
-                        index <= activeIntegrationState() - 1
-                          ? `border-custom-primary`
-                          : `border-custom-border-200`
-                      }`}
-                    >
-                      {" "}
-                    </div>
-                  )}
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          <div className="relative w-full space-y-4">
-            <div className="w-full">
-              {currentStep?.state === "import-configure" && (
-                <GithubImportConfigure
-                  handleStepChange={handleStepChange}
-                  provider={provider as string}
-                  appIntegrations={appIntegrations}
-                  workspaceIntegrations={workspaceIntegrations}
-                />
-              )}
-              {currentStep?.state === "import-data" && (
-                <GithubImportData
-                  handleStepChange={handleStepChange}
-                  integration={workspaceIntegration}
-                  control={control}
-                  watch={watch}
-                />
-              )}
-              {currentStep?.state === "repo-details" && (
-                <GithubRepoDetails
-                  selectedRepo={watch("github")}
-                  handleStepChange={handleStepChange}
-                  setUsers={setUsers}
-                  setValue={setValue}
-                />
-              )}
-              {currentStep?.state === "import-users" && (
-                <GithubImportUsers
-                  handleStepChange={handleStepChange}
-                  users={users}
-                  setUsers={setUsers}
-                  watch={watch}
-                />
-              )}
-              {currentStep?.state === "import-confirm" && (
-                <GithubImportConfirm handleStepChange={handleStepChange} watch={watch} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/integration/guide.tsx b/apps/app/components/integration/guide.tsx
deleted file mode 100644
index 7c1dd20fe99..00000000000
--- a/apps/app/components/integration/guide.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useState } from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import IntegrationService from "services/integration";
-// components
-import {
-  DeleteImportModal,
-  GithubImporterRoot,
-  JiraImporterRoot,
-  SingleImport,
-} from "components/integration";
-// ui
-import { Loader, PrimaryButton } from "components/ui";
-// icons
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
-import { ArrowRightIcon } from "components/icons";
-// types
-import { IImporterService } from "types";
-// fetch-keys
-import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
-// constants
-import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
-
-const IntegrationGuide = () => {
-  const [refreshing, setRefreshing] = useState(false);
-  const [deleteImportModal, setDeleteImportModal] = useState(false);
-  const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, provider } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: importerServices } = useSWR(
-    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
-    workspaceSlug ? () => IntegrationService.getImporterServicesList(workspaceSlug as string) : null
-  );
-
-  const handleDeleteImport = (importService: IImporterService) => {
-    setImportToDelete(importService);
-    setDeleteImportModal(true);
-  };
-
-  return (
-    <>
-      <DeleteImportModal
-        isOpen={deleteImportModal}
-        handleClose={() => setDeleteImportModal(false)}
-        data={importToDelete}
-        user={user}
-      />
-      <div className="h-full space-y-2">
-        {(!provider || provider === "csv") && (
-          <>
-            <div className="mb-5 flex items-center gap-2">
-              <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.
-                </div>
-              </div>
-              <a
-                href="https://docs.plane.so/importers/github"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
-                  Read More
-                  <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
-                </div>
-              </a>
-            </div>
-            <div className="space-y-2">
-              {IMPORTERS_EXPORTERS_LIST.map((service) => (
-                <div
-                  key={service.provider}
-                  className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4"
-                >
-                  <div className="flex items-center gap-4 whitespace-nowrap">
-                    <div className="relative h-10 w-10 flex-shrink-0">
-                      <Image
-                        src={service.logo}
-                        layout="fill"
-                        objectFit="cover"
-                        alt={`${service.title} Logo`}
-                      />
-                    </div>
-                    <div className="w-full">
-                      <h3>{service.title}</h3>
-                      <p className="text-sm text-custom-text-200">{service.description}</p>
-                    </div>
-                    <div className="flex-shrink-0">
-                      <Link
-                        href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}
-                      >
-                        <a>
-                          <PrimaryButton>
-                            <span className="capitalize">{service.type}</span> now
-                          </PrimaryButton>
-                        </a>
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
-              <h3 className="mb-2 flex gap-2 text-lg font-medium">
-                Previous Imports
-                <button
-                  type="button"
-                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
-                  onClick={() => {
-                    setRefreshing(true);
-                    mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
-                      setRefreshing(false)
-                    );
-                  }}
-                >
-                  <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-                  {refreshing ? "Refreshing..." : "Refresh status"}
-                </button>
-              </h3>
-              {importerServices ? (
-                importerServices.length > 0 ? (
-                  <div className="space-y-2">
-                    <div className="divide-y divide-custom-border-200">
-                      {importerServices.map((service) => (
-                        <SingleImport
-                          key={service.id}
-                          service={service}
-                          refreshing={refreshing}
-                          handleDelete={() => handleDeleteImport(service)}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <p className="py-2 text-sm text-custom-text-200">
-                    No previous imports available.
-                  </p>
-                )
-              ) : (
-                <Loader className="mt-6 grid grid-cols-1 gap-3">
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                </Loader>
-              )}
-            </div>
-          </>
-        )}
-
-        {provider && provider === "github" && <GithubImporterRoot user={user} />}
-        {provider && provider === "jira" && <JiraImporterRoot user={user} />}
-      </div>
-    </>
-  );
-};
-
-export default IntegrationGuide;
diff --git a/apps/app/components/integration/jira/give-details.tsx b/apps/app/components/integration/jira/give-details.tsx
deleted file mode 100644
index 663357adcc5..00000000000
--- a/apps/app/components/integration/jira/give-details.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import React from "react";
-
-// next
-import Link from "next/link";
-
-// react hook form
-import { useFormContext, Controller } from "react-hook-form";
-
-// icons
-import { PlusIcon } from "@heroicons/react/20/solid";
-
-// hooks
-import useProjects from "hooks/use-projects";
-
-// components
-import { Input, CustomSelect } from "components/ui";
-
-import { IJiraImporterForm } from "types";
-
-export const JiraGetImportDetail: React.FC = () => {
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useFormContext<IJiraImporterForm>();
-
-  const { projects } = useProjects();
-
-  return (
-    <div className="h-full w-full space-y-8 overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Personal Access Token</h3>
-          <p className="text-sm text-custom-text-200">
-            Get to know your access token by navigating to{" "}
-            <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
-              <a className="text-custom-primary underline" target="_blank" rel="noreferrer">
-                Atlassian Settings
-              </a>
-            </Link>
-          </p>
-        </div>
-
-        <div className="col-span-1">
-          <Input
-            id="metadata.api_token"
-            name="metadata.api_token"
-            placeholder="XXXXXXXX"
-            validations={{
-              required: "Please enter your personal access token.",
-            }}
-            register={register}
-            error={errors.metadata?.api_token}
-          />
-        </div>
-      </div>
-
-      <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>
-        </div>
-        <div className="col-span-1">
-          <Input
-            id="metadata.project_key"
-            name="metadata.project_key"
-            placeholder="LIN"
-            register={register}
-            validations={{
-              required: "Please enter your project key.",
-            }}
-            error={errors.metadata?.project_key}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">
-            Enter the Gmail account that you use in Jira account
-          </p>
-        </div>
-        <div className="col-span-1">
-          <Input
-            id="metadata.email"
-            name="metadata.email"
-            type="email"
-            placeholder="name@company.com"
-            register={register}
-            validations={{
-              required: "Please enter email address.",
-            }}
-            error={errors.metadata?.email}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
-          <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
-        </div>
-        <div className="col-span-1">
-          <Input
-            id="metadata.cloud_hostname"
-            name="metadata.cloud_hostname"
-            type="email"
-            placeholder="my-company.atlassian.net"
-            register={register}
-            validations={{
-              required: "Please enter your cloud host name.",
-            }}
-            error={errors.metadata?.cloud_hostname}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-custom-text-200">
-            Select which project you want to import to.
-          </p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="project_id"
-            rules={{ required: "Please select a project." }}
-            render={({ field: { value, onChange } }) => (
-              <CustomSelect
-                value={value}
-                input
-                width="w-full"
-                onChange={onChange}
-                label={
-                  <span>
-                    {value && value !== "" ? (
-                      projects?.find((p) => p.id === value)?.name
-                    ) : (
-                      <span className="text-custom-text-200">Select a project</span>
-                    )}
-                  </span>
-                }
-                verticalPosition="top"
-              >
-                {projects && projects.length > 0 ? (
-                  projects.map((project) => (
-                    <CustomSelect.Option key={project.id} value={project.id}>
-                      {project.name}
-                    </CustomSelect.Option>
-                  ))
-                ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
-                    <p>You don{"'"}t have any project. Please create a project first.</p>
-                  </div>
-                )}
-                <div>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const event = new KeyboardEvent("keydown", { key: "p" });
-                      document.dispatchEvent(event);
-                    }}
-                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
-                  >
-                    <PlusIcon className="h-4 w-4 text-custom-text-200" />
-                    <span>创建新项目</span>
-                  </button>
-                </div>
-              </CustomSelect>
-            )}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/jira/import-users.tsx b/apps/app/components/integration/jira/import-users.tsx
deleted file mode 100644
index 1b01753b2ce..00000000000
--- a/apps/app/components/integration/jira/import-users.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { FC } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import useSWR from "swr";
-
-// react-hook-form
-import { useFormContext, useFieldArray, Controller } from "react-hook-form";
-
-// fetch keys
-import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
-
-// services
-import workspaceService from "services/workspace.service";
-
-// components
-import { ToggleSwitch, Input, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-
-import { IJiraImporterForm } from "types";
-
-export const JiraImportUsers: FC = () => {
-  const {
-    control,
-    watch,
-    register,
-    formState: { errors },
-  } = useFormContext<IJiraImporterForm>();
-
-  const { fields } = useFieldArray({
-    control,
-    name: "data.users",
-  });
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug?.toString() ?? "") : null,
-    workspaceSlug
-      ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "")
-      : null
-  );
-
-  const options = members?.map((member) => ({
-    value: member.member.email,
-    query: member.member.display_name ?? "",
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="col-span-1">
-          <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-custom-text-200">
-            Update, invite or choose not to invite assignee
-          </p>
-        </div>
-        <div className="col-span-1">
-          <Controller
-            control={control}
-            name="data.invite_users"
-            render={({ field: { value, onChange } }) => (
-              <ToggleSwitch onChange={onChange} value={value} />
-            )}
-          />
-        </div>
-      </div>
-
-      {watch("data.invite_users") && (
-        <div className="pt-6">
-          <div className="grid grid-cols-3 gap-3">
-            <div className="col-span-1 text-sm text-custom-text-200">Name</div>
-            <div className="col-span-1 text-sm text-custom-text-200">Import as</div>
-          </div>
-
-          <div className="mt-5 space-y-3">
-            {fields.map((user, index) => (
-              <div className="grid grid-cols-3 gap-3" key={`${user.email}-${user.username}`}>
-                <div className="col-span-1">
-                  <p>{user.username}</p>
-                </div>
-                <div className="col-span-1">
-                  <Controller
-                    control={control}
-                    name={`data.users.${index}.import`}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        input
-                        value={value}
-                        onChange={onChange}
-                        width="w-full"
-                        label={
-                          <span className="capitalize">
-                            {Boolean(value) ? value : ("Ignore" as any)}
-                          </span>
-                        }
-                      >
-                        <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
-                        <CustomSelect.Option value="map">Map to existing</CustomSelect.Option>
-                        <CustomSelect.Option value={false}>Do not import</CustomSelect.Option>
-                      </CustomSelect>
-                    )}
-                  />
-                </div>
-                <div className="col-span-1">
-                  {watch(`data.users.${index}.import`) === "invite" && (
-                    <Input
-                      id={`data.users.${index}.email`}
-                      name={`data.users.${index}.email`}
-                      type="text"
-                      register={register}
-                      validations={{
-                        required: "该字段为必填字段",
-                      }}
-                      error={errors?.data?.users?.[index]?.email}
-                    />
-                  )}
-                  {watch(`data.users.${index}.import`) === "map" && (
-                    <Controller
-                      control={control}
-                      name={`data.users.${index}.email`}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSearchSelect
-                          value={value}
-                          input
-                          label={value !== "" ? value : "Select user from project"}
-                          options={options}
-                          onChange={onChange}
-                          optionsClassName="w-full"
-                        />
-                      )}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/jira/root.tsx b/apps/app/components/integration/jira/root.tsx
deleted file mode 100644
index b5c086431af..00000000000
--- a/apps/app/components/integration/jira/root.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, { useState } from "react";
-
-// next
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-// swr
-import { mutate } from "swr";
-
-// react hook form
-import { FormProvider, useForm } from "react-hook-form";
-
-// icons
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
-import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
-
-// services
-import jiraImporterService from "services/integration/jira.service";
-
-// fetch keys
-import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
-
-// components
-import { PrimaryButton, SecondaryButton } from "components/ui";
-import {
-  JiraGetImportDetail,
-  JiraProjectDetail,
-  JiraImportUsers,
-  JiraConfirmImport,
-  jiraFormDefaultValues,
-  TJiraIntegrationSteps,
-  IJiraIntegrationData,
-} from "./";
-
-import JiraLogo from "public/services/jira.png";
-
-import { ICurrentUserResponse, IJiraImporterForm } from "types";
-
-const integrationWorkflowData: Array<{
-  title: string;
-  key: TJiraIntegrationSteps;
-  icon: any;
-}> = [
-  {
-    title: "Configure",
-    key: "import-configure",
-    icon: CogIcon,
-  },
-  {
-    title: "Import Data",
-    key: "display-import-data",
-    icon: ListBulletIcon,
-  },
-  {
-    title: "Users",
-    key: "import-users",
-    icon: UsersIcon,
-  },
-  {
-    title: "Confirm",
-    key: "import-confirmation",
-    icon: CheckIcon,
-  },
-];
-
-type Props = {
-  user: ICurrentUserResponse | undefined;
-};
-
-export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
-  const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
-    state: "import-configure",
-  });
-  const [disableTopBarAfter, setDisableTopBarAfter] = useState<TJiraIntegrationSteps | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const methods = useForm<IJiraImporterForm>({
-    defaultValues: jiraFormDefaultValues,
-    mode: "all",
-    reValidateMode: "onChange",
-  });
-
-  const isValid = methods.formState.isValid;
-
-  const onSubmit = async (data: IJiraImporterForm) => {
-    if (!workspaceSlug) return;
-
-    await jiraImporterService
-      .createJiraImporter(workspaceSlug.toString(), data, user)
-      .then(() => {
-        mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
-        router.push(`/${workspaceSlug}/settings/imports`);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const activeIntegrationState = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex(
-      (i) => i?.key === currentStep?.state
-    );
-
-    return currentElementIndex;
-  };
-
-  return (
-    <div className="flex h-full flex-col space-y-2">
-      <Link href={`/${workspaceSlug}/settings/imports`}>
-        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-          <div>
-            <ArrowLeftIcon className="h-3 w-3" />
-          </div>
-          <div>Cancel import & go back</div>
-        </div>
-      </Link>
-
-      <div className="flex h-full flex-col 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={JiraLogo} alt="jira logo" />
-          </div>
-          <div className="flex h-full w-full items-center justify-center">
-            {integrationWorkflowData.map((integration, index) => (
-              <React.Fragment key={integration.key}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setCurrentStep({ state: integration.key });
-                  }}
-                  disabled={
-                    index > activeIntegrationState() + 1 ||
-                    Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
-                  }
-                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-200 ${
-                    index <= activeIntegrationState()
-                      ? `border-custom-primary bg-custom-primary ${
-                          index === activeIntegrationState()
-                            ? "border-opacity-100 bg-opacity-100"
-                            : "border-opacity-80 bg-opacity-80"
-                        }`
-                      : "border-custom-border-200"
-                  }`}
-                >
-                  <integration.icon
-                    width="18px"
-                    height="18px"
-                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
-                  />
-                </button>
-                {index < integrationWorkflowData.length - 1 && (
-                  <div
-                    key={index}
-                    className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1
-                        ? `border-custom-primary`
-                        : `border-custom-border-200`
-                    }`}
-                  >
-                    {" "}
-                  </div>
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-        </div>
-
-        <div className="relative h-full w-full pt-6">
-          <FormProvider {...methods}>
-            <form className="flex h-full w-full flex-col">
-              <div className="h-full w-full overflow-y-auto">
-                {currentStep.state === "import-configure" && <JiraGetImportDetail />}
-                {currentStep.state === "display-import-data" && (
-                  <JiraProjectDetail
-                    setDisableTopBarAfter={setDisableTopBarAfter}
-                    setCurrentStep={setCurrentStep}
-                  />
-                )}
-                {currentStep?.state === "import-users" && <JiraImportUsers />}
-                {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
-              </div>
-
-              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
-                {currentStep?.state !== "import-configure" && (
-                  <SecondaryButton
-                    onClick={() => {
-                      const currentElementIndex = integrationWorkflowData.findIndex(
-                        (i) => i?.key === currentStep?.state
-                      );
-                      setCurrentStep({
-                        state: integrationWorkflowData[currentElementIndex - 1]?.key,
-                      });
-                    }}
-                  >
-                    Back
-                  </SecondaryButton>
-                )}
-                <PrimaryButton
-                  disabled={
-                    disableTopBarAfter === currentStep?.state ||
-                    !isValid ||
-                    methods.formState.isSubmitting
-                  }
-                  onClick={() => {
-                    const currentElementIndex = integrationWorkflowData.findIndex(
-                      (i) => i?.key === currentStep?.state
-                    );
-
-                    if (currentElementIndex === integrationWorkflowData.length - 1) {
-                      methods.handleSubmit(onSubmit)();
-                    } else {
-                      setCurrentStep({
-                        state: integrationWorkflowData[currentElementIndex + 1]?.key,
-                      });
-                    }
-                  }}
-                >
-                  {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
-                </PrimaryButton>
-              </div>
-            </form>
-          </FormProvider>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/single-integration-card.tsx b/apps/app/components/integration/single-integration-card.tsx
deleted file mode 100644
index 0a59de8b795..00000000000
--- a/apps/app/components/integration/single-integration-card.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useState } from "react";
-
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import IntegrationService from "services/integration";
-// hooks
-import useToast from "hooks/use-toast";
-import useIntegrationPopup from "hooks/use-integration-popup";
-// ui
-import { DangerButton, Loader, PrimaryButton } from "components/ui";
-// icons
-import GithubLogo from "public/services/github.png";
-import SlackLogo from "public/services/slack.png";
-// types
-import { IAppIntegration, IWorkspaceIntegration } from "types";
-// fetch-keys
-import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
-
-type Props = {
-  integration: IAppIntegration;
-};
-
-const integrationDetails: { [key: string]: any } = {
-  github: {
-    logo: GithubLogo,
-    installed:
-      "Activate GitHub integrations on individual projects to sync with specific repositories.",
-    notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
-  },
-  slack: {
-    logo: SlackLogo,
-    installed: "Activate Slack integrations on individual projects to sync with specific channels.",
-    notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
-  },
-};
-
-export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
-  const [deletingIntegration, setDeletingIntegration] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider);
-
-  const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    () =>
-      workspaceSlug
-        ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
-        : null
-  );
-
-  const handleRemoveIntegration = async () => {
-    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
-
-    const workspaceIntegrationId = workspaceIntegrations?.find(
-      (i) => i.integration === integration.id
-    )?.id;
-
-    setDeletingIntegration(true);
-
-    await IntegrationService.deleteWorkspaceIntegration(
-      workspaceSlug as string,
-      workspaceIntegrationId ?? ""
-    )
-      .then(() => {
-        mutate<IWorkspaceIntegration[]>(
-          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
-          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
-          false
-        );
-        setDeletingIntegration(false);
-
-        setToastAlert({
-          type: "success",
-          title: "Deleted successfully!",
-          message: `${integration.title} integration deleted successfully.`,
-        });
-      })
-      .catch(() => {
-        setDeletingIntegration(false);
-
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: `${integration.title} integration could not be deleted. Please try again.`,
-        });
-      });
-  };
-
-  const isInstalled = workspaceIntegrations?.find(
-    (i: any) => i.integration_detail.id === integration.id
-  );
-
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5">
-      <div className="flex items-start gap-4">
-        <div className="h-12 w-12 flex-shrink-0">
-          <Image
-            src={integrationDetails[integration.provider].logo}
-            alt={`${integration.title} Logo`}
-          />
-        </div>
-        <div>
-          <h3 className="flex items-center gap-4 text-xl font-semibold">
-            {integration.title}
-            {workspaceIntegrations ? (
-              isInstalled ? (
-                <span className="flex items-center gap-1 text-sm font-normal text-green-500">
-                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500" /> Installed
-                </span>
-              ) : (
-                <span className="flex items-center gap-1 text-sm font-normal text-custom-text-200">
-                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-custom-background-80" />{" "}
-                  Not Installed
-                </span>
-              )
-            ) : null}
-          </h3>
-          <p className="text-sm text-custom-text-200">
-            {workspaceIntegrations
-              ? isInstalled
-                ? integrationDetails[integration.provider].installed
-                : integrationDetails[integration.provider].notInstalled
-              : "Loading..."}
-          </p>
-        </div>
-      </div>
-
-      {workspaceIntegrations ? (
-        isInstalled ? (
-          <DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration}>
-            {deletingIntegration ? "Removing..." : "Remove installation"}
-          </DangerButton>
-        ) : (
-          <PrimaryButton onClick={startAuth} loading={isInstalling}>
-            {isInstalling ? "Installing..." : "Add installation"}
-          </PrimaryButton>
-        )
-      ) : (
-        <Loader>
-          <Loader.Item height="35px" width="150px" />
-        </Loader>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/integration/slack/index.ts b/apps/app/components/integration/slack/index.ts
deleted file mode 100644
index 3bd1c965c64..00000000000
--- a/apps/app/components/integration/slack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./select-channel";
\ No newline at end of file
diff --git a/apps/app/components/integration/slack/select-channel.tsx b/apps/app/components/integration/slack/select-channel.tsx
deleted file mode 100644
index c116992a8c5..00000000000
--- a/apps/app/components/integration/slack/select-channel.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-// services
-import appinstallationsService from "services/app-installations.service";
-// ui
-import { Loader } from "components/ui";
-// hooks
-import useToast from "hooks/use-toast";
-import useIntegrationPopup from "hooks/use-integration-popup";
-// types
-import { IWorkspaceIntegration, ISlackIntegration } from "types";
-// fetch-keys
-import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
-
-type Props = {
-  integration: IWorkspaceIntegration;
-};
-
-export const SelectChannel: React.FC<Props> = ({ integration }) => {
-  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] =
-    useState<boolean>(false);
-  const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { startAuth } = useIntegrationPopup("slackChannel", integration.id);
-
-  const { data: projectIntegration } = useSWR(
-    workspaceSlug && projectId && integration.id
-      ? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
-      : null,
-    () =>
-      workspaceSlug && projectId && integration.id
-        ? appinstallationsService.getSlackChannelDetail(
-            workspaceSlug as string,
-            projectId as string,
-            integration.id as string
-          )
-        : null
-  );
-
-  useEffect(() => {
-    if (projectId && projectIntegration && projectIntegration.length > 0) {
-      const projectSlackIntegrationCheck: ISlackIntegration | undefined = projectIntegration.find(
-        (_slack: ISlackIntegration) => _slack.project === projectId
-      );
-      if (projectSlackIntegrationCheck) {
-        setSlackChannel(() => projectSlackIntegrationCheck);
-        setSlackChannelAvailabilityToggle(true);
-      }
-    }
-  }, [projectIntegration, projectId]);
-
-  const handleDelete = async () => {
-    if (projectIntegration.length === 0) return;
-    mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
-      if (!prevData) return;
-      return prevData.id !== integration.id;
-    }).then(() => {
-      setSlackChannelAvailabilityToggle(false);
-      setSlackChannel(null);
-    });
-    appinstallationsService
-      .removeSlackChannel(
-        workspaceSlug as string,
-        projectId as string,
-        integration.id as string,
-        slackChannel?.id
-      )
-      .catch((err) => console.log(err));
-  };
-
-  const handleAuth = async () => {
-    await startAuth();
-  };
-
-  return (
-    <>
-      {projectIntegration ? (
-        <button
-          type="button"
-          className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-            slackChannelAvailabilityToggle ? "bg-green-500" : "bg-gray-200"
-          }`}
-          role="switch"
-          aria-checked
-          onClick={() => {
-            slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
-          }}
-        >
-          <span
-            aria-hidden="true"
-            className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-              slackChannelAvailabilityToggle ? "translate-x-5" : "translate-x-0"
-            }`}
-          />
-        </button>
-      ) : (
-        <Loader>
-          <Loader.Item height="35px" width="150px" />
-        </Loader>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
deleted file mode 100644
index 795ede8ec28..00000000000
--- a/apps/app/components/issues/activity.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// components
-import { ActivityIcon, ActivityMessage } from "components/core";
-import { CommentCard } from "components/issues/comment";
-// ui
-import { Icon, Loader } from "components/ui";
-// helpers
-import { timeAgo } from "helpers/date-time.helper";
-// types
-import { IIssueActivity, IIssueComment } from "types";
-
-type Props = {
-  activity: IIssueActivity[] | undefined;
-  handleCommentUpdate: (comment: IIssueComment) => Promise<void>;
-  handleCommentDelete: (commentId: string) => Promise<void>;
-};
-
-export const IssueActivitySection: React.FC<Props> = ({
-  activity,
-  handleCommentUpdate,
-  handleCommentDelete,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  if (!activity)
-    return (
-      <Loader className="space-y-4">
-        <div className="space-y-2">
-          <Loader.Item height="30px" width="40%" />
-          <Loader.Item height="15px" width="60%" />
-        </div>
-        <div className="space-y-2">
-          <Loader.Item height="30px" width="40%" />
-          <Loader.Item height="15px" width="60%" />
-        </div>
-        <div className="space-y-2">
-          <Loader.Item height="30px" width="40%" />
-          <Loader.Item height="15px" width="60%" />
-        </div>
-      </Loader>
-    );
-
-  return (
-    <div className="flow-root">
-      <ul role="list" className="-mb-4">
-        {activity.map((activityItem, index) => {
-          // determines what type of action is performed
-          const message = activityItem.field ? (
-            <ActivityMessage activity={activityItem} />
-          ) : (
-            "创建任务"
-          );
-
-          if ("field" in activityItem && activityItem.field !== "updated_by") {
-            return (
-              <li key={activityItem.id}>
-                <div className="relative pb-1">
-                  {activity.length > 1 && index !== activity.length - 1 ? (
-                    <span
-                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
-                      aria-hidden="true"
-                    />
-                  ) : null}
-                  <div className="relative flex items-start space-x-2">
-                    <div>
-                      <div className="relative px-1.5">
-                        <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                            {activityItem.field ? (
-                              activityItem.new_value === "restore" ? (
-                                <Icon iconName="history" className="text-sm text-custom-text-200" />
-                              ) : (
-                                <ActivityIcon activity={activityItem} />
-                              )
-                            ) : activityItem.actor_detail.avatar &&
-                              activityItem.actor_detail.avatar !== "" ? (
-                              <img
-                                src={activityItem.actor_detail.avatar}
-                                alt={activityItem.actor_detail.display_name}
-                                height={24}
-                                width={24}
-                                className="rounded-full"
-                              />
-                            ) : (
-                              <div
-                                className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                              >
-                                {activityItem.actor_detail.is_bot
-                                  ? activityItem.actor_detail.first_name.charAt(0)
-                                  : activityItem.actor_detail.display_name.charAt(0)}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="min-w-0 flex-1 py-3">
-                      <div className="text-xs text-custom-text-200 break-words">
-                        {activityItem.field === "archived_at" &&
-                        activityItem.new_value !== "restore" ? (
-                          <span className="text-gray font-medium">Plane</span>
-                        ) : activityItem.actor_detail.is_bot ? (
-                          <span className="text-gray font-medium">
-                            {activityItem.actor_detail.first_name} Bot
-                          </span>
-                        ) : (
-                          <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
-                            <a className="text-gray font-medium">
-                              {activityItem.actor_detail.is_bot
-                                ? activityItem.actor_detail.first_name
-                                : activityItem.actor_detail.display_name}
-                            </a>
-                          </Link>
-                        )}{" "}
-                        {message}{" "}
-                        <span className="whitespace-nowrap">
-                          {timeAgo(activityItem.created_at)}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            );
-          } else if ("comment_json" in activityItem)
-            return (
-              <div key={activityItem.id} className="mt-4">
-                <CommentCard
-                  workspaceSlug={workspaceSlug as string}
-                  comment={activityItem as IIssueComment}
-                  onSubmit={handleCommentUpdate}
-                  handleCommentDeletion={handleCommentDelete}
-                />
-              </div>
-            );
-        })}
-      </ul>
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
deleted file mode 100644
index 5a3f21a376b..00000000000
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// icons
-import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// hooks
-import useUser from "hooks/use-user";
-// ui
-import { CustomMenu } from "components/ui";
-import { CommentReaction } from "components/issues";
-import { TipTapEditor } from "components/tiptap";
-// helpers
-import { timeAgo } from "helpers/date-time.helper";
-// types
-import type { IIssueComment } from "types";
-
-type Props = {
-  workspaceSlug: string;
-  comment: IIssueComment;
-  onSubmit: (comment: IIssueComment) => void;
-  handleCommentDeletion: (comment: string) => void;
-};
-
-export const CommentCard: React.FC<Props> = ({
-  comment,
-  workspaceSlug,
-  onSubmit,
-  handleCommentDeletion,
-}) => {
-  const { user } = useUser();
-
-  const editorRef = React.useRef<any>(null);
-  const showEditorRef = React.useRef<any>(null);
-
-  const [isEditing, setIsEditing] = useState(false);
-
-  const {
-    formState: { isSubmitting },
-    handleSubmit,
-    setFocus,
-    watch,
-    setValue,
-  } = useForm<IIssueComment>({
-    defaultValues: comment,
-  });
-
-  const onEnter = (formData: IIssueComment) => {
-    if (isSubmitting) return;
-    setIsEditing(false);
-
-    onSubmit(formData);
-
-    editorRef.current?.setEditorValue(formData.comment_html);
-    showEditorRef.current?.setEditorValue(formData.comment_html);
-  };
-
-  useEffect(() => {
-    isEditing && setFocus("comment");
-  }, [isEditing, setFocus]);
-
-  return (
-    <div className="relative flex items-start space-x-3">
-      <div className="relative px-1">
-        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
-          <img
-            src={comment.actor_detail.avatar}
-            alt={
-              comment.actor_detail.is_bot
-                ? comment.actor_detail.first_name + " Bot"
-                : comment.actor_detail.display_name
-            }
-            height={30}
-            width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
-          />
-        ) : (
-          <div
-            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-          >
-            {comment.actor_detail.is_bot
-              ? comment.actor_detail.first_name.charAt(0)
-              : comment.actor_detail.display_name.charAt(0)}
-          </div>
-        )}
-
-        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon
-            className="h-3.5 w-3.5 text-custom-text-200"
-            aria-hidden="true"
-          />
-        </span>
-      </div>
-      <div className="min-w-0 flex-1">
-        <div>
-          <div className="text-xs">
-            {comment.actor_detail.is_bot
-              ? comment.actor_detail.first_name + " Bot"
-              : comment.actor_detail.display_name}
-          </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
-            评论 {timeAgo(comment.created_at)}
-          </p>
-        </div>
-        <div className="issue-comments-section p-0">
-          <form
-            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
-            onSubmit={handleSubmit(onEnter)}
-          >
-            <div>
-              <TipTapEditor
-                workspaceSlug={workspaceSlug as string}
-                ref={editorRef}
-                value={watch("comment_html")}
-                debouncedUpdatesEnabled={false}
-                customClassName="min-h-[50px] p-3 shadow-sm"
-                onChange={(comment_json: Object, comment_html: string) => {
-                  setValue("comment_json", comment_json);
-                  setValue("comment_html", comment_html);
-                }}
-              />
-            </div>
-            <div className="flex gap-1 self-end">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
-              >
-                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
-              </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)}
-              >
-                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
-              </button>
-            </div>
-          </form>
-          <div className={`${isEditing ? "hidden" : ""}`}>
-            <TipTapEditor
-              workspaceSlug={workspaceSlug as string}
-              ref={showEditorRef}
-              value={comment.comment_html}
-              editable={false}
-              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-            />
-            <CommentReaction projectId={comment.project} commentId={comment.id} />
-          </div>
-        </div>
-      </div>
-      {user?.id === comment.actor && (
-        <CustomMenu ellipsis>
-          <CustomMenu.MenuItem onClick={() => setIsEditing(true)}>编辑</CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            onClick={() => {
-              handleCommentDeletion(comment.id);
-            }}
-          >
-            Delete
-          </CustomMenu.MenuItem>
-        </CustomMenu>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/comment/comment-reaction.tsx b/apps/app/components/issues/comment/comment-reaction.tsx
deleted file mode 100644
index b6ce3bbbcae..00000000000
--- a/apps/app/components/issues/comment/comment-reaction.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import useUser from "hooks/use-user";
-import useCommentReaction from "hooks/use-comment-reaction";
-// ui
-import { ReactionSelector } from "components/core";
-// helper
-import { renderEmoji } from "helpers/emoji.helper";
-
-type Props = {
-  projectId?: string | string[];
-  commentId: string;
-};
-
-export const CommentReaction: React.FC<Props> = (props) => {
-  const { projectId, commentId } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const {
-    commentReactions,
-    groupedReactions,
-    handleReactionCreate,
-    handleReactionDelete,
-    isLoading,
-  } = useCommentReaction(workspaceSlug, projectId, commentId);
-
-  const handleReactionClick = (reaction: string) => {
-    if (!workspaceSlug || !projectId || !commentId) return;
-
-    const isSelected = commentReactions?.some(
-      (r) => r.actor === user?.id && r.reaction === reaction
-    );
-
-    if (isSelected) {
-      handleReactionDelete(reaction);
-    } else {
-      handleReactionCreate(reaction);
-    }
-  };
-
-  return (
-    <div className="flex gap-1.5 items-center mt-2">
-      <ReactionSelector
-        size="md"
-        position="top"
-        value={
-          commentReactions
-            ?.filter((reaction) => reaction.actor === user?.id)
-            .map((r) => r.reaction) || []
-        }
-        onSelect={handleReactionClick}
-      />
-
-      {Object.keys(groupedReactions || {}).map(
-        (reaction) =>
-          groupedReactions?.[reaction]?.length &&
-          groupedReactions[reaction].length > 0 && (
-            <button
-              type="button"
-              onClick={() => {
-                handleReactionClick(reaction);
-              }}
-              key={reaction}
-              className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
-                commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
-                  ? "bg-custom-primary-100/10"
-                  : "bg-custom-background-80"
-              }`}
-            >
-              <span>{renderEmoji(reaction)}</span>
-              <span
-                className={
-                  commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
-                    ? "text-custom-primary-100"
-                    : ""
-                }
-              >
-                {groupedReactions?.[reaction].length}{" "}
-              </span>
-            </button>
-          )
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
deleted file mode 100644
index a8dfab92afe..00000000000
--- a/apps/app/components/issues/form.tsx
+++ /dev/null
@@ -1,568 +0,0 @@
-import React, { FC, useState, useEffect, useRef } from "react";
-
-import { useRouter } from "next/router";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// services
-import aiService from "services/ai.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { GptAssistantModal } from "components/core";
-import { ParentIssuesListModal } from "components/issues";
-import {
-  IssueAssigneeSelect,
-  IssueDateSelect,
-  IssueEstimateSelect,
-  IssueLabelSelect,
-  IssuePrioritySelect,
-  IssueProjectSelect,
-  IssueStateSelect,
-} from "components/issues/select";
-import { CreateStateModal } from "components/states";
-import { CreateLabelModal } from "components/labels";
-// ui
-import {
-  CustomMenu,
-  Input,
-  Loader,
-  PrimaryButton,
-  SecondaryButton,
-  ToggleSwitch,
-} from "components/ui";
-import { TipTapEditor } from "components/tiptap";
-// icons
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
-
-const defaultValues: Partial<IIssue> = {
-  project: "",
-  name: "",
-  description: {
-    type: "doc",
-    content: [
-      {
-        type: "paragraph",
-      },
-    ],
-  },
-  description_html: "<p></p>",
-  estimate_point: null,
-  state: "",
-  parent: null,
-  priority: null,
-  assignees: [],
-  assignees_list: [],
-  labels: [],
-  labels_list: [],
-  start_date: null,
-  target_date: null,
-};
-
-export interface IssueFormProps {
-  handleFormSubmit: (values: Partial<IIssue>) => Promise<void>;
-  initialData?: Partial<IIssue>;
-  projectId: string;
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
-  createMore: boolean;
-  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
-  handleClose: () => void;
-  status: boolean;
-  user: ICurrentUserResponse | undefined;
-  fieldsToShow: (
-    | "project"
-    | "name"
-    | "description"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-  )[];
-}
-
-export const IssueForm: FC<IssueFormProps> = ({
-  handleFormSubmit,
-  initialData,
-  projectId,
-  setActiveProject,
-  createMore,
-  setCreateMore,
-  handleClose,
-  status,
-  user,
-  fieldsToShow,
-}) => {
-  const [stateModal, setStateModal] = useState(false);
-  const [labelModal, setLabelModal] = useState(false);
-  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
-  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
-
-  const [gptAssistantModal, setGptAssistantModal] = useState(false);
-  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
-
-  const editorRef = useRef<any>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    getValues,
-    setValue,
-    setFocus,
-  } = useForm<IIssue>({
-    defaultValues: initialData ?? defaultValues,
-    reValidateMode: "onChange",
-  });
-
-  const issueName = watch("name");
-
-  const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
-    await handleFormSubmit(formData);
-
-    setGptAssistantModal(false);
-
-    reset({
-      ...defaultValues,
-      project: projectId,
-      description: {
-        type: "doc",
-        content: [
-          {
-            type: "paragraph",
-          },
-        ],
-      },
-      description_html: "<p></p>",
-    });
-    editorRef?.current?.clearEditor();
-  };
-
-  const handleAiAssistance = async (response: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    setValue("description", {});
-    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
-    editorRef.current?.setEditorValue(`${watch("description_html")}`);
-  };
-
-  const handleAutoGenerateDescription = async () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(
-        workspaceSlug as string,
-        projectId as string,
-        {
-          prompt: issueName,
-          task: "Generate a proper description for this issue.",
-        },
-        user
-      )
-      .then((res) => {
-        if (res.response === "")
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message:
-              "任务标题信息量不足，无法生成说明。请尝试使用不同的标题。",
-          });
-        else handleAiAssistance(res.response_html);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message:
-              error ||
-              "您已达到每个用户每月50次请求的上限",
-          }); //todo 429服务端怎么去除
-        else
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: error || "发生错误，请重试",
-          });
-      })
-      .finally(() => setIAmFeelingLucky(false));
-  };
-
-  useEffect(() => {
-    setFocus("name");
-
-    reset({
-      ...defaultValues,
-      ...initialData,
-    });
-  }, [setFocus, initialData, reset]);
-
-  // update projectId in form when projectId changes
-  useEffect(() => {
-    reset({
-      ...getValues(),
-      project: projectId,
-    });
-  }, [getValues, projectId, reset]);
-
-  const startDate = watch("start_date");
-  const targetDate = watch("target_date");
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  return (
-    <>
-      {projectId && (
-        <>
-          <CreateStateModal
-            isOpen={stateModal}
-            handleClose={() => setStateModal(false)}
-            projectId={projectId}
-            user={user}
-          />
-          <CreateLabelModal
-            isOpen={labelModal}
-            handleClose={() => setLabelModal(false)}
-            projectId={projectId}
-            user={user}
-            onSuccess={(response) => {
-              setValue("labels", [...watch("labels"), response.id]);
-              setValue("labels_list", [...watch("labels_list"), response.id]);
-            }}
-          />
-        </>
-      )}
-      <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
-        <div className="space-y-5">
-          <div className="flex items-center gap-x-2">
-            {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
-              <Controller
-                control={control}
-                name="project"
-                render={({ field: { value, onChange } }) => (
-                  <IssueProjectSelect
-                    value={value}
-                    onChange={(val: string) => {
-                      onChange(val);
-                      setActiveProject(val);
-                    }}
-                  />
-                )}
-              />
-            )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
-              {status ? "更新" : "创建"}任务
-            </h3>
-          </div>
-          {watch("parent") &&
-            (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
-            selectedParentIssue && (
-              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
-                <div className="flex items-center gap-2">
-                  <span
-                    className="block h-1.5 w-1.5 rounded-full"
-                    style={{
-                      backgroundColor: selectedParentIssue.state__color,
-                    }}
-                  />
-                  <span className="flex-shrink-0 text-custom-text-200">
-                    {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
-                  </span>
-                  <span className="truncate font-medium">
-                    {selectedParentIssue.name.substring(0, 50)}
-                  </span>
-                  <XMarkIcon
-                    className="h-3 w-3 cursor-pointer"
-                    onClick={() => {
-                      setValue("parent", null);
-                      setSelectedParentIssue(null);
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-          <div className="space-y-3">
-            <div className="mt-2 space-y-3">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
-                <div>
-                  <Input
-                    id="name"
-                    name="name"
-                    className="resize-none text-xl"
-                    placeholder="标题"
-                    autoComplete="off"
-                    error={errors.name}
-                    register={register}
-                    validations={{
-                      required: "标题为必填项",
-                      maxLength: {
-                        value: 255,
-                        message: "标题应少于255个字符",
-                      },
-                    }}
-                  />
-                </div>
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
-                <div className="relative">
-                  <div className="flex justify-end">
-                    {issueName && issueName !== "" && (
-                      <button
-                        type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
-                          iAmFeelingLucky ? "cursor-wait" : ""
-                        }`}
-                        onClick={handleAutoGenerateDescription}
-                        disabled={iAmFeelingLucky}
-                      >
-                        {iAmFeelingLucky ? (
-                          "Generating response..."
-                        ) : (
-                          <>
-                            <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
-                          </>
-                        )}
-                      </button>
-                    )}
-                    {/*<button*/}
-                    {/*  type="button"*/}
-                    {/*  className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"*/}
-                    {/*  onClick={() => setGptAssistantModal((prevData) => !prevData)}*/}
-                    {/*>*/}
-                    {/*  <SparklesIcon className="h-4 w-4" />*/}
-                    {/*  AI*/}
-                    {/*</button>*/}
-                  </div>
-                  <Controller
-                    name="description_html"
-                    control={control}
-                    render={({ field: { value, onChange } }) => {
-                      if (!value && !watch("description_html")) return <></>;
-
-                      return (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
-                          ref={editorRef}
-                          debouncedUpdatesEnabled={false}
-                          value={
-                            !value ||
-                            value === "" ||
-                            (typeof value === "object" && Object.keys(value).length === 0)
-                              ? watch("description_html")
-                              : value
-                          }
-                          customClassName="min-h-[150px]"
-                          onChange={(description: Object, description_html: string) => {
-                            onChange(description_html);
-                            setValue("description", description);
-                          }}
-                        />
-                      );
-                    }}
-                  />
-                  <GptAssistantModal
-                    isOpen={gptAssistantModal}
-                    handleClose={() => {
-                      setGptAssistantModal(false);
-                      // this is done so that the title do not reset after gpt popover closed
-                      reset(getValues());
-                    }}
-                    inset="top-2 left-0"
-                    content=""
-                    htmlContent={watch("description_html")}
-                    onResponse={(response) => {
-                      handleAiAssistance(response);
-                    }}
-                    projectId={projectId}
-                  />
-                </div>
-              )}
-              <div className="flex flex-wrap items-center gap-2">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <Controller
-                    control={control}
-                    name="state"
-                    render={({ field: { value, onChange } }) => (
-                      <IssueStateSelect
-                        setIsOpen={setStateModal}
-                        value={value}
-                        onChange={onChange}
-                        projectId={projectId}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <Controller
-                    control={control}
-                    name="priority"
-                    render={({ field: { value, onChange } }) => (
-                      <IssuePrioritySelect value={value} onChange={onChange} />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <Controller
-                    control={control}
-                    name="assignees"
-                    render={({ field: { value, onChange } }) => (
-                      <IssueAssigneeSelect
-                        projectId={projectId}
-                        value={value}
-                        onChange={onChange}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-                  <Controller
-                    control={control}
-                    name="labels"
-                    render={({ field: { value, onChange } }) => (
-                      <IssueLabelSelect
-                        setIsOpen={setLabelModal}
-                        value={value}
-                        onChange={onChange}
-                        projectId={projectId}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <div>
-                    <Controller
-                      control={control}
-                      name="start_date"
-                      render={({ field: { value, onChange } }) => (
-                        <IssueDateSelect
-                          label="开始时间"
-                          maxDate={maxDate ?? undefined}
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <div>
-                    <Controller
-                      control={control}
-                      name="target_date"
-                      render={({ field: { value, onChange } }) => (
-                        <IssueDateSelect
-                          label="结束时间"
-                          minDate={minDate ?? undefined}
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                  <div>
-                    <Controller
-                      control={control}
-                      name="estimate_point"
-                      render={({ field: { value, onChange } }) => (
-                        <IssueEstimateSelect value={value} onChange={onChange} />
-                      )}
-                    />
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <Controller
-                    control={control}
-                    name="parent"
-                    render={({ field: { onChange } }) => (
-                      <ParentIssuesListModal
-                        isOpen={parentIssueListModalOpen}
-                        handleClose={() => setParentIssueListModalOpen(false)}
-                        onChange={(issue) => {
-                          onChange(issue.id);
-                          setSelectedParentIssue(issue);
-                        }}
-                        projectId={projectId}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <CustomMenu ellipsis>
-                    {watch("parent") ? (
-                      <>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
-                          更改父任务
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setValue("parent", null)}
-                        >
-                          移除父任务
-                        </CustomMenu.MenuItem>
-                      </>
-                    ) : (
-                      <CustomMenu.MenuItem
-                        renderAs="button"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
-                        选择父任务
-                      </CustomMenu.MenuItem>
-                    )}
-                  </CustomMenu>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
-          <div
-            className="flex cursor-pointer items-center gap-1"
-            onClick={() => setCreateMore((prevData) => !prevData)}
-          >
-            <span className="text-xs">创建更多</span>
-            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
-          </div>
-          <div className="flex items-center gap-2">
-            <SecondaryButton onClick={handleClose}>取消</SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
-              {status
-                ? isSubmitting
-                  ? "更新任务中..."
-                  : "更新任务"
-                : isSubmitting
-                ? "添加任务中..."
-                : "添加任务"}
-            </PrimaryButton>
-          </div>
-        </div>
-      </form>
-    </>
-  );
-};
diff --git a/apps/app/components/issues/gantt-chart/index.ts b/apps/app/components/issues/gantt-chart/index.ts
deleted file mode 100644
index 7f0d162739a..00000000000
--- a/apps/app/components/issues/gantt-chart/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./blocks";
-export * from "./layout";
diff --git a/apps/app/components/issues/gantt-chart/layout.tsx b/apps/app/components/issues/gantt-chart/layout.tsx
deleted file mode 100644
index a42d764d820..00000000000
--- a/apps/app/components/issues/gantt-chart/layout.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartIssues from "hooks/gantt-chart/issue-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
-// components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
-// types
-import { IIssue } from "types";
-
-export const IssueGanttChartView = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { orderBy } = useIssuesView();
-
-  const { user } = useUser();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
-    workspaceSlug as string,
-    projectId as string
-  );
-
-  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        BlockRender={IssueGanttBlock}
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        enableReorder={orderBy === "sort_order"}
-        bottomSpacing
-      />
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/index.ts b/apps/app/components/issues/index.ts
deleted file mode 100644
index d0ab71e1caa..00000000000
--- a/apps/app/components/issues/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export * from "./attachment";
-export * from "./comment";
-export * from "./my-issues";
-export * from "./sidebar-select";
-export * from "./view-select";
-export * from "./activity";
-export * from "./delete-issue-modal";
-export * from "./description-form";
-export * from "./form";
-export * from "./gantt-chart";
-export * from "./main-content";
-export * from "./modal";
-export * from "./parent-issues-list-modal";
-export * from "./sidebar";
-export * from "./sub-issues-list";
-export * from "./label";
-export * from "./issue-reaction";
-export * from "./peek-overview";
diff --git a/apps/app/components/issues/label.tsx b/apps/app/components/issues/label.tsx
deleted file mode 100644
index c5a48d0adc9..00000000000
--- a/apps/app/components/issues/label.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-
-// components
-import { Tooltip } from "components/ui";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  maxRender?: number;
-};
-
-export const ViewIssueLabel: React.FC<Props> = ({ issue, maxRender = 1 }) => (
-  <>
-    {issue.label_details.length > 0 ? (
-      issue.label_details.length <= maxRender ? (
-        <>
-          {issue.label_details.map((label, index) => (
-            <div
-              key={label.id}
-              className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
-            >
-              <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name}>
-                <div className="flex items-center gap-1.5 text-custom-text-200">
-                  <span
-                    className="h-2 w-2 flex-shrink-0 rounded-full"
-                    style={{
-                      backgroundColor: label?.color ?? "#000000",
-                    }}
-                  />
-                  {label.name}
-                </div>
-              </Tooltip>
-            </div>
-          ))}
-        </>
-      ) : (
-        <div className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
-          <Tooltip
-            position="top"
-            tooltipHeading="Labels"
-            tooltipContent={issue.label_details.map((l) => l.name).join(", ")}
-          >
-            <div className="flex items-center gap-1.5 text-custom-text-200">
-              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-              {`${issue.label_details.length} Labels`}
-            </div>
-          </Tooltip>
-        </div>
-      )
-    ) : (
-      ""
-    )}
-  </>
-);
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
deleted file mode 100644
index ef7b4f3fe65..00000000000
--- a/apps/app/components/issues/main-content.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// components
-import {
-  AddComment,
-  IssueActivitySection,
-  IssueAttachmentUpload,
-  IssueAttachments,
-  IssueDescriptionForm,
-  SubIssuesList,
-  IssueReaction,
-} from "components/issues";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { LayerDiagonalIcon } from "components/icons";
-import { MinusCircleIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssue, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  issueDetails: IIssue;
-  submitChanges: (formData: Partial<IIssue>) => Promise<void>;
-  uneditable?: boolean;
-};
-
-export const IssueMainContent: React.FC<Props> = ({
-  issueDetails,
-  submitChanges,
-  uneditable = false,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { user } = useUserAuth();
-  const { memberRole } = useProjectMyMembership();
-
-  const { projectDetails } = useProjectDetails();
-
-  const { data: siblingIssues } = useSWR(
-    workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
-    workspaceSlug && projectId && issueDetails?.parent
-      ? () =>
-          issuesService.subIssues(
-            workspaceSlug as string,
-            projectId as string,
-            issueDetails.parent ?? ""
-          )
-      : null
-  );
-  const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
-
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issueDetails) return;
-
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <>
-      <div className="rounded-lg">
-        {issueDetails?.parent ? (
-          <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md bg-custom-background-80 border border-custom-border-300 py-1 px-2.5 text-xs">
-            <Link
-              href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
-            >
-              <a className="flex items-center gap-3">
-                <div className="flex items-center gap-2.5">
-                  <span
-                    className="block h-2 w-2 rounded-full"
-                    style={{
-                      backgroundColor: issueDetails.parent_detail?.state_detail.color,
-                    }}
-                  />
-                  <span className="flex-shrink-0 text-custom-text-200">
-                    {issueDetails.parent_detail?.project_detail.identifier}-
-                    {issueDetails.parent_detail?.sequence_id}
-                  </span>
-                </div>
-                <span className="truncate text-custom-text-100">
-                  {issueDetails.parent_detail?.name.substring(0, 50)}
-                </span>
-              </a>
-            </Link>
-
-            <CustomMenu position="left" ellipsis optionsClassName="px-1.5">
-              {siblingIssuesList ? (
-                siblingIssuesList.length > 0 ? (
-                  <>
-                    <h2 className="mb-1 text-custom-text-200 text-xs font-medium px-2 pb-1 border-b border-custom-border-300">
-                      Sibling issues
-                    </h2>
-                    {siblingIssuesList.map((issue) => (
-                      <CustomMenu.MenuItem
-                        key={issue.id}
-                        renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
-                          issue.id
-                        }`}
-                        className="flex items-center gap-2 py-2"
-                      >
-                        <LayerDiagonalIcon className="h-4 w-4" />
-                        {issueDetails.project_detail.identifier}-{issue.sequence_id}
-                      </CustomMenu.MenuItem>
-                    ))}
-                  </>
-                ) : (
-                  <p className="flex items-center gap-2 whitespace-nowrap px-1 text-left text-xs text-custom-text-200 py-1">
-                    No sibling issues
-                  </p>
-                )
-              ) : null}
-              <CustomMenu.MenuItem
-                renderAs="button"
-                onClick={() => submitChanges({ parent: null })}
-                className="flex items-center gap-2 text-red-500 py-2"
-              >
-                <MinusCircleIcon className="h-4 w-4" />
-                <span> Remove Parent Issue</span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
-          </div>
-        ) : null}
-        <IssueDescriptionForm
-          workspaceSlug={workspaceSlug as string}
-          issue={issueDetails}
-          handleFormSubmit={submitChanges}
-          isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
-        />
-
-        <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
-
-        <div className="mt-2 space-y-2">
-          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
-        </div>
-      </div>
-      <div className="flex flex-col gap-3 py-3">
-        <h3 className="text-lg">附件</h3>
-        <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          <IssueAttachmentUpload disabled={uneditable} />
-          <IssueAttachments />
-        </div>
-      </div>
-      <div className="space-y-5 pt-3">
-        <h3 className="text-lg text-custom-text-100">评论/活动</h3>
-        <IssueActivitySection
-          activity={issueActivity}
-          handleCommentUpdate={handleCommentUpdate}
-          handleCommentDelete={handleCommentDelete}
-        />
-        <AddComment
-          onSubmit={handleAddComment}
-          disabled={uneditable}
-          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
-        />
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/issues/my-issues/index.ts b/apps/app/components/issues/my-issues/index.ts
deleted file mode 100644
index 65a063f4cea..00000000000
--- a/apps/app/components/issues/my-issues/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./my-issues-select-filters";
-export * from "./my-issues-view-options";
-export * from "./my-issues-view";
diff --git a/apps/app/components/issues/my-issues/my-issues-view-options.tsx b/apps/app/components/issues/my-issues/my-issues-view-options.tsx
deleted file mode 100644
index 7c6a6fe449c..00000000000
--- a/apps/app/components/issues/my-issues/my-issues-view-options.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-import useEstimateOption from "hooks/use-estimate-option";
-// components
-import { MyIssuesSelectFilters } from "components/issues";
-// ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { Properties, TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "kanban",
-    Icon: GridViewOutlined,
-  },
-];
-
-export const MyIssuesViewOptions: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    issueView,
-    setIssueView,
-    groupBy,
-    setGroupBy,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    properties,
-    setProperty,
-    filters,
-    setFilters,
-  } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const { isEstimateActive } = useEstimateOption();
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {issueViewOptions.map((option) => (
-          <Tooltip
-            key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-            }
-            position="bottom"
-          >
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                issueView === option.type
-                  ? "bg-custom-sidebar-background-80"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => setIssueView(option.type)}
-            >
-              <option.Icon
-                sx={{
-                  fontSize: 16,
-                }}
-                className={option.type === "gantt_chart" ? "rotate-90" : ""}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-      <MyIssuesSelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters({
-                [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                  (val) => val !== option.value
-                ),
-              });
-            else
-              setFilters({
-                [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-              });
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
-              }`}
-            >
-              View
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </Popover.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-custom-border-200">
-                  <div className="space-y-4 pb-3 text-xs">
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                groupBy === "project"
-                                  ? "Project"
-                                  : GROUP_BY_OPTIONS.find((option) => option.key === groupBy)
-                                      ?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
-                                  return null;
-
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => setGroupBy(option.key)}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                                "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) => {
-                                if (groupBy === "priority" && option.key === "priority")
-                                  return null;
-                                if (option.key === "sort_order") return null;
-
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setOrderBy(option.key);
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                      </>
-                    )}
-                    <div className="flex items-center justify-between">
-                      <h4 className="text-custom-text-200">Issue type</h4>
-                      <div className="w-28">
-                        <CustomMenu
-                          label={
-                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
-                              ?.name ?? "Select"
-                          }
-                          className="!w-full"
-                          buttonClassName="w-full"
-                        >
-                          {FILTER_ISSUE_OPTIONS.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() =>
-                                setFilters({
-                                  type: option.key,
-                                })
-                              }
-                            >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                    </div>
-
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty states</h4>
-                          <div className="w-28">
-                            <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
-                          </div>
-                        </div>
-                      </>
-                    )}
-                  </div>
-
-                  <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {Object.keys(properties).map((key) => {
-                        if (key === "estimate" && !isEstimateActive) return null;
-
-                        if (
-                          issueView === "spreadsheet" &&
-                          (key === "attachment_count" ||
-                            key === "link" ||
-                            key === "sub_issue_count")
-                        )
-                          return null;
-
-                        if (
-                          issueView !== "spreadsheet" &&
-                          (key === "created_on" || key === "updated_on")
-                        )
-                          return null;
-
-                        return (
-                          <button
-                            key={key}
-                            type="button"
-                            className={`rounded border px-2 py-1 text-xs capitalize ${
-                              properties[key as keyof Properties]
-                                ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-200"
-                            }`}
-                            onClick={() => setProperty(key as keyof Properties)}
-                          >
-                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
deleted file mode 100644
index 9c04e0b6ae5..00000000000
--- a/apps/app/components/issues/peek-overview/full-screen-peek-view.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// components
-import {
-  PeekOverviewHeader,
-  PeekOverviewIssueActivity,
-  PeekOverviewIssueDetails,
-  PeekOverviewIssueProperties,
-  TPeekOverviewModes,
-} from "components/issues";
-// ui
-import { Loader } from "components/ui";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
-  issue: IIssue | undefined;
-  mode: TPeekOverviewModes;
-  readOnly: boolean;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-export const FullScreenPeekView: React.FC<Props> = ({
-  handleClose,
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  setMode,
-  workspaceSlug,
-}) => (
-  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
-    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
-      <div className="w-full p-5">
-        <PeekOverviewHeader
-          handleClose={handleClose}
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode={mode}
-          setMode={setMode}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      {issue ? (
-        <div className="h-full w-full px-6 overflow-y-auto">
-          {/* issue title and description */}
-          <div className="w-full">
-            <PeekOverviewIssueDetails
-              handleUpdateIssue={handleUpdateIssue}
-              issue={issue}
-              readOnly={readOnly}
-              workspaceSlug={workspaceSlug}
-            />
-          </div>
-          {/* divider */}
-          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-          {/* issue activity/comments */}
-          <div className="w-full pb-5">
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
-          </div>
-        </div>
-      ) : (
-        <Loader className="px-6">
-          <Loader.Item height="30px" />
-          <div className="space-y-2 mt-3">
-            <Loader.Item height="20px" width="70%" />
-            <Loader.Item height="20px" width="60%" />
-            <Loader.Item height="20px" width="60%" />
-          </div>
-        </Loader>
-      )}
-    </div>
-    <div className="col-span-3 h-full w-full overflow-y-auto">
-      {/* issue properties */}
-      <div className="w-full px-6 py-5">
-        {issue ? (
-          <PeekOverviewIssueProperties
-            handleDeleteIssue={handleDeleteIssue}
-            handleUpdateIssue={handleUpdateIssue}
-            issue={issue}
-            mode="full"
-            readOnly={readOnly}
-            workspaceSlug={workspaceSlug}
-          />
-        ) : (
-          <Loader className="mt-11 space-y-4">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </Loader>
-        )}
-      </div>
-    </div>
-  </div>
-);
diff --git a/apps/app/components/issues/peek-overview/header.tsx b/apps/app/components/issues/peek-overview/header.tsx
deleted file mode 100644
index 266b2edb8e9..00000000000
--- a/apps/app/components/issues/peek-overview/header.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import Link from "next/link";
-
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomSelect, Icon } from "components/ui";
-// icons
-import { East, OpenInFull } from "@mui/icons-material";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import { IIssue } from "types";
-import { TPeekOverviewModes } from "./layout";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  issue: IIssue | undefined;
-  mode: TPeekOverviewModes;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-const peekModes: {
-  key: TPeekOverviewModes;
-  icon: string;
-  label: string;
-}[] = [
-  { key: "side", icon: "side_navigation", label: "Side Peek" },
-  {
-    key: "modal",
-    icon: "dialogs",
-    label: "Modal Peek",
-  },
-  {
-    key: "full",
-    icon: "nearby",
-    label: "Full Screen Peek",
-  },
-];
-
-export const PeekOverviewHeader: React.FC<Props> = ({
-  issue,
-  handleClose,
-  handleDeleteIssue,
-  mode,
-  setMode,
-  workspaceSlug,
-}) => {
-  const { setToastAlert } = useToast();
-
-  const handleCopyLink = () => {
-    const urlToCopy = window.location.href;
-
-    copyTextToClipboard(urlToCopy).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link copied!",
-        message: "Issue link copied to clipboard",
-      });
-    });
-  };
-
-  return (
-    <div className="flex justify-between items-center">
-      <div className="flex items-center gap-4">
-        {mode === "side" && (
-          <button type="button" onClick={handleClose}>
-            <East
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </button>
-        )}
-        <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
-          <a>
-            <OpenInFull
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </a>
-        </Link>
-        <CustomSelect
-          value={mode}
-          onChange={(val: TPeekOverviewModes) => setMode(val)}
-          customButton={
-            <button
-              type="button"
-              className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
-            >
-              <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
-            </button>
-          }
-          position="left"
-        >
-          {peekModes.map((mode) => (
-            <CustomSelect.Option key={mode.key} value={mode.key}>
-              <div className="flex items-center gap-1.5">
-                <Icon
-                  iconName={mode.icon}
-                  className={`!text-base flex-shrink-0 -my-1 ${
-                    mode.key === "full" ? "rotate-45" : ""
-                  }`}
-                />
-                {mode.label}
-              </div>
-            </CustomSelect.Option>
-          ))}
-        </CustomSelect>
-      </div>
-      {(mode === "side" || mode === "modal") && (
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <button type="button" onClick={handleCopyLink} className="-rotate-45">
-            <Icon iconName="link" />
-          </button>
-          <button type="button" onClick={handleDeleteIssue}>
-            <Icon iconName="delete" />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/peek-overview/issue-activity.tsx b/apps/app/components/issues/peek-overview/issue-activity.tsx
deleted file mode 100644
index 975b01fb070..00000000000
--- a/apps/app/components/issues/peek-overview/issue-activity.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// components
-import { AddComment, IssueActivitySection } from "components/issues";
-// types
-import { IIssue, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-type Props = {
-  workspaceSlug: string;
-  issue: IIssue;
-  readOnly: boolean;
-};
-
-export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
-  const { setToastAlert } = useToast();
-
-  const { user } = useUser();
-
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
-    workspaceSlug && issue
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !issue) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        issue.project,
-        issue.id,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !issue) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issue) return;
-
-    await issuesService
-      .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <div>
-      <h4 className="font-medium">Activity</h4>
-      <div className="mt-4">
-        <IssueActivitySection
-          activity={issueActivity}
-          handleCommentUpdate={handleCommentUpdate}
-          handleCommentDelete={handleCommentDelete}
-        />
-        <div className="mt-4">
-          <AddComment onSubmit={handleAddComment} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/peek-overview/issue-details.tsx b/apps/app/components/issues/peek-overview/issue-details.tsx
deleted file mode 100644
index 5b9db8dbd5e..00000000000
--- a/apps/app/components/issues/peek-overview/issue-details.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// components
-import { IssueDescriptionForm, IssueReaction } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
-  readOnly: boolean;
-  workspaceSlug: string;
-};
-
-export const PeekOverviewIssueDetails: React.FC<Props> = ({
-  handleUpdateIssue,
-  issue,
-  readOnly,
-  workspaceSlug,
-}) => (
-  <div className="space-y-2">
-    <h6 className="font-medium text-custom-text-200">
-      {issue.project_detail.identifier}-{issue.sequence_id}
-    </h6>
-    <IssueDescriptionForm
-      handleFormSubmit={handleUpdateIssue}
-      isAllowed={!readOnly}
-      issue={{
-        name: issue.name,
-        description_html: issue.description_html,
-      }}
-      workspaceSlug={workspaceSlug}
-    />
-    <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} />
-  </div>
-);
diff --git a/apps/app/components/issues/peek-overview/issue-properties.tsx b/apps/app/components/issues/peek-overview/issue-properties.tsx
deleted file mode 100644
index 2b5662f348f..00000000000
--- a/apps/app/components/issues/peek-overview/issue-properties.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-// mobx
-import { observer } from "mobx-react-lite";
-// headless ui
-import { Disclosure } from "@headlessui/react";
-import { getStateGroupIcon } from "components/icons";
-// hooks
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-// components
-import {
-  SidebarAssigneeSelect,
-  SidebarEstimateSelect,
-  SidebarPrioritySelect,
-  SidebarStateSelect,
-  TPeekOverviewModes,
-} from "components/issues";
-// ui
-import { CustomDatePicker, Icon } from "components/ui";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
-  mode: TPeekOverviewModes;
-  readOnly: boolean;
-  workspaceSlug: string;
-};
-
-export const PeekOverviewIssueProperties: React.FC<Props> = ({
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  workspaceSlug,
-}) => {
-  const { setToastAlert } = useToast();
-
-  const startDate = issue.start_date;
-  const targetDate = issue.target_date;
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  const handleCopyLink = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link copied!",
-        message: "Issue link copied to clipboard",
-      });
-    });
-  };
-
-  return (
-    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
-      {mode === "full" && (
-        <div className="flex justify-between gap-2 pb-3">
-          <h6 className="flex items-center gap-2 font-medium">
-            {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)}
-            {issue.project_detail.identifier}-{issue.sequence_id}
-          </h6>
-          <div className="flex items-center gap-2">
-            <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
-            </button>
-            <button type="button" onClick={handleDeleteIssue}>
-              <Icon iconName="delete" />
-            </button>
-          </div>
-        </div>
-      )}
-      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">状态</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarStateSelect
-              value={issue.state}
-              onChange={(val: string) => handleUpdateIssue({ state: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="group" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">负责人</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarAssigneeSelect
-              value={issue.assignees_list}
-              onChange={(val: string[]) => handleUpdateIssue({ assignees_list: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">优先级</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarPrioritySelect
-              value={issue.priority}
-              onChange={(val: string) => handleUpdateIssue({ priority: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">开始时间</span>
-          </div>
-          <div>
-            {issue.start_date ? (
-              <CustomDatePicker
-                placeholder="开始时间"
-                value={issue.start_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    start_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                maxDate={maxDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">空</span>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">结束时间</span>
-          </div>
-          <div>
-            {issue.target_date ? (
-              <CustomDatePicker
-                placeholder="结束时间 "
-                value={issue.target_date}
-                onChange={(val) =>
-                  handleUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                minDate={minDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">空</span>
-            )}
-          </div>
-        </div>
-        {/* <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Estimate</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarEstimateSelect
-              value={issue.estimate_point}
-              onChange={(val: number | null) =>handleUpdateIssue({ estimate_point: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div> */}
-        {/* <Disclosure as="div">
-          {({ open }) => (
-            <>
-              <Disclosure.Button
-                as="button"
-                type="button"
-                className="flex items-center gap-1 text-sm text-custom-text-200"
-              >
-                Show {open ? "Less" : "More"}
-                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
-              </Disclosure.Button>
-              <Disclosure.Panel as="div" className="mt-4 space-y-4">
-                Disclosure Panel
-              </Disclosure.Panel>
-            </>
-          )}
-        </Disclosure> */}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
deleted file mode 100644
index 50fa5df6829..00000000000
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import useUser from "hooks/use-user";
-// components
-import { FullScreenPeekView, SidePeekView } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleMutation: () => void;
-  projectId: string;
-  readOnly: boolean;
-  workspaceSlug: string;
-};
-
-export type TPeekOverviewModes = "side" | "modal" | "full";
-
-export const IssuePeekOverview: React.FC<Props> = observer(
-  ({ handleMutation, projectId, readOnly, workspaceSlug }) => {
-    const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
-    const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
-    const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
-
-    const router = useRouter();
-    const { peekIssue } = router.query;
-
-    const { issues: issuesStore } = useMobxStore();
-    const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
-
-    const issue = issues[peekIssue?.toString() ?? ""];
-
-    const { user } = useUser();
-
-    const handleClose = () => {
-      const { query } = router;
-      delete query.peekIssue;
-
-      router.push({
-        pathname: router.pathname,
-        query: { ...query },
-      });
-    };
-
-    const handleUpdateIssue = async (formData: Partial<IIssue>) => {
-      if (!issue || !user) return;
-
-      await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
-      handleMutation();
-    };
-
-    const handleDeleteIssue = async () => {
-      if (!issue || !user) return;
-
-      await deleteIssue(workspaceSlug, projectId, issue.id, user);
-      handleMutation();
-
-      handleClose();
-    };
-
-    useEffect(() => {
-      if (!peekIssue) return;
-
-      getIssueById(workspaceSlug, projectId, peekIssue.toString());
-    }, [getIssueById, peekIssue, projectId, workspaceSlug]);
-
-    useEffect(() => {
-      if (peekIssue) {
-        if (peekOverviewMode === "side") {
-          setIsSidePeekOpen(true);
-          setIsModalPeekOpen(false);
-        } else {
-          setIsModalPeekOpen(true);
-          setIsSidePeekOpen(false);
-        }
-      } else {
-        console.log("Triggered");
-        setIsSidePeekOpen(false);
-        setIsModalPeekOpen(false);
-      }
-    }, [peekIssue, peekOverviewMode]);
-
-    return (
-      <>
-        <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="transition-transform duration-300"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transition-transform duration-200"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
-                >
-                  <Dialog.Panel className="absolute z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
-                    <SidePeekView
-                      handleClose={handleClose}
-                      handleDeleteIssue={handleDeleteIssue}
-                      handleUpdateIssue={handleUpdateIssue}
-                      issue={issue}
-                      mode={peekOverviewMode}
-                      readOnly={readOnly}
-                      setMode={(mode) => setPeekOverviewMode(mode)}
-                      workspaceSlug={workspaceSlug}
-                    />
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
-          </Dialog>
-        </Transition.Root>
-        <Transition.Root appear show={isModalPeekOpen} 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 bg-opacity-50 transition-opacity" />
-            </Transition.Child>
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="relative h-full w-full">
-                <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"
-                >
-                  <Dialog.Panel
-                    className={`absolute z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                    }`}
-                  >
-                    {peekOverviewMode === "modal" && (
-                      <SidePeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                    {peekOverviewMode === "full" && (
-                      <FullScreenPeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={handleDeleteIssue}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      </>
-    );
-  }
-);
diff --git a/apps/app/components/issues/peek-overview/side-peek-view.tsx b/apps/app/components/issues/peek-overview/side-peek-view.tsx
deleted file mode 100644
index 1bdeed4791f..00000000000
--- a/apps/app/components/issues/peek-overview/side-peek-view.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// components
-import {
-  PeekOverviewHeader,
-  PeekOverviewIssueActivity,
-  PeekOverviewIssueDetails,
-  PeekOverviewIssueProperties,
-  TPeekOverviewModes,
-} from "components/issues";
-// ui
-import { Loader } from "components/ui";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
-  issue: IIssue | undefined;
-  mode: TPeekOverviewModes;
-  readOnly: boolean;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-export const SidePeekView: React.FC<Props> = ({
-  handleClose,
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  setMode,
-  workspaceSlug,
-}) => (
-  <div className="h-full w-full flex flex-col overflow-hidden">
-    <div className="w-full p-5">
-      <PeekOverviewHeader
-        handleClose={handleClose}
-        handleDeleteIssue={handleDeleteIssue}
-        issue={issue}
-        mode={mode}
-        setMode={setMode}
-        workspaceSlug={workspaceSlug}
-      />
-    </div>
-    {issue ? (
-      <div className="h-full w-full px-6 overflow-y-auto">
-        {/* issue title and description */}
-        <div className="w-full">
-          <PeekOverviewIssueDetails
-            handleUpdateIssue={handleUpdateIssue}
-            issue={issue}
-            readOnly={readOnly}
-            workspaceSlug={workspaceSlug}
-          />
-        </div>
-        {/* issue properties */}
-        <div className="w-full mt-10">
-          <PeekOverviewIssueProperties
-            handleDeleteIssue={handleDeleteIssue}
-            handleUpdateIssue={handleUpdateIssue}
-            issue={issue}
-            mode={mode}
-            readOnly={readOnly}
-            workspaceSlug={workspaceSlug}
-          />
-        </div>
-        {/* divider */}
-        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-        {/* issue activity/comments */}
-        <div className="w-full pb-5">
-          {issue && (
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
-          )}
-        </div>
-      </div>
-    ) : (
-      <Loader className="px-6">
-        <Loader.Item height="30px" />
-        <div className="space-y-2 mt-3">
-          <Loader.Item height="20px" width="70%" />
-          <Loader.Item height="20px" width="60%" />
-          <Loader.Item height="20px" width="60%" />
-        </div>
-      </Loader>
-    )}
-  </div>
-);
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
deleted file mode 100644
index c5eada0adf2..00000000000
--- a/apps/app/components/issues/select/assignee.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectServices from "services/project.service";
-// ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-export type Props = {
-  projectId: string;
-  value: string[];
-  onChange: (value: string[]) => void;
-};
-
-export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name ?? "",
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.is_bot ? member.member.first_name : member.member.display_name}
-      </div>
-    ),
-  }));
-
-  return (
-    <CustomSearchSelect
-      value={value}
-      onChange={onChange}
-      options={options}
-      customButton={
-        <div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
-          {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="-my-0.5 flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={true} />
-            </div>
-          ) : (
-            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-              <Icon iconName="person" className="!text-base !leading-4" />
-              <span className="text-custom-text-200">负责人</span>
-            </div>
-          )}
-        </div>
-      }
-      multiple
-      noChevron
-    />
-  );
-};
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
deleted file mode 100644
index 01fbacda3ac..00000000000
--- a/apps/app/components/issues/select/date.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-
-import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// react-datepicker
-import DatePicker from "react-datepicker";
-// import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-
-type Props = {
-  label: string;
-  maxDate?: Date;
-  minDate?: Date;
-  onChange: (val: string | null) => void;
-  value: string | null;
-};
-
-export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => (
-  <Popover className="relative flex items-center justify-center  rounded-lg">
-    {({ close }) => (
-      <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
-        </Popover.Button>
-
-        <Transition
-          as={React.Fragment}
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-        >
-          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
-            <DatePicker
-              selected={value ? new Date(value) : null}
-              onChange={(val) => {
-                if (!val) onChange("");
-                else onChange(renderDateFormat(val));
-
-                close();
-              }}
-              dateFormat="dd-MM-yyyy"
-              minDate={minDate}
-              maxDate={maxDate}
-              inline
-            />
-          </Popover.Panel>
-        </Transition>
-      </>
-    )}
-  </Popover>
-);
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
deleted file mode 100644
index 0d910013b43..00000000000
--- a/apps/app/components/issues/select/estimate.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PlayIcon } from "@heroicons/react/24/outline";
-// fetch-keys
-import useEstimateOption from "hooks/use-estimate-option";
-
-type Props = {
-  value: number | null;
-  onChange: (value: number | null) => void;
-};
-
-export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
-
-  if (!isEstimateActive) return null;
-
-  return (
-    <CustomSelect
-      value={value}
-      label={
-        <div className="flex items-center gap-2 text-xs">
-          <PlayIcon
-            className={`h-3.5 w-3.5 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
-          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
-            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
-          </span>
-        </div>
-      }
-      onChange={onChange}
-      position="right"
-      width="w-full min-w-[8rem]"
-      noChevron
-    >
-      <CustomSelect.Option value={null}>
-        <>
-          <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
-          </span>
-          None
-        </>
-      </CustomSelect.Option>
-      {estimatePoints &&
-        estimatePoints.map((point) => (
-          <CustomSelect.Option key={point.key} value={point.key}>
-            <>
-              <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
-              </span>
-              {point.value}
-            </>
-          </CustomSelect.Option>
-        ))}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/issues/select/index.ts b/apps/app/components/issues/select/index.ts
deleted file mode 100644
index 4f1a20372f9..00000000000
--- a/apps/app/components/issues/select/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./assignee";
-export * from "./date";
-export * from "./estimate";
-export * from "./label";
-export * from "./priority";
-export * from "./project";
-export * from "./state";
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
deleted file mode 100644
index 23b8034c7a8..00000000000
--- a/apps/app/components/issues/select/priority.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { getPriorityIcon } from "components/icons/priority-icon";
-// constants
-import { PRIORITIES } from "constants/project";
-
-type Props = {
-  value: string | null;
-  onChange: (value: string) => void;
-};
-
-export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
-  <CustomSelect
-    value={value}
-    label={
-      <div className="flex items-center justify-center gap-2 text-xs">
-        <span className="flex items-center">
-          {getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
-        </span>
-        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
-          {/*{value ?? "优先级"}*/}
-
-            {/*{value === "" && <span>无</span>}*/}
-            {value === undefined && <span>优先级</span>}
-                    {value !== null && value !== undefined ? <>
-                    {value === "urgent" && <span>急</span>}
-                    {value === "high" && <span>高</span>}
-                    {value === "medium" && <span>中</span>}
-                    {value === "low" && <span>低</span>}
-                    {value === "null" && <span>无</span>}
-                    {value === null && <span>无</span>}
-                    {value == undefined && <span>无</span>}
-
-                    </>
-            : "优先级"}
-            {/*{value ?*/}
-            {/*    <span>优先级</span> :*/}
-            {/*    <>*/}
-            {/*        {value === "urgent" && <span>急</span>}*/}
-            {/*        {value === "high" && <span>高</span>}*/}
-            {/*        {value === "medium" && <span>中</span>}*/}
-            {/*        {value === "low" && <span>低</span>}*/}
-            {/*        {value === "null" && <span>无</span>}*/}
-            {/*    </>*/}
-            {/*}*/}
-        </span>
-      </div>
-    }
-    onChange={onChange}
-    noChevron
-  >
-    {PRIORITIES.map((priority) => (
-      <CustomSelect.Option key={priority} value={priority}>
-        <div className="flex w-full justify-between gap-2 rounded">
-          <div className="flex items-center justify-start gap-2">
-            <span>{getPriorityIcon(priority)}</span>
-            <span className="capitalize">
-
-                {/*{priority === "urgent" && <span>急</span>}*/}
-                {/*{priority === "high" && <span>高</span>}*/}
-                {/*{priority === "medium" && <span>中</span>}*/}
-                {/*{priority === "low" && <span>低</span>}*/}
-                {/*{priority === "None" && <span>无</span>}*/}
-
-                {/*{priority ?? "无"}*/}
-
-                {priority === "urgent" && <span>急</span>}
-                {priority === "high" && <span>高</span>}
-                {priority === "medium" && <span>中</span>}
-                {priority === "low" && <span>低</span>}
-                {!priority  && <span>无</span>}
-            </span>
-          </div>
-        </div>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
deleted file mode 100644
index f58735b0a38..00000000000
--- a/apps/app/components/issues/select/state.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import stateService from "services/state.service";
-// ui
-import { CustomSearchSelect } from "components/ui";
-// icons
-import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// fetch keys
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  value: string;
-  onChange: (value: string) => void;
-  projectId: string;
-};
-
-export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
-  // states
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId)
-      : null
-  );
-  const states = getStatesList(stateGroups);
-
-  const options = states?.map((state) => ({
-    value: state.id,
-    query: state.name,
-    content: (
-      <div className="flex items-center gap-2">
-        {getStateGroupIcon(state.group, "16", "16", state.color)}
-        {state.name}
-      </div>
-    ),
-  }));
-
-  const selectedOption = states?.find((s) => s.id === value);
-  const currentDefaultState = states?.find((s) => s.default);
-
-  return (
-    <CustomSearchSelect
-      value={value}
-      onChange={onChange}
-      options={options}
-      label={
-        <div className="flex items-center gap-2">
-          {selectedOption ? (
-            getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
-          ) : currentDefaultState ? (
-            getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
-          ) : (
-            <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
-          )}
-          {selectedOption?.name
-            ? selectedOption.name
-            : currentDefaultState?.name ?? <span className="text-custom-text-200">状态</span>}
-        </div>
-      }
-      footerOption={
-        <button
-          type="button"
-          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
-          onClick={() => setIsOpen(true)}
-        >
-          <PlusIcon className="h-4 w-4" aria-hidden="true" />
-          创建新状态
-        </button>
-      }
-      noChevron
-    />
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
deleted file mode 100644
index 0e0d422d4cd..00000000000
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// ui
-import { CustomSearchSelect } from "components/ui";
-import { AssigneesList, Avatar } from "components/ui/avatar";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  value: string[];
-  onChange: (val: string[]) => void;
-  disabled?: boolean;
-};
-
-export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  return (
-    <CustomSearchSelect
-      value={value}
-      customButton={
-        <>
-          {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="-my-0.5 flex items-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100 text-xs">{value.length} 负责人</span>
-            </div>
-          ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded">
-              无负责人
-            </button>
-          )}
-        </>
-      }
-      options={options}
-      onChange={onChange}
-      multiple
-      disabled={disabled}
-    />
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
deleted file mode 100644
index 268a3891753..00000000000
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// react-hook-form
-import { UseFormWatch } from "react-hook-form";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { ExistingIssuesListModal } from "components/core";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon } from "components/icons";
-// types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
-
-type Props = {
-  issueId?: string;
-  submitChanges: (formData: Partial<IIssue>) => void;
-  watch: UseFormWatch<IIssue>;
-  disabled?: boolean;
-};
-
-export const SidebarBlockedSelect: React.FC<Props> = ({
-  issueId,
-  submitChanges,
-  watch,
-  disabled = false,
-}) => {
-  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const handleClose = () => {
-    setIsBlockedModalOpen(false);
-  };
-
-  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (data.length === 0) {
-      setToastAlert({
-        title: "错误",
-        type: "error",
-        message: "请至少选择一个任务",
-      });
-
-      return;
-    }
-
-    const selectedIssues: { blocked_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
-      blocked_issue_detail: {
-        id: i.id,
-        name: i.name,
-        sequence_id: i.sequence_id,
-        project_detail: {
-          id: i.project_id,
-          identifier: i.project__identifier,
-          name: i.project__name,
-        },
-      },
-    }));
-
-    const newBlocked = [...watch("blocked_issues"), ...selectedIssues];
-
-    submitChanges({
-      blocked_issues: newBlocked,
-      blocks_list: newBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
-    });
-    handleClose();
-  };
-
-  return (
-    <>
-      <ExistingIssuesListModal
-        isOpen={isBlockedModalOpen}
-        handleClose={() => setIsBlockedModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
-        handleOnSubmit={onSubmit}
-        workspaceLevelToggle
-      />
-      <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          <BlockedIcon height={16} width={16} />
-          <p>受阻于</p>
-        </div>
-        <div className="space-y-1 sm:basis-1/2">
-          <div className="flex flex-wrap gap-1">
-            {watch("blocked_issues") && watch("blocked_issues").length > 0
-              ? watch("blocked_issues").map((issue) => (
-                  <div
-                    key={issue.blocked_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
-                  >
-                    <a
-                      href={`/${workspaceSlug}/projects/${issue.blocked_issue_detail?.project_detail.id}/issues/${issue.blocked_issue_detail?.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1"
-                    >
-                      <BlockedIcon height={10} width={10} />
-                      {`${issue.blocked_issue_detail?.project_detail.identifier}-${issue.blocked_issue_detail?.sequence_id}`}
-                    </a>
-                    <button
-                      type="button"
-                      className="opacity-0 duration-300 group-hover:opacity-100"
-                      onClick={() => {
-                        const updatedBlocked = watch("blocked_issues").filter(
-                          (i) => i.blocked_issue_detail?.id !== issue.blocked_issue_detail?.id
-                        );
-
-                        submitChanges({
-                          blocked_issues: updatedBlocked,
-                          blocks_list: updatedBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
-                        });
-                      }}
-                    >
-                      <XMarkIcon className="h-2 w-2" />
-                    </button>
-                  </div>
-                ))
-              : null}
-          </div>
-          <button
-            type="button"
-            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            }`}
-            onClick={() => setIsBlockedModalOpen(true)}
-            disabled={disabled}
-          >
-            选择任务
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
deleted file mode 100644
index c300ee2cf47..00000000000
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// react-hook-form
-import { UseFormWatch } from "react-hook-form";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { ExistingIssuesListModal } from "components/core";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon } from "components/icons";
-// types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
-
-type Props = {
-  issueId?: string;
-  submitChanges: (formData: Partial<IIssue>) => void;
-  watch: UseFormWatch<IIssue>;
-  disabled?: boolean;
-};
-
-export const SidebarBlockerSelect: React.FC<Props> = ({
-  issueId,
-  submitChanges,
-  watch,
-  disabled = false,
-}) => {
-  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const handleClose = () => {
-    setIsBlockerModalOpen(false);
-  };
-
-  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (data.length === 0) {
-      setToastAlert({
-        type: "error",
-        title: "错误!",
-        message: "请至少选择一个任务",
-      });
-
-      return;
-    }
-
-    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
-      blocker_issue_detail: {
-        id: i.id,
-        name: i.name,
-        sequence_id: i.sequence_id,
-        project_detail: {
-          id: i.project_id,
-          identifier: i.project__identifier,
-          name: i.project__name,
-        },
-      },
-    }));
-
-    const newBlockers = [...watch("blocker_issues"), ...selectedIssues];
-
-    submitChanges({
-      blocker_issues: newBlockers,
-      blockers_list: newBlockers.map((i) => i.blocker_issue_detail?.id ?? ""),
-    });
-    handleClose();
-  };
-
-  return (
-    <>
-      <ExistingIssuesListModal
-        isOpen={isBlockerModalOpen}
-        handleClose={() => setIsBlockerModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
-        handleOnSubmit={onSubmit}
-        workspaceLevelToggle
-      />
-      <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          <BlockerIcon height={16} width={16} />
-          <p>阻塞</p>
-        </div>
-        <div className="space-y-1 sm:basis-1/2">
-          <div className="flex flex-wrap gap-1">
-            {watch("blocker_issues") && watch("blocker_issues").length > 0
-              ? watch("blocker_issues").map((issue) => (
-                  <div
-                    key={issue.blocker_issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
-                  >
-                    <a
-                      href={`/${workspaceSlug}/projects/${issue.blocker_issue_detail?.project_detail.id}/issues/${issue.blocker_issue_detail?.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-1"
-                    >
-                      <BlockerIcon height={10} width={10} />
-                      {`${issue.blocker_issue_detail?.project_detail.identifier}-${issue.blocker_issue_detail?.sequence_id}`}
-                    </a>
-                    <button
-                      type="button"
-                      className="opacity-0 duration-300 group-hover:opacity-100"
-                      onClick={() => {
-                        const updatedBlockers = watch("blocker_issues").filter(
-                          (i) => i.blocker_issue_detail?.id !== issue.blocker_issue_detail?.id
-                        );
-
-                        submitChanges({
-                          blocker_issues: updatedBlockers,
-                          blockers_list: updatedBlockers.map(
-                            (i) => i.blocker_issue_detail?.id ?? ""
-                          ),
-                        });
-                      }}
-                    >
-                      <XMarkIcon className="h-2 w-2" />
-                    </button>
-                  </div>
-                ))
-              : null}
-          </div>
-          <button
-            type="button"
-            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            }`}
-            onClick={() => setIsBlockerModalOpen(true)}
-            disabled={disabled}
-          >
-            选择任务
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
deleted file mode 100644
index 3451be2c3cb..00000000000
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-// ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
-// helper
-import { truncateText } from "helpers/string.helper";
-// types
-import { ICycle, IIssue } from "types";
-// fetch-keys
-import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
-
-type Props = {
-  issueDetail: IIssue | undefined;
-  handleCycleChange: (cycle: ICycle) => void;
-  disabled?: boolean;
-};
-
-export const SidebarCycleSelect: React.FC<Props> = ({
-  issueDetail,
-  handleCycleChange,
-  disabled = false,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { data: incompleteCycles } = useSWR(
-    workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            "incomplete"
-          )
-      : null
-  );
-
-  const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    issuesService
-      .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueId as string));
-
-        mutate(CYCLE_ISSUES(cycleId));
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
-  const issueCycle = issueDetail?.issue_cycle;
-
-  return (
-    <CustomSelect
-      customButton={
-        <Tooltip
-          position="left"
-          tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
-        >
-          <button
-            type="button"
-            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
-              disabled ? "cursor-not-allowed" : ""
-            }`}
-          >
-            <span
-              className={`truncate ${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}
-            >
-              {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
-            </span>
-          </button>
-        </Tooltip>
-      }
-      value={issueCycle ? issueCycle.cycle_detail.id : null}
-      onChange={(value: any) => {
-        !value
-          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-          : handleCycleChange(incompleteCycles?.find((c) => c.id === value) as ICycle);
-      }}
-      width="w-full"
-      position="right"
-      maxHeight="rg"
-      disabled={disabled}
-    >
-      {incompleteCycles ? (
-        incompleteCycles.length > 0 ? (
-          <>
-            {incompleteCycles.map((option) => (
-              <CustomSelect.Option key={option.id} value={option.id}>
-                <Tooltip position="left-bottom" tooltipContent={option.name}>
-                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                </Tooltip>
-              </CustomSelect.Option>
-            ))}
-            <CustomSelect.Option value={null}>None</CustomSelect.Option>
-          </>
-        ) : (
-          <div className="text-center">No cycles found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
deleted file mode 100644
index 7ebdfe2b9da..00000000000
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PlayIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  value: number | null;
-  onChange: (val: number | null) => void;
-  disabled?: boolean;
-};
-
-export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const { estimatePoints } = useEstimateOption();
-
-  return (
-    <CustomSelect
-      value={value}
-      customButton={
-        <button
-          type="button"
-          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
-        >
-          <PlayIcon
-            className={`h-4 w-4 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
-          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
-        </button>
-      }
-      onChange={onChange}
-      disabled={disabled}
-    >
-      <CustomSelect.Option value={null}>
-        <>
-          <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
-          </span>
-          None
-        </>
-      </CustomSelect.Option>
-      {estimatePoints &&
-        estimatePoints.map((point) => (
-          <CustomSelect.Option key={point.key} value={point.key}>
-            <>
-              <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
-              </span>
-              {point.value}
-            </>
-          </CustomSelect.Option>
-        ))}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/index.ts b/apps/app/components/issues/sidebar-select/index.ts
deleted file mode 100644
index 5035325fd98..00000000000
--- a/apps/app/components/issues/sidebar-select/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from "./assignee";
-export * from "./blocked";
-export * from "./blocker";
-export * from "./cycle";
-export * from "./estimate";
-export * from "./label";
-export * from "./module";
-export * from "./parent";
-export * from "./priority";
-export * from "./state";
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
deleted file mode 100644
index a183fe951f4..00000000000
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import modulesService from "services/modules.service";
-// ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
-// helper
-import { truncateText } from "helpers/string.helper";
-// types
-import { IIssue, IModule } from "types";
-// fetch-keys
-import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  issueDetail: IIssue | undefined;
-  handleModuleChange: (module: IModule) => void;
-  disabled?: boolean;
-};
-
-export const SidebarModuleSelect: React.FC<Props> = ({
-  issueDetail,
-  handleModuleChange,
-  disabled = false,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { data: modules } = useSWR(
-    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    modulesService
-      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueId as string));
-
-        mutate(MODULE_ISSUES(moduleId));
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
-  const issueModule = issueDetail?.issue_module;
-
-  return (
-    <CustomSelect
-      customButton={
-        <Tooltip
-          position="left"
-          tooltipContent={`${
-            modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
-          }`}
-        >
-          <button
-            type="button"
-            className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
-              disabled ? "cursor-not-allowed" : ""
-            }`}
-          >
-            <span
-              className={`truncate ${
-                issueModule ? "text-custom-text-100" : "text-custom-text-200"
-              }`}
-            >
-              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
-            </span>
-          </button>
-        </Tooltip>
-      }
-      value={issueModule ? issueModule.module_detail?.id : null}
-      onChange={(value: any) => {
-        !value
-          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-          : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
-      }}
-      width="w-full"
-      position="right"
-      maxHeight="rg"
-      disabled={disabled}
-    >
-      {modules ? (
-        modules.length > 0 ? (
-          <>
-            {modules.map((option) => (
-              <CustomSelect.Option key={option.id} value={option.id}>
-                <Tooltip position="left-bottom" tooltipContent={option.name}>
-                  <span className="w-full truncate">{truncateText(option.name, 25)}</span>
-                </Tooltip>
-              </CustomSelect.Option>
-            ))}
-            <CustomSelect.Option value={null}>None</CustomSelect.Option>
-          </>
-        ) : (
-          <div className="text-center">No modules found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
deleted file mode 100644
index db3bc34961b..00000000000
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from "react";
-
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { getPriorityIcon } from "components/icons/priority-icon";
-// constants
-import { PRIORITIES } from "constants/project";
-
-type Props = {
-  value: string | null;
-  onChange: (val: string) => void;
-  disabled?: boolean;
-};
-
-export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
-  <CustomSelect
-    customButton={
-      <button
-        type="button"
-        className={`flex items-center gap-1.5 text-left text-xs capitalize rounded px-2.5 py-0.5 ${
-          value === "urgent"
-            ? "border-red-500/20 bg-red-500/20 text-red-500"
-            : value === "high"
-            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
-            : value === "medium"
-            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
-            : value === "low"
-            ? "border-green-500/20 bg-green-500/20 text-green-500"
-            : "bg-custom-background-80 border-custom-border-200"
-        }`}
-      >
-        <span className="grid place-items-center -my-1">
-          {getPriorityIcon(value ?? "无", "!text-sm")}
-        </span>
-        <span>
-            {value !== null && value !== undefined ? <>
-                    {value === "urgent" && <span>急</span>}
-                    {value === "high" && <span>高</span>}
-                    {value === "medium" && <span>中</span>}
-                    {value === "low" && <span>低</span>}
-                    {value === "null" && <span>无</span>}
-                    {value === null && <span>无</span>}
-                    {value == undefined && <span>无</span>}
-
-                </>
-                : "无"}
-            {/*["urgent", "high", "medium", "low", None]*/}
-            {/*{value ?? "无"}*/}
-            {/*{value === "Urgent" && <span>急</span>}*/}
-            {/*{value === "High" && <span>高</span>}*/}
-            {/*{value === "Medium" && <span>中</span>}*/}
-            {/*{value === "Low" && <span>低</span>}*/}
-            {/*{value === "None" && <span>无</span>}*/}
-            {/*{value === "None" && <span>无</span>}*/}
-        </span>
-      </button>
-    }
-    value={value}
-    onChange={onChange}
-    optionsClassName="w-min"
-    disabled={disabled}
-  >
-    {PRIORITIES.map((option) => (
-      <CustomSelect.Option key={option} value={option} className="capitalize">
-        <>
-          {getPriorityIcon(option, "text-sm")}
-          {/*{option ?? "无"}*/}
-            {option !== null && option !== undefined ? <>
-                    {option === "urgent" && <span>急</span>}
-                    {option === "high" && <span>高</span>}
-                    {option === "medium" && <span>中</span>}
-                    {option === "low" && <span>低</span>}
-                    {option === "null" && <span>无</span>}
-                    {option === null && <span>无</span>}
-                    {option == undefined && <span>无</span>}
-
-                </>
-                : "无"}
-        </>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
deleted file mode 100644
index c58bd0dd63d..00000000000
--- a/apps/app/components/issues/sidebar.tsx
+++ /dev/null
@@ -1,616 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, UseFormWatch } from "react-hook-form";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-import useUserIssueNotificationSubscription from "hooks/use-issue-notification-subscription";
-import useEstimateOption from "hooks/use-estimate-option";
-// services
-import issuesService from "services/issues.service";
-import modulesService from "services/modules.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// components
-import { LinkModal, LinksList } from "components/core";
-import {
-  DeleteIssueModal,
-  SidebarAssigneeSelect,
-  SidebarBlockedSelect,
-  SidebarBlockerSelect,
-  SidebarCycleSelect,
-  SidebarModuleSelect,
-  SidebarParentSelect,
-  SidebarPrioritySelect,
-  SidebarStateSelect,
-  SidebarEstimateSelect,
-  SidebarLabelSelect,
-} from "components/issues";
-// ui
-import { CustomDatePicker, Icon } from "components/ui";
-// icons
-import {
-  LinkIcon,
-  CalendarDaysIcon,
-  TrashIcon,
-  PlusIcon,
-  Squares2X2Icon,
-  ChartBarIcon,
-  UserGroupIcon,
-  PlayIcon,
-  UserIcon,
-  RectangleGroupIcon,
-} from "@heroicons/react/24/outline";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
-// fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-import { ContrastIcon } from "components/icons";
-
-type Props = {
-  control: any;
-  submitChanges: (formData: any) => void;
-  issueDetail: IIssue | undefined;
-  watch: UseFormWatch<IIssue>;
-  fieldsToShow?: (
-    | "state"
-    | "assignee"
-    | "priority"
-    | "estimate"
-    | "parent"
-    | "blocker"
-    | "blocked"
-    | "startDate"
-    | "dueDate"
-    | "cycle"
-    | "module"
-    | "label"
-    | "link"
-    | "delete"
-    | "all"
-    | "subscribe"
-  )[];
-  uneditable?: boolean;
-};
-
-export const IssueDetailsSidebar: React.FC<Props> = ({
-  control,
-  submitChanges,
-  issueDetail,
-  watch: watchIssue,
-  fieldsToShow = ["all"],
-  uneditable = false,
-}) => {
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [linkModal, setLinkModal] = useState(false);
-  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { isEstimateActive } = useEstimateOption();
-
-  const { loading, handleSubscribe, handleUnsubscribe, subscribed } =
-    useUserIssueNotificationSubscription(workspaceSlug, projectId, issueId);
-
-  const { memberRole } = useProjectMyMembership();
-
-  const { setToastAlert } = useToast();
-
-  const handleCycleChange = useCallback(
-    (cycleDetails: ICycle) => {
-      if (!workspaceSlug || !projectId || !issueDetail) return;
-
-      issuesService
-        .addIssueToCycle(
-          workspaceSlug as string,
-          projectId as string,
-          cycleDetails.id,
-          {
-            issues: [issueDetail.id],
-          },
-          user
-        )
-        .then((res) => {
-          mutate(ISSUE_DETAILS(issueId as string));
-        });
-    },
-    [workspaceSlug, projectId, issueId, issueDetail, user]
-  );
-
-  const handleModuleChange = useCallback(
-    (moduleDetail: IModule) => {
-      if (!workspaceSlug || !projectId || !issueDetail) return;
-
-      modulesService
-        .addIssuesToModule(
-          workspaceSlug as string,
-          projectId as string,
-          moduleDetail.id,
-          {
-            issues: [issueDetail.id],
-          },
-          user
-        )
-        .then((res) => {
-          mutate(ISSUE_DETAILS(issueId as string));
-        });
-    },
-    [workspaceSlug, projectId, issueId, issueDetail, user]
-  );
-
-  const handleCreateLink = async (formData: IIssueLink) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
-
-    const payload = { metadata: {}, ...formData };
-
-    await issuesService
-      .createIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, payload)
-      .then(() => mutate(ISSUE_DETAILS(issueDetail.id)))
-      .catch((err) => {
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "该任务的URL已经存在。",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "出错了。请重试。",
-          });
-      });
-  };
-
-  const handleUpdateLink = async (formData: IIssueLink, linkId: string) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
-
-    const payload = { metadata: {}, ...formData };
-
-    const updatedLinks = issueDetail.issue_link.map((l) =>
-      l.id === linkId
-        ? {
-            ...l,
-            title: formData.title,
-            url: formData.url,
-          }
-        : l
-    );
-
-    mutate<IIssue>(
-      ISSUE_DETAILS(issueDetail.id),
-      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
-      false
-    );
-
-    await issuesService
-      .updateIssueLink(
-        workspaceSlug as string,
-        projectId as string,
-        issueDetail.id,
-        linkId,
-        payload
-      )
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueDetail.id));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const handleDeleteLink = async (linkId: string) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
-
-    const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId);
-
-    mutate<IIssue>(
-      ISSUE_DETAILS(issueDetail.id),
-      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
-      false
-    );
-
-    await issuesService
-      .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId)
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueDetail.id));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issueDetail?.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "链接已复制！",
-        message: "任务链接已复制到剪贴板。 ",
-      });
-    });
-  };
-
-  const showFirstSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("state") ||
-    fieldsToShow.includes("assignee") ||
-    fieldsToShow.includes("priority") ||
-    fieldsToShow.includes("estimate");
-
-  const showSecondSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("parent") ||
-    fieldsToShow.includes("blocker") ||
-    fieldsToShow.includes("blocked") ||
-    fieldsToShow.includes("dueDate");
-
-  const showThirdSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("cycle") ||
-    fieldsToShow.includes("module");
-
-  const startDate = watchIssue("start_date");
-  const targetDate = watchIssue("target_date");
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  const handleEditLink = (link: linkDetails) => {
-    setSelectedLinkToUpdate(link);
-    setLinkModal(true);
-  };
-
-  const isNotAllowed = memberRole.isGuest || memberRole.isViewer;
-
-  return (
-    <>
-      <LinkModal
-        isOpen={linkModal}
-        handleClose={() => {
-          setLinkModal(false);
-          setSelectedLinkToUpdate(null);
-        }}
-        data={selectedLinkToUpdate}
-        status={selectedLinkToUpdate ? true : false}
-        createIssueLink={handleCreateLink}
-        updateIssueLink={handleUpdateLink}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueDetail ?? null}
-        user={user}
-      />
-      <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-        <div className="flex items-center justify-between px-5 pb-3">
-          <h4 className="text-sm font-medium">
-            {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
-          </h4>
-          <div className="flex flex-wrap items-center gap-2">
-            {issueDetail?.created_by !== user?.id &&
-              !issueDetail?.assignees.includes(user?.id ?? "") &&
-              !router.pathname.includes("[archivedIssueId]") &&
-              (fieldsToShow.includes("all") || fieldsToShow.includes("subscribe")) && (
-                <button
-                  type="button"
-                  className="rounded-md flex items-center gap-2 border border-custom-primary-100 px-2 py-1 text-xs text-custom-primary-100 shadow-sm duration-300 focus:outline-none"
-                  onClick={() => {
-                    if (subscribed) handleUnsubscribe();
-                    else handleSubscribe();
-                  }}
-                >
-                  <Icon iconName="notifications" />
-                  {loading ? "Loading..." : subscribed ? "Unsubscribe" : "Subscribe"}
-                </button>
-              )}
-            {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
-              <button
-                type="button"
-                className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
-                onClick={handleCopyText}
-              >
-                <LinkIcon className="h-3.5 w-3.5" />
-              </button>
-            )}
-            {!isNotAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
-              <button
-                type="button"
-                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
-                onClick={() => setDeleteIssueModal(true)}
-              >
-                <TrashIcon className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-        </div>
-
-        <div className="h-full w-full px-5 overflow-y-auto">
-          <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
-            {showFirstSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-                      <p>状态</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="state"
-                        render={({ field: { value } }) => (
-                          <SidebarStateSelect
-                            value={value}
-                            onChange={(val: string) => submitChanges({ state: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>负责人</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="assignees_list"
-                        render={({ field: { value } }) => (
-                          <SidebarAssigneeSelect
-                            value={value}
-                            onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>优先级</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="priority"
-                        render={({ field: { value } }) => (
-                          <SidebarPrioritySelect
-                            value={value}
-                            onChange={(val: string) => submitChanges({ priority: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  isEstimateActive && (
-                    <div className="flex flex-wrap items-center py-2">
-                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-                        <p>估算点</p>
-                      </div>
-                      <div className="sm:basis-1/2">
-                        <Controller
-                          control={control}
-                          name="estimate_point"
-                          render={({ field: { value } }) => (
-                            <SidebarEstimateSelect
-                              value={value}
-                              onChange={(val: number | null) =>
-                                submitChanges({ estimate_point: val })
-                              }
-                              disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                            />
-                          )}
-                        />
-                      </div>
-                    </div>
-                  )}
-              </div>
-            )}
-            {showSecondSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <UserIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>父任务</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="parent"
-                        render={({ field: { onChange } }) => (
-                          <SidebarParentSelect
-                            onChange={(val: string) => {
-                              submitChanges({ parent: val });
-                              onChange(val);
-                            }}
-                            issueDetails={issueDetail}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
-                  <SidebarBlockerSelect
-                    issueId={issueId as string}
-                    submitChanges={submitChanges}
-                    watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
-                  <SidebarBlockedSelect
-                    issueId={issueId as string}
-                    submitChanges={submitChanges}
-                    watch={watchIssue}
-                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>开始时间</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="start_date"
-                        render={({ field: { value } }) => (
-                          <CustomDatePicker
-                            placeholder="开始时间"
-                            value={value}
-                            onChange={(val) =>
-                              submitChanges({
-                                start_date: val,
-                              })
-                            }
-                            className="bg-custom-background-80 border-none"
-                            maxDate={maxDate ?? undefined}
-                            disabled={isNotAllowed || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>结束时间</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="target_date"
-                        render={({ field: { value } }) => (
-                          <CustomDatePicker
-                            placeholder="结束时间"
-                            value={value}
-                            onChange={(val) =>
-                              submitChanges({
-                                target_date: val,
-                              })
-                            }
-                            className="bg-custom-background-80 border-none"
-                            minDate={minDate ?? undefined}
-                            disabled={isNotAllowed || uneditable}
-                          />
-                        )}
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-            {showThirdSection && (
-              <div className="py-1">
-                {/*{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (*/}
-                {/*  <div className="flex flex-wrap items-center py-2">*/}
-                {/*    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">*/}
-                {/*      <ContrastIcon className="h-4 w-4 flex-shrink-0" />*/}
-                {/*      <p>Cycle</p>*/}
-                {/*    </div>*/}
-                {/*    <div className="space-y-1 sm:w-1/2">*/}
-                {/*      <SidebarCycleSelect*/}
-                {/*        issueDetail={issueDetail}*/}
-                {/*        handleCycleChange={handleCycleChange}*/}
-                {/*        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}*/}
-                {/*      />*/}
-                {/*    </div>*/}
-                {/*  </div>*/}
-                {/*)}*/}
-                {/*{(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (*/}
-                {/*  <div className="flex flex-wrap items-center py-2">*/}
-                {/*    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">*/}
-                {/*      <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />*/}
-                {/*      <p>模块</p>*/}
-                {/*    </div>*/}
-                {/*    <div className="space-y-1 sm:w-1/2">*/}
-                {/*      <SidebarModuleSelect*/}
-                {/*        issueDetail={issueDetail}*/}
-                {/*        handleModuleChange={handleModuleChange}*/}
-                {/*        disabled={memberRole.isGuest || memberRole.isViewer || uneditable}*/}
-                {/*      />*/}
-                {/*    </div>*/}
-                {/*  </div>*/}
-                {/*)}*/}
-              </div>
-            )}
-          </div>
-          {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-            <SidebarLabelSelect
-              issueDetails={issueDetail}
-              issueControl={control}
-              watchIssue={watchIssue}
-              submitChanges={submitChanges}
-              isNotAllowed={isNotAllowed}
-              uneditable={uneditable ?? false}
-            />
-          )}
-          {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
-            <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
-              <div className="flex items-center justify-between gap-2">
-                <h4>链接</h4>
-                {!isNotAllowed && (
-                  <button
-                    type="button"
-                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
-                      uneditable ? "cursor-not-allowed" : "cursor-pointer"
-                    }`}
-                    onClick={() => setLinkModal(true)}
-                    disabled={uneditable}
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-              <div className="mt-2 space-y-2">
-                {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
-                  <LinksList
-                    links={issueDetail.issue_link}
-                    handleDeleteLink={handleDeleteLink}
-                    handleEditLink={handleEditLink}
-                    userAuth={memberRole}
-                  />
-                ) : null}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/issues/view-select/estimate.tsx b/apps/app/components/issues/view-select/estimate.tsx
deleted file mode 100644
index bef060e772c..00000000000
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// services
-import trackEventServices from "services/track-event.service";
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
-// ui
-import { CustomSelect, Tooltip } from "components/ui";
-// icons
-import { PlayIcon } from "@heroicons/react/24/outline";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-
-type Props = {
-  issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
-  tooltipPosition?: "top" | "bottom";
-  selfPositioned?: boolean;
-  customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const ViewEstimateSelect: React.FC<Props> = ({
-  issue,
-  partialUpdateIssue,
-  position = "left",
-  tooltipPosition = "top",
-  selfPositioned = false,
-  customButton = false,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
-
-  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
-
-  const estimateLabels = (
-    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
-      <div className="flex items-center gap-1 text-custom-text-200">
-        <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
-        {estimateValue ?? "None"}
-      </div>
-    </Tooltip>
-  );
-
-  if (!isEstimateActive) return null;
-
-  return (
-    <CustomSelect
-      value={issue.estimate_point}
-      onChange={(val: number) => {
-        partialUpdateIssue({ estimate_point: val }, issue);
-        trackEventServices.trackIssuePartialPropertyUpdateEvent(
-          {
-            workspaceSlug,
-            workspaceId: issue.workspace,
-            projectId: issue.project_detail.id,
-            projectIdentifier: issue.project_detail.identifier,
-            projectName: issue.project_detail.name,
-            issueId: issue.id,
-          },
-          "ISSUE_PROPERTY_UPDATE_ESTIMATE",
-          user
-        );
-      }}
-      {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
-      maxHeight="md"
-      noChevron
-      disabled={isNotAllowed}
-      position={position}
-      selfPositioned={selfPositioned}
-      width="w-full min-w-[8rem]"
-    >
-      <CustomSelect.Option value={null}>
-        <>
-          <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
-          </span>
-          None
-        </>
-      </CustomSelect.Option>
-      {estimatePoints?.map((estimate) => (
-        <CustomSelect.Option key={estimate.id} value={estimate.key}>
-          <>
-            <span>
-              <PlayIcon className="h-4 w-4 -rotate-90" />
-            </span>
-            {estimate.value}
-          </>
-        </CustomSelect.Option>
-      ))}
-    </CustomSelect>
-  );
-};
diff --git a/apps/app/components/issues/view-select/index.ts b/apps/app/components/issues/view-select/index.ts
deleted file mode 100644
index d78a82ed35e..00000000000
--- a/apps/app/components/issues/view-select/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./assignee";
-export * from "./due-date";
-export * from "./estimate";
-export * from "./label";
-export * from "./priority";
-export * from "./start-date";
-export * from "./state";
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
deleted file mode 100644
index 460a1127263..00000000000
--- a/apps/app/components/issues/view-select/state.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import stateService from "services/state.service";
-import trackEventServices from "services/track-event.service";
-// ui
-import { CustomSearchSelect, Tooltip } from "components/ui";
-// icons
-import { getStateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  issue: IIssue;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  position?: "left" | "right";
-  tooltipPosition?: "top" | "bottom";
-  className?: string;
-  selfPositioned?: boolean;
-  customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const ViewStateSelect: React.FC<Props> = ({
-  issue,
-  partialUpdateIssue,
-  position = "left",
-  tooltipPosition = "top",
-  className = "",
-  selfPositioned = false,
-  customButton = false,
-  user,
-  isNotAllowed,
-}) => {
-  const [fetchStates, setFetchStates] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && issue && fetchStates ? STATES_LIST(issue.project) : null,
-    workspaceSlug && issue && fetchStates
-      ? () => stateService.getStates(workspaceSlug as string, issue.project)
-      : null
-  );
-  const states = getStatesList(stateGroups);
-
-  const options = states?.map((state) => ({
-    value: state.id,
-    query: state.name,
-    content: (
-      <div className="flex items-center gap-2">
-        {getStateGroupIcon(state.group, "16", "16", state.color)}
-        {state.name}
-      </div>
-    ),
-  }));
-
-  const selectedOption = issue.state_detail;
-
-  const stateLabel = (
-    <Tooltip
-      tooltipHeading="State"
-      tooltipContent={selectedOption?.name ?? ""}
-      position={tooltipPosition}
-    >
-      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
-        <span className="h-3.5 w-3.5">
-          {selectedOption &&
-            getStateGroupIcon(selectedOption.group, "14", "14", selectedOption.color)}
-        </span>
-        <span className="truncate">{selectedOption?.name ?? "State"}</span>
-      </div>
-    </Tooltip>
-  );
-
-  return (
-    <CustomSearchSelect
-      className={className}
-      value={issue.state}
-      onChange={(data: string) => {
-        const oldState = states?.find((s) => s.id === issue.state);
-        const newState = states?.find((s) => s.id === data);
-
-        partialUpdateIssue(
-          {
-            state: data,
-            state_detail: newState,
-          },
-          issue
-        );
-        trackEventServices.trackIssuePartialPropertyUpdateEvent(
-          {
-            workspaceSlug,
-            workspaceId: issue.workspace,
-            projectId: issue.project_detail.id,
-            projectIdentifier: issue.project_detail.identifier,
-            projectName: issue.project_detail.name,
-            issueId: issue.id,
-          },
-          "ISSUE_PROPERTY_UPDATE_STATE",
-          user
-        );
-
-        if (oldState?.group !== "completed" && newState?.group !== "completed") {
-          trackEventServices.trackIssueMarkedAsDoneEvent(
-            {
-              workspaceSlug: issue.workspace_detail.slug,
-              workspaceId: issue.workspace_detail.id,
-              projectId: issue.project_detail.id,
-              projectIdentifier: issue.project_detail.identifier,
-              projectName: issue.project_detail.name,
-              issueId: issue.id,
-            },
-            user
-          );
-        }
-      }}
-      options={options}
-      {...(customButton ? { customButton: stateLabel } : { label: stateLabel })}
-      position={position}
-      disabled={isNotAllowed}
-      onOpen={() => setFetchStates(true)}
-      noChevron
-      selfPositioned={selfPositioned}
-    />
-  );
-};
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
deleted file mode 100644
index 6d48de0d17c..00000000000
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { forwardRef, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// react-color
-import { TwitterPicker } from "react-color";
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
-
-type Props = {
-  labelForm: boolean;
-  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
-  isUpdating: boolean;
-  labelToUpdate: IIssueLabels | null;
-  onClose?: () => void;
-};
-
-const defaultValues: Partial<IIssueLabels> = {
-  name: "",
-  color: "rgb(var(--color-text-200))",
-};
-
-export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
-  function CreateUpdateLabelInline(props, ref) {
-    const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
-
-    const router = useRouter();
-    const { workspaceSlug, projectId } = router.query;
-
-    const { user } = useUserAuth();
-
-    const {
-      handleSubmit,
-      control,
-      register,
-      reset,
-      formState: { errors, isSubmitting },
-      watch,
-      setValue,
-    } = useForm<IIssueLabels>({
-      defaultValues,
-    });
-
-    const handleClose = () => {
-      setLabelForm(false);
-      reset(defaultValues);
-      if (onClose) onClose();
-    };
-
-    const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
-
-      await issuesService
-        .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-        .then((res) => {
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) => [res, ...(prevData ?? [])],
-            false
-          );
-          handleClose();
-        });
-    };
-
-    const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
-
-      await issuesService
-        .patchIssueLabel(
-          workspaceSlug as string,
-          projectId as string,
-          labelToUpdate?.id ?? "",
-          formData,
-          user
-        )
-        .then(() => {
-          reset(defaultValues);
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) =>
-              prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
-            false
-          );
-          handleClose();
-        });
-    };
-
-    useEffect(() => {
-      if (!labelForm && isUpdating) return;
-
-      reset();
-    }, [labelForm, isUpdating, reset]);
-
-    useEffect(() => {
-      if (!labelToUpdate) return;
-
-      setValue(
-        "color",
-        labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
-      );
-      setValue("name", labelToUpdate.name);
-    }, [labelToUpdate, setValue]);
-
-    useEffect(() => {
-      if (labelToUpdate) {
-        setValue(
-          "color",
-          labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
-        );
-        return;
-      }
-
-      setValue("color", getRandomLabelColor());
-    }, [labelToUpdate, setValue]);
-
-    return (
-      <div
-        className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5 ${
-          labelForm ? "" : "hidden"
-        }`}
-        ref={ref}
-      >
-        <div className="flex-shrink-0">
-          <Popover className="relative z-10 flex h-full w-full items-center justify-center">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                    open ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <span
-                    className="h-5 w-5 rounded"
-                    style={{
-                      backgroundColor: watch("color"),
-                    }}
-                  />
-                  <ChevronDownIcon
-                    className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
-                      open ? "text-gray-600" : "text-gray-400"
-                    }`}
-                    aria-hidden="true"
-                  />
-                </Popover.Button>
-
-                <Transition
-                  as={React.Fragment}
-                  enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1"
-                >
-                  <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-                    <Controller
-                      name="color"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <TwitterPicker
-                          colors={LABEL_COLOR_OPTIONS}
-                          color={value}
-                          onChange={(value) => onChange(value.hex)}
-                        />
-                      )}
-                    />
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-        </div>
-        <div className="flex flex-1 flex-col justify-center">
-          <Input
-            type="text"
-            id="labelName"
-            name="name"
-            register={register}
-            placeholder="Label title"
-            validations={{
-              required: "标签标题为必填项",
-            }}
-            error={errors.name}
-          />
-        </div>
-        <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
-        {isUpdating ? (
-          <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
-            {isSubmitting ? "更新中" : "更新"}
-          </PrimaryButton>
-        ) : (
-          <PrimaryButton onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
-            {isSubmitting ? "添加中" : "添加"}
-          </PrimaryButton>
-        )}
-      </div>
-    );
-  }
-);
diff --git a/apps/app/components/labels/delete-label-modal.tsx b/apps/app/components/labels/delete-label-modal.tsx
deleted file mode 100644
index f856e9b3780..00000000000
--- a/apps/app/components/labels/delete-label-modal.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// types
-import type { ICurrentUserResponse, IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  data: IIssueLabels | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    onClose();
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    if (!workspaceSlug || !projectId || !data) return;
-
-    setIsDeleteLoading(true);
-
-    mutate<IIssueLabels[]>(
-      PROJECT_ISSUE_LABELS(projectId.toString()),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-      false
-    );
-
-    await issuesService
-      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
-      .then(() => handleClose())
-      .catch(() => {
-        setIsDeleteLoading(false);
-
-        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "标签无法删除。请重试。",
-        });
-      });
-  };
-
-  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 bg-opacity-50 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 border border-custom-border-200 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete Label
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
-                          The label will be removed from all the issues.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "删除..." : "删除"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/labels/index.ts b/apps/app/components/labels/index.ts
deleted file mode 100644
index 0c0629d92d0..00000000000
--- a/apps/app/components/labels/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./create-label-modal";
-export * from "./create-update-label-inline";
-export * from "./delete-label-modal";
-export * from "./labels-list-modal";
-export * from "./single-label-group";
-export * from "./single-label";
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
deleted file mode 100644
index 3c71d92d0b4..00000000000
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { SecondaryButton, DangerButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, IModule } from "types";
-// fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IModule;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-
-    if (!workspaceSlug || !projectId || !data) return;
-
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) => prevData?.filter((m) => m.id !== data.id),
-      false
-    );
-
-    await modulesService
-      .deleteModule(workspaceSlug as string, projectId as string, data.id, user)
-      .then(() => {
-        if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
-        handleClose();
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "模块无法删除。请重试。",
-        });
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete Module
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the module will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "删除..." : "删除"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
deleted file mode 100644
index 8a5a010fd3c..00000000000
--- a/apps/app/components/modules/form.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { useEffect } from "react";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// components
-import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
-// ui
-import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// types
-import { IModule } from "types";
-
-type Props = {
-  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
-  handleClose: () => void;
-  status: boolean;
-  data?: IModule;
-};
-
-const defaultValues: Partial<IModule> = {
-  name: "",
-  description: "",
-  status: "backlog",
-  lead: null,
-  members_list: [],
-};
-
-export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-    control,
-    reset,
-  } = useForm<IModule>({
-    defaultValues,
-  });
-
-  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
-    await handleFormSubmit(formData);
-
-    reset({
-      ...defaultValues,
-    });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
-  const startDate = watch("start_date");
-  const targetDate = watch("target_date");
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  return (
-    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Module
-        </h3>
-        <div className="space-y-3">
-          <div>
-            <Input
-              id="name"
-              name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
-                required: "标题是必填项",
-                maxLength: {
-                  value: 255,
-                  message: "标题应少于255个字符",
-                },
-              }}
-            />
-          </div>
-          <div>
-            <TextArea
-              id="description"
-              name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
-            />
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Controller
-              control={control}
-              name="start_date"
-              render={({ field: { value, onChange } }) => (
-                <DateSelect
-                  label="Start date"
-                  value={value}
-                  onChange={(val) => {
-                    onChange(val);
-                  }}
-                  maxDate={maxDate ?? undefined}
-                />
-              )}
-            />
-            <Controller
-              control={control}
-              name="target_date"
-              render={({ field: { value, onChange } }) => (
-                <DateSelect
-                  label="Target date"
-                  value={value}
-                  onChange={(val) => {
-                    onChange(val);
-                  }}
-                  minDate={minDate ?? undefined}
-                />
-              )}
-            />
-            <ModuleStatusSelect control={control} error={errors.status} />
-            <Controller
-              control={control}
-              name="lead"
-              render={({ field: { value, onChange } }) => (
-                <ModuleLeadSelect value={value} onChange={onChange} />
-              )}
-            />
-            <Controller
-              control={control}
-              name="members"
-              render={({ field: { value, onChange } }) => (
-                <ModuleMembersSelect value={value} onChange={onChange} />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
-            ? isSubmitting
-              ? "Updating Module..."
-              : "Update Module"
-            : isSubmitting
-            ? "Creating Module..."
-            : "Create Module"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/modules/gantt-chart/blocks.tsx b/apps/app/components/modules/gantt-chart/blocks.tsx
deleted file mode 100644
index c6400ad8257..00000000000
--- a/apps/app/components/modules/gantt-chart/blocks.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { ModuleStatusIcon } from "components/icons";
-// helpers
-import { renderShortDate } from "helpers/date-time.helper";
-// types
-import { IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
-
-export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div
-      className="relative flex items-center w-full h-full rounded"
-      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {renderShortDate(data?.start_date ?? "")} to{" "}
-              {renderShortDate(data?.target_date ?? "")}
-            </div>
-          </div>
-        }
-        position="top-left"
-      >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
-    >
-      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
-      <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
-    </div>
-  );
-};
diff --git a/apps/app/components/modules/gantt-chart/index.ts b/apps/app/components/modules/gantt-chart/index.ts
deleted file mode 100644
index 301b9f8405e..00000000000
--- a/apps/app/components/modules/gantt-chart/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./blocks";
-export * from "./module-issues-layout";
-export * from "./modules-list-layout";
diff --git a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx b/apps/app/components/modules/gantt-chart/module-issues-layout.tsx
deleted file mode 100644
index 9c0b05078c9..00000000000
--- a/apps/app/components/modules/gantt-chart/module-issues-layout.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { FC } from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
-// components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {};
-
-export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
-  const { orderBy } = useIssuesView();
-
-  const { user } = useUser();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
-    workspaceSlug as string,
-    projectId as string,
-    moduleId as string
-  );
-
-  return (
-    <div className="w-full h-full">
-      <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
-        blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-        blockUpdateHandler={(block, payload) =>
-          updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-        }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
-        bottomSpacing
-      />
-    </div>
-  );
-};
diff --git a/apps/app/components/modules/gantt-chart/modules-list-layout.tsx b/apps/app/components/modules/gantt-chart/modules-list-layout.tsx
deleted file mode 100644
index 70f493dde17..00000000000
--- a/apps/app/components/modules/gantt-chart/modules-list-layout.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { FC } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-import { KeyedMutator } from "swr";
-
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useUser from "hooks/use-user";
-// components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
-import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
-// types
-import { IModule } from "types";
-
-type Props = {
-  modules: IModule[];
-  mutateModules: KeyedMutator<IModule[]>;
-};
-
-export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
-    if (!workspaceSlug || !user) return;
-
-    mutateModules((prevData: any) => {
-      if (!prevData) return prevData;
-
-      const newList = prevData.map((p: any) => ({
-        ...p,
-        ...(p.id === module.id
-          ? {
-              start_date: payload.start_date ? payload.start_date : p.start_date,
-              target_date: payload.target_date ? payload.target_date : p.target_date,
-              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
-            }
-          : {}),
-      }));
-
-      if (payload.sort_order) {
-        const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-        newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-      }
-
-      return newList;
-    }, false);
-
-    const newPayload: any = { ...payload };
-
-    if (newPayload.sort_order && payload.sort_order)
-      newPayload.sort_order = payload.sort_order.newSortOrder;
-
-    modulesService.patchModule(
-      workspaceSlug.toString(),
-      module.project,
-      module.id,
-      newPayload,
-      user
-    );
-  };
-
-  const blockFormat = (blocks: IModule[]) =>
-    blocks && blocks.length > 0
-      ? blocks
-          .filter((b) => b.start_date && b.target_date)
-          .map((block) => ({
-            data: block,
-            id: block.id,
-            sort_order: block.sort_order,
-            start_date: new Date(block.start_date ?? ""),
-            target_date: new Date(block.target_date ?? ""),
-          }))
-      : [];
-
-  return (
-    <div className="w-full h-full overflow-y-auto">
-      <GanttChartRoot
-        title="Modules"
-        loaderTitle="Modules"
-        blocks={modules ? blockFormat(modules) : null}
-        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        SidebarBlockRender={ModuleGanttSidebarBlock}
-        BlockRender={ModuleGanttBlock}
-      />
-    </div>
-  );
-};
diff --git a/apps/app/components/modules/index.ts b/apps/app/components/modules/index.ts
deleted file mode 100644
index 2a7f54fb327..00000000000
--- a/apps/app/components/modules/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./select";
-export * from "./sidebar-select";
-export * from "./delete-module-modal";
-export * from "./form";
-export * from "./gantt-chart";
-export * from "./modal";
-export * from "./sidebar";
-export * from "./single-module-card";
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
deleted file mode 100644
index 0954d38a813..00000000000
--- a/apps/app/components/modules/modal.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// components
-import { ModuleForm } from "components/modules";
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useToast from "hooks/use-toast";
-// types
-import type { ICurrentUserResponse, IModule } from "types";
-// fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IModule;
-  user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues: Partial<IModule> = {
-  name: "",
-  description: "",
-  status: "backlog",
-  lead: null,
-  members_list: [],
-};
-
-export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    reset(defaultValues);
-  };
-
-  const { reset } = useForm<IModule>({
-    defaultValues,
-  });
-
-  const createModule = async (payload: Partial<IModule>) => {
-    await modulesService
-      .createModule(workspaceSlug as string, projectId as string, payload, user)
-      .then(() => {
-        mutate(MODULE_LIST(projectId as string));
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "模块创建成功。",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "无法创建模块。请重试",
-        });
-      });
-  };
-
-  const updateModule = async (payload: Partial<IModule>) => {
-    await modulesService
-      .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload, user)
-      .then((res) => {
-        mutate<IModule[]>(
-          MODULE_LIST(projectId as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payload };
-
-              return p;
-            }),
-          false
-        );
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "模块更新成功。",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "模块无法更新,请重试。",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (formData: Partial<IModule>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload: Partial<IModule> = {
-      ...formData,
-      members_list: formData.members,
-    };
-
-    if (!data) await createModule(payload);
-    else await updateModule(payload);
-  };
-
-  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 bg-opacity-50 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 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 rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <ModuleForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  data={data}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
deleted file mode 100644
index e102cc21f8c..00000000000
--- a/apps/app/components/modules/select/lead.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-import Image from "next/image";
-
-import useSWR from "swr";
-
-// services
-import projectServices from "services/project.service";
-// ui
-import { Avatar, CustomSearchSelect } from "components/ui";
-// icons
-import { UserCircleIcon } from "@heroicons/react/24/outline";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  value: string | null;
-  onChange: () => void;
-};
-
-export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  const selectedOption = members?.find((m) => m.member.id === value)?.member;
-
-  return (
-    <CustomSearchSelect
-      options={options}
-      value={value}
-      label={
-        <div className="flex items-center gap-2">
-          {selectedOption ? (
-            <Avatar user={selectedOption} />
-          ) : (
-            <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
-          )}
-          {selectedOption ? (
-            selectedOption?.display_name
-          ) : (
-            <span className="text-custom-text-200">Lead</span>
-          )}
-        </div>
-      }
-      onChange={onChange}
-      noChevron
-    />
-  );
-};
diff --git a/apps/app/components/modules/select/members.tsx b/apps/app/components/modules/select/members.tsx
deleted file mode 100644
index a6e75f3a6f6..00000000000
--- a/apps/app/components/modules/select/members.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectServices from "services/project.service";
-// ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  value: string[];
-  onChange: () => void;
-};
-
-export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  return (
-    <CustomSearchSelect
-      value={value}
-      label={
-        <div className="flex items-center gap-2 text-custom-text-200">
-          {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="flex items-center justify-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-200">{value.length} Assignees</span>
-            </div>
-          ) : (
-            <div className="flex items-center justify-center gap-2">
-              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
-              <span className="text-custom-text-200">Assignee</span>
-            </div>
-          )}
-        </div>
-      }
-      options={options}
-      onChange={onChange}
-      maxHeight="md"
-      multiple
-      noChevron
-    />
-  );
-};
diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx
deleted file mode 100644
index 8c16ca14cbf..00000000000
--- a/apps/app/components/modules/select/status.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-
-// react hook form
-import { Controller, FieldError, Control } from "react-hook-form";
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { ModuleStatusIcon } from "components/icons";
-// types
-import type { IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
-
-type Props = {
-  control: Control<IModule, any>;
-  error?: FieldError;
-};
-
-export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
-  <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 ${
-              error ? "text-red-500" : ""
-            }`}
-          >
-            {value ? (
-              <ModuleStatusIcon status={value} />
-            ) : (
-              <Squares2X2Icon
-                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}
-        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>
-    )}
-  />
-);
diff --git a/apps/app/components/notifications/notification-card.tsx b/apps/app/components/notifications/notification-card.tsx
deleted file mode 100644
index 9bb0715a854..00000000000
--- a/apps/app/components/notifications/notification-card.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import React from "react";
-
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-// hooks
-import useToast from "hooks/use-toast";
-
-// icons
-import { CustomMenu, Icon, Tooltip } from "components/ui";
-
-// helper
-import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
-import {
-  formatDateDistance,
-  render12HourFormatTime,
-  renderLongDateFormat,
-  renderShortDate,
-  renderShortDateWithYearFormat,
-} from "helpers/date-time.helper";
-
-// type
-import type { IUserNotification } from "types";
-// constants
-import { snoozeOptions } from "constants/notification";
-
-type NotificationCardProps = {
-  notification: IUserNotification;
-  markNotificationReadStatus: (notificationId: string) => Promise<void>;
-  markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
-  markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
-  setSelectedNotificationForSnooze: (notificationId: string) => void;
-  markSnoozeNotification: (notificationId: string, dateTime?: Date | undefined) => Promise<void>;
-};
-
-export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
-  const {
-    notification,
-    markNotificationReadStatus,
-    markNotificationReadStatusToggle,
-    markNotificationArchivedStatus,
-    setSelectedNotificationForSnooze,
-    markSnoozeNotification,
-  } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  return (
-    <div
-      onClick={() => {
-        markNotificationReadStatus(notification.id);
-        router.push(
-          `/${workspaceSlug}/projects/${notification.project}/${
-            notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues"
-          }/${notification.data.issue.id}`
-        );
-      }}
-      className={`group w-full flex items-center gap-4 p-3 pl-6 relative cursor-pointer ${
-        notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
-      }`}
-    >
-      {notification.read_at === null && (
-        <span className="absolute top-1/2 left-2 -translate-y-1/2 w-1.5 h-1.5 bg-custom-primary-100 rounded-full" />
-      )}
-      <div className="relative w-12 h-12 rounded-full">
-        {notification.triggered_by_details.avatar &&
-        notification.triggered_by_details.avatar !== "" ? (
-          <div className="h-12 w-12 rounded-full">
-            <Image
-              src={notification.triggered_by_details.avatar}
-              alt="Profile Image"
-              layout="fill"
-              objectFit="cover"
-              className="rounded-full"
-            />
-          </div>
-        ) : (
-          <div className="w-12 h-12 bg-custom-background-80 rounded-full flex justify-center items-center">
-            <span className="text-custom-text-100 font-medium text-lg">
-              {notification.triggered_by_details.is_bot ? (
-                notification.triggered_by_details.first_name?.[0]?.toUpperCase()
-              ) : notification.triggered_by_details.display_name?.[0] ? (
-                notification.triggered_by_details.display_name?.[0]?.toUpperCase()
-              ) : (
-                <Icon iconName="person" className="h-6 w-6" />
-              )}
-            </span>
-          </div>
-        )}
-      </div>
-      <div className="space-y-2.5 w-full overflow-hidden">
-        <div className="text-sm w-full break-words">
-          <span className="font-semibold">
-            {notification.triggered_by_details.is_bot
-              ? notification.triggered_by_details.first_name
-              : notification.triggered_by_details.display_name}{" "}
-          </span>
-          {notification.data.issue_activity.field !== "comment" &&
-            notification.data.issue_activity.verb}{" "}
-          {notification.data.issue_activity.field === "comment"
-            ? "commented"
-            : notification.data.issue_activity.field === "None"
-            ? null
-            : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
-          {notification.data.issue_activity.field !== "comment" &&
-          notification.data.issue_activity.field !== "None"
-            ? "to"
-            : ""}
-          <span className="font-semibold">
-            {" "}
-            {notification.data.issue_activity.field !== "None" ? (
-              notification.data.issue_activity.field !== "comment" ? (
-                notification.data.issue_activity.field === "target_date" ? (
-                  renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
-                ) : notification.data.issue_activity.field === "attachment" ? (
-                  "the issue"
-                ) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
-                  stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
-                ) : (
-                  stripHTML(notification.data.issue_activity.new_value)
-                )
-              ) : (
-                <span>
-                  {`"`}
-                  {notification.data.issue_activity.new_value.length > 55
-                    ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
-                    : notification.data.issue_activity.issue_comment}
-                  {`"`}
-                </span>
-              )
-            ) : (
-              "the issue and assigned it to you."
-            )}
-          </span>
-        </div>
-
-        <div className="flex justify-between gap-2 text-xs">
-          <p className="text-custom-text-300">
-            {truncateText(
-              `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
-              50
-            )}
-          </p>
-          {notification.snoozed_till ? (
-            <p className="text-custom-text-300 flex items-center justify-end gap-x-1 flex-shrink-0">
-              <Icon iconName="schedule" className="!text-base -my-0.5" />
-              <span>
-                Till {renderShortDate(notification.snoozed_till)},{" "}
-                {render12HourFormatTime(notification.snoozed_till)}
-              </span>
-            </p>
-          ) : (
-            <p className="text-custom-text-300 flex-shrink-0">
-              {formatDateDistance(notification.created_at)}
-            </p>
-          )}
-        </div>
-      </div>
-      <div className="absolute py-1 gap-x-3 right-3 top-3 hidden group-hover:flex">
-        {[
-          {
-            id: 1,
-            name: notification.read_at ? "Mark as unread" : "Mark as read",
-            icon: "chat_bubble",
-            onClick: () => {
-              markNotificationReadStatusToggle(notification.id).then(() => {
-                setToastAlert({
-                  title: notification.read_at
-                    ? "Notification marked as unread"
-                    : "Notification marked as read",
-                  type: "success",
-                });
-              });
-            },
-          },
-          {
-            id: 2,
-            name: notification.archived_at ? "Unarchive" : "Archive",
-            icon: notification.archived_at ? "unarchive" : "archive",
-            onClick: () => {
-              markNotificationArchivedStatus(notification.id).then(() => {
-                setToastAlert({
-                  title: notification.archived_at
-                    ? "Notification un-archived"
-                    : "Notification archived",
-                  type: "success",
-                });
-              });
-            },
-          },
-        ].map((item) => (
-          <Tooltip tooltipContent={item.name}>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                item.onClick();
-              }}
-              key={item.id}
-              className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded outline-none"
-            >
-              <Icon iconName={item.icon} className="h-5 w-5 text-custom-text-300" />
-            </button>
-          </Tooltip>
-        ))}
-
-        <Tooltip tooltipContent="Snooze">
-          <div>
-            <CustomMenu
-              menuButtonOnClick={(e) => {
-                e.stopPropagation();
-              }}
-              customButton={
-                <button
-                  type="button"
-                  className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded"
-                >
-                  <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" />
-                </button>
-              }
-              optionsClassName="!z-20"
-            >
-              {snoozeOptions.map((item) => (
-                <CustomMenu.MenuItem
-                  key={item.label}
-                  renderAs="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-
-                    if (!item.value) {
-                      setSelectedNotificationForSnooze(notification.id);
-                      return;
-                    }
-
-                    markSnoozeNotification(notification.id, item.value).then(() => {
-                      setToastAlert({
-                        title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
-                        type: "success",
-                      });
-                    });
-                  }}
-                >
-                  {item.label}
-                </CustomMenu.MenuItem>
-              ))}
-            </CustomMenu>
-          </div>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/onboarding/join-workspaces.tsx b/apps/app/components/onboarding/join-workspaces.tsx
deleted file mode 100644
index 84b5bdfc971..00000000000
--- a/apps/app/components/onboarding/join-workspaces.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useState } from "react";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// hooks
-import useUser from "hooks/use-user";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
-// helpers
-import { truncateText } from "helpers/string.helper";
-// types
-import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types";
-// fetch-keys
-import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
-// constants
-import { ROLE } from "constants/workspace";
-
-type Props = {
-  finishOnboarding: () => Promise<void>;
-  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
-  updateLastWorkspace: () => Promise<void>;
-};
-
-export const JoinWorkspaces: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-}) => {
-  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
-  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
-
-  const { user } = useUser();
-
-  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
-  );
-
-  const handleInvitation = (
-    workspace_invitation: IWorkspaceMemberInvitation,
-    action: "accepted" | "withdraw"
-  ) => {
-    if (action === "accepted") {
-      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
-    } else if (action === "withdraw") {
-      setInvitationsRespond((prevData) =>
-        prevData.filter((item: string) => item !== workspace_invitation.id)
-      );
-    }
-  };
-
-  const handleNextStep = async () => {
-    if (!user) return;
-
-    await stepChange({ workspace_join: true });
-
-    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite)
-      await finishOnboarding();
-  };
-
-  const submitInvitations = async () => {
-    if (invitationsRespond.length <= 0) return;
-
-    setIsJoiningWorkspaces(true);
-
-    await workspaceService
-      .joinWorkspaces({ invitations: invitationsRespond })
-      .then(async () => {
-        await mutateInvitations();
-        await mutate(USER_WORKSPACES);
-        await updateLastWorkspace();
-
-        await handleNextStep();
-      })
-      .finally(() => setIsJoiningWorkspaces(false));
-  };
-
-  return (
-    <div className="w-full space-y-7 sm:space-y-10">
-      <h5 className="sm:text-lg">We see that someone has invited you to</h5>
-      <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
-      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
-        {invitations &&
-          invitations.map((invitation) => {
-            const isSelected = invitationsRespond.includes(invitation.id);
-
-            return (
-              <div
-                key={invitation.id}
-                className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
-                  isSelected
-                    ? "border-custom-primary-100"
-                    : "border-custom-border-200 hover:bg-custom-background-80"
-                }`}
-                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
-              >
-                <div className="flex-shrink-0">
-                  <div className="grid place-items-center h-9 w-9 rounded">
-                    {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
-                      <img
-                        src={invitation.workspace.logo}
-                        height="100%"
-                        width="100%"
-                        className="rounded"
-                        alt={invitation.workspace.name}
-                      />
-                    ) : (
-                      <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
-                        {invitation.workspace.name[0]}
-                      </span>
-                    )}
-                  </div>
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">
-                    {truncateText(invitation.workspace.name, 30)}
-                  </div>
-                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
-                </div>
-                <span
-                  className={`flex-shrink-0 ${
-                    isSelected ? "text-custom-primary-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <CheckCircleIcon className="h-5 w-5" />
-                </span>
-              </div>
-            );
-          })}
-      </div>
-      <div className="flex items-center gap-3">
-        <PrimaryButton
-          type="submit"
-          size="md"
-          onClick={submitInvitations}
-          disabled={invitationsRespond.length === 0}
-          loading={isJoiningWorkspaces}
-        >
-          Accept & Join
-        </PrimaryButton>
-        <SecondaryButton
-          className="border border-none bg-transparent"
-          size="md"
-          onClick={handleNextStep}
-        >
-          Skip for now
-        </SecondaryButton>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/onboarding/tour/root.tsx b/apps/app/components/onboarding/tour/root.tsx
deleted file mode 100644
index 5354dc3be4f..00000000000
--- a/apps/app/components/onboarding/tour/root.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { useState } from "react";
-
-import Image from "next/image";
-
-// hooks
-import useUser from "hooks/use-user";
-// components
-import { TourSidebar } from "components/onboarding";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-// images
-import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
-import IssuesTour from "public/onboarding/issues.webp";
-import CyclesTour from "public/onboarding/cycles.webp";
-import ModulesTour from "public/onboarding/modules.webp";
-import ViewsTour from "public/onboarding/views.webp";
-import PagesTour from "public/onboarding/pages.webp";
-
-type Props = {
-  onComplete: () => void;
-};
-
-export type TTourSteps = "welcome" | "issues" | "cycles" | "modules" | "views" | "pages";
-
-const TOUR_STEPS: {
-  key: TTourSteps;
-  title: string;
-  description: string;
-  image: any;
-  prevStep?: TTourSteps;
-  nextStep?: TTourSteps;
-}[] = [
-  {
-    key: "issues",
-    title: "任务",
-    description:
-      "任务是MissionPlan的基石。MissionPlan中的大多数概念都与任务及其属性有关。",
-    image: IssuesTour,
-    nextStep: "cycles",
-  },
-  {
-    key: "cycles",
-    title: "移至周期",
-    description:
-      "周期可以帮助您和您的团队加快进度，类似于敏捷开发中常用的冲刺阶段。",
-    image: CyclesTour,
-    prevStep: "issues",
-    nextStep: "modules",
-  },
-  {
-    key: "modules",
-    title: "分解成模块",
-    description:
-      "模块可将您的重要工作分解为项目或功能，帮助您更好地组织工作。",
-    image: ModulesTour,
-    prevStep: "cycles",
-    nextStep: "views",
-  },
-  {
-    key: "views",
-    title: "视图",
-    description:
-      "创建自定义筛选器，只显示与您相关的问题。只需点击几下，即可保存并共享您的筛选器。",
-    image: ViewsTour,
-    prevStep: "modules",
-    nextStep: "pages",
-  },
-  {
-    key: "pages",
-    title: "pages文档",
-    description: "在开会或开始一天的工作时，用Pages快速记下问题。",
-    image: PagesTour,
-    prevStep: "views",
-  },
-];
-
-export const TourRoot: React.FC<Props> = ({ onComplete }) => {
-  const [step, setStep] = useState<TTourSteps>("welcome");
-
-  const { user } = useUser();
-
-  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
-  const currentStep = TOUR_STEPS[currentStepIndex];
-
-  return (
-    <>
-      {step === "welcome" ? (
-        <div className="w-4/5 md:w-1/2 lg:w-2/5 h-3/4 bg-custom-background-100 rounded-[10px] overflow-hidden">
-          <div className="h-full overflow-hidden">
-            <div className="h-3/5 bg-custom-primary-100 grid place-items-center">
-              <Image src={PlaneWhiteLogo} alt="Plane White Logo" />
-            </div>
-            <div className="h-2/5 overflow-y-auto p-6">
-              <h3 className="font-semibold sm:text-xl">
-                欢迎来到MissionPlan, {user?.first_name} {user?.last_name}
-              </h3>
-              <p className="text-custom-text-200 text-sm mt-3">
-                我们很高兴您决定试用MissionPlan。现在您可以轻松管理您的项目了。创建项目，开始使用。
-              </p>
-              <div className="flex items-center gap-6 mt-8">
-                <PrimaryButton onClick={() => setStep("issues")}>了解产品</PrimaryButton>
-                <button
-                  type="button"
-                  className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
-                  onClick={onComplete}
-                >
-                  不用了，谢谢，我自己会去探索
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="relative w-4/5 md:w-1/2 lg:w-3/5 h-3/5 sm:h-3/4 bg-custom-background-100 rounded-[10px] grid grid-cols-10 overflow-hidden">
-          <button
-            type="button"
-            className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
-            onClick={onComplete}
-          >
-            <XMarkIcon className="h-3 w-3 text-custom-text-100" />
-          </button>
-          <TourSidebar step={step} setStep={setStep} />
-          <div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
-            <div
-              className={`flex items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100 ${
-                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
-              }`}
-            >
-              <Image src={currentStep?.image} alt={currentStep?.title} />
-            </div>
-            <div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto">
-              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
-              <p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p>
-              <div className="h-full flex items-end justify-between gap-4 mt-3">
-                <div className="flex items-center gap-4">
-                  {currentStep?.prevStep && (
-                    <SecondaryButton onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
-                      后退
-                    </SecondaryButton>
-                  )}
-                  {currentStep?.nextStep && (
-                    <PrimaryButton onClick={() => setStep(currentStep.nextStep ?? "issues")}>
-                      下一步
-                    </PrimaryButton>
-                  )}
-                </div>
-                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) ===
-                  TOUR_STEPS.length - 1 && (
-                  <PrimaryButton onClick={onComplete}>创建我的第一个项目</PrimaryButton>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/onboarding/tour/sidebar.tsx b/apps/app/components/onboarding/tour/sidebar.tsx
deleted file mode 100644
index dce49f098b2..00000000000
--- a/apps/app/components/onboarding/tour/sidebar.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// icons
-import {
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-} from "@mui/icons-material";
-// types
-import { TTourSteps } from "./root";
-
-const sidebarOptions: {
-  key: TTourSteps;
-  Icon: any;
-}[] = [
-  {
-    key: "issues",
-    Icon: FilterNoneOutlined,
-  },
-  {
-    key: "cycles",
-    Icon: ContrastOutlined,
-  },
-  {
-    key: "modules",
-    Icon: DatasetOutlined,
-  },
-  {
-    key: "views",
-    Icon: PhotoFilterOutlined,
-  },
-  {
-    key: "pages",
-    Icon: ArticleOutlined,
-  },
-];
-
-type Props = {
-  step: TTourSteps;
-  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
-};
-
-export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
-  <div className="hidden lg:block col-span-3 p-8 bg-custom-background-90">
-    <h3 className="font-medium text-lg">
-      Let{"'"}s get started!
-      <br />
-      Get more out of Plane.
-    </h3>
-    <div className="mt-8 space-y-5">
-      {sidebarOptions.map((option) => (
-        <h5
-          key={option.key}
-          className={`pr-2 py-0.5 pl-3 flex items-center gap-2 capitalize font-medium text-sm border-l-[3px] cursor-pointer ${
-            step === option.key
-              ? "text-custom-primary-100 border-custom-primary-100"
-              : "text-custom-text-200 border-transparent"
-          }`}
-          onClick={() => setStep(option.key)}
-        >
-          <option.Icon
-            sx={{
-              fontSize: 18,
-            }}
-            aria-hidden="true"
-          />
-          {option.key}
-        </h5>
-      ))}
-    </div>
-  </div>
-);
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
deleted file mode 100644
index fe2870e9ea9..00000000000
--- a/apps/app/components/onboarding/workspace.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useState } from "react";
-
-// ui
-import { SecondaryButton } from "components/ui";
-// types
-import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
-// constants
-import { CreateWorkspaceForm } from "components/workspace";
-
-type Props = {
-  finishOnboarding: () => Promise<void>;
-  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
-  updateLastWorkspace: () => Promise<void>;
-  user: ICurrentUserResponse | undefined;
-  workspaces: IWorkspace[] | undefined;
-};
-
-export const Workspace: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-  user,
-  workspaces,
-}) => {
-  const [defaultValues, setDefaultValues] = useState({
-    name: "",
-    slug: "",
-    organization_size: "",
-  });
-
-  const completeStep = async () => {
-    if (!user) return;
-
-    const payload: Partial<TOnboardingSteps> = {
-      workspace_create: true,
-    };
-
-    await stepChange(payload);
-    await updateLastWorkspace();
-  };
-
-  const secondaryButtonAction = async () => {
-    if (workspaces && workspaces.length > 0) {
-      await stepChange({ workspace_create: true, workspace_invite: true, workspace_join: true });
-      await finishOnboarding();
-    } else await stepChange({ profile_complete: false, workspace_join: false });
-  };
-
-  return (
-    <div className="w-full space-y-7 sm:space-y-10">
-      <h4 className="text-xl sm:text-2xl font-semibold">创建工作区</h4>
-      <div className="sm:w-3/4 md:w-2/5">
-        <CreateWorkspaceForm
-          onSubmit={completeStep}
-          defaultValues={defaultValues}
-          setDefaultValues={setDefaultValues}
-          user={user}
-          primaryButtonText={{
-            loading: "创建中...",
-            default: "继续",
-          }}
-          secondaryButton={
-            workspaces ? (
-              <SecondaryButton onClick={secondaryButtonAction}>
-                {workspaces.length > 0 ? "跳过并继续" : "后退"}
-              </SecondaryButton>
-            ) : undefined
-          }
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/pages/create-block.tsx b/apps/app/components/pages/create-block.tsx
deleted file mode 100644
index 776902f781f..00000000000
--- a/apps/app/components/pages/create-block.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { KeyboardEventHandler, useCallback, useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import pagesService from "services/pages.service";
-
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { TextArea } from "components/ui";
-// types
-import { ICurrentUserResponse, IPageBlock } from "types";
-// fetch-keys
-import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-
-const defaultValues = {
-  name: "",
-};
-
-type Props = {
-  user: ICurrentUserResponse | undefined;
-};
-
-export const CreateBlock: React.FC<Props> = ({ user }) => {
-  const [blockTitle, setBlockTitle] = useState("");
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, pageId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    handleSubmit,
-    register,
-    control,
-    watch,
-    setValue,
-    setFocus,
-    reset,
-    formState: { isSubmitting },
-  } = useForm<IPageBlock>({
-    defaultValues,
-  });
-
-  const createPageBlock = async () => {
-    if (!workspaceSlug || !projectId || !pageId) return;
-
-    await pagesService
-      .createPageBlock(
-        workspaceSlug as string,
-        projectId as string,
-        pageId as string,
-        {
-          name: watch("name"),
-        },
-        user
-      )
-      .then((res) => {
-        mutate<IPageBlock[]>(
-          PAGE_BLOCKS_LIST(pageId as string),
-          (prevData) => [...(prevData as IPageBlock[]), res],
-          false
-        );
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "页面无法创建。请重试。",
-        });
-      });
-
-    reset();
-  };
-
-  const handleKeyDown = (e: any) => {
-    const keyCombination =
-      ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
-
-    if (e.key === "Enter" && !keyCombination) {
-      if (watch("name") && watch("name") !== "") {
-        e.preventDefault();
-        createPageBlock();
-        reset();
-      }
-    }
-  };
-
-  return (
-    <div className="relative">
-      <form
-        className="relative flex flex-col items-center justify-between h-32 rounded border-2 border-custom-border-200 p-2"
-        onSubmit={handleSubmit(createPageBlock)}
-      >
-        <div className="flex min-h-full w-full">
-          <TextArea
-            id="name"
-            name="name"
-            placeholder="Title"
-            register={register}
-            className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
-            role="textbox"
-            onKeyDown={handleKeyDown}
-            maxLength={255}
-            noPadding
-          />
-        </div>
-
-        <div className="absolute right-2 bottom-2 flex items-center p-1">
-          <button type="submit">
-            <PaperAirplaneIcon className="h-5 w-5 text-custom-text-100" />
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
deleted file mode 100644
index b644529a350..00000000000
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import pagesService from "services/pages.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, IPage } from "types";
-// fetch-keys
-import {
-  ALL_PAGES_LIST,
-  FAVORITE_PAGES_LIST,
-  MY_PAGES_LIST,
-  RECENT_PAGES_LIST,
-} from "constants/fetch-keys";
-
-type TConfirmPageDeletionProps = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IPage | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    if (!data || !workspaceSlug || !projectId) return;
-
-    await pagesService
-      .deletePage(workspaceSlug as string, data.project, data.id, user)
-      .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId as string));
-        mutate<IPage[]>(
-          MY_PAGES_LIST(projectId as string),
-          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
-          false
-        );
-        mutate<IPage[]>(
-          ALL_PAGES_LIST(projectId as string),
-          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
-          false
-        );
-        mutate<IPage[]>(
-          FAVORITE_PAGES_LIST(projectId as string),
-          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
-          false
-        );
-        handleClose();
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "页面删除成功。",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "页面无法删除。请重试。",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete Page
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          您确定要删除页面-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? 与页面相关的所有数据都将被永久删除。此操作无法撤销。
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "删除..." : "删除"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
deleted file mode 100644
index ef83a2b0b23..00000000000
--- a/apps/app/components/pages/page-form.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
-// types
-import { IPage } from "types";
-
-type Props = {
-  handleFormSubmit: (values: IPage) => Promise<void>;
-  handleClose: () => void;
-  status: boolean;
-  data?: IPage | null;
-};
-
-const defaultValues = {
-  name: "",
-  description: "",
-};
-
-export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<IPage>({
-    defaultValues,
-  });
-
-  const handleCreateUpdatePage = async (formData: IPage) => {
-    await handleFormSubmit(formData);
-
-    reset({
-      ...defaultValues,
-    });
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
-  return (
-    <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
-      <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Page
-        </h3>
-        <div className="space-y-3">
-          <div>
-            <Input
-              id="name"
-              name="name"
-              type="name"
-              placeholder="Title"
-              className="resize-none text-xl"
-              autoComplete="off"
-              error={errors.name}
-              register={register}
-              validations={{
-                required: "标题是必填项",
-                maxLength: {
-                  value: 255,
-                  message: "标题应少于255个字符",
-                },
-              }}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
-            ? isSubmitting
-              ? "Updating Page..."
-              : "Update Page"
-            : isSubmitting
-            ? "Creating Page..."
-            : "Create Page"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/pages/pages-list/my-pages-list.tsx b/apps/app/components/pages/pages-list/my-pages-list.tsx
deleted file mode 100644
index c225a0ac5d7..00000000000
--- a/apps/app/components/pages/pages-list/my-pages-list.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import pagesService from "services/pages.service";
-// components
-import { PagesView } from "components/pages";
-// types
-import { TPagesListProps } from "./types";
-// fetch-keys
-import { MY_PAGES_LIST } from "constants/fetch-keys";
-
-export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: pages } = useSWR(
-    workspaceSlug && projectId ? MY_PAGES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          pagesService.getPagesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            "created_by_me"
-          )
-      : null
-  );
-
-  return <PagesView pages={pages} viewType={viewType} />;
-};
diff --git a/apps/app/components/pages/pages-list/other-pages-list.tsx b/apps/app/components/pages/pages-list/other-pages-list.tsx
deleted file mode 100644
index 64764533f5b..00000000000
--- a/apps/app/components/pages/pages-list/other-pages-list.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import pagesService from "services/pages.service";
-// components
-import { PagesView } from "components/pages";
-// types
-import { TPagesListProps } from "./types";
-// fetch-keys
-import { OTHER_PAGES_LIST } from "constants/fetch-keys";
-
-export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: pages } = useSWR(
-    workspaceSlug && projectId ? OTHER_PAGES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          pagesService.getPagesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            "created_by_other"
-          )
-      : null
-  );
-
-  return <PagesView pages={pages} viewType={viewType} />;
-};
diff --git a/apps/app/components/profile/index.ts b/apps/app/components/profile/index.ts
deleted file mode 100644
index 382994a38d1..00000000000
--- a/apps/app/components/profile/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./overview";
-export * from "./navbar";
-export * from "./profile-issues-view-options";
-export * from "./profile-issues-view";
-export * from "./sidebar";
diff --git a/apps/app/components/profile/overview/activity.tsx b/apps/app/components/profile/overview/activity.tsx
deleted file mode 100644
index f8760ac94de..00000000000
--- a/apps/app/components/profile/overview/activity.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// components
-import { ActivityMessage } from "components/core";
-// ui
-import { ProfileEmptyState, Icon, Loader } from "components/ui";
-// image
-import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
-// helpers
-import { timeAgo } from "helpers/date-time.helper";
-// fetch-keys
-import { USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
-
-export const ProfileActivity = () => {
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { data: userProfileActivity } = useSWR(
-    workspaceSlug && userId
-      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
-      : null
-  );
-
-  return (
-    <div className="space-y-2">
-      <h3 className="text-lg font-medium">最近活动</h3>
-      <div className="border border-custom-border-100 rounded p-6">
-        {userProfileActivity ? (
-          userProfileActivity.results.length > 0 ? (
-            <div className="space-y-5">
-              {userProfileActivity.results.map((activity) => (
-                <div key={activity.id} className="flex gap-3">
-                  <div className="flex-shrink-0">
-                    {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
-                      <img
-                        src={activity.actor_detail.avatar}
-                        alt={activity.actor_detail.display_name}
-                        height={24}
-                        width={24}
-                        className="rounded"
-                      />
-                    ) : (
-                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
-                        {activity.actor_detail.display_name?.charAt(0)}
-                      </div>
-                    )}
-                  </div>
-                  <div className="-mt-1 w-4/5 break-words">
-                    <p className="text-sm text-custom-text-200">
-                      <span className="font-medium text-custom-text-100">
-                        {activity.actor_detail.display_name}{" "}
-                      </span>
-                      {activity.field ? (
-                        <ActivityMessage activity={activity} showIssue />
-                      ) : (
-                        <span>
-                          created this{" "}
-                          <a
-                            href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-                          >
-                            Issue
-                            <Icon iconName="launch" className="!text-xs" />
-                          </a>
-                        </span>
-                      )}
-                    </p>
-                    <p className="text-xs text-custom-text-200">{timeAgo(activity.created_at)}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <ProfileEmptyState
-              title="暂无数据"
-              description="我们找不到数据，请查看您的输入"
-              image={recentActivityEmptyState}
-            />
-          )
-        ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/profile/profile-issues-view-options.tsx b/apps/app/components/profile/profile-issues-view-options.tsx
deleted file mode 100644
index 38faf500be4..00000000000
--- a/apps/app/components/profile/profile-issues-view-options.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// hooks
-import useProfileIssues from "hooks/use-profile-issues";
-import useEstimateOption from "hooks/use-estimate-option";
-// components
-import { MyIssuesSelectFilters } from "components/issues";
-// ui
-import { CustomMenu, CustomSearchSelect, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { Properties, TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-import useProjects from "hooks/use-projects";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "kanban",
-    Icon: GridViewOutlined,
-  },
-];
-
-export const ProfileIssuesViewOptions: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { projects } = useProjects();
-
-  const {
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    filters,
-    properties,
-    setProperties,
-    setFilters,
-  } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
-
-  const { isEstimateActive } = useEstimateOption();
-
-  const options = projects?.map((project) => ({
-    value: project.id,
-    query: project.name + " " + project.identifier,
-    content: project.name,
-  }));
-
-  if (
-    !router.pathname.includes("assigned") &&
-    !router.pathname.includes("created") &&
-    !router.pathname.includes("subscribed")
-  )
-    return null;
-  // return (
-  //   <CustomSearchSelect
-  //     value={projects ?? null}
-  //     onChange={(val: string[] | null) => console.log(val)}
-  //     label="Filters"
-  //     options={options}
-  //     position="right"
-  //     multiple
-  //   />
-  // );
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {issueViewOptions.map((option) => (
-          <Tooltip
-            key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-            }
-            position="bottom"
-          >
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                issueView === option.type
-                  ? "bg-custom-sidebar-background-80"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => setIssueView(option.type)}
-            >
-              <option.Icon
-                sx={{
-                  fontSize: 16,
-                }}
-                className={option.type === "gantt_chart" ? "rotate-90" : ""}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-      <MyIssuesSelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters({
-                [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                  (val) => val !== option.value
-                ),
-              });
-            else
-              setFilters({
-                [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-              });
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
-              }`}
-            >
-              View
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </Popover.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-custom-border-200">
-                  <div className="space-y-4 pb-3 text-xs">
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                groupByProperty === "project"
-                                  ? "Project"
-                                  : GROUP_BY_OPTIONS.find(
-                                      (option) => option.key === groupByProperty
-                                    )?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
-                                  return null;
-
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => setGroupByProperty(option.key)}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                                "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) => {
-                                if (groupByProperty === "priority" && option.key === "priority")
-                                  return null;
-                                if (option.key === "sort_order") return null;
-
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setOrderBy(option.key);
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                      </>
-                    )}
-                    <div className="flex items-center justify-between">
-                      <h4 className="text-custom-text-200">Issue type</h4>
-                      <div className="w-28">
-                        <CustomMenu
-                          label={
-                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
-                              ?.name ?? "Select"
-                          }
-                          className="!w-full"
-                          buttonClassName="w-full"
-                        >
-                          {FILTER_ISSUE_OPTIONS.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() =>
-                                setFilters({
-                                  type: option.key,
-                                })
-                              }
-                            >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                    </div>
-
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty states</h4>
-                          <div className="w-28">
-                            <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
-                          </div>
-                        </div>
-                      </>
-                    )}
-                  </div>
-
-                  <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {Object.keys(properties).map((key) => {
-                        if (key === "estimate" && !isEstimateActive) return null;
-
-                        if (
-                          issueView === "spreadsheet" &&
-                          (key === "attachment_count" ||
-                            key === "link" ||
-                            key === "sub_issue_count")
-                        )
-                          return null;
-
-                        if (
-                          issueView !== "spreadsheet" &&
-                          (key === "created_on" || key === "updated_on")
-                        )
-                          return null;
-
-                        return (
-                          <button
-                            key={key}
-                            type="button"
-                            className={`rounded border px-2 py-1 text-xs capitalize ${
-                              properties[key as keyof Properties]
-                                ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-200"
-                            }`}
-                            onClick={() => setProperties(key as keyof Properties)}
-                          >
-                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
-};
diff --git a/apps/app/components/profile/sidebar.tsx b/apps/app/components/profile/sidebar.tsx
deleted file mode 100644
index ba574441ab9..00000000000
--- a/apps/app/components/profile/sidebar.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-import useSWR from "swr";
-
-// next-themes
-import { useTheme } from "next-themes";
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import userService from "services/user.service";
-// hooks
-import useUser from "hooks/use-user";
-// ui
-import { Icon, Loader, Tooltip } from "components/ui";
-// icons
-import { EditOutlined } from "@mui/icons-material";
-// helpers
-import { render12HourFormatTime, renderLongDetailDateFormat } from "helpers/date-time.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// fetch-keys
-import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
-
-export const ProfileSidebar = () => {
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { theme } = useTheme();
-
-  const { user } = useUser();
-
-  const { data: userProjectsData } = useSWR(
-    workspaceSlug && userId
-      ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () =>
-          userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
-      : null
-  );
-
-  const userDetails = [
-    {
-      label: "Joined on",
-      value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""),
-    },
-    {
-      label: "Timezone",
-      value: (
-        <span>
-          {render12HourFormatTime(new Date())}{" "}
-          <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
-        </span>
-      ),
-    },
-  ];
-
-  return (
-    <div
-      className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto"
-      style={{
-        boxShadow:
-          theme === "light"
-            ? "0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12)"
-            : "0px 0px 4px 0px rgba(0, 0, 0, 0.20), 0px 2px 6px 0px rgba(0, 0, 0, 0.50)",
-      }}
-    >
-      {userProjectsData ? (
-        <>
-          <div className="relative h-32">
-            {user?.id === userId && (
-              <div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
-                <Link href={`/${workspaceSlug}/me/profile`}>
-                  <a className="grid place-items-center text-black">
-                    <EditOutlined
-                      sx={{
-                        fontSize: 12,
-                      }}
-                    />
-                  </a>
-                </Link>
-              </div>
-            )}
-            <img
-              src={
-                userProjectsData.user_data.cover_image ??
-                "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
-              }
-              alt={userProjectsData.user_data.display_name}
-              className="h-32 w-full object-cover"
-            />
-            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
-              {userProjectsData.user_data.avatar && userProjectsData.user_data.avatar !== "" ? (
-                <img
-                  src={userProjectsData.user_data.avatar}
-                  alt={userProjectsData.user_data.display_name}
-                  className="rounded"
-                />
-              ) : (
-                <div className="bg-custom-background-90 flex justify-center items-center w-[52px] h-[52px] rounded text-custom-text-100">
-                  {userProjectsData.user_data.display_name?.[0]}
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="px-5">
-            <div className="mt-[38px]">
-              <h4 className="text-lg font-semibold">
-                {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
-              </h4>
-              <h6 className="text-custom-text-200 text-sm">
-                ({userProjectsData.user_data.display_name})
-              </h6>
-            </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="flex-shrink-0 text-custom-text-200 w-2/5">{detail.label}</div>
-                  <div className="font-medium w-3/5 break-words">{detail.value}</div>
-                </div>
-              ))}
-            </div>
-            <div className="mt-9 divide-y divide-custom-border-100">
-              {userProjectsData.project_data.map((project, index) => {
-                const totalIssues =
-                  project.created_issues +
-                  project.assigned_issues +
-                  project.pending_issues +
-                  project.completed_issues;
-                const totalAssignedIssues = totalIssues - project.created_issues;
-
-                const completedIssuePercentage =
-                  totalAssignedIssues === 0
-                    ? 0
-                    : Math.round((project.completed_issues / totalAssignedIssues) * 100);
-
-                return (
-                  <Disclosure
-                    key={project.id}
-                    as="div"
-                    className={`${index === 0 ? "pb-3" : "py-3"}`}
-                  >
-                    {({ open }) => (
-                      <div className="w-full">
-                        <Disclosure.Button className="flex items-center justify-between gap-2 w-full">
-                          <div className="flex items-center gap-2 w-3/4">
-                            {project.emoji ? (
-                              <div className="flex-shrink-0 grid h-7 w-7 place-items-center">
-                                {renderEmoji(project.emoji)}
-                              </div>
-                            ) : project.icon_prop ? (
-                              <div className="flex-shrink-0 h-7 w-7 grid place-items-center">
-                                {renderEmoji(project.icon_prop)}
-                              </div>
-                            ) : (
-                              <div className="flex-shrink-0 grid place-items-center h-7 w-7 rounded bg-custom-background-90 uppercase text-custom-text-100 text-xs">
-                                {project?.name.charAt(0)}
-                              </div>
-                            )}
-                            <div className="text-sm font-medium truncate break-words">
-                              {project.name}
-                            </div>
-                          </div>
-                          <div className="flex-shrink-0 flex items-center gap-2">
-                            {project.assigned_issues > 0 && (
-                              <Tooltip tooltipContent="Completion percentage" position="left">
-                                <div
-                                  className={`px-1 py-0.5 text-xs font-medium rounded ${
-                                    completedIssuePercentage <= 35
-                                      ? "bg-red-500/10 text-red-500"
-                                      : completedIssuePercentage <= 70
-                                      ? "bg-yellow-500/10 text-yellow-500"
-                                      : "bg-green-500/10 text-green-500"
-                                  }`}
-                                >
-                                  {completedIssuePercentage}%
-                                </div>
-                              </Tooltip>
-                            )}
-                            <Icon iconName="arrow_drop_down" className="!text-lg" />
-                          </div>
-                        </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 className="pl-9 mt-5">
-                            {totalIssues > 0 && (
-                              <div className="flex items-center gap-0.5">
-                                <div
-                                  className="h-1 rounded"
-                                  style={{
-                                    backgroundColor: "#203b80",
-                                    width: `${(project.created_issues / totalIssues) * 100}%`,
-                                  }}
-                                />
-                                <div
-                                  className="h-1 rounded"
-                                  style={{
-                                    backgroundColor: "#3f76ff",
-                                    width: `${(project.assigned_issues / totalIssues) * 100}%`,
-                                  }}
-                                />
-                                <div
-                                  className="h-1 rounded"
-                                  style={{
-                                    backgroundColor: "#f59e0b",
-                                    width: `${(project.pending_issues / totalIssues) * 100}%`,
-                                  }}
-                                />
-                                <div
-                                  className="h-1 rounded"
-                                  style={{
-                                    backgroundColor: "#16a34a",
-                                    width: `${(project.completed_issues / totalIssues) * 100}%`,
-                                  }}
-                                />
-                              </div>
-                            )}
-                            <div className="mt-7 space-y-5 text-sm text-custom-text-200">
-                              <div className="flex items-center justify-between gap-2">
-                                <div className="flex items-center gap-2">
-                                  <div className="h-2.5 w-2.5 bg-[#203b80] rounded-sm" />
-                                  Created
-                                </div>
-                                <div className="font-medium">{project.created_issues} 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 bg-[#3f76ff] rounded-sm" />
-                                  Assigned
-                                </div>
-                                <div className="font-medium">{project.assigned_issues} 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 bg-[#f59e0b] rounded-sm" />
-                                  Due
-                                </div>
-                                <div className="font-medium">{project.pending_issues} 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 bg-[#16a34a] rounded-sm" />
-                                  Completed
-                                </div>
-                                <div className="font-medium">{project.completed_issues} Issues</div>
-                              </div>
-                            </div>
-                          </Disclosure.Panel>
-                        </Transition>
-                      </div>
-                    )}
-                  </Disclosure>
-                );
-              })}
-            </div>
-          </div>
-        </>
-      ) : (
-        <Loader className="px-5 space-y-7">
-          <Loader.Item height="130px" />
-          <div className="space-y-5">
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-            <Loader.Item height="20px" />
-          </div>
-        </Loader>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
deleted file mode 100644
index 0ec55dfa604..00000000000
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useRef, useState } from "react";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { SecondaryButton, DangerButton } from "components/ui";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  handleDelete: () => void;
-  data?: any;
-};
-
-const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const handleClose = () => {
-    onClose();
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    handleDelete();
-    handleClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Remove {data?.display_name}?
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this project. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "移除..." : "移除"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export default ConfirmProjectMemberRemove;
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
deleted file mode 100644
index b4234c93462..00000000000
--- a/apps/app/components/project/create-project-modal.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { useForm, Controller } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectServices from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-// ui
-import {
-  Input,
-  TextArea,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  Avatar,
-  CustomSearchSelect,
-} from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-// components
-import { ImagePickerPopover } from "components/core";
-import EmojiIconPicker from "components/emoji-icon-picker";
-// helpers
-import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
-// types
-import { ICurrentUserResponse, IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-// constants
-import { NETWORK_CHOICES } from "constants/project";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setToFavorite?: boolean;
-  user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues: Partial<IProject> = {
-  cover_image:
-    "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  description: "",
-  emoji_and_icon: getRandomEmoji(),
-  identifier: "",
-  name: "",
-  network: 2,
-  project_lead: null,
-};
-
-const IsGuestCondition: React.FC<{
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({ setIsOpen }) => {
-  const { setToastAlert } = useToast();
-
-  useEffect(() => {
-    setIsOpen(false);
-
-    setToastAlert({
-      title: "错误",
-      type: "error",
-      message: "您没有创建项目的权限",
-    });
-  }, [setIsOpen, setToastAlert]);
-
-  return null;
-};
-
-export const CreateProjectModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  setToFavorite = false,
-  user,
-}) => {
-  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { memberDetails } = useWorkspaceMyMembership();
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    control,
-    watch,
-    setValue,
-  } = useForm<IProject>({
-    defaultValues,
-    reValidateMode: "onChange",
-  });
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsChangeInIdentifierRequired(true);
-    reset(defaultValues);
-  };
-
-  const handleAddToFavorites = (projectId: string) => {
-    if (!workspaceSlug) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === projectId ? { ...p, is_favorite: true } : p)),
-      false
-    );
-
-    projectServices
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: projectId,
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        })
-      );
-  };
-
-  const onSubmit = async (formData: IProject) => {
-    if (!workspaceSlug) return;
-
-    const { emoji_and_icon, ...payload } = formData;
-
-    if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
-    else payload.emoji = formData.emoji_and_icon;
-
-    await projectServices
-      .createProject(workspaceSlug.toString(), payload, user)
-      .then((res) => {
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "项目创建成功",
-        });
-        if (setToFavorite) {
-          handleAddToFavorites(res.id);
-        }
-        handleClose();
-      })
-      .catch((err) => {
-        Object.keys(err.data).map((key) =>
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: err.data[key],
-          })
-        );
-      });
-  };
-
-  const changeIdentifierOnNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!isChangeInIdentifierRequired) return;
-
-    if (e.target.value === "") setValue("identifier", "");
-    else
-      setValue(
-        "identifier",
-        e.target.value
-          .replace(/[^a-zA-Z0-9]/g, "")
-          .toUpperCase()
-          .substring(0, 5)
-      );
-  };
-
-  const handleIdentifierChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
-
-    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
-
-    setValue("identifier", alphanumericValue.toUpperCase());
-    setIsChangeInIdentifierRequired(false);
-  };
-
-  const options = workspaceMembers?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
-
-  if (memberDetails && isOpen)
-    if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
-
-  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 bg-opacity-50 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 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="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
-                <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
-                  {watch("cover_image") !== null && (
-                    <img
-                      src={watch("cover_image")!}
-                      className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-                      alt="Cover Image"
-                    />
-                  )}
-
-                  <div className="absolute right-2 top-2 p-2">
-                    <button type="button" onClick={handleClose}>
-                      <XMarkIcon className="h-5 w-5 text-white" />
-                    </button>
-                  </div>
-                  <div className="absolute bottom-2 right-2">
-                    <ImagePickerPopover
-                      label="Change Cover"
-                      onChange={(image) => {
-                        setValue("cover_image", image);
-                      }}
-                      value={watch("cover_image")}
-                    />
-                  </div>
-                  <div className="absolute -bottom-[22px] left-3">
-                    <Controller
-                      name="emoji_and_icon"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <EmojiIconPicker
-                          label={
-                            <div className="h-[44px] w-[44px] grid place-items-center rounded-md bg-custom-background-80 outline-none text-lg">
-                              {value ? renderEmoji(value) : "Icon"}
-                            </div>
-                          }
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </div>
-                </div>
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="divide-y-[0.5px] divide-custom-border-100 px-3"
-                >
-                  <div className="mt-9 space-y-6 pb-5">
-                    <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
-                      <div className="md:col-span-3">
-                        <Input
-                          id="name"
-                          name="name"
-                          type="name"
-                          placeholder="项目标题"
-                          onChange={changeIdentifierOnNameChange}
-                          error={errors.name}
-                          register={register}
-                          validations={{
-                            required: "名称是必填项",
-                            maxLength: {
-                              value: 255,
-                              message: "名称应少于 255 个字符",
-                            },
-                          }}
-                          autoComplete="off"
-                          tabIndex={1}
-                        />
-                      </div>
-                      <div>
-                        <Input
-                          id="identifier"
-                          name="identifier"
-                          type="text"
-                          className="text-sm"
-                          placeholder="标识符"
-                          error={errors.identifier}
-                          register={register}
-                          onChange={handleIdentifierChange}
-                          validations={{
-                            required: "标识符为必填项",
-                            validate: (value) =>
-                              /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                              "标识符必须是大写字母",
-                            minLength: {
-                              value: 1,
-                              message: "标识符必须至少为 1 个字符",
-                            },
-                            maxLength: {
-                              value: 12,
-                              message: "标识符最多只能有 12 个字符",
-                            },
-                          }}
-                        />
-                      </div>
-                      <div className="md:col-span-4">
-                        <TextArea
-                          id="description"
-                          name="description"
-                          className="text-sm !h-24"
-                          placeholder="Description..."
-                          error={errors.description}
-                          register={register}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <div className="flex-shrink-0">
-                        <Controller
-                          name="network"
-                          control={control}
-                          render={({ field: { onChange, value } }) => (
-                            <CustomSelect
-                              value={value}
-                              onChange={onChange}
-                              buttonClassName="border-[0.5px] !px-2 shadow-md"
-                              label={
-                                <div className="flex items-center gap-2 -mb-0.5 py-1">
-                                  {currentNetwork ? (
-                                    <>
-                                      <Icon iconName={currentNetwork?.icon} className="!text-xs" />
-                                      {currentNetwork.label}
-                                    </>
-                                  ) : (
-                                    <span className="text-custom-text-400">Select Network</span>
-                                  )}
-                                </div>
-                              }
-                              noChevron
-                            >
-                              {NETWORK_CHOICES.map((network) => (
-                                <CustomSelect.Option
-                                  key={network.key}
-                                  value={network.key}
-                                  className="flex items-center gap-1"
-                                >
-                                  <Icon iconName={network.icon} className="!text-xs" />
-                                  {network.label}
-                                </CustomSelect.Option>
-                              ))}
-                            </CustomSelect>
-                          )}
-                        />
-                      </div>
-                      <div className="flex-shrink-0">
-                        <Controller
-                          name="project_lead"
-                          control={control}
-                          render={({ field: { value, onChange } }) => {
-                            const selectedMember = workspaceMembers?.find(
-                              (m) => m.member.id === value
-                            );
-
-                            return (
-                              <CustomSearchSelect
-                                value={value}
-                                onChange={onChange}
-                                options={options}
-                                buttonClassName="!px-2 shadow-md"
-                                label={
-                                  <div className="flex items-center justify-center gap-2 py-[1px]">
-                                    {value ? (
-                                      <>
-                                        <Avatar user={selectedMember?.member} />
-                                        <span>{selectedMember?.member.display_name} </span>
-                                        <span onClick={() => onChange(null)}>
-                                          <Icon
-                                            iconName="close"
-                                            className="!text-xs -mb-0.5 text-custom-text-200 hover:text-custom-text-100"
-                                          />
-                                        </span>
-                                      </>
-                                    ) : (
-                                      <>
-                                        <Icon
-                                          iconName="group"
-                                          className="!text-sm text-custom-text-400"
-                                        />
-                                        <span className="text-custom-text-400">Lead</span>
-                                      </>
-                                    )}
-                                  </div>
-                                }
-                                verticalPosition="top"
-                                noChevron
-                              />
-                            );
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex justify-end gap-2 pt-5">
-                    <SecondaryButton onClick={handleClose}>取消</SecondaryButton>
-                    <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
-                      {isSubmitting ? "添加项目中..." : "添加项目"}
-                    </PrimaryButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
deleted file mode 100644
index e6834c9dc22..00000000000
--- a/apps/app/components/project/delete-project-modal.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
-// types
-import type { ICurrentUserResponse, IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-
-type TConfirmProjectDeletionProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-  data: IProject | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues = {
-  projectName: "",
-  confirmDelete: "",
-};
-
-export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
-  isOpen,
-  data,
-  onClose,
-  onSuccess,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-  } = useForm({ defaultValues });
-
-  const canDelete =
-    watch("projectName") === data?.name && watch("confirmDelete") === "delete my project";
-
-  const handleClose = () => {
-    const timer = setTimeout(() => {
-      reset(defaultValues);
-      clearTimeout(timer);
-    }, 350);
-
-    onClose();
-  };
-
-  const onSubmit = async () => {
-    if (!data || !workspaceSlug || !canDelete) return;
-
-    await projectService
-      .deleteProject(workspaceSlug.toString(), data.id, user)
-      .then(() => {
-        handleClose();
-
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
-          false
-        );
-
-        if (onSuccess) onSuccess();
-
-        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "出错了。请稍后再试",
-        })
-      );
-  };
-
-  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 bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl 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">
-                      <ExclamationTriangleIcon
-                        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">删除项目</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
-                      您确定要删除项目{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the
-                      data related to the project 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 project name{" "}
-                      <span className="font-medium text-custom-text-100">{data?.name}</span> to
-                      continue:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="projectName"
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          type="text"
-                          placeholder="Project name"
-                          className="mt-2"
-                          value={value}
-                          onChange={onChange}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="text-custom-text-200">
-                    <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete my project</span>{" "}
-                      below:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="confirmDelete"
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          type="text"
-                          placeholder="Enter 'delete my project'"
-                          className="mt-2"
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "删除中..." : "删除项目"}
-                    </DangerButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/project/index.ts b/apps/app/components/project/index.ts
deleted file mode 100644
index e5ece39559a..00000000000
--- a/apps/app/components/project/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./create-project-modal";
-export * from "./delete-project-modal";
-export * from "./sidebar-list";
-export * from "./settings-header"
-export * from "./single-integration-card";
-export * from "./single-project-card";
-export * from "./single-sidebar-project";
diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
deleted file mode 100644
index f2b5dc137f9..00000000000
--- a/apps/app/components/project/join-project-modal.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState } from "react";
-
-// headless ui
-import { Transition, Dialog } from "@headlessui/react";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// types
-import type { IProject } from "types";
-
-// type
-type TJoinProjectModalProps = {
-  data?: IProject;
-  onClose: () => void;
-  onJoin: () => Promise<void>;
-};
-
-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
-  const [isJoiningLoading, setIsJoiningLoading] = useState(false);
-
-  const handleJoin = () => {
-    setIsJoiningLoading(true);
-
-    onJoin()
-      .then(() => {
-        setIsJoiningLoading(false);
-        handleClose();
-      })
-      .catch(() => {
-        setIsJoiningLoading(false);
-      });
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <Transition.Root show={Boolean(data)} 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-[#131313] bg-opacity-50 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 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 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
-                <div className="space-y-5">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-custom-text-100"
-                  >
-                    Join Project?
-                  </Dialog.Title>
-                  <p>
-                    Are you sure you want to join{" "}
-                    <span className="font-semibold">{data?.name}</span>?
-                  </p>
-                  <div className="space-y-3" />
-                </div>
-                <div className="mt-5 flex justify-end gap-2">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <PrimaryButton type="submit" onClick={handleJoin} loading={isJoiningLoading}>
-                    {isJoiningLoading ? "加入..." : "加入项目"}
-                  </PrimaryButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/project/publish-project/modal.tsx b/apps/app/components/project/publish-project/modal.tsx
deleted file mode 100644
index 5f9d9ae2cbd..00000000000
--- a/apps/app/components/project/publish-project/modal.tsx
+++ /dev/null
@@ -1,474 +0,0 @@
-import React, { useEffect } from "react";
-// next imports
-import { useRouter } from "next/router";
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// ui components
-import { ToggleSwitch, PrimaryButton, SecondaryButton } from "components/ui";
-import { CustomPopover } from "./popover";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-import { IProjectPublishSettingsViews } from "store/project-publish";
-// hooks
-import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-
-type Props = {
-  // user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues: Partial<any> = {
-  id: null,
-  comments: false,
-  reactions: false,
-  votes: false,
-  inbox: null,
-  views: ["list", "kanban"],
-};
-
-const viewOptions = [
-  { key: "list", value: "List" },
-  { key: "kanban", value: "Kanban" },
-  // { key: "calendar", value: "Calendar" },
-  // { key: "gantt", value: "Gantt" },
-  // { key: "spreadsheet", value: "Spreadsheet" },
-];
-
-export const PublishProjectModal: React.FC<Props> = observer(() => {
-  const store: RootStore = useMobxStore();
-  const { projectPublish } = store;
-
-  const { projectDetails, mutateProjectDetails } = useProjectDetails();
-
-  const { setToastAlert } = useToast();
-  const handleToastAlert = (title: string, type: string, message: string) => {
-    setToastAlert({
-      title: title || "Title",
-      type: "error" || "warning",
-      message: message || "Message",
-    });
-  };
-
-  const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-  const plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL
-    ? NEXT_PUBLIC_DEPLOY_URL
-    : "http://localhost:3001";
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-    setValue,
-  } = useForm<any>({
-    defaultValues,
-    reValidateMode: "onChange",
-  });
-
-  const handleClose = () => {
-    projectPublish.handleProjectModal(null);
-    reset({ ...defaultValues });
-  };
-
-  useEffect(() => {
-    if (
-      projectPublish.projectPublishSettings &&
-      projectPublish.projectPublishSettings != "not-initialized"
-    ) {
-      let userBoards: string[] = [];
-      if (projectPublish.projectPublishSettings?.views) {
-        const _views: IProjectPublishSettingsViews | null =
-          projectPublish.projectPublishSettings?.views || null;
-        if (_views != null) {
-          if (_views.list) userBoards.push("list");
-          if (_views.kanban) userBoards.push("kanban");
-          if (_views.calendar) userBoards.push("calendar");
-          if (_views.gantt) userBoards.push("gantt");
-          if (_views.spreadsheet) userBoards.push("spreadsheet");
-          userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"];
-        }
-      }
-
-      const updatedData = {
-        id: projectPublish.projectPublishSettings?.id || null,
-        comments: projectPublish.projectPublishSettings?.comments || false,
-        reactions: projectPublish.projectPublishSettings?.reactions || false,
-        votes: projectPublish.projectPublishSettings?.votes || false,
-        inbox: projectPublish.projectPublishSettings?.inbox || null,
-        views: userBoards,
-      };
-      reset({ ...updatedData });
-    }
-  }, [reset, projectPublish.projectPublishSettings]);
-
-  useEffect(() => {
-    if (
-      projectPublish.projectPublishModal &&
-      workspaceSlug &&
-      projectPublish.project_id != null &&
-      projectPublish?.projectPublishSettings === "not-initialized"
-    ) {
-      projectPublish.getProjectSettingsAsync(
-        workspaceSlug as string,
-        projectPublish.project_id as string,
-        null
-      );
-    }
-  }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
-
-  const onSettingsPublish = async (formData: any) => {
-    if (formData.views && formData.views.length > 0) {
-      const payload = {
-        comments: formData.comments || false,
-        reactions: formData.reactions || false,
-        votes: formData.votes || false,
-        inbox: formData.inbox || null,
-        views: {
-          list: formData.views.includes("list") || false,
-          kanban: formData.views.includes("kanban") || false,
-          calendar: formData.views.includes("calendar") || false,
-          gantt: formData.views.includes("gantt") || false,
-          spreadsheet: formData.views.includes("spreadsheet") || false,
-        },
-      };
-
-      const _workspaceSlug = workspaceSlug;
-      const _projectId = projectPublish.project_id;
-
-      return projectPublish
-        .createProjectSettingsAsync(_workspaceSlug as string, _projectId as string, payload, null)
-        .then((response) => {
-          mutateProjectDetails();
-          handleClose();
-          console.log("_projectId", _projectId);
-          if (_projectId)
-            window.open(`${plane_deploy_url}/${_workspaceSlug}/${_projectId}`, "_blank");
-          return response;
-        })
-        .catch((error) => {
-          console.error("error", error);
-          return error;
-        });
-    } else {
-      handleToastAlert("Missing fields", "warning", "Please select at least one view to publish");
-    }
-  };
-
-  const onSettingsUpdate = async (key: string, value: any) => {
-    const payload = {
-      comments: key === "comments" ? value : watch("comments"),
-      reactions: key === "reactions" ? value : watch("reactions"),
-      votes: key === "votes" ? value : watch("votes"),
-      inbox: key === "inbox" ? value : watch("inbox"),
-      views:
-        key === "views"
-          ? {
-              list: value.includes("list") ? true : false,
-              kanban: value.includes("kanban") ? true : false,
-              calendar: value.includes("calendar") ? true : false,
-              gantt: value.includes("gantt") ? true : false,
-              spreadsheet: value.includes("spreadsheet") ? true : false,
-            }
-          : {
-              list: watch("views").includes("list") ? true : false,
-              kanban: watch("views").includes("kanban") ? true : false,
-              calendar: watch("views").includes("calendar") ? true : false,
-              gantt: watch("views").includes("gantt") ? true : false,
-              spreadsheet: watch("views").includes("spreadsheet") ? true : false,
-            },
-    };
-
-    return projectPublish
-      .updateProjectSettingsAsync(
-        workspaceSlug as string,
-        projectPublish.project_id as string,
-        watch("id"),
-        payload,
-        null
-      )
-      .then((response) => {
-        mutateProjectDetails();
-        return response;
-      })
-      .catch((error) => {
-        console.log("error", error);
-        return error;
-      });
-  };
-
-  const onSettingsUnPublish = async (formData: any) =>
-    projectPublish
-      .deleteProjectSettingsAsync(
-        workspaceSlug as string,
-        projectPublish.project_id as string,
-        formData?.id,
-        null
-      )
-      .then((response) => {
-        mutateProjectDetails();
-        reset({ ...defaultValues });
-        handleClose();
-        return response;
-      })
-      .catch((error) => {
-        console.error("error", error);
-        return error;
-      });
-
-  const CopyLinkToClipboard = ({ copy_link }: { copy_link: string }) => {
-    const [status, setStatus] = React.useState(false);
-
-    const copyText = () => {
-      navigator.clipboard.writeText(copy_link);
-      setStatus(true);
-      setTimeout(() => {
-        setStatus(false);
-      }, 1000);
-    };
-
-    return (
-      <div
-        className="border border-custom-border-100 bg-custom-background-100 text-xs px-2 min-w-[30px] h-[30px] rounded flex justify-center items-center hover:bg-custom-background-90 cursor-pointer"
-        onClick={() => copyText()}
-      >
-        {status ? "Copied" : "Copy Link"}
-      </div>
-    );
-  };
-
-  return (
-    <Transition.Root show={projectPublish.projectPublishModal} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-200"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-200"
-              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-100"
-              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="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 space-y-4">
-                {/* heading */}
-                <div className="p-3 px-4 pb-0 flex gap-2 justify-between items-center">
-                  <div className="font-medium text-xl">Publish</div>
-                  {projectPublish.loader && (
-                    <div className="text-xs text-custom-text-400">Changes saved</div>
-                  )}
-                  <div
-                    className="hover:bg-custom-background-90 w-[30px] h-[30px] rounded flex justify-center items-center cursor-pointer transition-all"
-                    onClick={handleClose}
-                  >
-                    <span className="material-symbols-rounded text-[16px]">close</span>
-                  </div>
-                </div>
-
-                {/* content */}
-                <div className="space-y-3">
-                  {watch("id") && (
-                    <div className="flex items-center gap-1 px-4 text-custom-primary-100">
-                      <div className="w-[20px] h-[20px] overflow-hidden flex items-center">
-                        <span className="material-symbols-rounded text-[18px]">
-                          radio_button_checked
-                        </span>
-                      </div>
-                      <div className="text-sm">This project is live on web</div>
-                    </div>
-                  )}
-
-                  <div className="mx-4 border border-custom-border-100 bg-custom-background-90 rounded p-3 py-2 relative flex gap-2 items-center">
-                    <div className="relative line-clamp-1 overflow-hidden w-full text-sm">
-                      {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                    </div>
-                    <div className="flex-shrink-0 relative flex items-center gap-1">
-                      <a
-                        href={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <div className="border border-custom-border-100 bg-custom-background-100 w-[30px] h-[30px] rounded flex justify-center items-center hover:bg-custom-background-90 cursor-pointer">
-                          <span className="material-symbols-rounded text-[16px]">open_in_new</span>
-                        </div>
-                      </a>
-                      <CopyLinkToClipboard
-                        copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-3 px-4">
-                    <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Views</div>
-                      <div>
-                        <CustomPopover
-                          label={
-                            watch("views") && watch("views").length > 0
-                              ? viewOptions
-                                  .filter(
-                                    (_view) => watch("views").includes(_view.key) && _view.value
-                                  )
-                                  .map((_view) => _view.value)
-                                  .join(", ")
-                              : ``
-                          }
-                          placeholder="Select views"
-                        >
-                          <>
-                            {viewOptions &&
-                              viewOptions.length > 0 &&
-                              viewOptions.map((_view) => (
-                                <div
-                                  key={_view.value}
-                                  className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
-                                    watch("views").includes(_view.key)
-                                      ? `bg-custom-background-80 text-custom-text-100`
-                                      : `hover:bg-custom-background-80 hover:text-custom-text-100`
-                                  }`}
-                                  onClick={() => {
-                                    const _views =
-                                      watch("views") && watch("views").length > 0
-                                        ? watch("views").includes(_view?.key)
-                                          ? watch("views").filter((_o: string) => _o !== _view?.key)
-                                          : [...watch("views"), _view?.key]
-                                        : [_view?.key];
-                                    setValue("views", _views);
-                                    if (watch("id") != null) onSettingsUpdate("views", _views);
-                                  }}
-                                >
-                                  <div className="text-sm">{_view.value}</div>
-                                  <div
-                                    className={`w-[18px] h-[18px] relative flex justify-center items-center`}
-                                  >
-                                    {watch("views") &&
-                                      watch("views").length > 0 &&
-                                      watch("views").includes(_view.key) && (
-                                        <span className="material-symbols-rounded text-[18px]">
-                                          done
-                                        </span>
-                                      )}
-                                  </div>
-                                </div>
-                              ))}
-                          </>
-                        </CustomPopover>
-                      </div>
-                    </div>
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow comments</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("comments") ?? false}
-                          onChange={() => {
-                            const _comments = !watch("comments");
-                            setValue("comments", _comments);
-                            if (watch("id") != null) onSettingsUpdate("comments", _comments);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow reactions</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("reactions") ?? false}
-                          onChange={() => {
-                            const _reactions = !watch("reactions");
-                            setValue("reactions", _reactions);
-                            if (watch("id") != null) onSettingsUpdate("reactions", _reactions);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow Voting</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("votes") ?? false}
-                          onChange={() => {
-                            const _votes = !watch("votes");
-                            setValue("votes", _votes);
-                            if (watch("id") != null) onSettingsUpdate("votes", _votes);
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-
-                    {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-custom-text-100">Allow issue proposals</div>
-                      <div>
-                        <ToggleSwitch
-                          value={watch("inbox") ?? false}
-                          onChange={() => {
-                            setValue("inbox", !watch("inbox"));
-                          }}
-                          size="sm"
-                        />
-                      </div>
-                    </div> */}
-                  </div>
-                </div>
-
-                {/* modal handlers */}
-                <div className="border-t border-custom-border-300 p-3 px-4 relative flex justify-between items-center">
-                  <div className="flex items-center gap-1 text-custom-text-300">
-                    <div className="w-[20px] h-[20px] overflow-hidden flex items-center">
-                      <span className="material-symbols-rounded text-[18px]">public</span>
-                    </div>
-                    <div className="text-sm">Anyone with the link can access</div>
-                  </div>
-                  <div className="relative flex items-center gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    {watch("id") != null ? (
-                      <PrimaryButton
-                        outline
-                        onClick={handleSubmit(onSettingsUnPublish)}
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting ? "Unpublishing..." : "Unpublish"}
-                      </PrimaryButton>
-                    ) : (
-                      <PrimaryButton
-                        onClick={handleSubmit(onSettingsPublish)}
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting ? "Publishing..." : "Publish"}
-                      </PrimaryButton>
-                    )}
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/apps/app/components/project/publish-project/popover.tsx b/apps/app/components/project/publish-project/popover.tsx
deleted file mode 100644
index 623675b9f7a..00000000000
--- a/apps/app/components/project/publish-project/popover.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Fragment } from "react";
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-
-export const CustomPopover = ({
-  children,
-  label,
-  placeholder = "Select",
-}: {
-  children: React.ReactNode;
-  label?: string;
-  placeholder?: string;
-}) => (
-  <div className="relative">
-    <Popover className="relative">
-      {({ open }) => (
-        <>
-          <Popover.Button
-            className={`${
-              open ? "" : ""
-            }  relative flex items-center gap-1 border border-custom-border-300 shadow-sm p-1 px-2 ring-0 outline-none`}
-          >
-            <div className="text-sm font-medium">
-              {label ? label : placeholder ? placeholder : "Select"}
-            </div>
-            <div className="w-[20px] h-[20px] relative flex justify-center items-center">
-              {!open ? (
-                <span className="material-symbols-rounded text-[20px]">expand_more</span>
-              ) : (
-                <span className="material-symbols-rounded text-[20px]">expand_less</span>
-              )}
-            </div>
-          </Popover.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel className="absolute right-0 z-[9999]">
-              <div className="overflow-hidden rounded-sm border border-custom-border-300 mt-1 overflow-y-auto bg-custom-background-90 shadow-lg focus:outline-none">
-                {children}
-              </div>
-            </Popover.Panel>
-          </Transition>
-        </>
-      )}
-    </Popover>
-  </div>
-);
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
deleted file mode 100644
index e3d9a5d2a47..00000000000
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-import { useForm, Controller, useFieldArray } from "react-hook-form";
-
-import { Dialog, Transition } from "@headlessui/react";
-// ui
-import {
-  Avatar,
-  CustomSearchSelect,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
-//icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-// services
-import projectService from "services/project.service";
-import workspaceService from "services/workspace.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// hooks
-import useToast from "hooks/use-toast";
-// types
-import { ICurrentUserResponse } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// constants
-import { ROLE } from "constants/workspace";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  members: any[];
-  user: ICurrentUserResponse | undefined;
-  onSuccess: () => void;
-};
-
-type member = {
-  role: 5 | 10 | 15 | 20;
-  member_id: string;
-};
-
-type FormValues = {
-  members: member[];
-};
-
-const defaultValues: FormValues = {
-  members: [
-    {
-      role: 5,
-      member_id: "",
-    },
-  ],
-};
-
-const SendProjectInvitationModal: React.FC<Props> = (props) => {
-  const { isOpen, setIsOpen, members, user, onSuccess } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-  const { memberDetails } = useProjectMyMembership();
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const {
-    formState: { errors, isSubmitting },
-    reset,
-    handleSubmit,
-    control,
-  } = useForm<FormValues>();
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "members",
-  });
-
-  const uninvitedPeople = people?.filter((person) => {
-    const isInvited = members?.find((member) => member.display_name === person.member.display_name);
-    return !isInvited;
-  });
-
-  const onSubmit = async (formData: FormValues) => {
-    if (!workspaceSlug || !projectId || isSubmitting) return;
-    const payload = { ...formData };
-    await projectService
-      .inviteProject(workspaceSlug as string, projectId as string, payload, user)
-      .then(() => {
-        setIsOpen(false);
-        setToastAlert({
-          title: "成功",
-          type: "success",
-          message: "成功添加成员",
-        });
-        onSuccess();
-      })
-      .catch((error) => {
-        console.log(error);
-      })
-      .finally(() => {
-        reset(defaultValues);
-      });
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    const timeout = setTimeout(() => {
-      reset(defaultValues);
-      clearTimeout(timeout);
-    }, 500);
-  };
-
-  const appendField = () => {
-    append({
-      role: 5,
-      member_id: "",
-    });
-  };
-
-  useEffect(() => {
-    if (fields.length === 0) {
-      append([
-        {
-          role: 5,
-          member_id: "",
-        },
-      ]);
-    }
-  }, [fields, append]);
-
-  const options = uninvitedPeople?.map((person) => ({
-    value: person.member.id,
-    query: person.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={person.member} />
-        {person.member.display_name}
-      </div>
-    ),
-  }));
-
-  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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex items-center justify-center min-h-full 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 transform rounded-lg border border-custom-border-200 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
-                <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
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        Invite members to work on your project.
-                      </p>
-                    </div>
-
-                    <div className="space-y-4 mb-3">
-                      {fields.map((field, index) => (
-                        <div
-                          key={field.id}
-                          className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start"
-                        >
-                          <div className="flex flex-col gap-1 col-span-7">
-                            <Controller
-                              control={control}
-                              name={`members.${index}.member_id`}
-                              rules={{ required: "Please select a member" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomSearchSelect
-                                  value={value}
-                                  customButton={
-                                    <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
-                                      {value && value !== "" ? (
-                                        <div className="flex items-center gap-2">
-                                          <Avatar
-                                            user={
-                                              people?.find((p) => p.member.id === value)?.member
-                                            }
-                                          />
-                                          {
-                                            people?.find((p) => p.member.id === value)?.member
-                                              .display_name
-                                          }
-                                        </div>
-                                      ) : (
-                                        <div>Select co-worker&rsquo;s email</div>
-                                      )}
-                                      <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                                    </button>
-                                  }
-                                  onChange={(val: string) => {
-                                    onChange(val);
-                                  }}
-                                  options={options}
-                                  position="left"
-                                  width="w-full min-w-[12rem]"
-                                />
-                              )}
-                            />
-                            {errors.members && errors.members[index]?.member_id && (
-                              <span className="text-sm px-1 text-red-500">
-                                {errors.members[index]?.member_id?.message}
-                              </span>
-                            )}
-                          </div>
-
-                          <div className="flex items-center justify-between gap-2 col-span-5">
-                            <div className="flex flex-col gap-1 w-full">
-                              <Controller
-                                name={`members.${index}.role`}
-                                control={control}
-                                rules={{ required: "Select Role" }}
-                                render={({ field }) => (
-                                  <CustomSelect
-                                    {...field}
-                                    label={
-                                      <span className="capitalize">
-                                        {field.value ? ROLE[field.value] : "Select role"}
-                                      </span>
-                                    }
-                                    input
-                                    width="w-full"
-                                  >
-                                    {Object.entries(ROLE).map(([key, label]) => {
-                                      if (parseInt(key) > (memberDetails?.role ?? 5)) return null;
-
-                                      return (
-                                        <CustomSelect.Option key={key} value={key}>
-                                          {label}
-                                        </CustomSelect.Option>
-                                      );
-                                    })}
-                                  </CustomSelect>
-                                )}
-                              />
-                              {errors.members && errors.members[index]?.role && (
-                                <span className="text-sm px-1 text-red-500">
-                                  {errors.members[index]?.role?.message}
-                                </span>
-                              )}
-                            </div>
-                            <div className="flex flex-item w-6">
-                              {fields.length > 1 && (
-                                <button
-                                  type="button"
-                                  className="self-center place-items-center rounded"
-                                  onClick={() => remove(index)}
-                                >
-                                  <XMarkIcon 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 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
-                      onClick={appendField}
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      Add more
-                    </button>
-                    <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
-                        {isSubmitting
-                          ? `${
-                              fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."
-                            }`
-                          : `${fields && fields.length > 1 ? "Add Members" : "Add Member"}`}
-                      </PrimaryButton>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export default SendProjectInvitationModal;
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
deleted file mode 100644
index ceefbfc0863..00000000000
--- a/apps/app/components/project/sidebar-list.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import React, { useState, FC, useRef, useEffect } from "react";
-
-import { useRouter } from "next/router";
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-import useProjects from "hooks/use-projects";
-// components
-import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
-// services
-import projectService from "services/project.service";
-// icons
-import { Icon } from "components/ui";
-import { PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-export const ProjectSidebarList: FC = () => {
-  const store: any = useMobxStore();
-
-  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
-  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
-  const [deleteProjectModal, setDeleteProjectModal] = useState(false);
-  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
-
-  // router
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUserAuth();
-  const { setToastAlert } = useToast();
-
-  const { projects: allProjects } = useProjects();
-
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-  const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
-
-  const orderedJoinedProjects: IProject[] | undefined = joinedProjects
-    ? orderArrayBy(joinedProjects, "sort_order", "ascending")
-    : undefined;
-
-  const orderedFavProjects: IProject[] | undefined = favoriteProjects
-    ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
-    : undefined;
-
-  const handleDeleteProject = (project: IProject) => {
-    setProjectToDelete(project);
-    setDeleteProjectModal(true);
-  };
-
-  const handleCopyText = (projectId: string) => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "链接已复制！",
-        message: "项目链接已复制到剪贴板",
-      });
-    });
-  };
-
-  const onDragEnd = async (result: DropResult) => {
-    const { source, destination, draggableId } = result;
-
-    if (!destination || !workspaceSlug) return;
-
-    if (source.index === destination.index) return;
-
-    const projectsList =
-      (destination.droppableId === "joined-projects"
-        ? orderedJoinedProjects
-        : orderedFavProjects) ?? [];
-
-    let updatedSortOrder = projectsList[source.index].sort_order;
-
-    if (destination.index === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
-    else if (destination.index === projectsList.length - 1)
-      updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
-    else {
-      const destinationSortingOrder = projectsList[destination.index].sort_order as number;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? (projectsList[destination.index + 1].sort_order as number)
-          : (projectsList[destination.index - 1].sort_order as number);
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) => {
-        if (!prevData) return prevData;
-        return prevData.map((p) =>
-          p.id === draggableId ? { ...p, sort_order: updatedSortOrder } : p
-        );
-      },
-      false
-    );
-
-    await projectService
-      .setProjectView(workspaceSlug as string, draggableId, { sort_order: updatedSortOrder })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
-      });
-  };
-
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const scrollTop = containerRef.current.scrollTop;
-      setIsScrolled(scrollTop > 0);
-    }
-  };
-
-  useEffect(() => {
-    const currentContainerRef = containerRef.current;
-
-    if (currentContainerRef) {
-      currentContainerRef.addEventListener("scroll", handleScroll);
-    }
-
-    return () => {
-      if (currentContainerRef) {
-        currentContainerRef.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      <CreateProjectModal
-        isOpen={isProjectModalOpen}
-        setIsOpen={setIsProjectModalOpen}
-        setToFavorite={isFavoriteProjectCreate}
-        user={user}
-      />
-      <DeleteProjectModal
-        isOpen={deleteProjectModal}
-        onClose={() => setDeleteProjectModal(false)}
-        data={projectToDelete}
-        user={user}
-      />
-      <div
-        ref={containerRef}
-        className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
-          isScrolled ? "border-t border-custom-sidebar-border-300" : ""
-        }`}
-      >
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="favorite-projects">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                {orderedFavProjects && orderedFavProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
-                    {({ open }) => (
-                      <>
-                        {!store?.theme?.sidebarCollapsed && (
-                          <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
-                            <Disclosure.Button
-                              as="button"
-                              type="button"
-                              className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
-                            >
-                              收藏夹
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
-                            </Disclosure.Button>
-                            <button
-                              className="group-hover:opacity-100 opacity-0"
-                              onClick={() => {
-                                setIsFavoriteProjectCreate(true);
-                                setIsProjectModalOpen(true);
-                              }}
-                            >
-                              <Icon iconName="add" />
-                            </button>
-                          </div>
-                        )}
-                        <Disclosure.Panel as="div" className="space-y-2">
-                          {orderedFavProjects.map((project, index) => (
-                            <Draggable
-                              key={project.id}
-                              draggableId={project.id}
-                              index={index}
-                              isDragDisabled={!project.is_member}
-                            >
-                              {(provided, snapshot) => (
-                                <div ref={provided.innerRef} {...provided.draggableProps}>
-                                  <SingleSidebarProject
-                                    key={project.id}
-                                    project={project}
-                                    sidebarCollapse={store?.theme?.sidebarCollapsed}
-                                    provided={provided}
-                                    snapshot={snapshot}
-                                    handleDeleteProject={() => handleDeleteProject(project)}
-                                    handleCopyText={() => handleCopyText(project.id)}
-                                    shortContextMenu
-                                  />
-                                </div>
-                              )}
-                            </Draggable>
-                          ))}
-                        </Disclosure.Panel>
-                        {provided.placeholder}
-                      </>
-                    )}
-                  </Disclosure>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="joined-projects">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                {orderedJoinedProjects && orderedJoinedProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
-                    {({ open }) => (
-                      <>
-                        {!store?.theme?.sidebarCollapsed && (
-                          <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
-                            <Disclosure.Button
-                              as="button"
-                              type="button"
-                              className="flex items-center gap-1 font-semibold text-left whitespace-nowrap"
-                            >
-                              项目
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
-                            </Disclosure.Button>
-                            <button
-                              className="group-hover:opacity-100 opacity-0"
-                              onClick={() => {
-                                setIsFavoriteProjectCreate(false);
-                                setIsProjectModalOpen(true);
-                              }}
-                            >
-                              <Icon iconName="add" />
-                            </button>
-                          </div>
-                        )}
-                        <Transition
-                          enter="transition duration-100 ease-out"
-                          enterFrom="transform scale-95 opacity-0"
-                          enterTo="transform scale-100 opacity-100"
-                          leave="transition duration-75 ease-out"
-                          leaveFrom="transform scale-100 opacity-100"
-                          leaveTo="transform scale-95 opacity-0"
-                        >
-                          <Disclosure.Panel as="div" className="space-y-2">
-                            {orderedJoinedProjects.map((project, index) => (
-                              <Draggable key={project.id} draggableId={project.id} index={index}>
-                                {(provided, snapshot) => (
-                                  <div ref={provided.innerRef} {...provided.draggableProps}>
-                                    <SingleSidebarProject
-                                      key={project.id}
-                                      project={project}
-                                      sidebarCollapse={store?.theme?.sidebarCollapsed}
-                                      provided={provided}
-                                      snapshot={snapshot}
-                                      handleDeleteProject={() => handleDeleteProject(project)}
-                                      handleCopyText={() => handleCopyText(project.id)}
-                                    />
-                                  </div>
-                                )}
-                              </Draggable>
-                            ))}
-                          </Disclosure.Panel>
-                        </Transition>
-                        {provided.placeholder}
-                      </>
-                    )}
-                  </Disclosure>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-
-        {joinedProjects && joinedProjects.length === 0 && (
-          <button
-            type="button"
-            className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "p",
-              });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-5 w-5" />
-            {!store?.theme?.sidebarCollapsed && "创建项目"}
-          </button>
-        )}
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/project/single-integration-card.tsx b/apps/app/components/project/single-integration-card.tsx
deleted file mode 100644
index 33261877acf..00000000000
--- a/apps/app/components/project/single-integration-card.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from "react";
-
-import Image from "next/image";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import projectService from "services/project.service";
-// hooks
-import { useRouter } from "next/router";
-import useToast from "hooks/use-toast";
-// components
-import { SelectRepository, SelectChannel } from "components/integration";
-// icons
-import GithubLogo from "public/logos/github-square.png";
-import SlackLogo from "public/services/slack.png";
-// types
-import { IWorkspaceIntegration } from "types";
-// fetch-keys
-import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
-
-type Props = {
-  integration: IWorkspaceIntegration;
-};
-
-const integrationDetails: { [key: string]: any } = {
-  github: {
-    logo: GithubLogo,
-    description: "Select GitHub repository to enable sync.",
-  },
-  slack: {
-    logo: SlackLogo,
-    description:
-      "Connect your slack channel to this project to get regular updates. Control which notification you want to receive.",
-  },
-};
-
-export const SingleIntegration: React.FC<Props> = ({ integration }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { data: syncedGithubRepository } = useSWR(
-    projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
-    () =>
-      workspaceSlug && projectId && integration
-        ? projectService.getProjectGithubRepository(
-            workspaceSlug as string,
-            projectId as string,
-            integration.id
-          )
-        : null
-  );
-
-  const handleChange = (repo: any) => {
-    if (!workspaceSlug || !projectId || !integration) return;
-
-    const {
-      html_url,
-      owner: { login },
-      id,
-      name,
-    } = repo;
-
-    projectService
-      .syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, {
-        name,
-        owner: login,
-        repository_id: id,
-        url: html_url,
-      })
-      .then(() => {
-        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: `${login}/${name} repository synced with the project successfully.`,
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "版本库无法与项目同步，请重试",
-        });
-      });
-  };
-
-  return (
-    <>
-      {integration && (
-        <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5">
-          <div className="flex items-start gap-4">
-            <div className="h-12 w-12 flex-shrink-0">
-              <Image
-                src={integrationDetails[integration.integration_detail.provider].logo}
-                alt={`${integration.integration_detail.title} Logo`}
-              />
-            </div>
-            <div>
-              <h3 className="flex items-center gap-4 text-xl font-semibold">
-                {integration.integration_detail.title}
-              </h3>
-              <p className="text-sm text-custom-text-200">
-                {integrationDetails[integration.integration_detail.provider].description}
-              </p>
-            </div>
-          </div>
-          {integration.integration_detail.provider === "github" && (
-            <SelectRepository
-              integration={integration}
-              value={
-                syncedGithubRepository && syncedGithubRepository.length > 0
-                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
-                  : null
-              }
-              label={
-                syncedGithubRepository && syncedGithubRepository.length > 0
-                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
-                  : "Select Repository"
-              }
-              onChange={handleChange}
-            />
-          )}
-          {integration.integration_detail.provider === "slack" && (
-            <SelectChannel integration={integration} />
-          )}
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
deleted file mode 100644
index 6353d643b62..00000000000
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ /dev/null
@@ -1,357 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Icon, Tooltip } from "components/ui";
-// icons
-import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
-import {
-  ArchiveOutlined,
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  ExpandMoreOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-  SettingsOutlined,
-} from "@mui/icons-material";
-// helpers
-import { truncateText } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-type Props = {
-  project: IProject;
-  sidebarCollapse: boolean;
-  provided?: DraggableProvided;
-  snapshot?: DraggableStateSnapshot;
-  handleDeleteProject: () => void;
-  handleCopyText: () => void;
-  shortContextMenu?: boolean;
-};
-
-const navigation = (workspaceSlug: string, projectId: string) => [
-  {
-    name: "任务",
-    href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    Icon: FilterNoneOutlined,
-  },
-  // {
-  //   name: "周期",
-  //   href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-  //   Icon: ContrastOutlined,
-  // },
-  // {
-  //   name: "模块",
-  //   href: `/${workspaceSlug}/projects/${projectId}/modules`,
-  //   Icon: DatasetOutlined,
-  // },
-  // {
-  //   name: "视图",
-  //   href: `/${workspaceSlug}/projects/${projectId}/views`,
-  //   Icon: PhotoFilterOutlined,
-  // },
-  // {
-  //   name: "页面",
-  //   href: `/${workspaceSlug}/projects/${projectId}/pages`,
-  //   Icon: ArticleOutlined,
-  // },
-  {
-    name: "设置",
-    href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    Icon: SettingsOutlined,
-  },
-];
-
-export const SingleSidebarProject: React.FC<Props> = observer(
-  ({
-    project,
-    sidebarCollapse,
-    provided,
-    snapshot,
-    handleDeleteProject,
-    handleCopyText,
-    shortContextMenu = false,
-  }) => {
-    const store: RootStore = useMobxStore();
-    const { projectPublish } = store;
-
-    const router = useRouter();
-    const { workspaceSlug, projectId } = router.query;
-
-    const { setToastAlert } = useToast();
-
-    const isAdmin = project.member_role === 20;
-
-    const handleAddToFavorites = () => {
-      if (!workspaceSlug) return;
-
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-        (prevData) =>
-          (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
-        false
-      );
-
-      projectService
-        .addProjectToFavorites(workspaceSlug as string, {
-          project: project.id,
-        })
-        .catch(() =>
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Couldn't remove the project from favorites. Please try again.",
-          })
-        );
-    };
-
-    const handleRemoveFromFavorites = () => {
-      if (!workspaceSlug) return;
-
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-        (prevData) =>
-          (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
-        false
-      );
-
-      projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "无法从收藏夹中删除项目，请重试",
-        })
-      );
-    };
-
-    return (
-      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
-        {({ open }) => (
-          <>
-            <div
-              className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
-                snapshot?.isDragging ? "opacity-60" : ""
-              }`}
-            >
-              {provided && (
-                <Tooltip
-                  tooltipContent={
-                    project.sort_order === null
-                      ? "Join the project to rearrange"
-                      : "Drag to rearrange"
-                  }
-                  position="top-right"
-                >
-                  <button
-                    type="button"
-                    className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-                      sidebarCollapse ? "" : "group-hover:!flex"
-                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
-                    {...provided?.dragHandleProps}
-                  >
-                    <EllipsisVerticalIcon className="h-4" />
-                    <EllipsisVerticalIcon className="-ml-5 h-4" />
-                  </button>
-                </Tooltip>
-              )}
-              <Tooltip
-                tooltipContent={`${project.name}`}
-                position="right"
-                className="ml-2"
-                disabled={!sidebarCollapse}
-              >
-                <Disclosure.Button
-                  as="div"
-                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
-                    sidebarCollapse ? "justify-center" : `justify-between`
-                  }`}
-                >
-                  <div
-                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
-                      sidebarCollapse ? "justify-center" : ""
-                    }`}
-                  >
-                    {project.emoji ? (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                        {renderEmoji(project.emoji)}
-                      </span>
-                    ) : project.icon_prop ? (
-                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
-                        {renderEmoji(project.icon_prop)}
-                      </div>
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {project?.name.charAt(0)}
-                      </span>
-                    )}
-
-                    {!sidebarCollapse && (
-                      <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
-                        {project.name}
-                      </p>
-                    )}
-                  </div>
-                  {!sidebarCollapse && (
-                    <ExpandMoreOutlined
-                      fontSize="small"
-                      className={`flex-shrink-0 ${
-                        open ? "rotate-180" : ""
-                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
-                    />
-                  )}
-                </Disclosure.Button>
-              </Tooltip>
-
-              {!sidebarCollapse && (
-                <CustomMenu
-                  className="hidden group-hover:block flex-shrink-0"
-                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
-                  ellipsis
-                >
-                  {!shortContextMenu && isAdmin && (
-                    <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                      <span className="flex items-center justify-start gap-2 ">
-                        <TrashIcon className="h-4 w-4" />
-                        <span>删除项目</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  {!project.is_favorite && (
-                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4" />
-                        <span>添加至收藏夹</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  {project.is_favorite && (
-                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                        <span>移除收藏夹</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-4 w-4" />
-                      <span>复制项目链接</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-
-                  {/* publish project settings */}
-                  {isAdmin && (
-                    <CustomMenu.MenuItem
-                      onClick={() => projectPublish.handleProjectModal(project?.id)}
-                    >
-                      <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
-                        <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
-                          <span className="material-symbols-rounded text-[16px]">ios_share</span>
-                        </div>
-                        <div>Publish</div>
-                      </div>
-                      {/* <PublishProjectModal /> */}
-                    </CustomMenu.MenuItem>
-                  )}
-
-                  {project.archive_in > 0 && (
-                    <CustomMenu.MenuItem
-                      onClick={() =>
-                        router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
-                      }
-                    >
-                      <div className="flex items-center justify-start gap-2">
-                        <ArchiveOutlined fontSize="small" />
-                        <span>Archived Issues</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem
-                    onClick={() =>
-                      router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)
-                    }
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <Icon iconName="settings" className="!text-base !leading-4" />
-                      <span>Settings</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              )}
-            </div>
-
-            <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom="transform scale-95 opacity-0"
-              enterTo="transform scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform scale-100 opacity-100"
-              leaveTo="transform scale-95 opacity-0"
-            >
-              <Disclosure.Panel
-                className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}
-              >
-                {navigation(workspaceSlug as string, project?.id).map((item) => {
-                  if (
-                    (item.name === "Cycles" && !project.cycle_view) ||
-                    (item.name === "Modules" && !project.module_view) ||
-                    (item.name === "Views" && !project.issue_views_view) ||
-                    (item.name === "Pages" && !project.page_view)
-                  )
-                    return;
-
-                  return (
-                    <Link key={item.name} href={item.href}>
-                      <a className="block w-full">
-                        <Tooltip
-                          tooltipContent={`${project?.name}: ${item.name}`}
-                          position="right"
-                          className="ml-2"
-                          disabled={!sidebarCollapse}
-                        >
-                          <div
-                            className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
-                              router.asPath.includes(item.href)
-                                ? "bg-custom-primary-100/10 text-custom-primary-100"
-                                : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                            } ${sidebarCollapse ? "justify-center" : ""}`}
-                          >
-                            <item.Icon
-                              sx={{
-                                fontSize: 18,
-                              }}
-                            />
-                            {!sidebarCollapse && item.name}
-                          </div>
-                        </Tooltip>
-                      </a>
-                    </Link>
-                  );
-                })}
-              </Disclosure.Panel>
-            </Transition>
-          </>
-        )}
-      </Disclosure>
-    );
-  }
-);
diff --git a/apps/app/components/search-listbox/index.tsx b/apps/app/components/search-listbox/index.tsx
deleted file mode 100644
index bd60deaaba9..00000000000
--- a/apps/app/components/search-listbox/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Transition, Combobox } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
-// types
-import type { Props } from "./types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-const SearchListbox: React.FC<Props> = ({
-  title,
-  options,
-  onChange,
-  value,
-  multiple: canSelectMultiple,
-  icon,
-  optionsFontsize,
-  buttonClassName,
-  optionsClassName,
-  assignee = false,
-}) => {
-  const [query, setQuery] = useState("");
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
-
-  const props: any = {
-    value,
-    onChange,
-  };
-
-  if (canSelectMultiple) {
-    props.value = props.value ?? [];
-    props.onChange = (value: string[]) => {
-      onChange(value);
-    };
-    props.multiple = true;
-  }
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const userAvatar = (userId: string) => {
-    const user = people?.find((p) => p.member.id === userId);
-
-    if (!user) return;
-
-    if (user.member.avatar && user.member.avatar !== "") {
-      return (
-        <div className="relative h-4 w-4">
-          <img
-            src={user.member.avatar}
-            className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-            alt="avatar"
-          />
-        </div>
-      );
-    } else
-      return (
-        <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-          {user.member.display_name.charAt(0)}
-        </div>
-      );
-  };
-
-  return (
-    <Combobox as="div" {...props} className="relative flex-shrink-0">
-      {({ open }: any) => (
-        <>
-          <Combobox.Label className="sr-only">{title}</Combobox.Label>
-          <Combobox.Button
-            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
-              buttonClassName || ""
-            }`}
-          >
-            {icon ?? null}
-            <span
-              className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-custom-text-100"
-              }`}
-            >
-              {Array.isArray(value)
-                ? value
-                    .map((v) => options?.find((option) => option.value === v)?.display)
-                    .join(", ") || title
-                : options?.find((option) => option.value === value)?.display || title}
-            </span>
-          </Combobox.Button>
-
-          <Transition
-            show={open}
-            as={React.Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-custom-background-80 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
-                optionsFontsize === "sm"
-                  ? "text-xs"
-                  : optionsFontsize === "md"
-                  ? "text-base"
-                  : optionsFontsize === "lg"
-                  ? "text-lg"
-                  : optionsFontsize === "xl"
-                  ? "text-xl"
-                  : optionsFontsize === "2xl"
-                  ? "text-2xl"
-                  : ""
-              } ${optionsClassName || ""}`}
-            >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
-                {filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((option) => (
-                      <Combobox.Option
-                        key={option.value}
-                        className={({ active }) =>
-                          `${
-                            active ? "bg-indigo-50" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-custom-text-100`
-                        }
-                        value={option.value}
-                      >
-                        {assignee && userAvatar(option.value)}
-                        {option.element ?? option.display}
-                      </Combobox.Option>
-                    ))
-                  ) : (
-                    <p className="text-xs text-custom-text-200 px-2">
-                      No {title.toLowerCase()} found
-                    </p>
-                  )
-                ) : (
-                  <p className="text-xs text-custom-text-200 px-2">Loading...</p>
-                )}
-              </div>
-            </Combobox.Options>
-          </Transition>
-        </>
-      )}
-    </Combobox>
-  );
-};
-
-export default SearchListbox;
diff --git a/apps/app/components/search-listbox/types.d.ts b/apps/app/components/search-listbox/types.d.ts
deleted file mode 100644
index c9ffa6af3ca..00000000000
--- a/apps/app/components/search-listbox/types.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-type Value = any;
-
-export type Props = {
-  title: string;
-  multiple?: boolean;
-  options?: Array<{ display: string; element?: JSX.Element; value: Value }>;
-  onChange: (value: Value) => void;
-  value: Value;
-  icon?: JSX.Element;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
-  assignee?: boolean;
-};
diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
deleted file mode 100644
index 967b93abb93..00000000000
--- a/apps/app/components/states/create-state-modal.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// react-color
-import { TwitterPicker } from "react-color";
-// headless ui
-import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
-import stateService from "services/state.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
-// fetch keys
-import { STATES_LIST } from "constants/fetch-keys";
-// constants
-import { GROUP_CHOICES } from "constants/project";
-
-// types
-type Props = {
-  isOpen: boolean;
-  projectId: string;
-  handleClose: () => void;
-  user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues: Partial<IState> = {
-  name: "",
-  description: "",
-  color: "rgb(var(--color-text-200))",
-  group: "backlog",
-};
-
-export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-    control,
-    reset,
-  } = useForm<IState>({
-    defaultValues,
-  });
-
-  const onClose = () => {
-    handleClose();
-    reset(defaultValues);
-  };
-
-  const onSubmit = async (formData: IState) => {
-    if (!workspaceSlug) return;
-
-    const payload: IState = {
-      ...formData,
-    };
-
-    await stateService
-      .createState(workspaceSlug as string, projectId, payload, user)
-      .then((res) => {
-        mutate<IStateResponse>(
-          STATES_LIST(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              [res.group]: [...prevData[res.group], res],
-            };
-          },
-          false
-        );
-        onClose();
-      })
-      .catch((err) => {
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "存在另一个同名的任务。请使用其他名称重试。",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "错误!",
-            message: "无法创建状态。请重试。",
-          });
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <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-[#131313] bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-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-80 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
-                      Create State
-                    </Dialog.Title>
-                    <div className="mt-2 space-y-3">
-                      <div>
-                        <Input
-                          id="name"
-                          label="Name"
-                          name="name"
-                          type="name"
-                          placeholder="Enter name"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          validations={{
-                            required: "Name is required",
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <Controller
-                          control={control}
-                          rules={{ required: true }}
-                          name="group"
-                          render={({ field: { value, onChange } }) => (
-                            <CustomSelect
-                              value={value}
-                              label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
-                              onChange={onChange}
-                              width="w-full"
-                              input
-                            >
-                              {Object.keys(GROUP_CHOICES).map((key) => (
-                                <CustomSelect.Option key={key} value={key}>
-                                  {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
-                                </CustomSelect.Option>
-                              ))}
-                            </CustomSelect>
-                          )}
-                        />
-                      </div>
-                      <div>
-                        <Popover className="relative">
-                          {({ open }) => (
-                            <>
-                              <Popover.Button
-                                className={`group inline-flex items-center rounded-md bg-custom-background-80 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                  open ? "text-custom-text-100" : "text-custom-text-200"
-                                }`}
-                              >
-                                <span>Color</span>
-                                {watch("color") && watch("color") !== "" && (
-                                  <span
-                                    className="ml-2 h-4 w-4 rounded"
-                                    style={{
-                                      backgroundColor: watch("color") ?? "black",
-                                    }}
-                                  />
-                                )}
-                                <ChevronDownIcon
-                                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
-                                    open ? "text-gray-600" : "text-gray-400"
-                                  }`}
-                                  aria-hidden="true"
-                                />
-                              </Popover.Button>
-
-                              <Transition
-                                as={React.Fragment}
-                                enter="transition ease-out duration-200"
-                                enterFrom="opacity-0 translate-y-1"
-                                enterTo="opacity-100 translate-y-0"
-                                leave="transition ease-in duration-150"
-                                leaveFrom="opacity-100 translate-y-0"
-                                leaveTo="opacity-0 translate-y-1"
-                              >
-                                <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
-                                  <Controller
-                                    name="color"
-                                    control={control}
-                                    render={({ field: { value, onChange } }) => (
-                                      <TwitterPicker
-                                        color={value}
-                                        onChange={(value) => onChange(value.hex)}
-                                      />
-                                    )}
-                                  />
-                                </Popover.Panel>
-                              </Transition>
-                            </>
-                          )}
-                        </Popover>
-                      </div>
-                      <div>
-                        <TextArea
-                          id="description"
-                          name="description"
-                          label="Description"
-                          placeholder="Enter description"
-                          error={errors.description}
-                          register={register}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Creating State..." : "Create State"}
-                    </PrimaryButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/states/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
deleted file mode 100644
index 70131628742..00000000000
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { useForm, Controller } from "react-hook-form";
-// react-color
-import { TwitterPicker } from "react-color";
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// services
-import stateService from "services/state.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
-// types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
-// constants
-import { GROUP_CHOICES } from "constants/project";
-
-type Props = {
-  data: IState | null;
-  onClose: () => void;
-  selectedGroup: StateGroup | null;
-  user: ICurrentUserResponse | undefined;
-  groupLength: number;
-};
-
-export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
-
-const defaultValues: Partial<IState> = {
-  name: "",
-  color: "rgb(var(--color-text-200))",
-  group: "backlog",
-};
-
-export const CreateUpdateStateInline: React.FC<Props> = ({
-  data,
-  onClose,
-  selectedGroup,
-  user,
-  groupLength,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    watch,
-    reset,
-    control,
-  } = useForm<IState>({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (!data) return;
-
-    reset(data);
-  }, [data, reset]);
-
-  useEffect(() => {
-    if (data) return;
-
-    reset({
-      ...defaultValues,
-      group: selectedGroup ?? "backlog",
-    });
-  }, [selectedGroup, data, reset]);
-
-  const handleClose = () => {
-    onClose();
-    reset({ name: "", color: "#000000", group: "backlog" });
-  };
-
-  const onSubmit = async (formData: IState) => {
-    if (!workspaceSlug || !projectId || isSubmitting) return;
-
-    const payload: IState = {
-      ...formData,
-    };
-
-    if (!data) {
-      await stateService
-        .createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user)
-        .then((res) => {
-          mutate<IStateResponse>(
-            STATES_LIST(projectId.toString()),
-            (prevData) => {
-              if (!prevData) return prevData;
-
-              return {
-                ...prevData,
-                [res.group]: [...prevData[res.group], res],
-              };
-            },
-            false
-          );
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "成功!",
-            message: "成功创建状态。",
-          });
-        })
-        .catch((err) => {
-          if (err.status === 400)
-            setToastAlert({
-              type: "error",
-              title: "错误!",
-              message: "已存在使用该名称的国家。请使用其他名称重试。",
-            });
-          else
-            setToastAlert({
-              type: "error",
-              title: "错误!",
-              message: "无法创建状态。请重试",
-            });
-        });
-    } else {
-      await stateService
-        .updateState(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          data.id,
-          {
-            ...payload,
-          },
-          user
-        )
-        .then(() => {
-          mutate(STATES_LIST(projectId.toString()));
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "State updated successfully.",
-          });
-        })
-        .catch((err) => {
-          if (err.status === 400)
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message:
-                "Another state exists with the same name. Please try again with another name.",
-            });
-          else
-            setToastAlert({
-              type: "error",
-              title: "Error!",
-              message: "State could not be updated. Please try again.",
-            });
-        });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-custom-background-100 p-5"
-    >
-      <div className="flex-shrink-0">
-        <Popover className="relative flex h-full w-full items-center justify-center">
-          {({ open }) => (
-            <>
-              <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                  open ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              >
-                {watch("color") && watch("color") !== "" && (
-                  <span
-                    className="h-5 w-5 rounded"
-                    style={{
-                      backgroundColor: watch("color") ?? "black",
-                    }}
-                  />
-                )}
-              </Popover.Button>
-
-              <Transition
-                as={React.Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-                  <Controller
-                    name="color"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
-                    )}
-                  />
-                </Popover.Panel>
-              </Transition>
-            </>
-          )}
-        </Popover>
-      </div>
-      <Input
-        id="name"
-        name="name"
-        register={register}
-        autoFocus
-        placeholder="Name"
-        validations={{
-          required: true,
-        }}
-        error={errors.name}
-        autoComplete="off"
-      />
-      {data && (
-        <Controller
-          name="group"
-          control={control}
-          render={({ field: { value, onChange } }) => (
-            <Tooltip
-              tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
-            >
-              <div>
-                <CustomSelect
-                  disabled={groupLength === 1}
-                  value={value}
-                  onChange={onChange}
-                  label={
-                    Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
-                      ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
-                      : "Select group"
-                  }
-                  input
-                >
-                  {Object.keys(GROUP_CHOICES).map((key) => (
-                    <CustomSelect.Option key={key} value={key}>
-                      {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              </div>
-            </Tooltip>
-          )}
-        />
-      )}
-      <Input
-        id="description"
-        name="description"
-        register={register}
-        placeholder="Description"
-        error={errors.description}
-        autoComplete="off"
-      />
-      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-      <PrimaryButton type="submit" loading={isSubmitting}>
-        {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
-      </PrimaryButton>
-    </form>
-  );
-};
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
deleted file mode 100644
index bbc115ef6fb..00000000000
--- a/apps/app/components/states/delete-state-modal.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// services
-import stateServices from "services/state.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  data: IState | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    onClose();
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    if (!workspaceSlug || !data) return;
-
-    setIsDeleteLoading(true);
-
-    await stateServices
-      .deleteState(workspaceSlug as string, data.project, data.id, user)
-      .then(() => {
-        mutate<IStateResponse>(
-          STATES_LIST(data.project),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            const stateGroup = [...prevData[data.group]].filter((s) => s.id !== data.id);
-
-            return {
-              ...prevData,
-              [data.group]: stateGroup,
-            };
-          },
-          false
-        );
-        handleClose();
-      })
-      .catch((err) => {
-        setIsDeleteLoading(false);
-
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message:
-              "This state contains some issues within it, please move them to some other state to delete this state.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "State could not be deleted. Please try again.",
-          });
-      });
-  };
-
-  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-[#131313] bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete State
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
-                          All of the data related to the state will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/states/index.ts b/apps/app/components/states/index.ts
deleted file mode 100644
index 39285a77f5d..00000000000
--- a/apps/app/components/states/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./create-update-state-inline";
-export * from "./create-state-modal";
-export * from "./delete-state-modal";
-export * from "./single-state";
diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
deleted file mode 100644
index 813afdc79bc..00000000000
--- a/apps/app/components/states/single-state.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import stateService from "services/state.service";
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  PencilSquareIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { groupBy, orderArrayBy } from "helpers/array.helper";
-import { orderStateGroups } from "helpers/state.helper";
-// types
-import { ICurrentUserResponse, IState } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  index: number;
-  state: IState;
-  statesList: IState[];
-  handleEditState: () => void;
-  handleDeleteState: () => void;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const SingleState: React.FC<Props> = ({
-  index,
-  state,
-  statesList,
-  handleEditState,
-  handleDeleteState,
-  user,
-}) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const groupStates = statesList.filter((s) => s.group === state.group);
-  const groupLength = groupStates.length;
-
-  const handleMakeDefault = () => {
-    setIsSubmitting(true);
-
-    const currentDefaultState = statesList.find((s) => s.default);
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
-
-    if (currentDefaultState)
-      stateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          currentDefaultState?.id ?? "",
-          {
-            default: false,
-          },
-          user
-        )
-        .then(() => {
-          stateService
-            .patchState(
-              workspaceSlug as string,
-              projectId as string,
-              state.id,
-              {
-                default: true,
-              },
-              user
-            )
-            .then(() => {
-              mutate(STATES_LIST(projectId as string));
-              setIsSubmitting(false);
-            })
-            .catch(() => {
-              setIsSubmitting(false);
-            });
-        });
-    else
-      stateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          state.id,
-          {
-            default: true,
-          },
-          user
-        )
-        .then(() => {
-          mutate(STATES_LIST(projectId as string));
-          setIsSubmitting(false);
-        })
-        .catch(() => {
-          setIsSubmitting(false);
-        });
-  };
-
-  const handleMove = (state: IState, direction: "up" | "down") => {
-    let newSequence = 15000;
-
-    if (direction === "up") {
-      if (index === 1) newSequence = groupStates[0].sequence - 15000;
-      else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
-    } else {
-      if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
-      else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
-    }
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      sequence: s.id === state.id ? newSequence : s.sequence,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
-
-    stateService
-      .patchState(
-        workspaceSlug as string,
-        projectId as string,
-        state.id,
-        {
-          sequence: newSequence,
-        },
-        user
-      )
-      .then((res) => {
-        console.log(res);
-        mutate(STATES_LIST(projectId as string));
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
-  return (
-    <div className="group flex items-center justify-between gap-2 border-custom-border-200 bg-custom-background-100 p-5 first:rounded-t-[10px] last:rounded-b-[10px]">
-      <div className="flex items-center gap-3">
-        {getStateGroupIcon(state.group, "20", "20", state.color)}
-        <div>
-          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
-          <p className="text-xs text-custom-text-200">{state.description}</p>
-        </div>
-      </div>
-      <div className="flex items-center gap-2">
-        {index !== 0 && (
-          <button
-            type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
-            onClick={() => handleMove(state, "up")}
-          >
-            <ArrowUpIcon className="h-4 w-4" />
-          </button>
-        )}
-        {!(index === groupLength - 1) && (
-          <button
-            type="button"
-            className="hidden text-custom-text-200 group-hover:inline-block"
-            onClick={() => handleMove(state, "down")}
-          >
-            <ArrowDownIcon className="h-4 w-4" />
-          </button>
-        )}
-        {state.default ? (
-          <span className="text-xs text-custom-text-200">Default</span>
-        ) : (
-          <button
-            type="button"
-            className="hidden text-xs text-custom-text-200 group-hover:inline-block"
-            onClick={handleMakeDefault}
-            disabled={isSubmitting}
-          >
-            Set as default
-          </button>
-        )}
-
-        <button type="button" className="grid place-items-center" onClick={handleEditState}>
-          <PencilSquareIcon className="h-4 w-4 text-custom-text-200" />
-        </button>
-        <button
-          type="button"
-          className={`${
-            state.default || groupLength === 1 ? "cursor-not-allowed" : ""
-          } grid place-items-center`}
-          onClick={handleDeleteState}
-          disabled={state.default || groupLength === 1}
-        >
-          {state.default ? (
-            <Tooltip tooltipContent="Cannot delete the default state.">
-              <TrashIcon className="h-4 w-4 text-red-500" />
-            </Tooltip>
-          ) : groupLength === 1 ? (
-            <Tooltip tooltipContent="Cannot have an empty group.">
-              <TrashIcon className="h-4 w-4 text-red-500" />
-            </Tooltip>
-          ) : (
-            <TrashIcon className="h-4 w-4 text-red-500" />
-          )}
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/tiptap/bubble-menu/index.tsx b/apps/app/components/tiptap/bubble-menu/index.tsx
deleted file mode 100644
index e689007829b..00000000000
--- a/apps/app/components/tiptap/bubble-menu/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
-import { FC, useState } from "react";
-import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
-
-import { NodeSelector } from "./node-selector";
-import { LinkSelector } from "./link-selector";
-import { cn } from "../utils";
-
-export interface BubbleMenuItem {
-  name: string;
-  isActive: () => boolean;
-  command: () => void;
-  icon: typeof BoldIcon;
-}
-
-type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
-
-export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  const items: BubbleMenuItem[] = [
-    {
-      name: "bold",
-      isActive: () => props.editor?.isActive("bold"),
-      command: () => props.editor?.chain().focus().toggleBold().run(),
-      icon: BoldIcon,
-    },
-    {
-      name: "italic",
-      isActive: () => props.editor?.isActive("italic"),
-      command: () => props.editor?.chain().focus().toggleItalic().run(),
-      icon: ItalicIcon,
-    },
-    {
-      name: "underline",
-      isActive: () => props.editor?.isActive("underline"),
-      command: () => props.editor?.chain().focus().toggleUnderline().run(),
-      icon: UnderlineIcon,
-    },
-    {
-      name: "strike",
-      isActive: () => props.editor?.isActive("strike"),
-      command: () => props.editor?.chain().focus().toggleStrike().run(),
-      icon: StrikethroughIcon,
-    },
-    {
-      name: "code",
-      isActive: () => props.editor?.isActive("code"),
-      command: () => props.editor?.chain().focus().toggleCode().run(),
-      icon: CodeIcon,
-    },
-  ];
-
-  const bubbleMenuProps: EditorBubbleMenuProps = {
-    ...props,
-    shouldShow: ({ editor }) => {
-      if (!editor.isEditable) {
-        return false;
-      }
-      if (editor.isActive("image")) {
-        return false;
-      }
-      return editor.view.state.selection.content().size > 0;
-    },
-    tippyOptions: {
-      moveTransition: "transform 0.15s ease-out",
-      onHidden: () => {
-        setIsNodeSelectorOpen(false);
-        setIsLinkSelectorOpen(false);
-      },
-    },
-  };
-
-  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
-
-  return (
-    <BubbleMenu
-      {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-    >
-      <NodeSelector
-        editor={props.editor!}
-        isOpen={isNodeSelectorOpen}
-        setIsOpen={() => {
-          setIsNodeSelectorOpen(!isNodeSelectorOpen);
-          setIsLinkSelectorOpen(false);
-        }}
-      />
-      <LinkSelector
-        editor={props.editor!!}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-    </BubbleMenu>
-  );
-};
diff --git a/apps/app/components/tiptap/bubble-menu/node-selector.tsx b/apps/app/components/tiptap/bubble-menu/node-selector.tsx
deleted file mode 100644
index f6f1f18dc5a..00000000000
--- a/apps/app/components/tiptap/bubble-menu/node-selector.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Editor } from "@tiptap/core";
-import {
-  Check,
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  TextQuote,
-  ListOrdered,
-  TextIcon,
-  Code,
-  CheckSquare,
-} from "lucide-react";
-import { Dispatch, FC, SetStateAction } from "react";
-
-import { BubbleMenuItem } from "../bubble-menu";
-import { cn } from "../utils";
-
-interface NodeSelectorProps {
-  editor: Editor;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
-  const items: BubbleMenuItem[] = [
-    {
-      name: "Text",
-      icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
-      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
-    },
-    {
-      name: "H1",
-      icon: Heading1,
-      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editor.isActive("heading", { level: 1 }),
-    },
-    {
-      name: "H2",
-      icon: Heading2,
-      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editor.isActive("heading", { level: 2 }),
-    },
-    {
-      name: "H3",
-      icon: Heading3,
-      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editor.isActive("heading", { level: 3 }),
-    },
-    {
-      name: "To-do List",
-      icon: CheckSquare,
-      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskItem"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
-    {
-      name: "Quote",
-      icon: TextQuote,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
-      isActive: () => editor.isActive("blockquote"),
-    },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
-  ];
-
-  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
-    name: "Multiple",
-  };
-
-  return (
-    <div className="relative h-full">
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
-      >
-        <span>{activeItem?.name}</span>
-        <ChevronDown className="h-4 w-4" />
-      </button>
-
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
-          {items.map((item, index) => (
-            <button
-              key={index}
-              type="button"
-              onClick={() => {
-                item.command();
-                setIsOpen(false);
-              }}
-              className={cn(
-                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
-                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
-              )}
-            >
-              <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-custom-border-300 p-1">
-                  <item.icon className="h-3 w-3" />
-                </div>
-                <span>{item.name}</span>
-              </div>
-              {activeItem.name === item.name && <Check className="h-4 w-4" />}
-            </button>
-          ))}
-        </section>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx b/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx
deleted file mode 100644
index 5b05811d63f..00000000000
--- a/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function isValidHttpUrl(string: string): boolean {
-  let url;
-
-  try {
-    url = new URL(string);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === "http:" || url.protocol === "https:";
-}
-
diff --git a/apps/app/components/tiptap/extensions/image-resize.tsx b/apps/app/components/tiptap/extensions/image-resize.tsx
deleted file mode 100644
index 7b2d1a2d336..00000000000
--- a/apps/app/components/tiptap/extensions/image-resize.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Editor } from "@tiptap/react";
-import Moveable from "react-moveable";
-
-export const ImageResizer = ({ editor }: { editor: Editor }) => {
-  const updateMediaSize = () => {
-    const imageInfo = document.querySelector(
-      ".ProseMirror-selectednode",
-    ) as HTMLImageElement;
-    if (imageInfo) {
-      const selection = editor.state.selection;
-      editor.commands.setImage({
-        src: imageInfo.src,
-        width: Number(imageInfo.style.width.replace("px", "")),
-        height: Number(imageInfo.style.height.replace("px", "")),
-      } as any);
-      editor.commands.setNodeSelection(selection.from);
-    }
-  };
-
-  return (
-    <>
-      <Moveable
-        target={document.querySelector(".ProseMirror-selectednode") as any}
-        container={null}
-        origin={false}
-        edge={false}
-        throttleDrag={0}
-        keepRatio={true}
-        resizable={true}
-        throttleResize={0}
-        onResize={({
-          target,
-          width,
-          height,
-          delta,
-        }:
-          any) => {
-          delta[0] && (target!.style.width = `${width}px`);
-          delta[1] && (target!.style.height = `${height}px`);
-        }}
-        onResizeEnd={() => {
-          updateMediaSize();
-        }}
-        scalable={true}
-        renderDirections={["w", "e"]}
-        onScale={({
-          target,
-          transform,
-        }:
-          any) => {
-          target!.style.transform = transform;
-        }}
-      />
-    </>
-  );
-};
-
diff --git a/apps/app/components/tiptap/extensions/updated-image.tsx b/apps/app/components/tiptap/extensions/updated-image.tsx
deleted file mode 100644
index 01648dcd701..00000000000
--- a/apps/app/components/tiptap/extensions/updated-image.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Image from "@tiptap/extension-image";
-import TrackImageDeletionPlugin from "../plugins/delete-image";
-import UploadImagesPlugin from "../plugins/upload-image";
-
-const UpdatedImage = Image.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin(), TrackImageDeletionPlugin()];
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: '35%',
-      },
-      height: {
-        default: null,
-      },
-    };
-  },
-});
-
-export default UpdatedImage;
diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
deleted file mode 100644
index f0315cad4a6..00000000000
--- a/apps/app/components/tiptap/index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useEditor, EditorContent, Editor } from "@tiptap/react";
-import { useDebouncedCallback } from "use-debounce";
-import { EditorBubbleMenu } from "./bubble-menu";
-import { TiptapExtensions } from "./extensions";
-import { TiptapEditorProps } from "./props";
-import { useImperativeHandle, useRef, forwardRef } from "react";
-import { ImageResizer } from "./extensions/image-resize";
-
-export interface ITipTapRichTextEditor {
-  value: string;
-  noBorder?: boolean;
-  borderOnFocus?: boolean;
-  customClassName?: string;
-  editorContentCustomClassNames?: string;
-  onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
-  setShouldShowAlert?: (showAlert: boolean) => void;
-  workspaceSlug: string;
-  editable?: boolean;
-  forwardedRef?: any;
-  debouncedUpdatesEnabled?: boolean;
-}
-
-const Tiptap = (props: ITipTapRichTextEditor) => {
-  const {
-    onChange,
-    debouncedUpdatesEnabled,
-    forwardedRef,
-    editable,
-    setIsSubmitting,
-    setShouldShowAlert,
-    editorContentCustomClassNames,
-    value,
-    noBorder,
-    workspaceSlug,
-    borderOnFocus,
-    customClassName,
-  } = props;
-
-  const editor = useEditor({
-    editable: editable ?? true,
-    editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
-    extensions: TiptapExtensions(workspaceSlug, setIsSubmitting),
-    content: value,
-    onUpdate: async ({ editor }) => {
-      // for instant feedback loop
-      setIsSubmitting?.("submitting");
-      setShouldShowAlert?.(true);
-      if (debouncedUpdatesEnabled) {
-        debouncedUpdates({ onChange, editor });
-      } else {
-        onChange?.(editor.getJSON(), editor.getHTML());
-      }
-    },
-  });
-
-  const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
-
-  useImperativeHandle(forwardedRef, () => ({
-    clearEditor: () => {
-      editorRef.current?.commands.clearContent();
-    },
-    setEditorValue: (content: string) => {
-      editorRef.current?.commands.setContent(content);
-    },
-  }));
-
-  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
-    setTimeout(async () => {
-      if (onChange) {
-        onChange(editor.getJSON(), editor.getHTML());
-      }
-    }, 500);
-  }, 1000);
-
-  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${
-        borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-      } ${customClassName}`;
-
-  if (!editor) return null;
-  editorRef.current = editor;
-
-  return (
-    <div
-      id="tiptap-container"
-      onClick={() => {
-        editor?.chain().focus().run();
-      }}
-      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
-    >
-      {editor && <EditorBubbleMenu editor={editor} />}
-      <div className={`${editorContentCustomClassNames}`}>
-        <EditorContent editor={editor} />
-        {editor?.isActive("image") && <ImageResizer editor={editor} />}
-      </div>
-    </div>
-  );
-};
-
-const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
-  <Tiptap {...props} forwardedRef={ref} />
-));
-
-TipTapEditor.displayName = "TipTapEditor";
-
-export { TipTapEditor };
diff --git a/apps/app/components/tiptap/plugins/delete-image.tsx b/apps/app/components/tiptap/plugins/delete-image.tsx
deleted file mode 100644
index 57ab65c6379..00000000000
--- a/apps/app/components/tiptap/plugins/delete-image.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import fileService from "services/file.service";
-
-const deleteKey = new PluginKey("delete-image");
-
-const TrackImageDeletionPlugin = () =>
-  new Plugin({
-    key: deleteKey,
-    appendTransaction: (transactions, oldState, newState) => {
-      transactions.forEach((transaction) => {
-        if (!transaction.docChanged) return;
-
-        const removedImages: ProseMirrorNode[] = [];
-
-        oldState.doc.descendants((oldNode, oldPos) => {
-          if (oldNode.type.name !== 'image') return;
-
-          if (!newState.doc.resolve(oldPos).parent) return;
-          const newNode = newState.doc.nodeAt(oldPos);
-
-          // Check if the node has been deleted or replaced
-          if (!newNode || newNode.type.name !== 'image') {
-            // Check if the node still exists elsewhere in the document
-            let nodeExists = false;
-            newState.doc.descendants((node) => {
-              if (node.attrs.id === oldNode.attrs.id) {
-                nodeExists = true;
-              }
-            });
-
-            if (!nodeExists) {
-              removedImages.push(oldNode as ProseMirrorNode);
-            }
-          }
-        });
-
-        removedImages.forEach((node) => {
-          const src = node.attrs.src;
-          onNodeDeleted(src);
-        });
-      });
-
-      return null;
-    },
-  });
-
-export default TrackImageDeletionPlugin;
-
-async function onNodeDeleted(src: string) {
-  const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-  const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
-  if (resStatus === 204) {
-    console.log("Image deleted successfully");
-  }
-}
diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx
deleted file mode 100644
index 0657bc82bf4..00000000000
--- a/apps/app/components/tiptap/plugins/upload-image.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-// @ts-nocheck
-import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
-import fileService from "services/file.service";
-
-const uploadKey = new PluginKey("upload-image");
-
-const UploadImagesPlugin = () =>
-  new Plugin({
-    key: uploadKey,
-    state: {
-      init() {
-        return DecorationSet.empty;
-      },
-      apply(tr, set) {
-        set = set.map(tr.mapping, tr.doc);
-        // See if the transaction adds or removes any placeholders
-        const action = tr.getMeta(uploadKey);
-        if (action && action.add) {
-          const { id, pos, src } = action.add;
-
-          const placeholder = document.createElement("div");
-          placeholder.setAttribute("class", "img-placeholder");
-          const image = document.createElement("img");
-          image.setAttribute(
-            "class",
-            "opacity-10 rounded-lg border border-custom-border-300",
-          );
-          image.src = src;
-          placeholder.appendChild(image);
-          const deco = Decoration.widget(pos + 1, placeholder, {
-            id,
-          });
-          set = set.add(tr.doc, [deco]);
-        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
-        }
-        return set;
-      },
-    },
-    props: {
-      decorations(state) {
-        return this.getState(state);
-      },
-    },
-  });
-
-export default UploadImagesPlugin;
-
-function findPlaceholder(state: EditorState, id: {}) {
-  const decos = uploadKey.getState(state);
-  const found = decos.find(
-    undefined,
-    undefined,
-    (spec: { id: number | undefined }) => spec.id == id
-  );
-  return found.length ? found[0].from : null;
-}
-
-export async function startImageUpload(file: File, view: EditorView, pos: number, workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) {
-  if (!file.type.includes("image/")) {
-    return;
-  } else if (file.size / 1024 / 1024 > 20) {
-    return;
-  }
-
-  const id = {};
-
-  const tr = view.state.tr;
-  if (!tr.selection.empty) tr.deleteSelection();
-
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = () => {
-    tr.setMeta(uploadKey, {
-      add: {
-        id,
-        pos,
-        src: reader.result,
-      },
-    });
-    view.dispatch(tr);
-  };
-
-  if (!workspaceSlug) {
-    return;
-  }
-  setIsSubmitting?.("submitting")
-  const src = await UploadImageHandler(file, workspaceSlug);
-  const { schema } = view.state;
-  pos = findPlaceholder(view.state, id);
-
-  if (pos == null) return;
-  const imageSrc = typeof src === "object" ? reader.result : src;
-
-  const node = schema.nodes.image.create({ src: imageSrc });
-  const transaction = view.state.tr
-    .replaceWith(pos, pos, node)
-    .setMeta(uploadKey, { remove: { id } });
-  view.dispatch(transaction);
-}
-
-const UploadImageHandler = (file: File, workspaceSlug: string): Promise<string> => {
-  if (!workspaceSlug) {
-    return Promise.reject("Workspace slug is missing");
-  }
-  try {
-    const formData = new FormData();
-    formData.append("asset", file);
-    formData.append("attributes", JSON.stringify({}));
-
-    return new Promise(async (resolve, reject) => {
-      const imageUrl = await fileService
-        .uploadFile(workspaceSlug, formData)
-        .then((response) => response.asset);
-
-      const image = new Image();
-      image.src = imageUrl;
-      image.onload = () => {
-        resolve(imageUrl);
-      };
-    });
-  } catch (error) {
-    console.log(error);
-    return Promise.reject(error);
-  }
-};
diff --git a/apps/app/components/tiptap/props.tsx b/apps/app/components/tiptap/props.tsx
deleted file mode 100644
index d50fc29b0b3..00000000000
--- a/apps/app/components/tiptap/props.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { EditorProps } from "@tiptap/pm/view";
-import { startImageUpload } from "./plugins/upload-image";
-
-export function TiptapEditorProps(workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorProps {
-  return {
-    attributes: {
-      class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
-    },
-    handleDOMEvents: {
-      keydown: (_view, event) => {
-        // prevent default event listeners from firing when slash command is active
-        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-          const slashCommand = document.querySelector("#slash-command");
-          if (slashCommand) {
-            return true;
-          }
-        }
-      },
-    },
-    handlePaste: (view, event) => {
-      if (
-        event.clipboardData &&
-        event.clipboardData.files &&
-        event.clipboardData.files[0]
-      ) {
-        event.preventDefault();
-        const file = event.clipboardData.files[0];
-        const pos = view.state.selection.from;
-        startImageUpload(file, view, pos, workspaceSlug, setIsSubmitting);
-        return true;
-      }
-      return false;
-    },
-    handleDrop: (view, event, _slice, moved) => {
-      if (
-        !moved &&
-        event.dataTransfer &&
-        event.dataTransfer.files &&
-        event.dataTransfer.files[0]
-      ) {
-        event.preventDefault();
-        const file = event.dataTransfer.files[0];
-        const coordinates = view.posAtCoords({
-          left: event.clientX,
-          top: event.clientY,
-        });
-        // here we deduct 1 from the pos or else the image will create an extra node
-        if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, workspaceSlug, setIsSubmitting);
-        }
-        return true;
-      }
-      return false;
-    },
-  };
-}
diff --git a/apps/app/components/tiptap/utils.ts b/apps/app/components/tiptap/utils.ts
deleted file mode 100644
index a5ef193506d..00000000000
--- a/apps/app/components/tiptap/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/apps/app/components/toast-alert/index.tsx b/apps/app/components/toast-alert/index.tsx
deleted file mode 100644
index 5d0c0123c98..00000000000
--- a/apps/app/components/toast-alert/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-// hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-import useToast from "hooks/use-toast";
-// icons
-
-const ToastAlerts = () => {
-  const { alerts, removeAlert } = useToast();
-
-  if (!alerts) return null;
-
-  return (
-    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
-      {alerts.map((alert) => (
-        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
-          <div className="absolute top-1 right-1">
-            <button
-              type="button"
-              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
-              onClick={() => removeAlert(alert.id)}
-            >
-              <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-          </div>
-          <div
-            className={`px-2 py-4 ${
-              alert.type === "success"
-                ? "bg-[#06d6a0]"
-                : alert.type === "error"
-                ? "bg-[#ef476f]"
-                : alert.type === "warning"
-                ? "bg-[#e98601]"
-                : "bg-[#1B9aaa]"
-            }`}
-          >
-            <div className="flex items-center gap-x-3">
-              <div className="flex-shrink-0">
-                {alert.type === "success" ? (
-                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
-                ) : alert.type === "error" ? (
-                  <XCircleIcon className="h-8 w-8" />
-                ) : alert.type === "warning" ? (
-                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
-                ) : (
-                  <InformationCircleIcon className="h-8 w-8" />
-                )}
-              </div>
-              <div>
-                <p className="font-semibold">{alert.title}</p>
-                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default ToastAlerts;
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
deleted file mode 100644
index d60baa56eeb..00000000000
--- a/apps/app/components/ui/avatar.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// component
-import { Icon } from "components/ui";
-// services
-import workspaceService from "services/workspace.service";
-// icons
-import User from "public/user.png";
-// types
-import { IUser, IUserLite } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type AvatarProps = {
-  user?: Partial<IUser> | Partial<IUserLite> | null;
-  index?: number;
-  height?: string;
-  width?: string;
-  fontSize?: string;
-};
-
-export const Avatar: React.FC<AvatarProps> = ({
-  user,
-  index,
-  height = "24px",
-  width = "24px",
-  fontSize = "12px",
-}) => (
-  <div
-    className={`relative rounded border-[0.5px] ${
-      index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
-    }`}
-    style={{
-      height: height,
-      width: width,
-    }}
-  >
-    {user && user.avatar && user.avatar !== "" ? (
-      <div
-        className={`rounded border-[0.5px] ${
-          index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
-        }`}
-        style={{
-          height: height,
-          width: width,
-        }}
-      >
-        <img
-          src={user.avatar}
-          className="absolute top-0 left-0 h-full w-full object-cover rounded"
-          alt={user.display_name}
-        />
-      </div>
-    ) : (
-      <div
-        className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700  border-[0.5px] border-custom-border-200"
-        style={{
-          height: height,
-          width: width,
-          fontSize: fontSize,
-        }}
-      >
-        {user?.display_name?.charAt(0)}
-      </div>
-    )}
-  </div>
-);
-
-type AsigneesListProps = {
-  users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
-  userIds?: string[];
-  length?: number;
-  showLength?: boolean;
-};
-
-export const AssigneesList: React.FC<AsigneesListProps> = ({
-  users,
-  userIds,
-  length = 3,
-  showLength = true,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  if ((users && users.length === 0) || (userIds && userIds.length === 0))
-    return (
-      <div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
-        <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
-      </div>
-    );
-
-  return (
-    <>
-      {users && (
-        <>
-          {users.slice(0, length).map((user, index) => (
-            <Avatar key={user?.id} user={user} index={index} />
-          ))}
-          {users.length > length ? (
-            <div className="-ml-3.5 relative h-6 w-6 rounded">
-              <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
-                {users.length - length}
-              </div>
-            </div>
-          ) : null}
-        </>
-      )}
-      {userIds && (
-        <>
-          {userIds.slice(0, length).map((userId, index) => {
-            const user = people?.find((p) => p.member.id === userId)?.member;
-
-            return <Avatar key={userId} user={user} index={index} />;
-          })}
-          {showLength ? (
-            userIds.length > length ? (
-              <div className="-ml-3.5 relative h-6 w-6 rounded">
-                <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                  <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
-                  {userIds.length - length}
-                </div>
-              </div>
-            ) : null
-          ) : (
-            ""
-          )}
-        </>
-      )}
-    </>
-  );
-};
diff --git a/apps/app/components/ui/buttons/danger-button.tsx b/apps/app/components/ui/buttons/danger-button.tsx
deleted file mode 100644
index 3adb7012b1c..00000000000
--- a/apps/app/components/ui/buttons/danger-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const DangerButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-red-500 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${
-      disabled
-        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
-        : ""
-    } ${
-      outline
-        ? "bg-transparent text-red-500 hover:bg-red-500 hover:text-white"
-        : "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
diff --git a/apps/app/components/ui/buttons/index.ts b/apps/app/components/ui/buttons/index.ts
deleted file mode 100644
index 0ce5c556a80..00000000000
--- a/apps/app/components/ui/buttons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./danger-button";
-export * from "./primary-button";
-export * from "./secondary-button";
diff --git a/apps/app/components/ui/buttons/type.d.ts b/apps/app/components/ui/buttons/type.d.ts
deleted file mode 100644
index 1391e0771d2..00000000000
--- a/apps/app/components/ui/buttons/type.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type ButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  loading?: boolean;
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-};
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
deleted file mode 100644
index f33aadde599..00000000000
--- a/apps/app/components/ui/date.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from "react";
-
-import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// react-datepicker
-import DatePicker from "react-datepicker";
-// import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-
-type Props = {
-  value: string | null;
-  onChange: (val: string | null) => void;
-  label: string;
-  minDate?: Date;
-  maxDate?: Date;
-  closeOnSelect?: boolean;
-};
-
-export const DateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  label,
-  minDate,
-  maxDate,
-  closeOnSelect = true,
-}) => (
-  <Popover className="relative flex items-center justify-center  rounded-lg">
-    {({ close }) => (
-      <>
-        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
-        </Popover.Button>
-
-        <Transition
-          as={React.Fragment}
-          enter="transition ease-out duration-200"
-          enterFrom="opacity-0 translate-y-1"
-          enterTo="opacity-100 translate-y-0"
-          leave="transition ease-in duration-150"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-1"
-        >
-          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
-            <DatePicker
-              selected={value ? new Date(value) : null}
-              onChange={(val) => {
-                if (!val) onChange("");
-                else onChange(renderDateFormat(val));
-
-                if (closeOnSelect) close();
-              }}
-              dateFormat="dd-MM-yyyy"
-              minDate={minDate}
-              maxDate={maxDate}
-              inline
-            />
-          </Popover.Panel>
-        </Transition>
-      </>
-    )}
-  </Popover>
-);
diff --git a/apps/app/components/ui/dropdowns/custom-menu.tsx b/apps/app/components/ui/dropdowns/custom-menu.tsx
deleted file mode 100644
index c451d443254..00000000000
--- a/apps/app/components/ui/dropdowns/custom-menu.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-
-// headless ui
-import { Menu, Transition } from "@headlessui/react";
-// ui
-import { DropdownProps } from "components/ui";
-// icons
-import { ExpandMoreOutlined, MoreHorizOutlined } from "@mui/icons-material";
-
-export type CustomMenuProps = DropdownProps & {
-  children: React.ReactNode;
-  ellipsis?: boolean;
-  noBorder?: boolean;
-  verticalEllipsis?: boolean;
-  menuButtonOnClick?: (...args: any) => void;
-};
-
-const CustomMenu = ({
-  buttonClassName = "",
-  children,
-  className = "",
-  customButton,
-  disabled = false,
-  ellipsis = false,
-  label,
-  maxHeight = "md",
-  noBorder = false,
-  noChevron = false,
-  optionsClassName = "",
-  position = "right",
-  selfPositioned = false,
-  verticalEllipsis = false,
-  verticalPosition = "bottom",
-  width = "auto",
-  menuButtonOnClick,
-}: CustomMenuProps) => (
-  <Menu as="div" className={`${selfPositioned ? "" : "relative"} w-min text-left ${className}`}>
-    {({ open }) => (
-      <>
-        {customButton ? (
-          <Menu.Button as="button" type="button" onClick={menuButtonOnClick}>
-            {customButton}
-          </Menu.Button>
-        ) : (
-          <>
-            {ellipsis || verticalEllipsis ? (
-              <Menu.Button
-                type="button"
-                onClick={menuButtonOnClick}
-                disabled={disabled}
-                className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
-                  disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                <MoreHorizOutlined
-                  fontSize="small"
-                  className={verticalEllipsis ? "rotate-90" : ""}
-                />
-              </Menu.Button>
-            ) : (
-              <Menu.Button
-                type="button"
-                className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
-                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                } ${
-                  noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"
-                } ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {label}
-                {!noChevron && (
-                  <ExpandMoreOutlined
-                    sx={{
-                      fontSize: 14,
-                    }}
-                    aria-hidden="true"
-                  />
-                )}
-              </Menu.Button>
-            )}
-          </>
-        )}
-
-        <Transition
-          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"
-        >
-          <Menu.Items
-            className={`absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90 ${
-              position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-            } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
-              maxHeight === "lg"
-                ? "max-h-60"
-                : maxHeight === "md"
-                ? "max-h-48"
-                : maxHeight === "rg"
-                ? "max-h-36"
-                : maxHeight === "sm"
-                ? "max-h-28"
-                : ""
-            } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
-          >
-            <div className="py-1">{children}</div>
-          </Menu.Items>
-        </Transition>
-      </>
-    )}
-  </Menu>
-);
-
-type MenuItemProps = {
-  children: React.ReactNode;
-  renderAs?: "button" | "a";
-  href?: string;
-  onClick?: (args?: any) => void;
-  className?: string;
-};
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  children,
-  renderAs,
-  href,
-  onClick,
-  className = "",
-}) => (
-  <Menu.Item as="div">
-    {({ active, close }) =>
-      renderAs === "a" ? (
-        <Link href={href ?? ""}>
-          <a
-            className={`inline-block w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-              active ? "bg-custom-background-80" : ""
-            } ${className}`}
-            onClick={close}
-          >
-            {children}
-          </a>
-        </Link>
-      ) : (
-        <button
-          type="button"
-          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-            active ? "bg-custom-background-80" : ""
-          } ${className}`}
-          onClick={onClick}
-        >
-          {children}
-        </button>
-      )
-    }
-  </Menu.Item>
-);
-
-CustomMenu.MenuItem = MenuItem;
-
-export { CustomMenu };
diff --git a/apps/app/components/ui/dropdowns/custom-search-select.tsx b/apps/app/components/ui/dropdowns/custom-search-select.tsx
deleted file mode 100644
index 1ff20936267..00000000000
--- a/apps/app/components/ui/dropdowns/custom-search-select.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useState } from "react";
-
-// headless ui
-import { Combobox, Transition } from "@headlessui/react";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// types
-import { DropdownProps } from "./types";
-
-export type CustomSearchSelectProps = DropdownProps & {
-  footerOption?: JSX.Element;
-  onChange: any;
-  options:
-    | {
-        value: any;
-        query: string;
-        content: React.ReactNode;
-      }[]
-    | undefined;
-} & (
-    | { multiple?: false; value: any } // if multiple is false, value can be anything
-    | {
-        multiple?: true;
-        value: any[] | null; // if multiple is true, value should be an array
-      }
-  );
-
-export const CustomSearchSelect = ({
-  buttonClassName = "",
-  className = "",
-  customButton,
-  disabled = false,
-  footerOption,
-  input = false,
-  label,
-  maxHeight = "md",
-  multiple = false,
-  noChevron = false,
-  onChange,
-  options,
-  onOpen,
-  optionsClassName = "",
-  position = "left",
-  selfPositioned = false,
-  value,
-  verticalPosition = "bottom",
-  width = "auto",
-}: CustomSearchSelectProps) => {
-  const [query, setQuery] = useState("");
-
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
-
-  const props: any = {
-    value,
-    onChange,
-    disabled,
-  };
-
-  if (multiple) props.multiple = true;
-
-  return (
-    <Combobox
-      as="div"
-      className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
-      {...props}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open && onOpen) onOpen();
-
-        return (
-          <>
-            {customButton ? (
-              <Combobox.Button as="div">{customButton}</Combobox.Button>
-            ) : (
-              <Combobox.Button
-                type="button"
-                className={`flex items-center justify-between gap-1 w-full rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                  input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-                } ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
-                } ${buttonClassName}`}
-              >
-                {label}
-                {!noChevron && !disabled && (
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                )}
-              </Combobox.Button>
-            )}
-            <Transition
-              show={open}
-              as={React.Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Combobox.Options
-                className={`absolute z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
-                  position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-                } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
-                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
-                } ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="键入搜索..."
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div
-                  className={`mt-2 space-y-1 ${
-                    maxHeight === "lg"
-                      ? "max-h-60"
-                      : maxHeight === "md"
-                      ? "max-h-48"
-                      : maxHeight === "rg"
-                      ? "max-h-36"
-                      : maxHeight === "sm"
-                      ? "max-h-28"
-                      : ""
-                  } overflow-y-scroll`}
-                >
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active || selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ active, selected }) => (
-                            <>
-                              {option.content}
-                              {multiple ? (
-                                <div
-                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
-                                    active || selected ? "opacity-100" : "opacity-0"
-                                  }`}
-                                >
-                                  <CheckIcon
-                                    className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                  />
-                                </div>
-                              ) : (
-                                <CheckIcon
-                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                />
-                              )}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">无匹配结果</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-                {footerOption}
-              </Combobox.Options>
-            </Transition>
-          </>
-        );
-      }}
-    </Combobox>
-  );
-};
diff --git a/apps/app/components/ui/dropdowns/custom-select.tsx b/apps/app/components/ui/dropdowns/custom-select.tsx
deleted file mode 100644
index 4e495a21062..00000000000
--- a/apps/app/components/ui/dropdowns/custom-select.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from "react";
-
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon } from "@heroicons/react/24/outline";
-// types
-import { DropdownProps } from "./types";
-
-export type CustomSelectProps = DropdownProps & {
-  children: React.ReactNode;
-  value: any;
-  onChange: any;
-};
-
-const CustomSelect = ({
-  buttonClassName = "",
-  children,
-  className = "",
-  customButton,
-  disabled = false,
-  input = false,
-  label,
-  maxHeight = "md",
-  noChevron = false,
-  onChange,
-  optionsClassName = "",
-  position = "left",
-  selfPositioned = false,
-  value,
-  verticalPosition = "bottom",
-  width = "auto",
-}: CustomSelectProps) => (
-  <Listbox
-    as="div"
-    value={value}
-    onChange={onChange}
-    className={`${selfPositioned ? "" : "relative"} flex-shrink-0 text-left ${className}`}
-    disabled={disabled}
-  >
-    <>
-      {customButton ? (
-        <Listbox.Button as="div">{customButton}</Listbox.Button>
-      ) : (
-        <Listbox.Button
-          type="button"
-          className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
-            input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-          } ${
-            disabled
-              ? "cursor-not-allowed text-custom-text-200"
-              : "cursor-pointer hover:bg-custom-background-80"
-          } ${buttonClassName}`}
-        >
-          {label}
-          {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
-        </Listbox.Button>
-      )}
-    </>
-
-    <Transition
-      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
-        className={`absolute z-10 border border-custom-border-300 mt-1 origin-top-right overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
-          position === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-        } ${verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"} ${
-          maxHeight === "lg"
-            ? "max-h-60"
-            : maxHeight === "md"
-            ? "max-h-48"
-            : maxHeight === "rg"
-            ? "max-h-36"
-            : maxHeight === "sm"
-            ? "max-h-28"
-            : ""
-        } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
-      >
-        <div className="space-y-1 p-2">{children}</div>
-      </Listbox.Options>
-    </Transition>
-  </Listbox>
-);
-
-type OptionProps = {
-  children: React.ReactNode;
-  value: any;
-  className?: string;
-};
-
-const Option: React.FC<OptionProps> = ({ children, value, className }) => (
-  <Listbox.Option
-    value={value}
-    className={({ active, selected }) =>
-      `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-        active || selected ? "bg-custom-background-80" : ""
-      } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
-    }
-  >
-    {({ selected }) => (
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">{children}</div>
-        {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
-      </div>
-    )}
-  </Listbox.Option>
-);
-
-CustomSelect.Option = Option;
-
-export { CustomSelect };
diff --git a/apps/app/components/ui/dropdowns/types.d.ts b/apps/app/components/ui/dropdowns/types.d.ts
deleted file mode 100644
index aace1858a32..00000000000
--- a/apps/app/components/ui/dropdowns/types.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export type DropdownProps = {
-  buttonClassName?: string;
-  className?: string;
-  customButton?: JSX.Element;
-  disabled?: boolean;
-  input?: boolean;
-  label?: string | JSX.Element;
-  maxHeight?: "sm" | "rg" | "md" | "lg";
-  noChevron?: boolean;
-  onOpen?: () => void;
-  optionsClassName?: string;
-  position?: "right" | "left";
-  selfPositioned?: boolean;
-  verticalPosition?: "top" | "bottom";
-  width?: "auto" | string;
-};
diff --git a/apps/app/components/ui/empty-state.tsx b/apps/app/components/ui/empty-state.tsx
deleted file mode 100644
index 098c3f15293..00000000000
--- a/apps/app/components/ui/empty-state.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-
-import Image from "next/image";
-
-// ui
-import { PrimaryButton } from "components/ui";
-
-type Props = {
-  title: string;
-  description?: React.ReactNode;
-  image: any;
-  primaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  secondaryButton?: React.ReactNode;
-  isFullScreen?: boolean;
-};
-
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  isFullScreen = true,
-}) => (
-  <div
-    className={`h-full w-full mx-auto grid place-items-center p-8 ${
-      isFullScreen ? "md:w-4/5 lg:w-3/5" : ""
-    }`}
-  >
-    <div className="text-center flex flex-col items-center w-full">
-      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
-      <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
-      {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick}>
-            {primaryButton.icon}
-            {primaryButton.text}
-          </PrimaryButton>
-        )}
-        {secondaryButton}
-      </div>
-    </div>
-  </div>
-);
diff --git a/apps/app/components/ui/icon-name-type.d.ts b/apps/app/components/ui/icon-name-type.d.ts
deleted file mode 100644
index 0d886b08eef..00000000000
--- a/apps/app/components/ui/icon-name-type.d.ts
+++ /dev/null
@@ -1,2991 +0,0 @@
-type IconName =
-  | "search"
-  | "home"
-  | "menu"
-  | "close"
-  | "settings"
-  | "done"
-  | "expand_more"
-  | "check_circle"
-  | "favorite"
-  | "add"
-  | "delete"
-  | "arrow_back"
-  | "star"
-  | "chevron_right"
-  | "logout"
-  | "arrow_forward_ios"
-  | "add_circle"
-  | "cancel"
-  | "arrow_back_ios"
-  | "arrow_forward"
-  | "arrow_drop_down"
-  | "more_vert"
-  | "check"
-  | "check_box"
-  | "toggle_on"
-  | "grade"
-  | "open_in_new"
-  | "check_box_outline_blank"
-  | "refresh"
-  | "login"
-  | "chevron_left"
-  | "expand_less"
-  | "radio_button_unchecked"
-  | "more_horiz"
-  | "apps"
-  | "arrow_right_alt"
-  | "radio_button_checked"
-  | "download"
-  | "remove"
-  | "bolt"
-  | "toggle_off"
-  | "arrow_upward"
-  | "filter_list"
-  | "delete_forever"
-  | "autorenew"
-  | "key"
-  | "arrow_downward"
-  | "sync"
-  | "sort"
-  | "block"
-  | "add_box"
-  | "arrow_back_ios_new"
-  | "restart_alt"
-  | "menu_open"
-  | "shopping_cart_checkout"
-  | "expand_circle_down"
-  | "backspace"
-  | "undo"
-  | "arrow_circle_right"
-  | "done_all"
-  | "arrow_right"
-  | "do_not_disturb_on"
-  | "open_in_full"
-  | "manage_search"
-  | "double_arrow"
-  | "sync_alt"
-  | "zoom_in"
-  | "done_outline"
-  | "drag_indicator"
-  | "fullscreen"
-  | "keyboard_double_arrow_right"
-  | "star_half"
-  | "settings_accessibility"
-  | "ios_share"
-  | "arrow_drop_up"
-  | "reply"
-  | "exit_to_app"
-  | "unfold_more"
-  | "library_add"
-  | "cached"
-  | "select_check_box"
-  | "terminal"
-  | "change_circle"
-  | "disabled_by_default"
-  | "swap_horiz"
-  | "swap_vert"
-  | "close_fullscreen"
-  | "app_registration"
-  | "download_for_offline"
-  | "arrow_circle_left"
-  | "arrow_circle_up"
-  | "file_open"
-  | "minimize"
-  | "open_with"
-  | "keyboard_double_arrow_left"
-  | "dataset"
-  | "add_task"
-  | "start"
-  | "keyboard_double_arrow_down"
-  | "keyboard_voice"
-  | "create_new_folder"
-  | "forward"
-  | "downloading"
-  | "settings_applications"
-  | "compare_arrows"
-  | "redo"
-  | "publish"
-  | "arrow_left"
-  | "zoom_out"
-  | "html"
-  | "token"
-  | "switch_access_shortcut"
-  | "arrow_circle_down"
-  | "fullscreen_exit"
-  | "sort_by_alpha"
-  | "delete_sweep"
-  | "indeterminate_check_box"
-  | "first_page"
-  | "keyboard_double_arrow_up"
-  | "view_timeline"
-  | "arrow_drop_down_circle"
-  | "assistant_navigation"
-  | "settings_backup_restore"
-  | "sync_problem"
-  | "clear_all"
-  | "density_medium"
-  | "heart_plus"
-  | "filter_alt_off"
-  | "expand"
-  | "last_page"
-  | "subdirectory_arrow_right"
-  | "unfold_less"
-  | "arrow_outward"
-  | "download_done"
-  | "123"
-  | "swipe_left"
-  | "saved_search"
-  | "system_update_alt"
-  | "place_item"
-  | "maximize"
-  | "javascript"
-  | "output"
-  | "search_off"
-  | "swipe_up"
-  | "fit_screen"
-  | "select_all"
-  | "dynamic_form"
-  | "hide_source"
-  | "swipe_right"
-  | "switch_access_shortcut_add"
-  | "browse_gallery"
-  | "check_small"
-  | "css"
-  | "density_small"
-  | "assistant_direction"
-  | "youtube_searched_for"
-  | "file_download_done"
-  | "move_up"
-  | "swap_horizontal_circle"
-  | "data_thresholding"
-  | "install_mobile"
-  | "move_down"
-  | "abc"
-  | "dataset_linked"
-  | "restore_from_trash"
-  | "enable"
-  | "install_desktop"
-  | "keyboard_command_key"
-  | "view_kanban"
-  | "browse_activity"
-  | "reply_all"
-  | "switch_left"
-  | "compress"
-  | "swipe_down"
-  | "swap_vertical_circle"
-  | "remove_done"
-  | "apps_outage"
-  | "filter_list_off"
-  | "star_rate"
-  | "hide"
-  | "switch_right"
-  | "swipe_vertical"
-  | "more_up"
-  | "sync_disabled"
-  | "pinch"
-  | "keyboard_control_key"
-  | "eject"
-  | "key_off"
-  | "php"
-  | "subdirectory_arrow_left"
-  | "view_cozy"
-  | "transcribe"
-  | "do_not_disturb_off"
-  | "send_time_extension"
-  | "width_normal"
-  | "heart_minus"
-  | "view_comfy_alt"
-  | "share_reviews"
-  | "width_full"
-  | "unfold_more_double"
-  | "view_compact_alt"
-  | "file_download_off"
-  | "extension_off"
-  | "open_in_new_off"
-  | "check_indeterminate_small"
-  | "more_down"
-  | "width_wide"
-  | "repartition"
-  | "density_large"
-  | "swipe_left_alt"
-  | "swipe_down_alt"
-  | "swipe_right_alt"
-  | "swipe_up_alt"
-  | "unfold_less_double"
-  | "keyboard_option_key"
-  | "cycle"
-  | "hls"
-  | "hls_off"
-  | "progress_activity"
-  | "file_upload_off"
-  | "rebase"
-  | "expand_content"
-  | "expand_all"
-  | "rebase_edit"
-  | "collapse_all"
-  | "empty_dashboard"
-  | "arrow_split"
-  | "quick_reference_all"
-  | "arrow_upward_alt"
-  | "switches"
-  | "arrow_downward_alt"
-  | "directory_sync"
-  | "quick_reference"
-  | "cards"
-  | "deployed_code"
-  | "side_navigation"
-  | "data_check"
-  | "acute"
-  | "bubble"
-  | "left_click"
-  | "sync_saved_locally"
-  | "data_alert"
-  | "move_item"
-  | "steppers"
-  | "stack"
-  | "stat_3"
-  | "arrow_left_alt"
-  | "clock_loader_60"
-  | "page_info"
-  | "data_info_alert"
-  | "search_check"
-  | "question_exchange"
-  | "point_scan"
-  | "preliminary"
-  | "toolbar"
-  | "clock_loader_10"
-  | "sweep"
-  | "new_window"
-  | "right_panel_close"
-  | "captive_portal"
-  | "star_rate_half"
-  | "page_control"
-  | "patient_list"
-  | "right_panel_open"
-  | "stat_2"
-  | "stat_minus_1"
-  | "unknown_med"
-  | "stat_minus_2"
-  | "clock_loader_40"
-  | "dialogs"
-  | "capture"
-  | "step_into"
-  | "arrow_insert"
-  | "heart_check"
-  | "magnification_large"
-  | "partner_reports"
-  | "stack_star"
-  | "drag_pan"
-  | "magnification_small"
-  | "stat_1"
-  | "clock_loader_90"
-  | "dropdown"
-  | "left_panel_close"
-  | "left_panel_open"
-  | "sliders"
-  | "bottom_panel_open"
-  | "clock_loader_80"
-  | "move_group"
-  | "bottom_navigation"
-  | "stack_off"
-  | "all_match"
-  | "clock_loader_20"
-  | "step"
-  | "stat_minus_3"
-  | "bottom_drawer"
-  | "buttons_alt"
-  | "chip_extraction"
-  | "bottom_sheets"
-  | "chronic"
-  | "pip"
-  | "resize"
-  | "tabs"
-  | "chips"
-  | "iframe"
-  | "input_circle"
-  | "reopen_window"
-  | "ripples"
-  | "rule_settings"
-  | "toast"
-  | "unknown_5"
-  | "share_windows"
-  | "shelf_position"
-  | "go_to_line"
-  | "right_click"
-  | "subheader"
-  | "bottom_right_click"
-  | "drag_click"
-  | "expand_circle_up"
-  | "step_out"
-  | "step_over"
-  | "switch_access"
-  | "arrow_and_edge"
-  | "error_med"
-  | "app_badging"
-  | "deployed_code_alert"
-  | "event_list"
-  | "move_selection_left"
-  | "move_selection_right"
-  | "output_circle"
-  | "amend"
-  | "pip_exit"
-  | "arrow_or_edge"
-  | "arrow_top_right"
-  | "bottom_app_bar"
-  | "deployed_code_update"
-  | "iframe_off"
-  | "shelf_auto_hide"
-  | "arrow_range"
-  | "bottom_panel_close"
-  | "bubbles"
-  | "position_bottom_right"
-  | "arrow_top_left"
-  | "arrows_outward"
-  | "back_to_tab"
-  | "jump_to_element"
-  | "move_selection_down"
-  | "move_selection_up"
-  | "open_in_new_down"
-  | "deployed_code_history"
-  | "position_bottom_left"
-  | "position_top_right"
-  | "expand_circle_right"
-  | "person"
-  | "group"
-  | "share"
-  | "thumb_up"
-  | "groups"
-  | "person_add"
-  | "public"
-  | "handshake"
-  | "support_agent"
-  | "face"
-  | "sentiment_satisfied"
-  | "rocket_launch"
-  | "group_add"
-  | "workspace_premium"
-  | "psychology"
-  | "diversity_3"
-  | "emoji_objects"
-  | "water_drop"
-  | "eco"
-  | "pets"
-  | "travel_explore"
-  | "mood"
-  | "sunny"
-  | "quiz"
-  | "health_and_safety"
-  | "sentiment_dissatisfied"
-  | "sentiment_very_satisfied"
-  | "military_tech"
-  | "thumb_down"
-  | "gavel"
-  | "recycling"
-  | "diamond"
-  | "monitor_heart"
-  | "emoji_people"
-  | "diversity_1"
-  | "workspaces"
-  | "vaccines"
-  | "compost"
-  | "forest"
-  | "recommend"
-  | "waving_hand"
-  | "person_remove"
-  | "wc"
-  | "medication"
-  | "sentiment_neutral"
-  | "group_work"
-  | "sentiment_very_dissatisfied"
-  | "diversity_2"
-  | "front_hand"
-  | "psychology_alt"
-  | "cruelty_free"
-  | "man"
-  | "medical_information"
-  | "coronavirus"
-  | "add_reaction"
-  | "rocket"
-  | "female"
-  | "potted_plant"
-  | "emoji_nature"
-  | "rainy"
-  | "person_off"
-  | "cookie"
-  | "woman"
-  | "connect_without_contact"
-  | "mood_bad"
-  | "male"
-  | "bedtime"
-  | "solar_power"
-  | "communication"
-  | "thunderstorm"
-  | "groups_2"
-  | "partly_cloudy_day"
-  | "thumbs_up_down"
-  | "emoji_flags"
-  | "masks"
-  | "hive"
-  | "heart_broken"
-  | "sentiment_extremely_dissatisfied"
-  | "clear_day"
-  | "boy"
-  | "whatshot"
-  | "cloudy_snowing"
-  | "emoji_food_beverage"
-  | "wind_power"
-  | "emoji_transportation"
-  | "elderly"
-  | "face_6"
-  | "reduce_capacity"
-  | "sick"
-  | "pregnant_woman"
-  | "face_3"
-  | "bloodtype"
-  | "group_remove"
-  | "egg"
-  | "medication_liquid"
-  | "groups_3"
-  | "co2"
-  | "clear_night"
-  | "weight"
-  | "skull"
-  | "follow_the_signs"
-  | "face_4"
-  | "emoji_events"
-  | "oil_barrel"
-  | "transgender"
-  | "elderly_woman"
-  | "clean_hands"
-  | "sanitizer"
-  | "person_2"
-  | "bring_your_own_ip"
-  | "public_off"
-  | "face_2"
-  | "social_distance"
-  | "routine"
-  | "sign_language"
-  | "south_america"
-  | "sunny_snowing"
-  | "emoji_symbols"
-  | "garden_cart"
-  | "flood"
-  | "face_5"
-  | "egg_alt"
-  | "cyclone"
-  | "girl"
-  | "person_4"
-  | "dentistry"
-  | "tsunami"
-  | "group_off"
-  | "outdoor_garden"
-  | "partly_cloudy_night"
-  | "severe_cold"
-  | "snowing"
-  | "person_3"
-  | "tornado"
-  | "landslide"
-  | "vaping_rooms"
-  | "safety_divider"
-  | "foggy"
-  | "woman_2"
-  | "no_adult_content"
-  | "volcano"
-  | "man_2"
-  | "blind"
-  | "18_up_rating"
-  | "6_ft_apart"
-  | "vape_free"
-  | "not_accessible"
-  | "man_4"
-  | "radiology"
-  | "rib_cage"
-  | "hand_bones"
-  | "bedtime_off"
-  | "rheumatology"
-  | "man_3"
-  | "orthopedics"
-  | "tibia"
-  | "skeleton"
-  | "partner_exchange"
-  | "humerus"
-  | "agender"
-  | "femur"
-  | "foot_bones"
-  | "tibia_alt"
-  | "femur_alt"
-  | "humerus_alt"
-  | "communities"
-  | "diversity_4"
-  | "ulna_radius"
-  | "ulna_radius_alt"
-  | "specific_gravity"
-  | "cognition"
-  | "breastfeeding"
-  | "eyeglasses"
-  | "psychiatry"
-  | "labs"
-  | "crowdsource"
-  | "footprint"
-  | "vital_signs"
-  | "nutrition"
-  | "neurology"
-  | "social_leaderboard"
-  | "demography"
-  | "globe_asia"
-  | "stethoscope"
-  | "conditions"
-  | "lab_research"
-  | "clinical_notes"
-  | "sentiment_excited"
-  | "sentiment_stressed"
-  | "taunt"
-  | "altitude"
-  | "glucose"
-  | "globe_uk"
-  | "mystery"
-  | "strategy"
-  | "home_health"
-  | "sentiment_calm"
-  | "crossword"
-  | "prayer_times"
-  | "recent_patient"
-  | "chess"
-  | "pill"
-  | "sentiment_sad"
-  | "share_off"
-  | "weather_hail"
-  | "cardiology"
-  | "falling"
-  | "helicopter"
-  | "mist"
-  | "prescriptions"
-  | "sentiment_content"
-  | "wrist"
-  | "deceased"
-  | "genetics"
-  | "weather_mix"
-  | "dew_point"
-  | "sentiment_frustrated"
-  | "cheer"
-  | "metabolism"
-  | "microbiology"
-  | "body_system"
-  | "earthquake"
-  | "ent"
-  | "explosion"
-  | "pulmonology"
-  | "stethoscope_check"
-  | "infrared"
-  | "oxygen_saturation"
-  | "person_raised_hand"
-  | "sentiment_worried"
-  | "sword_rose"
-  | "barefoot"
-  | "cookie_off"
-  | "domino_mask"
-  | "emoticon"
-  | "humidity_percentage"
-  | "playing_cards"
-  | "stethoscope_arrow"
-  | "water_lux"
-  | "comic_bubble"
-  | "lab_panel"
-  | "mountain_flag"
-  | "ophthalmology"
-  | "water_bottle"
-  | "water_do"
-  | "water_voc"
-  | "allergies"
-  | "allergy"
-  | "blood_pressure"
-  | "dermatology"
-  | "gynecology"
-  | "immunology"
-  | "manga"
-  | "oncology"
-  | "oral_disease"
-  | "person_apron"
-  | "short_stay"
-  | "water_orp"
-  | "water_ph"
-  | "body_fat"
-  | "endocrinology"
-  | "folded_hands"
-  | "hematology"
-  | "inpatient"
-  | "mixture_med"
-  | "moving_beds"
-  | "nephrology"
-  | "respiratory_rate"
-  | "symptoms"
-  | "ward"
-  | "congenital"
-  | "gastroenterology"
-  | "medical_mask"
-  | "outpatient"
-  | "outpatient_med"
-  | "pediatrics"
-  | "procedure"
-  | "rainy_snow"
-  | "salinity"
-  | "surgical"
-  | "syringe"
-  | "urology"
-  | "wounds_injuries"
-  | "admin_meds"
-  | "fluid"
-  | "fluid_balance"
-  | "fluid_med"
-  | "pill_off"
-  | "pregnancy"
-  | "total_dissolved_solids"
-  | "rainy_heavy"
-  | "rainy_light"
-  | "snowing_heavy"
-  | "water_bottle_large"
-  | "water_ec"
-  | "account_circle"
-  | "info"
-  | "visibility"
-  | "calendar_month"
-  | "schedule"
-  | "help"
-  | "language"
-  | "warning"
-  | "lock"
-  | "error"
-  | "visibility_off"
-  | "verified"
-  | "manage_accounts"
-  | "history"
-  | "task_alt"
-  | "event"
-  | "bookmark"
-  | "calendar_today"
-  | "question_mark"
-  | "lightbulb"
-  | "fingerprint"
-  | "category"
-  | "update"
-  | "lock_open"
-  | "priority_high"
-  | "code"
-  | "build"
-  | "date_range"
-  | "upload_file"
-  | "supervisor_account"
-  | "event_available"
-  | "ads_click"
-  | "today"
-  | "touch_app"
-  | "pending"
-  | "preview"
-  | "stars"
-  | "new_releases"
-  | "account_box"
-  | "celebration"
-  | "how_to_reg"
-  | "translate"
-  | "bug_report"
-  | "push_pin"
-  | "alarm"
-  | "edit_calendar"
-  | "edit_square"
-  | "label"
-  | "extension"
-  | "event_note"
-  | "record_voice_over"
-  | "rate_review"
-  | "web"
-  | "hourglass_empty"
-  | "published_with_changes"
-  | "support"
-  | "notification_important"
-  | "upload"
-  | "help_center"
-  | "accessibility_new"
-  | "bookmarks"
-  | "pan_tool_alt"
-  | "supervised_user_circle"
-  | "dangerous"
-  | "collections_bookmark"
-  | "interests"
-  | "all_inclusive"
-  | "rule"
-  | "change_history"
-  | "priority"
-  | "event_upcoming"
-  | "build_circle"
-  | "wysiwyg"
-  | "pan_tool"
-  | "api"
-  | "circle_notifications"
-  | "hotel_class"
-  | "manage_history"
-  | "web_asset"
-  | "accessible"
-  | "upgrade"
-  | "bookmark_add"
-  | "lock_reset"
-  | "input"
-  | "event_busy"
-  | "more_time"
-  | "flutter_dash"
-  | "model_training"
-  | "save_as"
-  | "backup"
-  | "accessibility"
-  | "dynamic_feed"
-  | "alarm_on"
-  | "pageview"
-  | "home_app_logo"
-  | "perm_contact_calendar"
-  | "label_important"
-  | "history_toggle_off"
-  | "approval"
-  | "square_foot"
-  | "more"
-  | "swipe"
-  | "component_exchange"
-  | "event_repeat"
-  | "bookmark_added"
-  | "app_shortcut"
-  | "unpublished"
-  | "open_in_browser"
-  | "offline_bolt"
-  | "notification_add"
-  | "no_accounts"
-  | "free_cancellation"
-  | "running_with_errors"
-  | "background_replace"
-  | "anchor"
-  | "webhook"
-  | "3d_rotation"
-  | "lock_person"
-  | "new_label"
-  | "lock_clock"
-  | "accessible_forward"
-  | "auto_delete"
-  | "add_alert"
-  | "domain_verification"
-  | "outbound"
-  | "hand_gesture"
-  | "tab"
-  | "settings_power"
-  | "chrome_reader_mode"
-  | "online_prediction"
-  | "gesture"
-  | "edit_notifications"
-  | "lightbulb_circle"
-  | "find_replace"
-  | "backup_table"
-  | "offline_pin"
-  | "wifi_protected_setup"
-  | "ad_units"
-  | "http"
-  | "bookmark_remove"
-  | "alarm_add"
-  | "pinch_zoom_out"
-  | "on_device_training"
-  | "snooze"
-  | "batch_prediction"
-  | "code_off"
-  | "pinch_zoom_in"
-  | "commit"
-  | "hourglass_disabled"
-  | "settings_overscan"
-  | "polymer"
-  | "target"
-  | "logo_dev"
-  | "youtube_activity"
-  | "time_auto"
-  | "voice_over_off"
-  | "person_add_disabled"
-  | "alarm_off"
-  | "update_disabled"
-  | "timer_10_alt_1"
-  | "rounded_corner"
-  | "label_off"
-  | "all_out"
-  | "timer_3_alt_1"
-  | "tab_unselected"
-  | "rsvp"
-  | "web_asset_off"
-  | "pin_invoke"
-  | "pin_end"
-  | "code_blocks"
-  | "approval_delegation"
-  | "arrow_selector_tool"
-  | "developer_guide"
-  | "feature_search"
-  | "reminder"
-  | "lists"
-  | "problem"
-  | "visibility_lock"
-  | "browse"
-  | "award_star"
-  | "data_loss_prevention"
-  | "ad_group"
-  | "select_window"
-  | "ad"
-  | "release_alert"
-  | "settings_account_box"
-  | "shadow"
-  | "pan_zoom"
-  | "draft_orders"
-  | "circles_ext"
-  | "ad_group_off"
-  | "add_ad"
-  | "account_circle_off"
-  | "gesture_select"
-  | "lock_open_right"
-  | "watch_screentime"
-  | "circles"
-  | "select_window_off"
-  | "shift"
-  | "help_clinic"
-  | "scrollable_header"
-  | "bookmark_manager"
-  | "ad_off"
-  | "alarm_smart_wake"
-  | "preview_off"
-  | "supervised_user_circle_off"
-  | "water_lock"
-  | "domain_verification_off"
-  | "measuring_tape"
-  | "warning_off"
-  | "info_i"
-  | "shift_lock"
-  | "mail"
-  | "call"
-  | "notifications"
-  | "send"
-  | "chat"
-  | "link"
-  | "forum"
-  | "inventory_2"
-  | "phone_in_talk"
-  | "contact_support"
-  | "chat_bubble"
-  | "notifications_active"
-  | "alternate_email"
-  | "sms"
-  | "comment"
-  | "power_settings_new"
-  | "hub"
-  | "person_search"
-  | "import_contacts"
-  | "contact_mail"
-  | "contacts"
-  | "live_help"
-  | "forward_to_inbox"
-  | "mark_email_unread"
-  | "reviews"
-  | "lan"
-  | "contact_phone"
-  | "mode_comment"
-  | "hourglass_top"
-  | "inbox"
-  | "drafts"
-  | "outgoing_mail"
-  | "hourglass_bottom"
-  | "mark_email_read"
-  | "link_off"
-  | "calendar_add_on"
-  | "add_comment"
-  | "phone_enabled"
-  | "speaker_notes"
-  | "perm_phone_msg"
-  | "g_translate"
-  | "co_present"
-  | "notifications_off"
-  | "topic"
-  | "call_end"
-  | "cell_tower"
-  | "mark_chat_unread"
-  | "schedule_send"
-  | "dialpad"
-  | "call_made"
-  | "satellite_alt"
-  | "mark_unread_chat_alt"
-  | "unarchive"
-  | "3p"
-  | "cancel_presentation"
-  | "mark_as_unread"
-  | "move_to_inbox"
-  | "attach_email"
-  | "phonelink_ring"
-  | "next_plan"
-  | "unsubscribe"
-  | "phone_callback"
-  | "call_received"
-  | "settings_phone"
-  | "call_split"
-  | "present_to_all"
-  | "add_call"
-  | "markunread_mailbox"
-  | "all_inbox"
-  | "phone_forwarded"
-  | "voice_chat"
-  | "mail_lock"
-  | "attribution"
-  | "voicemail"
-  | "duo"
-  | "contact_emergency"
-  | "mark_chat_read"
-  | "upcoming"
-  | "phone_disabled"
-  | "swap_calls"
-  | "outbox"
-  | "phonelink_lock"
-  | "spoke"
-  | "cancel_schedule_send"
-  | "ring_volume"
-  | "notifications_paused"
-  | "picture_in_picture_alt"
-  | "quickreply"
-  | "phone_missed"
-  | "comment_bank"
-  | "send_and_archive"
-  | "chat_add_on"
-  | "settings_bluetooth"
-  | "phonelink_erase"
-  | "picture_in_picture"
-  | "comments_disabled"
-  | "video_chat"
-  | "score"
-  | "pause_presentation"
-  | "cell_wifi"
-  | "speaker_phone"
-  | "speaker_notes_off"
-  | "auto_read_play"
-  | "mms"
-  | "call_merge"
-  | "play_for_work"
-  | "call_missed_outgoing"
-  | "call_missed"
-  | "wifi_channel"
-  | "calendar_apps_script"
-  | "phone_paused"
-  | "rtt"
-  | "auto_read_pause"
-  | "phone_locked"
-  | "chat_apps_script"
-  | "wifi_calling"
-  | "dialer_sip"
-  | "nat"
-  | "sip"
-  | "phone_bluetooth_speaker"
-  | "e911_avatar"
-  | "inbox_customize"
-  | "stacked_email"
-  | "tooltip"
-  | "business_messages"
-  | "notification_multiple"
-  | "chat_error"
-  | "ods"
-  | "chat_paste_go"
-  | "signal_cellular_add"
-  | "call_log"
-  | "outbox_alt"
-  | "call_quality"
-  | "odt"
-  | "stacked_inbox"
-  | "phonelink_ring_off"
-  | "network_manage"
-  | "wifi_proxy"
-  | "network_intelligence_history"
-  | "wifi_add"
-  | "network_intelligence_update"
-  | "edit"
-  | "photo_camera"
-  | "filter_alt"
-  | "image"
-  | "navigate_next"
-  | "tune"
-  | "timer"
-  | "picture_as_pdf"
-  | "circle"
-  | "palette"
-  | "add_a_photo"
-  | "photo_library"
-  | "navigate_before"
-  | "auto_stories"
-  | "add_photo_alternate"
-  | "brush"
-  | "imagesmode"
-  | "nature"
-  | "flash_on"
-  | "wb_sunny"
-  | "camera"
-  | "straighten"
-  | "looks_one"
-  | "landscape"
-  | "timelapse"
-  | "slideshow"
-  | "grid_on"
-  | "rotate_right"
-  | "crop_square"
-  | "adjust"
-  | "style"
-  | "crop_free"
-  | "aspect_ratio"
-  | "brightness_6"
-  | "photo"
-  | "nature_people"
-  | "filter_vintage"
-  | "image_search"
-  | "crop"
-  | "blur_on"
-  | "center_focus_strong"
-  | "contrast"
-  | "compare"
-  | "looks_two"
-  | "rotate_left"
-  | "colorize"
-  | "flare"
-  | "filter_none"
-  | "wb_incandescent"
-  | "filter_drama"
-  | "healing"
-  | "looks_3"
-  | "wb_twilight"
-  | "brightness_5"
-  | "invert_colors"
-  | "lens"
-  | "animation"
-  | "opacity"
-  | "incomplete_circle"
-  | "broken_image"
-  | "filter_center_focus"
-  | "add_to_photos"
-  | "brightness_4"
-  | "flip"
-  | "flash_off"
-  | "center_focus_weak"
-  | "auto_awesome_motion"
-  | "mic_external_on"
-  | "flip_camera_android"
-  | "lens_blur"
-  | "no_photography"
-  | "details"
-  | "grain"
-  | "image_not_supported"
-  | "web_stories"
-  | "panorama"
-  | "dehaze"
-  | "gif_box"
-  | "flaky"
-  | "loupe"
-  | "exposure_plus_1"
-  | "settings_brightness"
-  | "texture"
-  | "auto_awesome_mosaic"
-  | "looks_4"
-  | "filter_1"
-  | "timer_off"
-  | "flip_camera_ios"
-  | "panorama_fish_eye"
-  | "view_compact"
-  | "brightness_1"
-  | "filter"
-  | "control_point_duplicate"
-  | "photo_camera_front"
-  | "brightness_7"
-  | "photo_album"
-  | "transform"
-  | "linked_camera"
-  | "view_comfy"
-  | "crop_16_9"
-  | "looks"
-  | "hide_image"
-  | "looks_5"
-  | "exposure"
-  | "rotate_90_degrees_ccw"
-  | "filter_hdr"
-  | "gif"
-  | "brightness_3"
-  | "hdr_strong"
-  | "leak_add"
-  | "crop_7_5"
-  | "gradient"
-  | "hdr_auto"
-  | "crop_portrait"
-  | "vrpano"
-  | "camera_roll"
-  | "blur_circular"
-  | "motion_photos_auto"
-  | "rotate_90_degrees_cw"
-  | "photo_size_select_small"
-  | "brightness_2"
-  | "shutter_speed"
-  | "looks_6"
-  | "flash_auto"
-  | "camera_front"
-  | "crop_landscape"
-  | "filter_2"
-  | "filter_tilt_shift"
-  | "monochrome_photos"
-  | "deblur"
-  | "night_sight_auto"
-  | "crop_5_4"
-  | "hdr_weak"
-  | "filter_4"
-  | "motion_photos_paused"
-  | "filter_3"
-  | "crop_rotate"
-  | "crop_3_2"
-  | "tonality"
-  | "switch_camera"
-  | "photo_frame"
-  | "exposure_zero"
-  | "ev_shadow"
-  | "fluorescent"
-  | "macro_off"
-  | "photo_size_select_large"
-  | "filter_frames"
-  | "party_mode"
-  | "raw_on"
-  | "motion_blur"
-  | "exposure_plus_2"
-  | "photo_camera_back"
-  | "blur_linear"
-  | "exposure_neg_1"
-  | "wb_iridescent"
-  | "filter_b_and_w"
-  | "switch_video"
-  | "motion_photos_off"
-  | "panorama_horizontal"
-  | "filter_5"
-  | "blur_medium"
-  | "invert_colors_off"
-  | "face_retouching_off"
-  | "filter_7"
-  | "burst_mode"
-  | "panorama_photosphere"
-  | "hdr_on"
-  | "grid_off"
-  | "filter_9_plus"
-  | "filter_8"
-  | "blur_short"
-  | "timer_10"
-  | "filter_9"
-  | "dirty_lens"
-  | "wb_shade"
-  | "no_flash"
-  | "filter_6"
-  | "image_aspect_ratio"
-  | "trail_length"
-  | "exposure_neg_2"
-  | "vignette"
-  | "timer_3"
-  | "leak_remove"
-  | "60fps_select"
-  | "blur_off"
-  | "30fps_select"
-  | "perm_camera_mic"
-  | "mic_external_off"
-  | "trail_length_medium"
-  | "camera_rear"
-  | "panorama_vertical"
-  | "trail_length_short"
-  | "night_sight_auto_off"
-  | "autofps_select"
-  | "panorama_wide_angle"
-  | "mp"
-  | "hdr_off"
-  | "24mp"
-  | "hdr_on_select"
-  | "hdr_enhanced_select"
-  | "22mp"
-  | "10mp"
-  | "12mp"
-  | "18mp"
-  | "hdr_auto_select"
-  | "hdr_plus"
-  | "raw_off"
-  | "wb_auto"
-  | "9mp"
-  | "13mp"
-  | "20mp"
-  | "5mp"
-  | "7mp"
-  | "15mp"
-  | "hdr_off_select"
-  | "16mp"
-  | "hevc"
-  | "19mp"
-  | "14mp"
-  | "23mp"
-  | "2mp"
-  | "8mp"
-  | "3mp"
-  | "6mp"
-  | "11mp"
-  | "21mp"
-  | "17mp"
-  | "4mp"
-  | "gallery_thumbnail"
-  | "motion_photos_on"
-  | "masked_transitions"
-  | "photo_prints"
-  | "settings_photo_camera"
-  | "planner_banner_ad_pt"
-  | "settings_panorama"
-  | "unknown_2"
-  | "vr180_create2d"
-  | "settings_video_camera"
-  | "motion_mode"
-  | "settings_motion_mode"
-  | "settings_night_sight"
-  | "50mp"
-  | "background_dot_large"
-  | "background_grid_small"
-  | "settings_cinematic_blur"
-  | "settings_timelapse"
-  | "macro_auto"
-  | "settings_b_roll"
-  | "high_density"
-  | "contrast_rtl_off"
-  | "low_density"
-  | "settings_slow_motion"
-  | "shopping_cart"
-  | "payments"
-  | "shopping_bag"
-  | "monitoring"
-  | "credit_card"
-  | "receipt_long"
-  | "attach_money"
-  | "storefront"
-  | "sell"
-  | "trending_up"
-  | "database"
-  | "account_balance"
-  | "work"
-  | "paid"
-  | "account_balance_wallet"
-  | "analytics"
-  | "query_stats"
-  | "store"
-  | "savings"
-  | "monetization_on"
-  | "calculate"
-  | "qr_code_scanner"
-  | "bar_chart"
-  | "add_shopping_cart"
-  | "account_tree"
-  | "receipt"
-  | "redeem"
-  | "currency_exchange"
-  | "trending_flat"
-  | "shopping_basket"
-  | "qr_code_2"
-  | "domain"
-  | "precision_manufacturing"
-  | "qr_code"
-  | "leaderboard"
-  | "corporate_fare"
-  | "timeline"
-  | "insert_chart"
-  | "currency_rupee"
-  | "show_chart"
-  | "wallet"
-  | "euro"
-  | "work_history"
-  | "meeting_room"
-  | "credit_score"
-  | "barcode_scanner"
-  | "pie_chart"
-  | "loyalty"
-  | "copyright"
-  | "barcode"
-  | "conversion_path"
-  | "track_changes"
-  | "trending_down"
-  | "price_check"
-  | "euro_symbol"
-  | "schema"
-  | "add_business"
-  | "add_card"
-  | "card_membership"
-  | "currency_bitcoin"
-  | "price_change"
-  | "production_quantity_limits"
-  | "donut_large"
-  | "tenancy"
-  | "data_exploration"
-  | "bubble_chart"
-  | "donut_small"
-  | "contactless"
-  | "money"
-  | "stacked_line_chart"
-  | "stacked_bar_chart"
-  | "toll"
-  | "money_off"
-  | "cases"
-  | "currency_yen"
-  | "currency_pound"
-  | "area_chart"
-  | "atr"
-  | "remove_shopping_cart"
-  | "room_preferences"
-  | "add_chart"
-  | "shop"
-  | "domain_add"
-  | "card_travel"
-  | "grouped_bar_chart"
-  | "legend_toggle"
-  | "scatter_plot"
-  | "credit_card_off"
-  | "mediation"
-  | "ssid_chart"
-  | "candlestick_chart"
-  | "waterfall_chart"
-  | "currency_ruble"
-  | "full_stacked_bar_chart"
-  | "domain_disabled"
-  | "strikethrough_s"
-  | "shop_two"
-  | "next_week"
-  | "atm"
-  | "multiline_chart"
-  | "currency_lira"
-  | "currency_yuan"
-  | "no_meeting_room"
-  | "currency_franc"
-  | "troubleshoot"
-  | "finance"
-  | "data_table"
-  | "bid_landscape"
-  | "contactless_off"
-  | "bar_chart_4_bars"
-  | "universal_currency_alt"
-  | "chart_data"
-  | "podium"
-  | "order_approve"
-  | "family_history"
-  | "conveyor_belt"
-  | "send_money"
-  | "flowsheet"
-  | "forklift"
-  | "qr_code_2_add"
-  | "front_loader"
-  | "inactive_order"
-  | "pallet"
-  | "bid_landscape_disabled"
-  | "barcode_reader"
-  | "box"
-  | "trolley"
-  | "box_add"
-  | "conversion_path_off"
-  | "order_play"
-  | "work_alert"
-  | "box_edit"
-  | "work_update"
-  | "pin_drop"
-  | "location_on"
-  | "map"
-  | "home_pin"
-  | "explore"
-  | "restaurant"
-  | "flag"
-  | "my_location"
-  | "local_fire_department"
-  | "person_pin_circle"
-  | "local_mall"
-  | "near_me"
-  | "where_to_vote"
-  | "business_center"
-  | "east"
-  | "restaurant_menu"
-  | "handyman"
-  | "factory"
-  | "local_library"
-  | "medical_services"
-  | "home_work"
-  | "layers"
-  | "local_activity"
-  | "share_location"
-  | "emergency"
-  | "north_east"
-  | "add_location"
-  | "fastfood"
-  | "navigation"
-  | "warehouse"
-  | "person_pin"
-  | "local_parking"
-  | "home_repair_service"
-  | "local_hospital"
-  | "south"
-  | "local_police"
-  | "zoom_out_map"
-  | "location_searching"
-  | "local_florist"
-  | "location_away"
-  | "crisis_alert"
-  | "west"
-  | "local_gas_station"
-  | "park"
-  | "maps_ugc"
-  | "cleaning_services"
-  | "local_atm"
-  | "package"
-  | "360"
-  | "electrical_services"
-  | "north"
-  | "flag_circle"
-  | "add_location_alt"
-  | "directions"
-  | "fmd_bad"
-  | "theater_comedy"
-  | "local_drink"
-  | "location_home"
-  | "local_pizza"
-  | "local_post_office"
-  | "not_listed_location"
-  | "wine_bar"
-  | "beenhere"
-  | "local_convenience_store"
-  | "signpost"
-  | "alt_route"
-  | "tour"
-  | "trip_origin"
-  | "church"
-  | "traffic"
-  | "local_laundry_service"
-  | "safety_check"
-  | "ev_station"
-  | "takeout_dining"
-  | "moving"
-  | "zoom_in_map"
-  | "soup_kitchen"
-  | "pest_control"
-  | "stadium"
-  | "transfer_within_a_station"
-  | "location_off"
-  | "connecting_airports"
-  | "wrong_location"
-  | "multiple_stop"
-  | "edit_location"
-  | "plumbing"
-  | "mode_of_travel"
-  | "minor_crash"
-  | "south_east"
-  | "add_road"
-  | "local_pharmacy"
-  | "fire_truck"
-  | "castle"
-  | "dry_cleaning"
-  | "set_meal"
-  | "baby_changing_station"
-  | "edit_location_alt"
-  | "layers_clear"
-  | "mosque"
-  | "north_west"
-  | "local_car_wash"
-  | "edit_attributes"
-  | "run_circle"
-  | "transit_enterexit"
-  | "sos"
-  | "satellite"
-  | "edit_road"
-  | "south_west"
-  | "streetview"
-  | "add_home"
-  | "kebab_dining"
-  | "airline_stops"
-  | "local_see"
-  | "fire_hydrant"
-  | "assist_walker"
-  | "add_home_work"
-  | "flight_class"
-  | "remove_road"
-  | "no_meals"
-  | "synagogue"
-  | "fort"
-  | "temple_buddhist"
-  | "location_disabled"
-  | "compass_calibration"
-  | "temple_hindu"
-  | "explore_off"
-  | "pest_control_rodent"
-  | "near_me_disabled"
-  | "directions_alt"
-  | "pergola"
-  | "directions_off"
-  | "directions_alt_off"
-  | "pet_supplies"
-  | "moved_location"
-  | "move_location"
-  | "moving_ministry"
-  | "move"
-  | "safety_check_off"
-  | "description"
-  | "content_copy"
-  | "dashboard"
-  | "edit_note"
-  | "menu_book"
-  | "grid_view"
-  | "list"
-  | "folder"
-  | "list_alt"
-  | "inventory"
-  | "folder_open"
-  | "article"
-  | "fact_check"
-  | "attach_file"
-  | "format_list_bulleted"
-  | "assignment"
-  | "task"
-  | "checklist"
-  | "cloud_upload"
-  | "draft"
-  | "summarize"
-  | "feed"
-  | "draw"
-  | "cloud"
-  | "newspaper"
-  | "view_list"
-  | "file_copy"
-  | "note_add"
-  | "border_color"
-  | "book"
-  | "history_edu"
-  | "design_services"
-  | "pending_actions"
-  | "format_quote"
-  | "post_add"
-  | "request_quote"
-  | "cloud_download"
-  | "drag_handle"
-  | "contact_page"
-  | "table"
-  | "space_dashboard"
-  | "archive"
-  | "content_paste"
-  | "percent"
-  | "attachment"
-  | "assignment_ind"
-  | "format_list_numbered"
-  | "assignment_turned_in"
-  | "tag"
-  | "table_chart"
-  | "sticky_note_2"
-  | "text_fields"
-  | "dashboard_customize"
-  | "reorder"
-  | "integration_instructions"
-  | "format_bold"
-  | "find_in_page"
-  | "text_snippet"
-  | "note"
-  | "document_scanner"
-  | "checklist_rtl"
-  | "note_alt"
-  | "edit_document"
-  | "cloud_sync"
-  | "table_rows"
-  | "perm_media"
-  | "cloud_done"
-  | "title"
-  | "table_view"
-  | "content_cut"
-  | "notes"
-  | "cut"
-  | "data_object"
-  | "subject"
-  | "functions"
-  | "format_italic"
-  | "content_paste_search"
-  | "format_color_fill"
-  | "folder_shared"
-  | "plagiarism"
-  | "horizontal_rule"
-  | "file_present"
-  | "folder_copy"
-  | "format_align_left"
-  | "ballot"
-  | "team_dashboard"
-  | "format_paint"
-  | "cloud_off"
-  | "add_link"
-  | "view_column"
-  | "read_more"
-  | "difference"
-  | "view_agenda"
-  | "format_size"
-  | "format_underlined"
-  | "vertical_align_top"
-  | "toc"
-  | "height"
-  | "vertical_align_bottom"
-  | "copy_all"
-  | "view_week"
-  | "drive_folder_upload"
-  | "assignment_late"
-  | "format_color_text"
-  | "view_module"
-  | "drive_file_move"
-  | "low_priority"
-  | "assignment_return"
-  | "format_align_center"
-  | "segment"
-  | "folder_special"
-  | "calendar_view_month"
-  | "folder_zip"
-  | "polyline"
-  | "square"
-  | "breaking_news_alt_1"
-  | "format_align_right"
-  | "grading"
-  | "view_headline"
-  | "linear_scale"
-  | "edit_off"
-  | "view_quilt"
-  | "view_carousel"
-  | "text_increase"
-  | "request_page"
-  | "view_sidebar"
-  | "pages"
-  | "text_format"
-  | "format_align_justify"
-  | "calendar_view_week"
-  | "hexagon"
-  | "numbers"
-  | "docs_add_on"
-  | "folder_delete"
-  | "format_shapes"
-  | "forms_add_on"
-  | "imagesearch_roller"
-  | "calendar_view_day"
-  | "video_file"
-  | "font_download"
-  | "format_list_numbered_rtl"
-  | "join_inner"
-  | "add_to_drive"
-  | "content_paste_go"
-  | "restore_page"
-  | "rectangle"
-  | "vertical_split"
-  | "rule_folder"
-  | "format_color_reset"
-  | "cloud_circle"
-  | "view_stream"
-  | "format_indent_increase"
-  | "spellcheck"
-  | "assignment_returned"
-  | "data_array"
-  | "align_horizontal_left"
-  | "text_decrease"
-  | "pivot_table_chart"
-  | "deselect"
-  | "vertical_align_center"
-  | "pentagon"
-  | "merge_type"
-  | "space_bar"
-  | "format_strikethrough"
-  | "view_day"
-  | "flip_to_front"
-  | "join_left"
-  | "short_text"
-  | "border_all"
-  | "shape_line"
-  | "format_line_spacing"
-  | "line_weight"
-  | "horizontal_split"
-  | "format_indent_decrease"
-  | "align_horizontal_center"
-  | "join_right"
-  | "snippet_folder"
-  | "subtitles_off"
-  | "align_vertical_bottom"
-  | "folder_off"
-  | "align_horizontal_right"
-  | "glyphs"
-  | "format_clear"
-  | "function"
-  | "insert_page_break"
-  | "vertical_distribute"
-  | "content_paste_off"
-  | "superscript"
-  | "horizontal_distribute"
-  | "line_axis"
-  | "line_style"
-  | "flip_to_back"
-  | "align_vertical_center"
-  | "align_vertical_top"
-  | "margin"
-  | "clarify"
-  | "wrap_text"
-  | "view_array"
-  | "subscript"
-  | "border_clear"
-  | "border_style"
-  | "amp_stories"
-  | "border_outer"
-  | "type_specimen"
-  | "text_rotate_vertical"
-  | "padding"
-  | "forms_apps_script"
-  | "border_vertical"
-  | "ink_pen"
-  | "text_rotation_none"
-  | "counter_1"
-  | "format_textdirection_l_to_r"
-  | "ink_eraser"
-  | "format_overline"
-  | "docs_apps_script"
-  | "border_horizontal"
-  | "font_download_off"
-  | "format_textdirection_r_to_l"
-  | "newsmode"
-  | "text_rotation_angleup"
-  | "border_bottom"
-  | "text_rotation_down"
-  | "border_inner"
-  | "border_top"
-  | "border_left"
-  | "text_rotation_angledown"
-  | "assignment_add"
-  | "finance_chip"
-  | "text_rotate_up"
-  | "news"
-  | "border_right"
-  | "format_h1"
-  | "ink_highlighter"
-  | "view_column_2"
-  | "join"
-  | "full_coverage"
-  | "overview"
-  | "format_underlined_squiggle"
-  | "colors"
-  | "slide_library"
-  | "format_h2"
-  | "format_paragraph"
-  | "format_image_left"
-  | "format_list_bulleted_add"
-  | "breaking_news"
-  | "counter_2"
-  | "lab_profile"
-  | "frame_inspect"
-  | "equal"
-  | "variables"
-  | "counter_3"
-  | "format_image_right"
-  | "format_h3"
-  | "ink_marker"
-  | "format_h5"
-  | "format_h6"
-  | "csv"
-  | "voting_chip"
-  | "process_chart"
-  | "remove_selection"
-  | "format_h4"
-  | "signature"
-  | "format_ink_highlighter"
-  | "location_chip"
-  | "export_notes"
-  | "stylus_laser_pointer"
-  | "sticky_note"
-  | "shapes"
-  | "unknown_document"
-  | "frame_source"
-  | "add_notes"
-  | "counter_4"
-  | "format_text_overflow"
-  | "cell_merge"
-  | "format_letter_spacing_standard"
-  | "grid_guides"
-  | "select"
-  | "table_rows_narrow"
-  | "diagnosis"
-  | "regular_expression"
-  | "reset_image"
-  | "table_chart_view"
-  | "text_select_move_forward_character"
-  | "business_chip"
-  | "custom_typography"
-  | "draw_abstract"
-  | "source_notes"
-  | "decimal_increase"
-  | "folder_managed"
-  | "list_alt_add"
-  | "text_ad"
-  | "width"
-  | "insert_text"
-  | "lasso_select"
-  | "scan_delete"
-  | "smb_share"
-  | "ungroup"
-  | "counter_5"
-  | "format_letter_spacing_2"
-  | "line_end_arrow_notch"
-  | "line_start"
-  | "tab_close"
-  | "thumbnail_bar"
-  | "contract"
-  | "counter_6"
-  | "format_letter_spacing"
-  | "line_end"
-  | "match_case"
-  | "stroke_full"
-  | "draw_collage"
-  | "flex_wrap"
-  | "format_letter_spacing_wider"
-  | "language_chinese_quick"
-  | "line_end_square"
-  | "other_admission"
-  | "post"
-  | "scan"
-  | "text_select_start"
-  | "folder_supervised"
-  | "format_letter_spacing_wide"
-  | "language_spanish"
-  | "line_end_arrow"
-  | "line_start_diamond"
-  | "match_word"
-  | "align_justify_space_around"
-  | "align_justify_space_between"
-  | "align_space_between"
-  | "contract_edit"
-  | "format_text_clip"
-  | "line_end_circle"
-  | "line_start_circle"
-  | "special_character"
-  | "tab_duplicate"
-  | "tab_move"
-  | "tab_new_right"
-  | "text_select_jump_to_beginning"
-  | "top_panel_close"
-  | "top_panel_open"
-  | "counter_0"
-  | "counter_7"
-  | "counter_8"
-  | "flex_direction"
-  | "frame_reload"
-  | "heap_snapshot_multiple"
-  | "heap_snapshot_thumbnail"
-  | "ink_eraser_off"
-  | "language_french"
-  | "language_gb_english"
-  | "language_international"
-  | "language_korean_latin"
-  | "line_end_diamond"
-  | "sheets_rtl"
-  | "text_select_move_forward_word"
-  | "text_select_move_up"
-  | "tsv"
-  | "align_justify_space_even"
-  | "attach_file_add"
-  | "counter_9"
-  | "fit_width"
-  | "heap_snapshot_large"
-  | "language_chinese_dayi"
-  | "line_curve"
-  | "line_start_square"
-  | "person_book"
-  | "stroke_partial"
-  | "tab_group"
-  | "text_select_move_down"
-  | "align_justify_center"
-  | "align_justify_flex_end"
-  | "align_justify_flex_start"
-  | "align_space_around"
-  | "align_space_even"
-  | "contract_delete"
-  | "fit_page"
-  | "format_text_wrap"
-  | "highlighter_size_4"
-  | "language_chinese_array"
-  | "language_chinese_cangjie"
-  | "language_chinese_pinyin"
-  | "language_chinese_wubi"
-  | "language_pinyin"
-  | "language_us"
-  | "language_us_colemak"
-  | "language_us_dvorak"
-  | "letter_switch"
-  | "line_start_arrow"
-  | "line_start_arrow_notch"
-  | "pen_size_2"
-  | "pen_size_3"
-  | "pen_size_4"
-  | "pen_size_5"
-  | "tab_close_right"
-  | "tab_recent"
-  | "text_select_end"
-  | "text_select_jump_to_end"
-  | "align_center"
-  | "align_end"
-  | "align_flex_center"
-  | "align_flex_end"
-  | "align_flex_start"
-  | "align_items_stretch"
-  | "align_justify_stretch"
-  | "align_self_stretch"
-  | "align_start"
-  | "align_stretch"
-  | "decimal_decrease"
-  | "flex_no_wrap"
-  | "highlighter_size_1"
-  | "highlighter_size_2"
-  | "highlighter_size_3"
-  | "highlighter_size_5"
-  | "pen_size_1"
-  | "text_select_move_back_character"
-  | "text_select_move_back_word"
-  | "play_arrow"
-  | "play_circle"
-  | "mic"
-  | "videocam"
-  | "volume_up"
-  | "pause"
-  | "music_note"
-  | "library_books"
-  | "movie"
-  | "skip_next"
-  | "speed"
-  | "replay"
-  | "volume_off"
-  | "pause_circle"
-  | "view_in_ar"
-  | "fiber_manual_record"
-  | "skip_previous"
-  | "stop_circle"
-  | "stop"
-  | "equalizer"
-  | "subscriptions"
-  | "video_library"
-  | "fast_forward"
-  | "playlist_add"
-  | "video_call"
-  | "repeat"
-  | "volume_mute"
-  | "shuffle"
-  | "mic_off"
-  | "hearing"
-  | "library_music"
-  | "playlist_add_check"
-  | "podcasts"
-  | "fast_rewind"
-  | "sound_detection_dog_barking"
-  | "queue_music"
-  | "video_camera_front"
-  | "subtitles"
-  | "volume_down"
-  | "play_pause"
-  | "album"
-  | "discover_tune"
-  | "radio"
-  | "av_timer"
-  | "library_add_check"
-  | "videocam_off"
-  | "closed_caption"
-  | "stream"
-  | "forward_10"
-  | "not_started"
-  | "playlist_play"
-  | "replay_10"
-  | "fiber_new"
-  | "branding_watermark"
-  | "text_to_speech"
-  | "recent_actors"
-  | "playlist_remove"
-  | "interpreter_mode"
-  | "slow_motion_video"
-  | "frame_person"
-  | "playlist_add_check_circle"
-  | "settings_voice"
-  | "video_settings"
-  | "featured_play_list"
-  | "sound_detection_loud_sound"
-  | "audio_file"
-  | "lyrics"
-  | "play_lesson"
-  | "hd"
-  | "repeat_one"
-  | "call_to_action"
-  | "high_quality"
-  | "add_to_queue"
-  | "music_off"
-  | "video_camera_back"
-  | "spatial_audio_off"
-  | "shuffle_on"
-  | "playlist_add_circle"
-  | "volume_down_alt"
-  | "hearing_disabled"
-  | "featured_video"
-  | "replay_5"
-  | "repeat_on"
-  | "queue_play_next"
-  | "speech_to_text"
-  | "spatial_audio"
-  | "art_track"
-  | "explicit"
-  | "airplay"
-  | "forward_5"
-  | "forward_30"
-  | "4k"
-  | "music_video"
-  | "replay_30"
-  | "control_camera"
-  | "spatial_tracking"
-  | "closed_caption_disabled"
-  | "digital_out_of_home"
-  | "video_label"
-  | "fiber_smart_record"
-  | "play_disabled"
-  | "repeat_one_on"
-  | "broadcast_on_personal"
-  | "sd"
-  | "missed_video_call"
-  | "surround_sound"
-  | "fiber_pin"
-  | "10k"
-  | "sound_detection_glass_break"
-  | "60fps"
-  | "remove_from_queue"
-  | "brand_awareness"
-  | "broadcast_on_home"
-  | "fiber_dvr"
-  | "30fps"
-  | "4k_plus"
-  | "video_stable"
-  | "8k"
-  | "1k"
-  | "privacy"
-  | "8k_plus"
-  | "2k"
-  | "instant_mix"
-  | "7k"
-  | "1k_plus"
-  | "9k"
-  | "9k_plus"
-  | "5k"
-  | "6k"
-  | "2k_plus"
-  | "5k_plus"
-  | "6k_plus"
-  | "3k"
-  | "7k_plus"
-  | "3k_plus"
-  | "ar_on_you"
-  | "no_sound"
-  | "cinematic_blur"
-  | "video_search"
-  | "hangout_video"
-  | "genres"
-  | "media_link"
-  | "mic_double"
-  | "autoplay"
-  | "video_camera_front_off"
-  | "movie_edit"
-  | "autopause"
-  | "forward_media"
-  | "movie_info"
-  | "resume"
-  | "hangout_video_off"
-  | "select_to_speak"
-  | "autostop"
-  | "2d"
-  | "forward_circle"
-  | "view_in_ar_off"
-  | "frame_person_off"
-  | "sound_sampler"
-  | "local_shipping"
-  | "directions_car"
-  | "flight"
-  | "directions_run"
-  | "directions_walk"
-  | "flight_takeoff"
-  | "directions_bus"
-  | "directions_bike"
-  | "train"
-  | "airport_shuttle"
-  | "pedal_bike"
-  | "directions_boat"
-  | "two_wheeler"
-  | "agriculture"
-  | "local_taxi"
-  | "sailing"
-  | "electric_car"
-  | "flight_land"
-  | "hail"
-  | "no_crash"
-  | "commute"
-  | "motorcycle"
-  | "car_crash"
-  | "tram"
-  | "departure_board"
-  | "subway"
-  | "electric_moped"
-  | "turn_right"
-  | "electric_scooter"
-  | "fork_right"
-  | "directions_subway"
-  | "tire_repair"
-  | "electric_bike"
-  | "rv_hookup"
-  | "bus_alert"
-  | "turn_left"
-  | "transportation"
-  | "airlines"
-  | "taxi_alert"
-  | "u_turn_left"
-  | "directions_railway"
-  | "electric_rickshaw"
-  | "turn_slight_right"
-  | "u_turn_right"
-  | "fork_left"
-  | "railway_alert"
-  | "bike_scooter"
-  | "turn_sharp_right"
-  | "turn_slight_left"
-  | "no_transfer"
-  | "snowmobile"
-  | "turn_sharp_left"
-  | "flightsmode"
-  | "swap_driving_apps_wheel"
-  | "ambulance"
-  | "school"
-  | "campaign"
-  | "construction"
-  | "engineering"
-  | "volunteer_activism"
-  | "science"
-  | "sports_esports"
-  | "confirmation_number"
-  | "real_estate_agent"
-  | "cake"
-  | "self_improvement"
-  | "sports_soccer"
-  | "air"
-  | "biotech"
-  | "water"
-  | "hiking"
-  | "architecture"
-  | "sports_score"
-  | "personal_injury"
-  | "sports_basketball"
-  | "waves"
-  | "theaters"
-  | "sports_tennis"
-  | "switch_account"
-  | "nights_stay"
-  | "sports_gymnastics"
-  | "how_to_vote"
-  | "backpack"
-  | "sports_motorsports"
-  | "sports_kabaddi"
-  | "surfing"
-  | "piano"
-  | "sports"
-  | "toys"
-  | "sports_volleyball"
-  | "sports_baseball"
-  | "sports_martial_arts"
-  | "camping"
-  | "downhill_skiing"
-  | "swords"
-  | "kayaking"
-  | "scoreboard"
-  | "phishing"
-  | "sports_handball"
-  | "sports_football"
-  | "skateboarding"
-  | "sports_golf"
-  | "sports_cricket"
-  | "toys_fan"
-  | "nordic_walking"
-  | "kitesurfing"
-  | "roller_skating"
-  | "rowing"
-  | "scuba_diving"
-  | "trophy"
-  | "storm"
-  | "sports_mma"
-  | "paragliding"
-  | "snowboarding"
-  | "sports_hockey"
-  | "ice_skating"
-  | "snowshoeing"
-  | "sports_rugby"
-  | "sledding"
-  | "piano_off"
-  | "no_backpack"
-  | "family_link"
-  | "rewarded_ads"
-  | "ifl"
-  | "cake_add"
-  | "mindfulness"
-  | "health_metrics"
-  | "steps"
-  | "sprint"
-  | "exercise"
-  | "stress_management"
-  | "menstrual_health"
-  | "readiness_score"
-  | "relax"
-  | "ecg_heart"
-  | "laps"
-  | "azm"
-  | "pace"
-  | "distance"
-  | "person_play"
-  | "floor"
-  | "avg_time"
-  | "person_celebrate"
-  | "avg_pace"
-  | "fertile"
-  | "onsen"
-  | "podiatry"
-  | "spo2"
-  | "water_full"
-  | "bath_outdoor"
-  | "play_shapes"
-  | "eda"
-  | "bia"
-  | "water_medium"
-  | "interactive_space"
-  | "elevation"
-  | "hr_resting"
-  | "glass_cup"
-  | "water_loss"
-  | "monitor_weight_loss"
-  | "sauna"
-  | "sleep_score"
-  | "bath_private"
-  | "monitor_weight_gain"
-  | "bath_public_large"
-  | "check_in_out"
-  | "physical_therapy"
-  | "phone_iphone"
-  | "save"
-  | "smartphone"
-  | "print"
-  | "keyboard_arrow_down"
-  | "computer"
-  | "devices"
-  | "desktop_windows"
-  | "smart_display"
-  | "dns"
-  | "keyboard_backspace"
-  | "headphones"
-  | "smart_toy"
-  | "phone_android"
-  | "keyboard_arrow_right"
-  | "memory"
-  | "keyboard"
-  | "live_tv"
-  | "laptop_mac"
-  | "headset_mic"
-  | "keyboard_arrow_up"
-  | "tv"
-  | "device_thermostat"
-  | "mouse"
-  | "balance"
-  | "route"
-  | "point_of_sale"
-  | "keyboard_arrow_left"
-  | "laptop_chromebook"
-  | "keyboard_return"
-  | "watch"
-  | "power"
-  | "laptop_windows"
-  | "router"
-  | "developer_board"
-  | "display_settings"
-  | "scale"
-  | "book_online"
-  | "developer_mode"
-  | "fax"
-  | "cast"
-  | "cast_for_education"
-  | "videogame_asset"
-  | "device_hub"
-  | "straight"
-  | "screen_search_desktop"
-  | "desktop_mac"
-  | "mobile_friendly"
-  | "settings_ethernet"
-  | "settings_input_antenna"
-  | "monitor"
-  | "important_devices"
-  | "tablet_mac"
-  | "devices_other"
-  | "send_to_mobile"
-  | "system_update"
-  | "settings_remote"
-  | "monitor_weight"
-  | "screen_rotation"
-  | "screen_share"
-  | "keyboard_alt"
-  | "settings_input_component"
-  | "speaker"
-  | "merge"
-  | "sim_card"
-  | "keyboard_tab"
-  | "vibration"
-  | "power_off"
-  | "tablet"
-  | "connected_tv"
-  | "screenshot_monitor"
-  | "remember_me"
-  | "browser_updated"
-  | "security_update_good"
-  | "sd_card"
-  | "cast_connected"
-  | "device_unknown"
-  | "tablet_android"
-  | "charging_station"
-  | "phonelink_setup"
-  | "punch_clock"
-  | "scanner"
-  | "screenshot"
-  | "settings_input_hdmi"
-  | "stay_current_portrait"
-  | "tap_and_play"
-  | "keyboard_hide"
-  | "print_disabled"
-  | "security_update_warning"
-  | "disc_full"
-  | "app_blocking"
-  | "keyboard_capslock"
-  | "speaker_group"
-  | "mobile_screen_share"
-  | "aod"
-  | "sd_card_alert"
-  | "tty"
-  | "add_to_home_screen"
-  | "lift_to_talk"
-  | "earbuds"
-  | "perm_device_information"
-  | "stop_screen_share"
-  | "mobile_off"
-  | "headset_off"
-  | "desktop_access_disabled"
-  | "reset_tv"
-  | "offline_share"
-  | "adf_scanner"
-  | "headphones_battery"
-  | "screen_lock_portrait"
-  | "roundabout_right"
-  | "dock"
-  | "settop_component"
-  | "settings_input_svideo"
-  | "watch_off"
-  | "smart_screen"
-  | "stay_current_landscape"
-  | "chromecast_device"
-  | "settings_cell"
-  | "earbuds_battery"
-  | "home_max"
-  | "power_input"
-  | "no_sim"
-  | "screen_lock_landscape"
-  | "ramp_right"
-  | "roundabout_left"
-  | "stay_primary_landscape"
-  | "stay_primary_portrait"
-  | "developer_board_off"
-  | "tv_off"
-  | "home_mini"
-  | "phonelink_off"
-  | "ramp_left"
-  | "screen_lock_rotation"
-  | "videogame_asset_off"
-  | "aod_tablet"
-  | "open_in_phone"
-  | "gamepad"
-  | "robot"
-  | "rear_camera"
-  | "jamboard_kiosk"
-  | "mimo"
-  | "app_promo"
-  | "devices_wearables"
-  | "tv_options_edit_channels"
-  | "developer_mode_tv"
-  | "mimo_disconnect"
-  | "ambient_screen"
-  | "touchpad_mouse"
-  | "camera_video"
-  | "tv_signin"
-  | "aod_watch"
-  | "joystick"
-  | "ecg"
-  | "memory_alt"
-  | "robot_2"
-  | "tv_guide"
-  | "devices_off"
-  | "night_sight_max"
-  | "hard_drive"
-  | "open_jam"
-  | "screenshot_tablet"
-  | "stream_apps"
-  | "cast_pause"
-  | "cast_warning"
-  | "keyboard_tab_rtl"
-  | "pacemaker"
-  | "deskphone"
-  | "watch_wake"
-  | "hard_drive_2"
-  | "lda"
-  | "print_lock"
-  | "tv_remote"
-  | "watch_button_press"
-  | "audio_video_receiver"
-  | "print_add"
-  | "print_connect"
-  | "print_error"
-  | "ventilator"
-  | "dark_mode"
-  | "light_mode"
-  | "wifi"
-  | "signal_cellular_alt"
-  | "password"
-  | "widgets"
-  | "pin"
-  | "storage"
-  | "rss_feed"
-  | "android"
-  | "wifi_off"
-  | "bluetooth"
-  | "battery_charging_full"
-  | "dvr"
-  | "thermostat"
-  | "graphic_eq"
-  | "nightlight"
-  | "battery_5_bar"
-  | "signal_wifi_4_bar"
-  | "gpp_maybe"
-  | "cable"
-  | "gpp_bad"
-  | "data_usage"
-  | "battery_4_bar"
-  | "signal_cellular_4_bar"
-  | "radar"
-  | "airplanemode_active"
-  | "battery_0_bar"
-  | "cameraswitch"
-  | "wallpaper"
-  | "signal_disconnected"
-  | "flashlight_on"
-  | "network_check"
-  | "battery_6_bar"
-  | "charger"
-  | "wifi_tethering"
-  | "sim_card_download"
-  | "usb"
-  | "quick_phrases"
-  | "splitscreen"
-  | "battery_3_bar"
-  | "battery_1_bar"
-  | "adb"
-  | "network_wifi_3_bar"
-  | "battery_low"
-  | "battery_alert"
-  | "bluetooth_searching"
-  | "network_wifi"
-  | "bluetooth_connected"
-  | "5g"
-  | "wifi_find"
-  | "battery_2_bar"
-  | "brightness_high"
-  | "network_cell"
-  | "pattern"
-  | "nfc"
-  | "data_saver_on"
-  | "bluetooth_disabled"
-  | "signal_wifi_statusbar_not_connected"
-  | "signal_wifi_bad"
-  | "signal_cellular_3_bar"
-  | "network_wifi_2_bar"
-  | "noise_control_off"
-  | "network_wifi_1_bar"
-  | "brightness_medium"
-  | "signal_wifi_off"
-  | "battery_very_low"
-  | "mode_standby"
-  | "brightness_low"
-  | "mobiledata_off"
-  | "signal_wifi_0_bar"
-  | "battery_charging_20"
-  | "battery_charging_80"
-  | "grid_4x4"
-  | "battery_saver"
-  | "battery_charging_90"
-  | "flashlight_off"
-  | "signal_wifi_statusbar_null"
-  | "battery_charging_50"
-  | "settings_system_daydream"
-  | "battery_unknown"
-  | "signal_cellular_2_bar"
-  | "screen_rotation_alt"
-  | "wifi_calling_3"
-  | "signal_cellular_1_bar"
-  | "badge_critical_battery"
-  | "4g_mobiledata"
-  | "wifi_lock"
-  | "noise_aware"
-  | "do_not_disturb_on_total_silence"
-  | "battery_charging_60"
-  | "signal_cellular_connected_no_internet_0_bar"
-  | "nearby_error"
-  | "signal_cellular_0_bar"
-  | "battery_charging_30"
-  | "network_ping"
-  | "signal_cellular_connected_no_internet_4_bar"
-  | "wifi_tethering_error"
-  | "brightness_auto"
-  | "wifi_calling_1"
-  | "edgesensor_high"
-  | "wifi_2_bar"
-  | "airplanemode_inactive"
-  | "signal_cellular_nodata"
-  | "1x_mobiledata"
-  | "grid_3x3"
-  | "lte_mobiledata"
-  | "perm_data_setting"
-  | "signal_cellular_alt_2_bar"
-  | "bluetooth_drive"
-  | "devices_fold"
-  | "perm_scan_wifi"
-  | "network_locked"
-  | "media_bluetooth_on"
-  | "wifi_calling_2"
-  | "4g_plus_mobiledata"
-  | "signal_cellular_off"
-  | "timer_10_select"
-  | "wifi_tethering_off"
-  | "signal_cellular_alt_1_bar"
-  | "edgesensor_low"
-  | "3g_mobiledata"
-  | "usb_off"
-  | "wifi_1_bar"
-  | "apk_install"
-  | "signal_cellular_null"
-  | "lte_plus_mobiledata"
-  | "grid_goldenratio"
-  | "g_mobiledata"
-  | "portable_wifi_off"
-  | "noise_control_on"
-  | "media_bluetooth_off"
-  | "timer_3_select"
-  | "e_mobiledata"
-  | "apk_document"
-  | "nearby_off"
-  | "h_mobiledata"
-  | "r_mobiledata"
-  | "h_plus_mobiledata"
-  | "dual_screen"
-  | "nearby"
-  | "dock_to_left"
-  | "stylus"
-  | "stylus_note"
-  | "screenshot_region"
-  | "dock_to_right"
-  | "overview_key"
-  | "keyboard_keys"
-  | "battery_status_good"
-  | "brightness_alert"
-  | "brightness_empty"
-  | "splitscreen_left"
-  | "splitscreen_right"
-  | "keyboard_off"
-  | "screen_record"
-  | "screenshot_keyboard"
-  | "dock_to_bottom"
-  | "keyboard_external_input"
-  | "magnify_fullscreen"
-  | "wallpaper_slideshow"
-  | "1x_mobiledata_badge"
-  | "battery_change"
-  | "display_external_input"
-  | "magnify_docked"
-  | "screenshot_frame"
-  | "backlight_low"
-  | "battery_plus"
-  | "keyboard_full"
-  | "keyboard_onscreen"
-  | "wifi_notification"
-  | "4g_mobiledata_badge"
-  | "5g_mobiledata_badge"
-  | "keyboard_capslock_badge"
-  | "keyboard_previous_language"
-  | "lte_mobiledata_badge"
-  | "lte_plus_mobiledata_badge"
-  | "screen_rotation_up"
-  | "wifi_home"
-  | "3g_mobiledata_badge"
-  | "backlight_high"
-  | "battery_error"
-  | "battery_share"
-  | "e_mobiledata_badge"
-  | "ev_mobiledata_badge"
-  | "g_mobiledata_badge"
-  | "grid_3x3_off"
-  | "h_mobiledata_badge"
-  | "h_plus_mobiledata_badge"
-  | "signal_cellular_pause"
-  | "splitscreen_bottom"
-  | "splitscreen_top"
-  | "badge"
-  | "verified_user"
-  | "admin_panel_settings"
-  | "report"
-  | "security"
-  | "vpn_key"
-  | "shield"
-  | "policy"
-  | "exclamation"
-  | "privacy_tip"
-  | "assured_workload"
-  | "vpn_lock"
-  | "disabled_visible"
-  | "e911_emergency"
-  | "enhanced_encryption"
-  | "private_connectivity"
-  | "vpn_key_off"
-  | "add_moderator"
-  | "no_encryption"
-  | "sync_lock"
-  | "wifi_password"
-  | "key_visualizer"
-  | "remove_moderator"
-  | "encrypted"
-  | "report_off"
-  | "shield_lock"
-  | "shield_person"
-  | "vpn_key_alert"
-  | "shield_locked"
-  | "apartment"
-  | "location_city"
-  | "fitness_center"
-  | "lunch_dining"
-  | "spa"
-  | "cottage"
-  | "local_cafe"
-  | "hotel"
-  | "family_restroom"
-  | "beach_access"
-  | "local_bar"
-  | "pool"
-  | "other_houses"
-  | "luggage"
-  | "liquor"
-  | "airplane_ticket"
-  | "casino"
-  | "sports_bar"
-  | "bakery_dining"
-  | "ramen_dining"
-  | "nightlife"
-  | "local_dining"
-  | "holiday_village"
-  | "icecream"
-  | "escalator_warning"
-  | "dinner_dining"
-  | "museum"
-  | "food_bank"
-  | "night_shelter"
-  | "festival"
-  | "attractions"
-  | "golf_course"
-  | "stairs"
-  | "villa"
-  | "smoke_free"
-  | "smoking_rooms"
-  | "car_rental"
-  | "airline_seat_recline_normal"
-  | "elevator"
-  | "gite"
-  | "child_friendly"
-  | "airline_seat_recline_extra"
-  | "breakfast_dining"
-  | "carpenter"
-  | "car_repair"
-  | "cabin"
-  | "brunch_dining"
-  | "no_food"
-  | "do_not_touch"
-  | "houseboat"
-  | "rice_bowl"
-  | "tapas"
-  | "wheelchair_pickup"
-  | "bento"
-  | "no_drinks"
-  | "do_not_step"
-  | "bungalow"
-  | "airline_seat_flat"
-  | "airline_seat_individual_suite"
-  | "escalator"
-  | "chalet"
-  | "no_luggage"
-  | "airline_seat_legroom_extra"
-  | "airline_seat_flat_angled"
-  | "airline_seat_legroom_normal"
-  | "airline_seat_legroom_reduced"
-  | "no_stroller"
-  | "travel"
-  | "your_trips"
-  | "house"
-  | "bed"
-  | "ac_unit"
-  | "chair"
-  | "coffee"
-  | "electric_bolt"
-  | "child_care"
-  | "sensors"
-  | "back_hand"
-  | "checkroom"
-  | "emergency_home"
-  | "grass"
-  | "shower"
-  | "mode_fan"
-  | "mop"
-  | "kitchen"
-  | "room_service"
-  | "thermometer"
-  | "styler"
-  | "yard"
-  | "bathtub"
-  | "king_bed"
-  | "roofing"
-  | "energy_savings_leaf"
-  | "window"
-  | "valve"
-  | "cooking"
-  | "garage_home"
-  | "door_front"
-  | "mode_heat"
-  | "light"
-  | "foundation"
-  | "outdoor_grill"
-  | "garage"
-  | "dining"
-  | "table_restaurant"
-  | "sensor_occupied"
-  | "deck"
-  | "weekend"
-  | "coffee_maker"
-  | "humidity_high"
-  | "flatware"
-  | "highlight"
-  | "fireplace"
-  | "humidity_low"
-  | "mode_night"
-  | "electric_meter"
-  | "tv_gen"
-  | "humidity_mid"
-  | "bedroom_parent"
-  | "chair_alt"
-  | "blender"
-  | "scene"
-  | "microwave"
-  | "oven_gen"
-  | "single_bed"
-  | "bedroom_baby"
-  | "heat_pump"
-  | "bathroom"
-  | "in_home_mode"
-  | "hot_tub"
-  | "hardware"
-  | "mode_off_on"
-  | "sprinkler"
-  | "table_bar"
-  | "gas_meter"
-  | "crib"
-  | "soap"
-  | "countertops"
-  | "living"
-  | "mode_cool"
-  | "home_iot_device"
-  | "propane_tank"
-  | "fire_extinguisher"
-  | "outlet"
-  | "remote_gen"
-  | "matter"
-  | "gate"
-  | "sensor_door"
-  | "event_seat"
-  | "airware"
-  | "faucet"
-  | "dishwasher_gen"
-  | "energy_program_saving"
-  | "air_freshener"
-  | "balcony"
-  | "wash"
-  | "camera_indoor"
-  | "water_damage"
-  | "bedroom_child"
-  | "house_siding"
-  | "switch"
-  | "microwave_gen"
-  | "detector_smoke"
-  | "door_sliding"
-  | "iron"
-  | "desk"
-  | "energy_program_time_used"
-  | "umbrella"
-  | "water_heater"
-  | "dresser"
-  | "fence"
-  | "door_back"
-  | "doorbell"
-  | "mode_fan_off"
-  | "hvac"
-  | "kettle"
-  | "camera_outdoor"
-  | "emergency_heat"
-  | "air_purifier_gen"
-  | "emergency_share"
-  | "stroller"
-  | "curtains"
-  | "multicooker"
-  | "shield_moon"
-  | "sensors_off"
-  | "mode_heat_cool"
-  | "thermostat_auto"
-  | "emergency_recording"
-  | "smart_outlet"
-  | "blinds"
-  | "controller_gen"
-  | "roller_shades"
-  | "dry"
-  | "blinds_closed"
-  | "roller_shades_closed"
-  | "propane"
-  | "sensor_window"
-  | "thermostat_carbon"
-  | "range_hood"
-  | "doorbell_3p"
-  | "blanket"
-  | "tv_with_assistant"
-  | "vertical_shades_closed"
-  | "vertical_shades"
-  | "curtains_closed"
-  | "mode_heat_off"
-  | "mode_cool_off"
-  | "tamper_detection_off"
-  | "shelves"
-  | "thermometer_gain"
-  | "wall_art"
-  | "thermometer_loss"
-  | "hallway"
-  | "emergency_share_off"
-  | "stadia_controller"
-  | "door_open"
-  | "nest_eco_leaf"
-  | "device_reset"
-  | "nest_clock_farsight_analog"
-  | "nest_remote_comfort_sensor"
-  | "laundry"
-  | "battery_horiz_075"
-  | "shield_with_heart"
-  | "temp_preferences_eco"
-  | "familiar_face_and_zone"
-  | "tools_power_drill"
-  | "airwave"
-  | "productivity"
-  | "battery_horiz_050"
-  | "nest_heat_link_gen_3"
-  | "nest_display"
-  | "weather_snowy"
-  | "activity_zone"
-  | "ev_charger"
-  | "nest_remote"
-  | "cleaning_bucket"
-  | "settings_alert"
-  | "nest_cam_indoor"
-  | "arrows_more_up"
-  | "nest_heat_link_e"
-  | "home_storage"
-  | "nest_multi_room"
-  | "nest_secure_alarm"
-  | "battery_horiz_000"
-  | "light_group"
-  | "google_wifi"
-  | "nest_cam_outdoor"
-  | "detection_and_zone"
-  | "nest_thermostat_gen_3"
-  | "mfg_nest_yale_lock"
-  | "tools_pliers_wire_stripper"
-  | "detector_alarm"
-  | "nest_cam_iq_outdoor"
-  | "tools_ladder"
-  | "early_on"
-  | "floor_lamp"
-  | "nest_clock_farsight_digital"
-  | "nest_cam_iq"
-  | "home_speaker"
-  | "nest_mini"
-  | "nest_hello_doorbell"
-  | "home_max_dots"
-  | "nest_audio"
-  | "nest_wifi_router"
-  | "house_with_shield"
-  | "zone_person_urgent"
-  | "nest_display_max"
-  | "motion_sensor_active"
-  | "cool_to_dry"
-  | "shield_with_house"
-  | "nest_farsight_weather"
-  | "chromecast_2"
-  | "battery_profile"
-  | "window_closed"
-  | "heat_pump_balance"
-  | "arming_countdown"
-  | "nest_found_savings"
-  | "detector_status"
-  | "self_care"
-  | "tools_level"
-  | "window_open"
-  | "nest_thermostat_zirconium_eu"
-  | "arrows_more_down"
-  | "nest_true_radiant"
-  | "nest_cam_wired_stand"
-  | "zone_person_alert"
-  | "detector"
-  | "climate_mini_split"
-  | "nest_detect"
-  | "nest_wifi_point"
-  | "door_sensor"
-  | "nest_doorbell_visitor"
-  | "quiet_time"
-  | "nest_cam_floodlight"
-  | "nest_tag"
-  | "tools_installation_kit"
-  | "nest_connect"
-  | "nest_thermostat_sensor_eu"
-  | "nest_sunblock"
-  | "tools_phillips"
-  | "nest_thermostat_sensor"
-  | "nest_wifi_gale"
-  | "nest_thermostat_e_eu"
-  | "doorbell_chime"
-  | "detector_co"
-  | "detector_battery"
-  | "tools_flat_head"
-  | "nest_wake_on_approach"
-  | "nest_wake_on_press"
-  | "motion_sensor_urgent"
-  | "table_lamp"
-  | "motion_sensor_alert"
-  | "window_sensor"
-  | "tamper_detection_on"
-  | "nest_cam_magnet_mount"
-  | "zone_person_idle"
-  | "quiet_time_active"
-  | "nest_cam_stand"
-  | "detector_offline"
-  | "wall_lamp"
-  | "nest_cam_wall_mount"
-  | "motion_sensor_idle"
-  | "nest_thermostat"
-  | "water_pump"
-  | "assistant_on_hub"
-  | "nest_protect"
-  | "google_tv_remote"
-  | "feedback"
-  | "flutter";
diff --git a/apps/app/components/ui/icon.tsx b/apps/app/components/ui/icon.tsx
deleted file mode 100644
index ff093a1cec0..00000000000
--- a/apps/app/components/ui/icon.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-type Props = {
-  iconName: string;
-  className?: string;
-};
-
-export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
-    {iconName}
-  </span>
-);
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
deleted file mode 100644
index b75111b1e52..00000000000
--- a/apps/app/components/ui/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export * from "./buttons";
-export * from "./dropdowns";
-export * from "./graphs";
-export * from "./input";
-export * from "./text-area";
-export * from "./avatar";
-export * from "./date";
-export * from "./datepicker";
-export * from "./empty-space";
-export * from "./empty-state";
-export * from "./icon";
-export * from "./labels-list";
-export * from "./linear-progress-indicator";
-export * from "./loader";
-export * from "./multi-level-dropdown";
-export * from "./multi-level-select";
-export * from "./progress-bar";
-export * from "./spinner";
-export * from "./tooltip";
-export * from "./toggle-switch";
-export * from "./markdown-to-component";
-export * from "./product-updates-modal";
-export * from "./integration-and-import-export-banner";
-export * from "./range-datepicker";
-export * from "./circular-progress";
-export * from "./profile-empty-state";
\ No newline at end of file
diff --git a/apps/app/components/ui/integration-and-import-export-banner.tsx b/apps/app/components/ui/integration-and-import-export-banner.tsx
deleted file mode 100644
index 9173a630e93..00000000000
--- a/apps/app/components/ui/integration-and-import-export-banner.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ExclamationIcon } from "components/icons";
-
-type Props = {
-  bannerName: string;
-  description?: string;
-};
-
-export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex flex-col items-start gap-3">
-    <h3 className="text-2xl font-semibold">{bannerName}</h3>
-    {description && (
-      <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
-        <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
-        <p className="leading-5">{description}</p>
-      </div>
-    )}
-  </div>
-);
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
deleted file mode 100644
index ba130accab3..00000000000
--- a/apps/app/components/ui/labels-list.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-// ui
-import { Tooltip } from "components/ui";
-// types
-import { IIssueLabels } from "types";
-
-type IssueLabelsListProps = {
-  labels?: (IIssueLabels | undefined)[];
-  length?: number;
-  showLength?: boolean;
-};
-
-export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
-  labels,
-  length = 5,
-  showLength = true,
-}) => (
-  <>
-    {labels && (
-      <>
-        <Tooltip
-          position="top"
-          tooltipHeading="Labels"
-          tooltipContent={labels.map((l) => l?.name).join(", ")}
-        >
-          <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
-            <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-            {`${labels.length} Labels`}
-          </div>
-        </Tooltip>
-      </>
-    )}
-  </>
-);
diff --git a/apps/app/components/ui/linear-progress-indicator.tsx b/apps/app/components/ui/linear-progress-indicator.tsx
deleted file mode 100644
index 986741bc63c..00000000000
--- a/apps/app/components/ui/linear-progress-indicator.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import { Tooltip } from "./tooltip";
-
-type Props = {
-  data: any;
-  noTooltip?: boolean
-};
-
-export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip=false }) => {
-  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
-  let progress = 0;
-
-  const bars = data.map((item: any) => {
-    const width = `${(item.value / total) * 100}%`;
-    const style = {
-      width,
-      backgroundColor: item.color,
-    };
-    progress += item.value;
-    if (noTooltip) return <div style={style} />
-    else return (
-      <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
-        <div style={style} />
-      </Tooltip>
-    );
-  });
-
-  return (
-    <div className="flex h-1 w-full items-center justify-between gap-1">
-      {total === 0 ? (
-        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
-      ) : (
-        <div className="flex h-full w-full gap-1">{bars}</div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/ui/product-updates-modal.tsx b/apps/app/components/ui/product-updates-modal.tsx
deleted file mode 100644
index b142f8325f0..00000000000
--- a/apps/app/components/ui/product-updates-modal.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from "react";
-import useSWR from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// component
-import { MarkdownRenderer, Spinner } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
-// services
-import workspaceService from "services/workspace.service";
-// helper
-import { renderLongDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
-  const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
-        <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 bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="grid place-items-center min-h-full text-center p-4">
-            <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 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl">
-                <div className="max-h-[90vh] overflow-y-auto p-5">
-                  <div className="sm:flex sm:items-start">
-                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        <span>Product Updates</span>
-                        <span>
-                          <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </span>
-                      </Dialog.Title>
-                      {updates && updates.length > 0 ? (
-                        updates.map((item, index) => (
-                          <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
-                                {item.tag_name}
-                              </span>
-                              <span>{renderLongDateFormat(item.published_at)}</span>
-                              {index === 0 && (
-                                <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
-                                  New
-                                </span>
-                              )}
-                            </div>
-                            <MarkdownRenderer markdown={item.body} />
-                          </React.Fragment>
-                        ))
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                          Loading...
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/ui/toggle-switch.tsx b/apps/app/components/ui/toggle-switch.tsx
deleted file mode 100644
index 61e2ca082f1..00000000000
--- a/apps/app/components/ui/toggle-switch.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Switch } from "@headlessui/react";
-
-type Props = {
-  value: boolean;
-  onChange: (value: boolean) => void;
-  label?: string;
-  size?: "sm" | "md" | "lg";
-  disabled?: boolean;
-  className?: string;
-};
-
-export const ToggleSwitch: React.FC<Props> = (props) => {
-  const { value, onChange, label, size = "sm", disabled, className } = props;
-
-  return (
-    <Switch
-      checked={value}
-      disabled={disabled}
-      onChange={onChange}
-      className={`relative flex-shrink-0 inline-flex ${
-        size === "sm" ? "h-3.5 w-6" : size === "md" ? "h-4 w-7" : "h-6 w-11"
-      } flex-shrink-0 cursor-pointer rounded-full border-2 border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
-        value ? "bg-green-500" : "bg-custom-background-80"
-      } ${className || ""}`}
-    >
-      <span className="sr-only">{label}</span>
-      <span
-        aria-hidden="true"
-        className={`inline-block ${
-          size === "sm" ? "h-2.5 w-2.5" : size === "md" ? "h-3 w-3" : "h-5 w-5"
-        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
-          value
-            ? (size === "sm"
-                ? "translate-x-2.5"
-                : size === "md"
-                ? "translate-x-3"
-                : "translate-x-5") + " bg-white"
-            : "translate-x-0 bg-custom-background-90"
-        }`}
-      />
-    </Switch>
-  );
-};
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
deleted file mode 100644
index 3a4c5d71fef..00000000000
--- a/apps/app/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-
-// next-themes
-import { useTheme } from "next-themes";
-// tooltip2
-import { Tooltip2 } from "@blueprintjs/popover2";
-
-type Props = {
-  tooltipHeading?: string;
-  tooltipContent: string | React.ReactNode;
-  position?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "auto"
-    | "auto-end"
-    | "auto-start"
-    | "bottom-left"
-    | "bottom-right"
-    | "left-bottom"
-    | "left-top"
-    | "right-bottom"
-    | "right-top"
-    | "top-left"
-    | "top-right";
-  children: JSX.Element;
-  disabled?: boolean;
-  className?: string;
-  openDelay?: number;
-  closeDelay?: number;
-};
-
-export const Tooltip: React.FC<Props> = ({
-  tooltipHeading,
-  tooltipContent,
-  position = "top",
-  children,
-  disabled = false,
-  className = "",
-  openDelay = 200,
-  closeDelay,
-}) => {
-  const { theme } = useTheme();
-
-  return (
-    <Tooltip2
-      disabled={disabled}
-      hoverOpenDelay={openDelay}
-      hoverCloseDelay={closeDelay}
-      content={
-        <div
-          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
-          } break-words overflow-hidden ${className}`}
-        >
-          {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
-              {tooltipHeading}
-            </h5>
-          )}
-          {tooltipContent}
-        </div>
-      }
-      position={position}
-      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
-        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
-      }
-    />
-  );
-};
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
deleted file mode 100644
index 368ae3d88ff..00000000000
--- a/apps/app/components/views/delete-view-modal.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { ICurrentUserResponse, IView } from "types";
-// fetch-keys
-import { VIEWS_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data: IView | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    if (!workspaceSlug || !data || !projectId) return;
-
-    await viewsService
-      .deleteView(workspaceSlug as string, projectId as string, data.id, user)
-      .then(() => {
-        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
-          views?.filter((view) => view.id !== data.id)
-        );
-
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "视图已成功删除",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "无法删除视图，请重试",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete View
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/views/index.ts b/apps/app/components/views/index.ts
deleted file mode 100644
index a687403686c..00000000000
--- a/apps/app/components/views/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./delete-view-modal";
-export * from "./form";
-export * from "./gantt-chart";
-export * from "./modal";
-export * from "./select-filters";
-export * from "./single-view-item";
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
deleted file mode 100644
index 931bc1afe05..00000000000
--- a/apps/app/components/views/modal.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { ViewForm } from "components/views";
-// types
-import { ICurrentUserResponse, IView } from "types";
-// fetch-keys
-import { VIEWS_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data?: IView | null;
-  preLoadedData?: Partial<IView> | null;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const CreateUpdateViewModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  preLoadedData,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const onClose = () => {
-    handleClose();
-  };
-
-  const createView = async (payload: IView) => {
-    payload = {
-      ...payload,
-      query_data: payload.query,
-    };
-    await viewsService
-      .createView(workspaceSlug as string, projectId as string, payload, user)
-      .then(() => {
-        mutate(VIEWS_LIST(projectId as string));
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "视图创建成功",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "无法创建视图，请重试",
-        });
-      });
-  };
-
-  const updateView = async (payload: IView) => {
-    const payloadData = {
-      ...payload,
-      query_data: payload.query,
-    };
-    await viewsService
-      .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payloadData, user)
-      .then((res) => {
-        mutate<IView[]>(
-          VIEWS_LIST(projectId as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payloadData };
-
-              return p;
-            }),
-          false
-        );
-        onClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View updated successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (formData: IView) => {
-    if (!workspaceSlug || !projectId) return;
-
-    if (!data) await createView(formData);
-    else await updateView(formData);
-  };
-
-  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 bg-opacity-50 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 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 rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <ViewForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  data={data}
-                  preLoadedData={preLoadedData}
-                />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
deleted file mode 100644
index d4e9fa37c8a..00000000000
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  handleDelete: () => void;
-  data?: any;
-};
-
-const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const handleClose = () => {
-    onClose();
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    handleDelete();
-    handleClose();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Remove {data?.display_name}?
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this workspace. This action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "移除..." : "移除"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export default ConfirmWorkspaceMemberRemove;
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
deleted file mode 100644
index e9eaf96c382..00000000000
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// services
-import workspaceService from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomSelect, Input, PrimaryButton } from "components/ui";
-// types
-import { ICurrentUserResponse, IWorkspace } from "types";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
-// constants
-import { ORGANIZATION_SIZE } from "constants/workspace";
-
-type Props = {
-  onSubmit?: (res: IWorkspace) => Promise<void>;
-  defaultValues: {
-    name: string;
-    slug: string;
-    organization_size: string;
-  };
-  setDefaultValues: Dispatch<SetStateAction<any>>;
-  user: ICurrentUserResponse | undefined;
-  secondaryButton?: React.ReactNode;
-  primaryButtonText?: {
-    loading: string;
-    default: string;
-  };
-};
-
-const restrictedUrls = [
-  "api",
-  "installations",
-  "404",
-  "create-workspace",
-  "error",
-  "invitations",
-  "magic-sign-in",
-  "onboarding",
-  "profile",
-  "reset-password",
-  "sign-up",
-  "spaces",
-  "workspace-member-invitation",
-];
-
-export const CreateWorkspaceForm: React.FC<Props> = ({
-  onSubmit,
-  defaultValues,
-  setDefaultValues,
-  user,
-  secondaryButton,
-  primaryButtonText = {
-    loading: "创建中...",
-    default: "创建工作区",
-  },
-}) => {
-  const [slugError, setSlugError] = useState(false);
-  const [invalidSlug, setInvalidSlug] = useState(false);
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    getValues,
-    formState: { errors, isSubmitting, isValid },
-  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
-
-  const handleCreateWorkspace = async (formData: IWorkspace) => {
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
-      .then(async (res) => {
-        if (res.status === true && !restrictedUrls.includes(formData.slug)) {
-          setSlugError(false);
-
-          await workspaceService
-            .createWorkspace(formData, user)
-            .then(async (res) => {
-              setToastAlert({
-                type: "success",
-                title: "成功!",
-                message: "工作区创建成功。",
-              });
-
-              mutate<IWorkspace[]>(
-                USER_WORKSPACES,
-                (prevData) => [res, ...(prevData ?? [])],
-                false
-              );
-              if (onSubmit) await onSubmit(res);
-            })
-            .catch(() =>
-              setToastAlert({
-                type: "error",
-                title: "错误!",
-                message: "无法创建工作区。请重试。",
-              })
-            );
-        } else setSlugError(true);
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "创建工作区时发生一些错误。请重试。",
-        });
-      });
-  };
-
-  useEffect(
-    () => () => {
-      // when the component unmounts set the default values to whatever user typed in
-      setDefaultValues(getValues());
-    },
-    [getValues, setDefaultValues]
-  );
-
-  return (
-    <form className="space-y-6 sm:space-y-9" onSubmit={handleSubmit(handleCreateWorkspace)}>
-      <div className="space-y-6 sm:space-y-7">
-        <div className="space-y-1 text-sm">
-          <label htmlFor="workspaceName">工作空间名称</label>
-          <Input
-            id="workspaceName"
-            name="name"
-            register={register}
-            autoComplete="off"
-            onChange={(e) =>
-              setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
-            }
-            validations={{
-              required: "工作区名称为必填项",
-              validate: (value) =>
-                /^[\w\s-]*$/.test(value) ||
-                `名称只能包含 (" "), ( - ), ( _ ) 和字母数字字符。`,
-              maxLength: {
-                value: 80,
-                message: "工作区名称不应超过 80 个字符",
-              },
-            }}
-            placeholder="输入工作区名称..."
-            error={errors.name}
-          />
-        </div>
-        <div className="space-y-1 text-sm">
-          <label htmlFor="workspaceUrl">工作区网址</label>
-          <div className="flex w-full items-center rounded-md border border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">
-              {window && window.location.host}/
-            </span>
-            <Input
-              id="workspaceUrl"
-              mode="trueTransparent"
-              autoComplete="off"
-              name="slug"
-              register={register}
-              className="block w-full rounded-md bg-transparent py-2 !px-0 text-sm"
-              validations={{
-                required: "工作区网址是必需的",
-              }}
-              onChange={(e) =>
-                /^[a-zA-Z0-9_-]+$/.test(e.target.value)
-                  ? setInvalidSlug(false)
-                  : setInvalidSlug(true)
-              }
-            />
-          </div>
-          {slugError && (
-            <span className="-mt-3 text-sm text-red-500">工作区网址已被占用！</span>
-          )}
-          {invalidSlug && (
-            <span className="text-sm text-red-500">{`URL只能包含( - ), ( _ )和字母数字字符`}</span>
-          )}
-        </div>
-        <div className="space-y-1 text-sm">
-          <span>你的组织规模有多大？</span>
-          <div className="w-full">
-            <Controller
-              name="organization_size"
-              control={control}
-              rules={{ required: "此字段为必填项" }}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  onChange={onChange}
-                  label={
-                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-200">选择组织规模</span>
-                    )
-                  }
-                  input
-                  width="w-full"
-                >
-                  {ORGANIZATION_SIZE.map((item) => (
-                    <CustomSelect.Option key={item} value={item}>
-                      {item}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
-            />
-            {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-4">
-        {secondaryButton}
-        <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
-          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
deleted file mode 100644
index ad1d0f7c327..00000000000
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
-// types
-import type { ICurrentUserResponse, IWorkspace } from "types";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  data: IWorkspace | null;
-  onClose: () => void;
-  user: ICurrentUserResponse | undefined;
-};
-
-const defaultValues = {
-  workspaceName: "",
-  confirmDelete: "",
-};
-
-export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, user }) => {
-  const router = useRouter();
-
-  const { setToastAlert } = useToast();
-
-  const {
-    control,
-    formState: { 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 workspaceService
-      .deleteWorkspace(data.slug, user)
-      .then(() => {
-        handleClose();
-
-        router.push("/");
-
-        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) =>
-          prevData?.filter((workspace) => workspace.id !== data.id)
-        );
-
-        setToastAlert({
-          type: "success",
-          message: "工作区删除成功",
-          title: "成功",
-        });
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "出错了。请稍后再试。",
-        })
-      );
-  };
-
-  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 bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl 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">
-                      <ExclamationTriangleIcon
-                        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: { onChange, value } }) => (
-                        <Input
-                          type="text"
-                          placeholder="Workspace name"
-                          className="mt-2"
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </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: { onChange, value } }) => (
-                        <Input
-                          type="text"
-                          placeholder="Enter 'delete my workspace'"
-                          className="mt-2"
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting..." : "Delete Workspace"}
-                    </DangerButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
deleted file mode 100644
index f17453cf4f0..00000000000
--- a/apps/app/components/workspace/help-section.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import Link from "next/link";
-
-// headless ui
-import { Transition } from "@headlessui/react";
-// hooks
-import useTheme from "hooks/use-theme";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// icons
-import { Bolt, HelpOutlineOutlined, WestOutlined } from "@mui/icons-material";
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-const helpOptions = [
-  {
-    name: "Documentation",
-    href: "https://docs.plane.so/",
-    Icon: DocumentIcon,
-  },
-  {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
-  },
-  {
-    name: "Report a bug",
-    href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
-  },
-  {
-    name: "Chat with us",
-    href: null,
-    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
-    Icon: ChatBubbleOvalLeftEllipsisIcon,
-  },
-];
-
-export interface WorkspaceHelpSectionProps {
-  setSidebarActive: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setSidebarActive }) => {
-  const store: any = useMobxStore();
-
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-
-  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
-
-  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
-
-  return (
-    <>
-      <div
-        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
-          store?.theme?.sidebarCollapsed ? "flex-col" : ""
-        }`}
-      >
-        {!store?.theme?.sidebarCollapsed && (
-          <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
-            Mission Plan
-          </div>
-        )}
-        <div
-          className={`flex items-center gap-1 ${
-            store?.theme?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
-          }`}
-        >
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              store?.theme?.sidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "h",
-              });
-              document.dispatchEvent(e);
-            }}
-          >
-            <Bolt fontSize="small" />
-          </button>
-          {/*<button*/}
-          {/*  type="button"*/}
-          {/*  className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${*/}
-          {/*    store?.theme?.sidebarCollapsed ? "w-full" : ""*/}
-          {/*  }`}*/}
-          {/*  onClick={() => setIsNeedHelpOpen((prev) => !prev)}*/}
-          {/*>*/}
-          {/*  <HelpOutlineOutlined fontSize="small" />*/}
-          {/*</button>*/}
-          <button
-            type="button"
-            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
-            onClick={() => setSidebarActive(false)}
-          >
-            <WestOutlined fontSize="small" />
-          </button>
-          <button
-            type="button"
-            className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              store?.theme?.sidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed)}
-          >
-            <WestOutlined
-              fontSize="small"
-              className={`duration-300 ${store?.theme?.sidebarCollapsed ? "rotate-180" : ""}`}
-            />
-          </button>
-        </div>
-
-        <div className="relative">
-          <Transition
-            show={isNeedHelpOpen}
-            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"
-          >
-            <div
-              className={`absolute bottom-2 ${
-                store?.theme?.sidebarCollapsed ? "left-full" : "left-[-75px]"
-              } space-y-2 rounded-sm bg-custom-background-80 p-1 shadow-md`}
-              ref={helpOptionsRef}
-            >
-              {helpOptions.map(({ name, Icon, href, onClick }) => {
-                if (href)
-                  return (
-                    <Link href={href} key={name}>
-                      <a
-                        target="_blank"
-                        className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
-                      >
-                        <Icon className="h-4 w-4 text-custom-text-200" />
-                        <span className="text-sm">{name}</span>
-                      </a>
-                    </Link>
-                  );
-                else
-                  return (
-                    <button
-                      key={name}
-                      type="button"
-                      onClick={onClick ? onClick : undefined}
-                      className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-custom-background-90"
-                    >
-                      <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
-                      <span className="text-sm">{name}</span>
-                    </button>
-                  );
-              })}
-            </div>
-          </Transition>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/apps/app/components/workspace/index.ts b/apps/app/components/workspace/index.ts
deleted file mode 100644
index 8e354a718a4..00000000000
--- a/apps/app/components/workspace/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export * from "./activity-graph";
-export * from "./completed-issues-graph";
-export * from "./create-workspace-form";
-export * from "./delete-workspace-modal";
-export * from "./help-section";
-export * from "./issues-list";
-export * from "./issues-pie-chart";
-export * from "./issues-stats";
-export * from "./settings-header";
-export * from "./sidebar-dropdown";
-export * from "./sidebar-menu";
-export * from "./sidebar-quick-action";
diff --git a/apps/app/components/workspace/issues-list.tsx b/apps/app/components/workspace/issues-list.tsx
deleted file mode 100644
index ac5928a1ca8..00000000000
--- a/apps/app/components/workspace/issues-list.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { truncateText } from "helpers/string.helper";
-// types
-import { IIssueLite } from "types";
-import { Loader } from "components/ui";
-import { LayerDiagonalIcon } from "components/icons";
-
-type Props = {
-  issues: IIssueLite[] | undefined;
-  type: "overdue" | "upcoming";
-};
-
-export const IssuesList: React.FC<Props> = ({ issues, type }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const getDateDifference = (date: Date) => {
-    const today = new Date();
-
-    let diffTime = 0;
-
-    if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf());
-    else diffTime = Math.abs(date.valueOf() - today.valueOf());
-
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
-    return diffDays;
-  };
-
-  return (
-    <div>
-      <h3 className="mb-2 font-semibold capitalize">{type=="overdue"?"超期":"进行中"}任务</h3>
-      {issues ? (
-        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 text-sm">
-          <div
-            className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
-              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"
-            }`}
-          >
-            <h4 className="capitalize">
-              {/*{type}*/}
-              {type === "overdue" ? "超期" : "进行中"}
-            </h4>
-            <h4 className="col-span-2">任务</h4>
-            <h4>{type === "overdue" ? "超期" : "开始"} 时间</h4>
-          </div>
-          <div className="max-h-72 overflow-y-scroll">
-            {issues.length > 0 ? (
-              issues.map((issue) => {
-                const date = type === "overdue" ? issue.target_date : issue.start_date;
-
-                const dateDifference = getDateDifference(new Date(date as string));
-
-                return (
-                  <Link
-                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                    key={issue.id}
-                  >
-                    <a>
-                      <div className="grid grid-cols-4 gap-2 px-3 py-2">
-                        <h5
-                          className={`flex cursor-default items-center gap-2 ${
-                            type === "overdue"
-                              ? dateDifference > 6
-                                ? "text-red-500"
-                                : "text-yellow-400"
-                              : ""
-                          }`}
-                        >
-                          {type === "overdue" && (
-                            <ExclamationTriangleIcon className="h-3.5 w-3.5" />
-                          )}
-                          {dateDifference} {dateDifference > 1 ? "天" : "天"}
-                        </h5>
-                        <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
-                        <h5 className="cursor-default">
-                          {renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))}
-                        </h5>
-                      </div>
-                    </a>
-                  </Link>
-                );
-              })
-            ) : (
-              <div className="grid h-full place-items-center">
-                <div className="my-5 flex flex-col items-center gap-4">
-                  <LayerDiagonalIcon height={60} width={60} />
-                  <span className="text-custom-text-200">
-                    任务为空，使用快捷键{" "}
-                    <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
-                   快速添加任务
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      ) : (
-        <Loader>
-          <Loader.Item height="200" />
-        </Loader>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
deleted file mode 100644
index 6a9ffbd5643..00000000000
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import { Fragment } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// headless ui
-import { Menu, Transition } from "@headlessui/react";
-// next-themes
-import { useTheme } from "next-themes";
-// hooks
-import useUser from "hooks/use-user";
-import useThemeHook from "hooks/use-theme";
-import useWorkspaces from "hooks/use-workspaces";
-import useToast from "hooks/use-toast";
-// services
-import userService from "services/user.service";
-import authenticationService from "services/authentication.service";
-// components
-import { Avatar, Icon, Loader } from "components/ui";
-// icons
-import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { truncateText } from "helpers/string.helper";
-// types
-import { IWorkspace } from "types";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-// Static Data
-const userLinks = (workspaceSlug: string, userId: string) => [
-  {
-    name: "工作区设置",
-    href: `/${workspaceSlug}/settings`,
-  },
-  {
-    name: "工作区邀请",
-    href: "/invitations",
-  },
-  {
-    name: "我的资料",
-    href: `/${workspaceSlug}/profile/${userId}`,
-  },
-];
-
-const profileLinks = (workspaceSlug: string, userId: string) => [
-  {
-    name: "查看资料",
-    icon: "account_circle",
-    link: `/${workspaceSlug}/profile/${userId}`,
-  },
-  {
-    name: "设置",
-    icon: "settings",
-    link: `/${workspaceSlug}/me/profile`,
-  },
-];
-
-export const WorkspaceSidebarDropdown = () => {
-  const store: any = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user, mutateUser } = useUser();
-
-  const { collapsed: sidebarCollapse } = useThemeHook();
-
-  const { setTheme } = useTheme();
-
-  const { setToastAlert } = useToast();
-
-  const { activeWorkspace, workspaces } = useWorkspaces();
-
-  const handleWorkspaceNavigation = (workspace: IWorkspace) => {
-    userService
-      .updateUser({
-        last_workspace_id: workspace?.id,
-      })
-      .then(() => {
-        mutateUser();
-        router.push(`/${workspace.slug}/`);
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "导航到工作区错误。请重试。",
-        })
-      );
-  };
-
-  const handleSignOut = async () => {
-    await authenticationService
-      .signOut()
-      .then(() => {
-        mutateUser(undefined);
-        router.push("/");
-        setTheme("system");
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "退出登录错误，请重试。",
-        })
-      );
-  };
-
-  return (
-    <div className="inline-flex items-center gap-2 px-4 pt-4">
-      <Menu as="div" className="relative col-span-4 inline-block w-full text-left">
-        <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none">
-          <div
-            className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${
-              store?.theme?.sidebarCollapsed ? "justify-center" : ""
-            }`}
-          >
-            <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
-              {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
-                <img
-                  src={activeWorkspace.logo}
-                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                  alt="Workspace Logo"
-                />
-              ) : (
-                activeWorkspace?.name?.charAt(0) ?? "..."
-              )}
-            </div>
-
-            {!store?.theme?.sidebarCollapsed && (
-              <h4 className="text-custom-text-100">
-                {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
-              </h4>
-            )}
-          </div>
-        </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="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md
-          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none"
-          >
-            <div className="flex flex-col items-start justify-start gap-3 p-3">
-              <span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span>
-              {workspaces ? (
-                <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
-                  {workspaces.length > 0 ? (
-                    workspaces.map((workspace) => (
-                      <Menu.Item key={workspace.id}>
-                        {({ active }) => (
-                          <button
-                            type="button"
-                            onClick={() => handleWorkspaceNavigation(workspace)}
-                            className="flex w-full items-center justify-between gap-1 p-1 rounded-md text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
-                          >
-                            <div className="flex items-center justify-start gap-2.5">
-                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
-                                {workspace?.logo && workspace.logo !== "" ? (
-                                  <img
-                                    src={workspace.logo}
-                                    className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                                    alt="Workspace Logo"
-                                  />
-                                ) : (
-                                  workspace?.name?.charAt(0) ?? "..."
-                                )}
-                              </span>
-
-                              <h5
-                                className={`text-sm ${
-                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                }`}
-                              >
-                                {truncateText(workspace.name, 18)}
-                              </h5>
-                            </div>
-                            <span className="p-1">
-                              <CheckIcon
-                                className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
-                                  workspace.id === activeWorkspace?.id ? "opacity-100" : "opacity-0"
-                                }`}
-                              />
-                            </span>
-                          </button>
-                        )}
-                      </Menu.Item>
-                    ))
-                  ) : (
-                    <p>未找到工作区！</p>
-                  )}
-                  <Menu.Item
-                    as="button"
-                    type="button"
-                    onClick={() => {
-                      router.push("/create-workspace");
-                    }}
-                    className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                    创建工作区
-                  </Menu.Item>
-                </div>
-              ) : (
-                <div className="w-full">
-                  <Loader className="space-y-2">
-                    <Loader.Item height="30px" />
-                    <Loader.Item height="30px" />
-                  </Loader>
-                </div>
-              )}
-            </div>
-            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
-              {userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
-                <Menu.Item
-                  key={index}
-                  as="div"
-                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                >
-                  <Link href={link.href}>
-                    <a className="w-full">{link.name}</a>
-                  </Link>
-                </Menu.Item>
-              ))}
-            </div>
-            <div className="w-full border-t border-t-custom-sidebar-border-100 px-3 py-2">
-              <Menu.Item
-                as="button"
-                type="button"
-                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
-                onClick={handleSignOut}
-              >
-                退出登录
-              </Menu.Item>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-
-      {!store?.theme?.sidebarCollapsed && (
-        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none">
-            <Avatar user={user} height="28px" width="28px" fontSize="14px" />
-          </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-20 mt-1.5 flex flex-col w-52  origin-top-left rounded-md
-          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
-            >
-              <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{user?.email}</span>
-                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map(
-                  (link, index) => (
-                    <Menu.Item key={index} as="button" type="button">
-                      <Link href={link.link}>
-                        <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                          <Icon iconName={link.icon} className="!text-lg !leading-5" />
-                          {link.name}
-                        </a>
-                      </Link>
-                    </Menu.Item>
-                  )
-                )}
-              </div>
-              <div className="pt-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}
-                >
-                  <Icon iconName="logout" className="!text-lg !leading-5" />
-                  Sign out
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
-      )}
-    </div>
-  );
-};
diff --git a/apps/app/components/workspace/sidebar-menu.tsx b/apps/app/components/workspace/sidebar-menu.tsx
deleted file mode 100644
index 5661d391bca..00000000000
--- a/apps/app/components/workspace/sidebar-menu.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// hooks
-import useTheme from "hooks/use-theme";
-// components
-import { NotificationPopover } from "components/notifications";
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import {
-  BarChartRounded,
-  GridViewOutlined,
-  TaskAltOutlined,
-  WorkOutlineOutlined,
-} from "@mui/icons-material";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-const workspaceLinks = (workspaceSlug: string) => [
-  {
-    Icon: GridViewOutlined,
-    name: "仪表盘",
-    href: `/${workspaceSlug}`,
-  },
-  {
-    Icon: BarChartRounded,
-    name: "分析",
-    href: `/${workspaceSlug}/analytics`,
-  },
-  {
-    Icon: WorkOutlineOutlined,
-    name: "项目",
-    href: `/${workspaceSlug}/projects`,
-  },
-  {
-    Icon: TaskAltOutlined,
-    name: "我的任务",
-    href: `/${workspaceSlug}/me/my-issues`,
-  },
-];
-
-export const WorkspaceSidebarMenu = () => {
-  const store: any = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { collapsed: sidebarCollapse } = useTheme();
-
-  return (
-    <div className="w-full cursor-pointer space-y-1 p-4">
-      {workspaceLinks(workspaceSlug as string).map((link, index) => {
-        const isActive =
-          link.name === "Settings"
-            ? router.asPath.includes(link.href)
-            : router.asPath === link.href;
-
-        return (
-          <Link key={index} href={link.href}>
-            <a className="block w-full">
-              <Tooltip
-                tooltipContent={link.name}
-                position="right"
-                className="ml-2"
-                disabled={!store?.theme?.sidebarCollapsed}
-              >
-                <div
-                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                  } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
-                >
-                  {<link.Icon fontSize="small" />}
-                  {!store?.theme?.sidebarCollapsed && link.name}
-                </div>
-              </Tooltip>
-            </a>
-          </Link>
-        );
-      })}
-
-      {/*<NotificationPopover />*/}
-    </div>
-  );
-};
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
deleted file mode 100644
index 14d34a96a0c..00000000000
--- a/apps/app/constants/fetch-keys.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import { objToQueryParams } from "helpers/string.helper";
-import { IAnalyticsParams, IJiraMetadata, INotificationParams } from "types";
-
-const paramsToKey = (params: any) => {
-  const {
-    state,
-    priority,
-    assignees,
-    created_by,
-    labels,
-    start_date,
-    target_date,
-    sub_issue,
-    start_target_date,
-  } = params;
-
-  let stateKey = state ? state.split(",") : [];
-  let priorityKey = priority ? priority.split(",") : [];
-  let assigneesKey = assignees ? assignees.split(",") : [];
-  let createdByKey = created_by ? created_by.split(",") : [];
-  let labelsKey = labels ? labels.split(",") : [];
-  const startTargetDate = start_target_date ? `${start_target_date}`.toUpperCase() : "FALSE";
-  const startDateKey = start_date ?? "";
-  const targetDateKey = target_date ?? "";
-  const type = params.type ? params.type.toUpperCase() : "NULL";
-  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
-  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
-
-  // sorting each keys in ascending order
-  stateKey = stateKey.sort().join("_");
-  priorityKey = priorityKey.sort().join("_");
-  assigneesKey = assigneesKey.sort().join("_");
-  createdByKey = createdByKey.sort().join("_");
-  labelsKey = labelsKey.sort().join("_");
-
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}`;
-};
-
-const inboxParamsToKey = (params: any) => {
-  const { priority, inbox_status } = params;
-
-  let priorityKey = priority ? priority.split(",") : [];
-  let inboxStatusKey = inbox_status ? inbox_status.split(",") : [];
-
-  // sorting each keys in ascending order
-  priorityKey = priorityKey.sort().join("_");
-  inboxStatusKey = inboxStatusKey.sort().join("_");
-
-  return `${priorityKey}_${inboxStatusKey}`;
-};
-
-const myIssuesParamsToKey = (params: any) => {
-  const {
-    assignees,
-    created_by,
-    labels,
-    priority,
-    state_group,
-    subscriber,
-    start_date,
-    target_date,
-  } = params;
-
-  let assigneesKey = assignees ? assignees.split(",") : [];
-  let createdByKey = created_by ? created_by.split(",") : [];
-  let stateGroupKey = state_group ? state_group.split(",") : [];
-  let subscriberKey = subscriber ? subscriber.split(",") : [];
-  let priorityKey = priority ? priority.split(",") : [];
-  let labelsKey = labels ? labels.split(",") : [];
-  const startDateKey = start_date ?? "";
-  const targetDateKey = target_date ?? "";
-  const type = params.type ? params.type.toUpperCase() : "NULL";
-  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
-  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
-
-  // sorting each keys in ascending order
-  assigneesKey = assigneesKey.sort().join("_");
-  createdByKey = createdByKey.sort().join("_");
-  stateGroupKey = stateGroupKey.sort().join("_");
-  subscriberKey = subscriberKey.sort().join("_");
-  priorityKey = priorityKey.sort().join("_");
-  labelsKey = labelsKey.sort().join("_");
-
-  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}`;
-};
-
-export const CURRENT_USER = "CURRENT_USER";
-export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
-export const USER_WORKSPACES = "USER_WORKSPACES";
-
-export const WORKSPACE_DETAILS = (workspaceSlug: string) =>
-  `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`;
-
-export const WORKSPACE_MEMBERS = (workspaceSlug: string) =>
-  `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_MEMBERS_WITH_EMAIL = (workspaceSlug: string) =>
-  `WORKSPACE_MEMBERS_WITH_EMAIL_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) =>
-  `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
-export const WORKSPACE_INVITATION_WITH_EMAIL = (workspaceSlug: string) =>
-  `WORKSPACE_INVITATION_WITH_EMAIL_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
-export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
-
-export const PROJECTS_LIST = (
-  workspaceSlug: string,
-  params: {
-    is_favorite: "all" | boolean;
-  }
-) => {
-  if (!params) return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}`;
-
-  return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}_${params.is_favorite
-    .toString()
-    .toUpperCase()}`;
-};
-export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId.toUpperCase()}`;
-
-export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId.toUpperCase()}`;
-export const PROJECT_MEMBERS_WITH_EMAIL = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MEMBERS_WITH_EMAIL_${workspaceSlug}_${projectId.toUpperCase()}`;
-export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";
-export const PROJECT_INVITATIONS_WITH_EMAIL = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_INVITATIONS_WITH_EMAIL_${workspaceSlug}_${projectId.toUpperCase()}`;
-
-export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_ISSUES_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}`;
-export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
-  if (!params) return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`;
-};
-export const PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
-  if (!params) return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`;
-};
-export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
-  `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
-  `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;
-export const PROJECT_ISSUES_COMMENTS = (issueId: string) =>
-  `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUES_ACTIVITY = (issueId: string) =>
-  `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUE_BY_STATE = (projectId: string) =>
-  `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`;
-export const PROJECT_ISSUE_LABELS = (projectId: string) =>
-  `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`;
-export const WORKSPACE_LABELS = (workspaceSlug: string) =>
-  `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`;
-export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
-  `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
-
-// cycles
-export const CYCLES_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
-export const INCOMPLETE_CYCLES_LIST = (projectId: string) =>
-  `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const CURRENT_CYCLE_LIST = (projectId: string) =>
-  `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`;
-export const UPCOMING_CYCLES_LIST = (projectId: string) =>
-  `UPCOMING_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const DRAFT_CYCLES_LIST = (projectId: string) =>
-  `DRAFT_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const COMPLETED_CYCLES_LIST = (projectId: string) =>
-  `COMPLETED_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId.toUpperCase()}`;
-export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
-  if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
-};
-export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId.toUpperCase()}`;
-
-export const STATES_LIST = (projectId: string) => `STATES_LIST_${projectId.toUpperCase()}`;
-
-export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug.toUpperCase()}`;
-export const USER_ISSUES = (workspaceSlug: string, params: any) => {
-  const paramsKey = myIssuesParamsToKey(params);
-
-  return `USER_ISSUES_${workspaceSlug.toUpperCase()}_${paramsKey}`;
-};
-export const USER_ACTIVITY = "USER_ACTIVITY";
-export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
-  `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`;
-export const USER_PROJECT_VIEW = (projectId: string) =>
-  `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
-
-export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId.toUpperCase()}`;
-export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId.toUpperCase()}`;
-export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
-  if (!params) return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
-};
-export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId.toUpperCase()}`;
-
-export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId.toUpperCase()}`;
-export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId.toUpperCase()}`;
-export const VIEW_ISSUES = (viewId: string, params: any) => {
-  if (!params) return `VIEW_ISSUES_${viewId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
-};
-
-// inbox
-export const INBOX_LIST = (projectId: string) => `INBOX_LIST_${projectId.toUpperCase()}`;
-export const INBOX_DETAILS = (inboxId: string) => `INBOX_DETAILS_${inboxId.toUpperCase()}`;
-export const INBOX_ISSUES = (inboxId: string, params?: any) => {
-  if (!params) return `INBOX_ISSUES_${inboxId.toUpperCase()}`;
-
-  const paramsKey = inboxParamsToKey(params);
-
-  return `INBOX_ISSUES_${inboxId.toUpperCase()}_${paramsKey.toUpperCase()}`;
-};
-export const INBOX_ISSUE_DETAILS = (inboxId: string, issueId: string) =>
-  `INBOX_ISSUE_DETAILS_${inboxId.toUpperCase()}_${issueId.toUpperCase()}`;
-
-// Issues
-export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
-export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;
-export const ISSUE_ATTACHMENTS = (issueId: string) => `ISSUE_ATTACHMENTS_${issueId.toUpperCase()}`;
-export const ARCHIVED_ISSUE_DETAILS = (issueId: string) =>
-  `ARCHIVED_ISSUE_DETAILS_${issueId.toUpperCase()}`;
-
-// integrations
-export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
-export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
-  `WORKSPACE_INTEGRATIONS_${workspaceSlug.toUpperCase()}`;
-
-export const JIRA_IMPORTER_DETAIL = (workspaceSlug: string, params: IJiraMetadata) => {
-  const { api_token, cloud_hostname, email, project_key } = params;
-
-  return `JIRA_IMPORTER_DETAIL_${workspaceSlug.toUpperCase()}_${api_token}_${cloud_hostname}_${email}_${project_key}`;
-};
-
-//import-export
-export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
-  `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`;
-
-//export
-export const EXPORT_SERVICES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
-  `EXPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
-
-// github-importer
-export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
-  `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
-
-// slack-project-integration
-export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
-  `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
-
-// Pages
-export const RECENT_PAGES_LIST = (projectId: string) =>
-  `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
-export const ALL_PAGES_LIST = (projectId: string) => `ALL_PAGES_LIST_${projectId.toUpperCase()}`;
-export const FAVORITE_PAGES_LIST = (projectId: string) =>
-  `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`;
-export const MY_PAGES_LIST = (projectId: string) => `MY_PAGES_LIST_${projectId.toUpperCase()}`;
-export const OTHER_PAGES_LIST = (projectId: string) =>
-  `OTHER_PAGES_LIST_${projectId.toUpperCase()}`;
-export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId.toUpperCase()}`;
-export const PAGE_BLOCKS_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`;
-export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`;
-
-// estimates
-export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
-export const ESTIMATE_DETAILS = (estimateId: string) =>
-  `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
-
-// analytics
-export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
-  `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${
-    params.segment
-  }_${params.project?.toString()}`;
-export const DEFAULT_ANALYTICS = (workspaceSlug: string, params?: Partial<IAnalyticsParams>) =>
-  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${
-    params?.cycle
-  }_${params?.module}`;
-
-// notifications
-export const USER_WORKSPACE_NOTIFICATIONS = (
-  workspaceSlug: string,
-  params: INotificationParams
-) => {
-  const { type, snoozed, archived, read } = params;
-
-  return `USER_WORKSPACE_NOTIFICATIONS_${workspaceSlug?.toUpperCase()}_TYPE_${(
-    type ?? "assigned"
-  )?.toUpperCase()}_SNOOZED_${snoozed}_ARCHIVED_${archived}_READ_${read}`;
-};
-
-export const USER_WORKSPACE_NOTIFICATIONS_DETAILS = (
-  workspaceSlug: string,
-  notificationId: string
-) =>
-  `USER_WORKSPACE_NOTIFICATIONS_DETAILS_${workspaceSlug?.toUpperCase()}_${notificationId?.toUpperCase()}`;
-
-export const UNREAD_NOTIFICATIONS_COUNT = (workspaceSlug: string) =>
-  `UNREAD_NOTIFICATIONS_COUNT_${workspaceSlug?.toUpperCase()}`;
-
-export const getPaginatedNotificationKey = (
-  index: number,
-  prevData: any,
-  workspaceSlug: string,
-  params: any
-) => {
-  if (prevData && !prevData?.results?.length) return null;
-
-  if (index === 0)
-    return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams({
-      ...params,
-      cursor: "30:0:0",
-    })}`;
-
-  const cursor = prevData?.next_cursor;
-  const nextPageResults = prevData?.next_page_results;
-
-  if (!nextPageResults) return null;
-
-  return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams({
-    ...params,
-    cursor,
-  })}`;
-};
-
-// profile
-export const USER_PROFILE_DATA = (workspaceSlug: string, userId: string) =>
-  `USER_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
-export const USER_PROFILE_ACTIVITY = (workspaceSlug: string, userId: string) =>
-  `USER_WORKSPACE_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
-export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId: string) =>
-  `USER_PROFILE_PROJECT_SEGREGATION_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
-export const USER_PROFILE_ISSUES = (workspaceSlug: string, userId: string, params: any) => {
-  const paramsKey = myIssuesParamsToKey(params);
-
-  return `USER_PROFILE_ISSUES_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${paramsKey}`;
-};
-
-// reactions
-export const ISSUE_REACTION_LIST = (workspaceSlug: string, projectId: string, issueId: string) =>
-  `ISSUE_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${issueId.toUpperCase()}`;
-export const COMMENT_REACTION_LIST = (
-  workspaceSlug: string,
-  projectId: string,
-  commendId: string
-) =>
-  `COMMENT_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${commendId.toUpperCase()}`;
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
deleted file mode 100644
index 860adaa8f2d..00000000000
--- a/apps/app/constants/issue.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-export const GROUP_BY_OPTIONS: Array<{
-  name: string;
-  key: TIssueGroupByOptions;
-}> = [
-  { name: "状态", key: "state" },
-  { name: "状态组", key: "state_detail.group" },
-  { name: "优先级", key: "priority" },
-  { name: "项目", key: "project" },
-  { name: "标签", key: "labels" },
-  { name: "负责人", key: "assignees" },
-  { name: "创建人", key: "created_by" },
-  { name: "无", key: null },
-];
-
-export const ORDER_BY_OPTIONS: Array<{
-  name: string;
-  key: TIssueOrderByOptions;
-}> = [
-  { name: "手动", key: "sort_order" },
-  { name: "最近创建", key: "-created_at" },
-  { name: "最近更新", key: "-updated_at" },
-  { name: "开始时间", key: "start_date" },
-  { name: "优先级", key: "priority" },
-];
-
-export const FILTER_ISSUE_OPTIONS: Array<{
-  name: string;
-  key: "active" | "backlog" | null;
-}> = [
-  {
-    name: "全部",
-    key: null,
-  },
-  {
-    name: "活动任务",
-    key: "active",
-  },
-  {
-    name: "积压任务",
-    key: "backlog",
-  },
-];
-
-import { orderArrayBy } from "helpers/array.helper";
-import { IIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "types";
-
-type THandleIssuesMutation = (
-  formData: Partial<IIssue>,
-  oldGroupTitle: string,
-  selectedGroupBy: TIssueGroupByOptions,
-  issueIndex: number,
-  orderBy: TIssueOrderByOptions,
-  prevData?:
-    | {
-        [key: string]: IIssue[];
-      }
-    | IIssue[]
-) =>
-  | {
-      [key: string]: IIssue[];
-    }
-  | IIssue[]
-  | undefined;
-
-export const handleIssuesMutation: THandleIssuesMutation = (
-  formData,
-  oldGroupTitle,
-  selectedGroupBy,
-  issueIndex,
-  orderBy,
-  prevData
-) => {
-  if (!prevData) return prevData;
-
-  if (Array.isArray(prevData)) {
-    const updatedIssue = {
-      ...prevData[issueIndex],
-      ...formData,
-      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
-      labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
-    };
-
-    prevData.splice(issueIndex, 1, updatedIssue);
-
-    return [...prevData];
-  } else {
-    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
-
-    let newGroup: IIssue[] = [];
-
-    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
-    else if (selectedGroupBy === "state") newGroup = prevData[formData.state ?? ""] ?? [];
-
-    const updatedIssue = {
-      ...oldGroup[issueIndex],
-      ...formData,
-      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
-      labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
-    };
-
-    if (selectedGroupBy !== Object.keys(formData)[0])
-      return {
-        ...prevData,
-        [oldGroupTitle ?? ""]: orderArrayBy(
-          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
-          orderBy
-        ),
-      };
-
-    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state;
-
-    return {
-      ...prevData,
-      [oldGroupTitle ?? ""]: orderArrayBy(
-        oldGroup.filter((i) => i.id !== updatedIssue.id),
-        orderBy
-      ),
-      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
-    };
-  }
-};
diff --git a/apps/app/constants/module.ts b/apps/app/constants/module.ts
deleted file mode 100644
index 058171328d1..00000000000
--- a/apps/app/constants/module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// types
-import { TModuleStatus } from "types";
-
-export const MODULE_STATUS: {
-  label: string;
-  value: TModuleStatus;
-  color: string;
-}[] = [
-  { label: "Backlog", value: "backlog", color: "#a3a3a2" },
-  { label: "Planned", value: "planned", color: "#3f76ff" },
-  { label: "In Progress", value: "in-progress", color: "#f39e1f" },
-  { label: "Paused", value: "paused", color: "#525252" },
-  { label: "Completed", value: "completed", color: "#16a34a" },
-  { label: "Cancelled", value: "cancelled", color: "#ef4444" },
-];
diff --git a/apps/app/constants/spreadsheet.ts b/apps/app/constants/spreadsheet.ts
deleted file mode 100644
index df6cd5aefe6..00000000000
--- a/apps/app/constants/spreadsheet.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
-  CalendarDaysIcon,
-  PlayIcon,
-  Squares2X2Icon,
-  TagIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
-
-export const SPREADSHEET_COLUMN = [
-  {
-    propertyName: "title",
-    colName: "Title",
-    colSize: "440px",
-  },
-  {
-    propertyName: "state",
-    colName: "State",
-    colSize: "128px",
-    icon: Squares2X2Icon,
-    ascendingOrder: "state__name",
-    descendingOrder: "-state__name",
-  },
-  {
-    propertyName: "priority",
-    colName: "Priority",
-    colSize: "128px",
-    ascendingOrder: "priority",
-    descendingOrder: "-priority",
-  },
-  {
-    propertyName: "assignee",
-    colName: "Assignees",
-    colSize: "128px",
-    icon: UserGroupIcon,
-    ascendingOrder: "assignees__id",
-    descendingOrder: "-assignees__id",
-  },
-  {
-    propertyName: "labels",
-    colName: "Labels",
-    colSize: "128px",
-    icon: TagIcon,
-    ascendingOrder: "labels__name",
-    descendingOrder: "-labels__name",
-  },
-  {
-    propertyName: "start_date",
-    colName: "Start Date",
-    colSize: "128px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-start_date",
-    descendingOrder: "start_date",
-  },
-  {
-    propertyName: "due_date",
-    colName: "Due Date",
-    colSize: "128px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-target_date",
-    descendingOrder: "target_date",
-  },
-  {
-    propertyName: "estimate",
-    colName: "Estimate",
-    colSize: "128px",
-    icon: PlayIcon,
-    ascendingOrder: "estimate_point",
-    descendingOrder: "-estimate_point",
-  },
-  {
-    propertyName: "created_on",
-    colName: "Created On",
-    colSize: "144px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-created_at",
-    descendingOrder: "created_at",
-  },
-  {
-    propertyName: "updated_on",
-    colName: "Updated On",
-    colSize: "144px",
-    icon: CalendarDaysIcon,
-    ascendingOrder: "-updated_at",
-    descendingOrder: "updated_at",
-  },
-];
diff --git a/apps/app/constants/state.ts b/apps/app/constants/state.ts
deleted file mode 100644
index 7357578221e..00000000000
--- a/apps/app/constants/state.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const STATE_GROUP_COLORS: {
-  [key: string]: string;
-} = {
-  backlog: "#d9d9d9",
-  unstarted: "#3f76ff",
-  started: "#f59e0b",
-  completed: "#16a34a",
-  cancelled: "#dc2626",
-};
diff --git a/apps/app/constants/workspace.ts b/apps/app/constants/workspace.ts
deleted file mode 100644
index 47a2e09e5eb..00000000000
--- a/apps/app/constants/workspace.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// services images
-import GithubLogo from "public/services/github.png";
-import JiraLogo from "public/services/jira.png";
-import CSVLogo from "public/services/csv.svg";
-import ExcelLogo from "public/services/excel.svg";
-import JSONLogo from "public/services/json.svg";
-
-export const ROLE = {
-  5: "Guest",
-  10: "Viewer",
-  15: "Member",
-  20: "Admin",
-};
-
-export const ORGANIZATION_SIZE = ["只有我自己", "2-10", "11-50", "51-200", "201-500", "500+"];
-
-export const USER_ROLES = [
-  { value: "Product / Project Manager", label: "产品经理/项目经理" },
-  { value: "Development / Engineering", label: "开发者/工程师" },
-  { value: "Founder / Executive", label: "创始人/执行官" },
-  { value: "Freelancer / Consultant", label: "自由职业者/顾问" },
-  { value: "Marketing / Growth", label: "市场营销" },
-  { value: "Sales / Business Development", label: "销售/业务开发" },
-  { value: "Support / Operations", label: "支持/运营" },
-  { value: "Student / Professor", label: "学生/教授" },
-  { value: "Human Resources", label: "人力资源" },
-  { value: "Other", label: "其他" },
-];
-
-export const IMPORTERS_EXPORTERS_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,
-  },
-];
diff --git a/apps/app/contexts/inbox-view-context.tsx b/apps/app/contexts/inbox-view-context.tsx
deleted file mode 100644
index b7b452f120d..00000000000
--- a/apps/app/contexts/inbox-view-context.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { createContext, useCallback, useEffect, useReducer } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// components
-import ToastAlert from "components/toast-alert";
-// services
-import inboxServices from "services/inbox.service";
-// types
-import { IInboxFilterOptions } from "types";
-// fetch-keys
-import { INBOX_DETAILS } from "constants/fetch-keys";
-
-export const inboxViewContext = createContext<ContextType>({} as ContextType);
-
-type InboxViewProps = {
-  filters: IInboxFilterOptions;
-};
-
-type ReducerActionType = {
-  type: "REHYDRATE_THEME" | "SET_FILTERS";
-  payload?: Partial<InboxViewProps>;
-};
-
-type ContextType = InboxViewProps & {
-  setFilters: (filters: Partial<IInboxFilterOptions>) => void;
-  clearAllFilters: () => void;
-};
-
-type StateType = {
-  filters: IInboxFilterOptions;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  filters: {
-    priority: null,
-    inbox_status: null,
-  },
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "REHYDRATE_THEME": {
-      return { ...initialState, ...payload };
-    }
-
-    case "SET_FILTERS": {
-      const newState = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...payload?.filters,
-        },
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-  }
-};
-
-const saveDataToServer = async (
-  workspaceSlug: string,
-  projectId: string,
-  inboxId: string,
-  state: any
-) => {
-  await inboxServices.patchInbox(workspaceSlug, projectId, inboxId, {
-    view_props: state,
-  });
-};
-
-export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  const { data: inboxDetails, mutate: mutateInboxDetails } = useSWR(
-    workspaceSlug && projectId && inboxId ? INBOX_DETAILS(inboxId.toString()) : null,
-    workspaceSlug && projectId && inboxId
-      ? () =>
-          inboxServices.getInboxById(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString()
-          )
-      : null
-  );
-
-  const setFilters = useCallback(
-    (property: Partial<IInboxFilterOptions>) => {
-      Object.keys(property).forEach((key) => {
-        if (property[key as keyof typeof property]?.length === 0)
-          property[key as keyof typeof property] = null;
-      });
-
-      dispatch({
-        type: "SET_FILTERS",
-        payload: {
-          filters: {
-            ...state.filters,
-            ...property,
-          },
-        },
-      });
-
-      if (!workspaceSlug || !projectId || !inboxId) return;
-
-      const newViewProps = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...property,
-        },
-      };
-
-      mutateInboxDetails((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: newViewProps,
-        };
-      }, false);
-
-      saveDataToServer(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        newViewProps
-      );
-    },
-    [workspaceSlug, projectId, inboxId, mutateInboxDetails, state]
-  );
-
-  const clearAllFilters = useCallback(() => {
-    dispatch({
-      type: "SET_FILTERS",
-      payload: {
-        filters: { ...initialState.filters },
-      },
-    });
-
-    if (!workspaceSlug || !projectId || !inboxId) return;
-
-    const newViewProps = {
-      ...state,
-      filters: { ...initialState.filters },
-    };
-
-    mutateInboxDetails((prevData: any) => {
-      if (!prevData) return prevData;
-
-      return {
-        ...prevData,
-        view_props: newViewProps,
-      };
-    }, false);
-
-    saveDataToServer(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      inboxId.toString(),
-      newViewProps
-    );
-  }, [inboxId, mutateInboxDetails, projectId, state, workspaceSlug]);
-
-  useEffect(() => {
-    dispatch({
-      type: "REHYDRATE_THEME",
-      payload: {
-        ...inboxDetails?.view_props,
-      },
-    });
-  }, [inboxDetails]);
-
-  return (
-    <inboxViewContext.Provider
-      value={{
-        filters: state.filters,
-        setFilters,
-        clearAllFilters,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </inboxViewContext.Provider>
-  );
-};
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
deleted file mode 100644
index 134e0d8f65f..00000000000
--- a/apps/app/contexts/issue-view.context.tsx
+++ /dev/null
@@ -1,768 +0,0 @@
-import { createContext, useCallback, useEffect, useReducer } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// components
-import ToastAlert from "components/toast-alert";
-// services
-import projectService from "services/project.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-import viewsService from "services/views.service";
-// types
-import {
-  IIssueFilterOptions,
-  TIssueViewOptions,
-  IProjectMember,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  ICurrentUserResponse,
-} from "types";
-// fetch-keys
-import {
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  USER_PROJECT_VIEW,
-  VIEW_DETAILS,
-} from "constants/fetch-keys";
-import useUserAuth from "hooks/use-user-auth";
-
-export const issueViewContext = createContext<ContextType>({} as ContextType);
-
-type IssueViewProps = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
-
-type ReducerActionType = {
-  type:
-    | "REHYDRATE_THEME"
-    | "SET_ISSUE_VIEW"
-    | "SET_ORDER_BY_PROPERTY"
-    | "SET_SHOW_EMPTY_STATES"
-    | "SET_CALENDAR_DATE_RANGE"
-    | "SET_FILTERS"
-    | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT"
-    | "SET_SHOW_SUB_ISSUES";
-  payload?: Partial<IssueViewProps>;
-};
-
-type ContextType = IssueViewProps & {
-  setGroupByProperty: (property: TIssueGroupByOptions) => void;
-  setOrderBy: (property: TIssueOrderByOptions) => void;
-  setShowEmptyGroups: (property: boolean) => void;
-  setShowSubIssues: (value: boolean) => void;
-  setCalendarDateRange: (property: string) => void;
-  setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
-  resetFilterToDefault: () => void;
-  setNewFilterDefaultView: () => void;
-  setIssueView: (property: TIssueViewOptions) => void;
-};
-
-type StateType = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  issueView: "list",
-  groupByProperty: null,
-  orderBy: "-created_at",
-  showEmptyGroups: true,
-  showSubIssues: true,
-  calendarDateRange: "",
-  filters: {
-    type: null,
-    priority: null,
-    assignees: null,
-    labels: null,
-    state: null,
-    state_group: null,
-    subscriber: null,
-    created_by: null,
-    start_date: null,
-    target_date: null,
-  },
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "REHYDRATE_THEME": {
-      let collapsed: any = localStorage.getItem("collapsed");
-      collapsed = collapsed ? JSON.parse(collapsed) : false;
-
-      return { ...initialState, ...payload, collapsed };
-    }
-
-    case "SET_ISSUE_VIEW": {
-      const newState = {
-        ...state,
-        issueView: payload?.issueView || "list",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_GROUP_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        groupByProperty: payload?.groupByProperty || null,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_ORDER_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        orderBy: payload?.orderBy || "-created_at",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_EMPTY_STATES": {
-      const newState = {
-        ...state,
-        showEmptyGroups: payload?.showEmptyGroups || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_SUB_ISSUES": {
-      const newState = {
-        ...state,
-        showSubIssues: payload?.showSubIssues || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_CALENDAR_DATE_RANGE": {
-      const newState = {
-        ...state,
-        calendarDateRange: payload?.calendarDateRange || "",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_FILTERS": {
-      const newState = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...payload?.filters,
-        },
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "RESET_TO_DEFAULT": {
-      return {
-        ...initialState,
-        ...payload,
-      };
-    }
-
-    default: {
-      return state;
-    }
-  }
-};
-
-const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
-  mutate<IProjectMember>(
-    workspaceSlug && projectID ? USER_PROJECT_VIEW(projectID as string) : null,
-    (prevData) => {
-      if (!prevData) return prevData;
-
-      return {
-        ...prevData,
-        view_props: state,
-      };
-    },
-    false
-  );
-
-  await projectService.setProjectView(workspaceSlug, projectID, {
-    view_props: state,
-  });
-};
-
-const saveCycleFilters = async (
-  workspaceSlug: string,
-  projectId: string,
-  cycleId: string,
-  state: any,
-  user: ICurrentUserResponse | undefined
-) => {
-  await cyclesService.patchCycle(
-    workspaceSlug,
-    projectId,
-    cycleId,
-    {
-      ...state,
-    },
-    user
-  );
-};
-
-const saveModuleFilters = async (
-  workspaceSlug: string,
-  projectId: string,
-  moduleId: string,
-  state: any,
-  user: ICurrentUserResponse | undefined
-) => {
-  await modulesService.patchModule(
-    workspaceSlug,
-    projectId,
-    moduleId,
-    {
-      ...state,
-    },
-    user
-  );
-};
-
-const saveViewFilters = async (
-  workspaceSlug: string,
-  projectId: string,
-  viewId: string,
-  state: any,
-  user: ICurrentUserResponse | undefined
-) => {
-  await viewsService.patchView(
-    workspaceSlug,
-    projectId,
-    viewId,
-    {
-      ...state,
-    },
-    user
-  );
-};
-
-const setNewDefault = async (workspaceSlug: string, projectId: string, state: any) => {
-  mutate<IProjectMember>(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
-    (prevData) => {
-      if (!prevData) return prevData;
-
-      return {
-        ...prevData,
-        view_props: state,
-      };
-    },
-    false
-  );
-
-  await projectService.setProjectView(workspaceSlug, projectId, {
-    view_props: state,
-    default_props: state,
-  });
-};
-
-export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: viewDetails, mutate: mutateViewDetails } = useSWR(
-    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
-    workspaceSlug && projectId && viewId
-      ? () =>
-          viewsService.getViewDetails(
-            workspaceSlug as string,
-            projectId as string,
-            viewId as string
-          )
-      : null
-  );
-
-  const { data: cycleDetails, mutate: mutateCycleDetails } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId as string) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
-      : null
-  );
-
-  const { data: moduleDetails, mutate: mutateModuleDetails } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
-      : null
-  );
-
-  const setIssueView = useCallback(
-    (property: TIssueViewOptions) => {
-      dispatch({
-        type: "SET_ISSUE_VIEW",
-        payload: {
-          issueView: property,
-        },
-      });
-
-      const additionalProperties = {
-        groupByProperty: state.groupByProperty,
-        orderBy: state.orderBy,
-      };
-
-      if (property === "kanban" && state.groupByProperty === null) {
-        additionalProperties.groupByProperty = "state";
-        dispatch({
-          type: "SET_GROUP_BY_PROPERTY",
-          payload: {
-            groupByProperty: "state",
-          },
-        });
-      }
-      if (property === "calendar") {
-        additionalProperties.groupByProperty = null;
-        dispatch({
-          type: "SET_GROUP_BY_PROPERTY",
-          payload: {
-            groupByProperty: null,
-          },
-        });
-      }
-      if (property === "gantt_chart") {
-        additionalProperties.orderBy = "sort_order";
-        dispatch({
-          type: "SET_ORDER_BY_PROPERTY",
-          payload: {
-            orderBy: "sort_order",
-          },
-        });
-      }
-
-      if (!workspaceSlug || !projectId) return;
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        issueView: property,
-        ...additionalProperties,
-      });
-    },
-    [workspaceSlug, projectId, state]
-  );
-
-  const setGroupByProperty = useCallback(
-    (property: TIssueGroupByOptions) => {
-      dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
-        payload: {
-          groupByProperty: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            groupByProperty: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        groupByProperty: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setOrderBy = useCallback(
-    (property: TIssueOrderByOptions) => {
-      dispatch({
-        type: "SET_ORDER_BY_PROPERTY",
-        payload: {
-          orderBy: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            orderBy: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        orderBy: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setShowEmptyGroups = useCallback(
-    (property: boolean) => {
-      dispatch({
-        type: "SET_SHOW_EMPTY_STATES",
-        payload: {
-          showEmptyGroups: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            showEmptyGroups: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        showEmptyGroups: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setShowSubIssues = useCallback(
-    (property: boolean) => {
-      dispatch({
-        type: "SET_SHOW_SUB_ISSUES",
-        payload: {
-          showSubIssues: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            showSubIssues: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        showSubIssues: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setCalendarDateRange = useCallback(
-    (value: string) => {
-      dispatch({
-        type: "SET_CALENDAR_DATE_RANGE",
-        payload: {
-          calendarDateRange: value,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            calendarDateRange: value,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        calendarDateRange: value,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setFilters = useCallback(
-    (property: Partial<IIssueFilterOptions>, saveToServer = true) => {
-      Object.keys(property).forEach((key) => {
-        if (property[key as keyof typeof property]?.length === 0)
-          property[key as keyof typeof property] = null;
-      });
-
-      dispatch({
-        type: "SET_FILTERS",
-        payload: {
-          filters: {
-            ...state.filters,
-            ...property,
-          },
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      if (cycleId) {
-        mutateCycleDetails((prevData: any) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            view_props: {
-              filters: {
-                ...state.filters,
-                ...property,
-              },
-            },
-          };
-        }, false);
-
-        saveCycleFilters(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          cycleId.toString(),
-          {
-            view_props: {
-              filters: {
-                ...state.filters,
-                ...property,
-              },
-            },
-          },
-          user
-        );
-      } else if (moduleId) {
-        mutateModuleDetails((prevData: any) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            view_props: {
-              filters: {
-                ...state.filters,
-                ...property,
-              },
-            },
-          };
-        }, false);
-
-        saveModuleFilters(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          moduleId.toString(),
-          {
-            view_props: {
-              filters: {
-                ...state.filters,
-                ...property,
-              },
-            },
-          },
-          user
-        );
-      } else if (viewId) {
-        mutateViewDetails((prevData: any) => {
-          if (!prevData) return prevData;
-          return {
-            ...prevData,
-            query_data: {
-              ...state.filters,
-              ...property,
-            },
-          };
-        }, false);
-        if (saveToServer)
-          saveViewFilters(
-            workspaceSlug as string,
-            projectId as string,
-            viewId as string,
-            {
-              query_data: {
-                ...state.filters,
-                ...property,
-              },
-            },
-            user
-          );
-      } else {
-        mutateMyViewProps((prevData: any) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            view_props: {
-              ...state,
-              filters: {
-                ...state.filters,
-                ...property,
-              },
-            },
-          };
-        }, false);
-
-        saveDataToServer(workspaceSlug as string, projectId as string, {
-          ...state,
-          filters: {
-            ...state.filters,
-            ...property,
-          },
-        });
-      }
-    },
-    [
-      projectId,
-      workspaceSlug,
-      state,
-      mutateMyViewProps,
-      cycleId,
-      mutateCycleDetails,
-      moduleId,
-      mutateModuleDetails,
-      viewId,
-      mutateViewDetails,
-      user,
-    ]
-  );
-
-  const setNewDefaultView = useCallback(() => {
-    if (!workspaceSlug || !projectId) return;
-
-    setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
-      mutateMyViewProps();
-    });
-  }, [projectId, workspaceSlug, state, mutateMyViewProps]);
-
-  const resetToDefault = useCallback(() => {
-    dispatch({
-      type: "RESET_TO_DEFAULT",
-      payload: myViewProps?.default_props,
-    });
-
-    if (!workspaceSlug || !projectId) return;
-
-    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
-  }, [projectId, workspaceSlug, myViewProps]);
-
-  useEffect(() => {
-    dispatch({
-      type: "REHYDRATE_THEME",
-      payload: {
-        ...myViewProps?.view_props,
-        filters: {
-          ...(cycleId
-            ? cycleDetails?.view_props.filters
-            : moduleId
-            ? moduleDetails?.view_props.filters
-            : viewId
-            ? viewDetails?.query_data
-            : myViewProps?.view_props?.filters),
-        } as any,
-      },
-    });
-  }, [myViewProps, cycleId, cycleDetails, moduleId, moduleDetails, viewId, viewDetails]);
-
-  return (
-    <issueViewContext.Provider
-      value={{
-        issueView: state.issueView,
-        groupByProperty: state.groupByProperty,
-        setGroupByProperty,
-        orderBy: state.orderBy,
-        showEmptyGroups: state.showEmptyGroups,
-        showSubIssues: state.showSubIssues,
-        calendarDateRange: state.calendarDateRange,
-        setCalendarDateRange,
-        setOrderBy,
-        setShowEmptyGroups,
-        setShowSubIssues,
-        filters: state.filters,
-        setFilters,
-        resetFilterToDefault: resetToDefault,
-        setNewFilterDefaultView: setNewDefaultView,
-        setIssueView,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </issueViewContext.Provider>
-  );
-};
diff --git a/apps/app/contexts/profile-issues-context.tsx b/apps/app/contexts/profile-issues-context.tsx
deleted file mode 100644
index 7fc6d6c0224..00000000000
--- a/apps/app/contexts/profile-issues-context.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { createContext, useCallback, useReducer } from "react";
-
-// components
-import ToastAlert from "components/toast-alert";
-// types
-import {
-  IIssueFilterOptions,
-  TIssueViewOptions,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  Properties,
-} from "types";
-
-export const profileIssuesContext = createContext<ContextType>({} as ContextType);
-
-type IssueViewProps = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  filters: IIssueFilterOptions;
-  properties: Properties;
-};
-
-type ReducerActionType = {
-  type:
-    | "SET_ISSUE_VIEW"
-    | "SET_ORDER_BY_PROPERTY"
-    | "SET_SHOW_EMPTY_STATES"
-    | "SET_FILTERS"
-    | "SET_PROPERTIES"
-    | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT"
-    | "SET_SHOW_SUB_ISSUES";
-  payload?: Partial<IssueViewProps>;
-};
-
-type ContextType = IssueViewProps & {
-  setGroupByProperty: (property: TIssueGroupByOptions) => void;
-  setOrderBy: (property: TIssueOrderByOptions) => void;
-  setShowEmptyGroups: (property: boolean) => void;
-  setShowSubIssues: (value: boolean) => void;
-  setFilters: (filters: Partial<IIssueFilterOptions>) => void;
-  setProperties: (key: keyof Properties) => void;
-  setIssueView: (property: TIssueViewOptions) => void;
-};
-
-type StateType = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  filters: IIssueFilterOptions;
-  properties: Properties;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  issueView: "list",
-  groupByProperty: null,
-  orderBy: "-created_at",
-  showEmptyGroups: true,
-  showSubIssues: true,
-  filters: {
-    type: null,
-    priority: null,
-    assignees: null,
-    labels: null,
-    state: null,
-    state_group: null,
-    subscriber: null,
-    created_by: null,
-    start_date: null,
-    target_date: null,
-  },
-  properties: {
-    assignee: true,
-    start_date: true,
-    due_date: true,
-    key: true,
-    labels: true,
-    priority: true,
-    state: true,
-    sub_issue_count: true,
-    attachment_count: true,
-    link: true,
-    estimate: true,
-    created_on: true,
-    updated_on: true,
-  },
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "SET_ISSUE_VIEW": {
-      const newState = {
-        ...state,
-        issueView: payload?.issueView || "list",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_GROUP_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        groupByProperty: payload?.groupByProperty || null,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_ORDER_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        orderBy: payload?.orderBy || "-created_at",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_EMPTY_STATES": {
-      const newState = {
-        ...state,
-        showEmptyGroups: payload?.showEmptyGroups || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_SUB_ISSUES": {
-      const newState = {
-        ...state,
-        showSubIssues: payload?.showSubIssues || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_FILTERS": {
-      const newState = {
-        ...state,
-        filters: {
-          ...state.filters,
-          ...payload?.filters,
-        },
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_PROPERTIES": {
-      const newState = {
-        ...state,
-        properties: {
-          ...state.properties,
-          ...payload?.properties,
-        },
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    default: {
-      return state;
-    }
-  }
-};
-
-export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const setIssueView = useCallback((property: TIssueViewOptions) => {
-    dispatch({
-      type: "SET_ISSUE_VIEW",
-      payload: {
-        issueView: property,
-      },
-    });
-
-    if (property === "kanban") {
-      dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
-        payload: {
-          groupByProperty: "state_detail.group",
-        },
-      });
-    }
-  }, []);
-
-  const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
-    dispatch({
-      type: "SET_GROUP_BY_PROPERTY",
-      payload: {
-        groupByProperty: property,
-      },
-    });
-  }, []);
-
-  const setOrderBy = useCallback((property: TIssueOrderByOptions) => {
-    dispatch({
-      type: "SET_ORDER_BY_PROPERTY",
-      payload: {
-        orderBy: property,
-      },
-    });
-  }, []);
-
-  const setShowEmptyGroups = useCallback((property: boolean) => {
-    dispatch({
-      type: "SET_SHOW_EMPTY_STATES",
-      payload: {
-        showEmptyGroups: property,
-      },
-    });
-  }, []);
-
-  const setShowSubIssues = useCallback((property: boolean) => {
-    dispatch({
-      type: "SET_SHOW_SUB_ISSUES",
-      payload: {
-        showSubIssues: property,
-      },
-    });
-  }, []);
-
-  const setFilters = useCallback(
-    (property: Partial<IIssueFilterOptions>) => {
-      Object.keys(property).forEach((key) => {
-        if (property[key as keyof typeof property]?.length === 0)
-          property[key as keyof typeof property] = null;
-      });
-
-      dispatch({
-        type: "SET_FILTERS",
-        payload: {
-          filters: {
-            ...state.filters,
-            ...property,
-          },
-        },
-      });
-    },
-    [state]
-  );
-
-  const setProperties = useCallback(
-    (key: keyof Properties) => {
-      dispatch({
-        type: "SET_PROPERTIES",
-        payload: {
-          properties: {
-            ...state.properties,
-            [key]: !state.properties[key],
-          },
-        },
-      });
-    },
-    [state]
-  );
-
-  return (
-    <profileIssuesContext.Provider
-      value={{
-        issueView: state.issueView,
-        setIssueView,
-        groupByProperty: state.groupByProperty,
-        setGroupByProperty,
-        orderBy: state.orderBy,
-        setOrderBy,
-        showEmptyGroups: state.showEmptyGroups,
-        setShowEmptyGroups,
-        showSubIssues: state.showSubIssues,
-        setShowSubIssues,
-        filters: state.filters,
-        setFilters,
-        properties: state.properties,
-        setProperties,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </profileIssuesContext.Provider>
-  );
-};
diff --git a/apps/app/contexts/project-member.context.tsx b/apps/app/contexts/project-member.context.tsx
deleted file mode 100644
index 60cb8954f66..00000000000
--- a/apps/app/contexts/project-member.context.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createContext, useContext } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// swr
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-
-// keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-
-// types
-import { IProjectMember } from "types";
-
-type ContextType = {
-  loading: boolean;
-  memberDetails?: IProjectMember;
-  error: any;
-};
-
-export const ProjectMemberContext = createContext<ContextType>({} as ContextType);
-
-type Props = {
-  children: React.ReactNode;
-};
-
-export const ProjectMemberProvider: React.FC<Props> = (props) => {
-  const { children } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: memberDetails, error } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const loading = !memberDetails && !error;
-
-  return (
-    <ProjectMemberContext.Provider value={{ loading, memberDetails, error }}>
-      {children}
-    </ProjectMemberContext.Provider>
-  );
-};
-
-export const useProjectMyMembership = () => {
-  const context = useContext(ProjectMemberContext);
-
-  if (context === undefined)
-    throw new Error(`useProjectMember must be used within a ProjectMemberProvider.`);
-
-  return {
-    ...context,
-    memberRole: {
-      isOwner: context.memberDetails?.role === 20,
-      isMember: context.memberDetails?.role === 15,
-      isViewer: context.memberDetails?.role === 10,
-      isGuest: context.memberDetails?.role === 5,
-    },
-  };
-};
diff --git a/apps/app/contexts/theme.context.tsx b/apps/app/contexts/theme.context.tsx
deleted file mode 100644
index d338b9b6b87..00000000000
--- a/apps/app/contexts/theme.context.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { createContext, useCallback, useReducer, useEffect } from "react";
-import { useRouter } from "next/router";
-// swr
-import useSWR from "swr";
-// components
-import ToastAlert from "components/toast-alert";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import projectService from "services/project.service";
-// fetch-keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-// helper
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-// constants
-
-export const themeContext = createContext<ContextType>({} as ContextType);
-
-type ThemeProps = {
-  collapsed: boolean;
-};
-
-type ReducerActionType = {
-  type: "TOGGLE_SIDEBAR" | "REHYDRATE_THEME";
-  payload?: Partial<ThemeProps>;
-};
-
-type ContextType = {
-  collapsed: boolean;
-  toggleCollapsed: () => void;
-};
-
-type StateType = {
-  collapsed: boolean;
-};
-type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
-
-export const initialState: StateType = {
-  collapsed: false,
-};
-
-export const reducer: ReducerFunctionType = (state, action) => {
-  const { type, payload } = action;
-
-  switch (type) {
-    case "TOGGLE_SIDEBAR":
-      const newState = {
-        ...state,
-        collapsed: !state.collapsed,
-      };
-      localStorage.setItem("collapsed", JSON.stringify(newState.collapsed));
-      return newState;
-
-    case "REHYDRATE_THEME": {
-      let collapsed: any = localStorage.getItem("collapsed");
-      collapsed = collapsed ? JSON.parse(collapsed) : false;
-      return { ...initialState, ...payload, collapsed };
-    }
-
-    default: {
-      return state;
-    }
-  }
-};
-
-export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const { user } = useUserAuth(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: myViewProps } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const toggleCollapsed = useCallback(() => {
-    dispatch({
-      type: "TOGGLE_SIDEBAR",
-    });
-  }, []);
-
-  useEffect(() => {
-    dispatch({
-      type: "REHYDRATE_THEME",
-      payload: myViewProps?.view_props as any,
-    });
-  }, [myViewProps]);
-
-  useEffect(() => {
-    const theme = localStorage.getItem("theme");
-
-    if (theme) {
-      if (theme === "custom") {
-        if (user && user.theme.palette) {
-          applyTheme(
-            user.theme.palette !== ",,,,"
-              ? user.theme.palette
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-            user.theme.darkPalette
-          );
-        }
-      } else unsetCustomCssVariables();
-    }
-  }, [user]);
-
-  return (
-    <themeContext.Provider
-      value={{
-        collapsed: state.collapsed,
-        toggleCollapsed,
-      }}
-    >
-      <ToastAlert />
-      {children}
-    </themeContext.Provider>
-  );
-};
diff --git a/apps/app/contexts/user.context.tsx b/apps/app/contexts/user.context.tsx
deleted file mode 100644
index 3f076b326b1..00000000000
--- a/apps/app/contexts/user.context.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { createContext, ReactElement } from "react";
-
-import useSWR, { KeyedMutator } from "swr";
-
-// services
-import userService from "services/user.service";
-// constants
-import { CURRENT_USER } from "constants/fetch-keys";
-// types
-import type { ICurrentUserResponse, IUser } from "types";
-
-interface IUserContextProps {
-  user?: IUser;
-  isUserLoading: boolean;
-  mutateUser: KeyedMutator<ICurrentUserResponse>;
-  assignedIssuesLength?: number;
-  workspaceInvitesLength?: number;
-}
-
-export const UserContext = createContext<IUserContextProps>({} as IUserContextProps);
-
-export const UserProvider = ({ children }: { children: ReactElement }) => {
-  // API to fetch user information
-  const { data, error, mutate } = useSWR(CURRENT_USER, () => userService.currentUser(), {
-    shouldRetryOnError: false,
-  });
-
-  return (
-    <UserContext.Provider
-      value={{
-        user: error ? undefined : data?.user,
-        isUserLoading: Boolean(data?.user === undefined && error === undefined),
-        mutateUser: mutate,
-        assignedIssuesLength: data?.assigned_issues ?? 0,
-        workspaceInvitesLength: data?.workspace_invites ?? 0,
-      }}
-    >
-      {children}
-    </UserContext.Provider>
-  );
-};
diff --git a/apps/app/contexts/workspace.context.tsx b/apps/app/contexts/workspace.context.tsx
deleted file mode 100644
index 2ecbb2ef510..00000000000
--- a/apps/app/contexts/workspace.context.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { FC, ReactElement, createContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// types
-import { IWorkspace } from "types";
-// constants
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-export interface WorkspaceProviderProps {
-  children: ReactElement;
-}
-
-export interface WorkspaceContextProps {
-  workspaces: IWorkspace[];
-  activeWorkspace: IWorkspace | undefined;
-  mutateWorkspaces: () => void;
-}
-
-export const WorkspaceContext = createContext<WorkspaceContextProps>({} as WorkspaceContextProps);
-
-export const WorkspaceProvider: FC<WorkspaceProviderProps> = (props) => {
-  const { children } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // API to fetch user information
-  const {
-    data = [],
-    error,
-    mutate,
-  } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
-  // active workspace
-  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
-
-  return (
-    <WorkspaceContext.Provider
-      value={{
-        workspaces: error ? [] : data,
-        activeWorkspace,
-        mutateWorkspaces: mutate,
-      }}
-    >
-      {children}
-    </WorkspaceContext.Provider>
-  );
-};
diff --git a/apps/app/helpers/analytics.helper.ts b/apps/app/helpers/analytics.helper.ts
deleted file mode 100644
index efc78179425..00000000000
--- a/apps/app/helpers/analytics.helper.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-// nivo
-import { BarDatum } from "@nivo/bar";
-// helpers
-import { capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
-// types
-import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-import { MONTHS_LIST } from "constants/calendar";
-import { DATE_KEYS } from "constants/analytics";
-
-export const convertResponseToBarGraphData = (
-  response: IAnalyticsData | undefined,
-  params: IAnalyticsParams
-): { data: BarDatum[]; xAxisKeys: string[] } => {
-  if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
-    return { data: [], xAxisKeys: [] };
-
-  const data: BarDatum[] = [];
-
-  let xAxisKeys: string[] = [];
-  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
-
-  Object.keys(response).forEach((key) => {
-    const segments: { [key: string]: number } = {};
-
-    if (params.segment) {
-      response[key].map((item: any) => {
-        segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
-
-        // store the segment in the xAxisKeys array
-        if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
-      });
-
-      data.push({
-        name: DATE_KEYS.includes(params.x_axis)
-          ? renderMonthAndYear(key)
-          : params.x_axis === "priority" || params.x_axis === "state__group"
-          ? capitalizeFirstLetter(key)
-          : key,
-        ...segments,
-      });
-    } else {
-      xAxisKeys = [yAxisKey];
-
-      const item = response[key][0];
-
-      data.push({
-        name: DATE_KEYS.includes(params.x_axis)
-          ? renderMonthAndYear(item.dimension)
-          : params.x_axis === "priority" || params.x_axis === "state__group"
-          ? capitalizeFirstLetter(item.dimension ?? "None")
-          : item.dimension ?? "None",
-        [yAxisKey]: item[yAxisKey] ?? 0,
-      });
-    }
-  });
-
-  return { data, xAxisKeys };
-};
-
-export const generateBarColor = (
-  value: string,
-  analytics: IAnalyticsResponse,
-  params: IAnalyticsParams,
-  type: "x_axis" | "segment"
-): string => {
-  let color: string | undefined = generateRandomColor(value);
-
-  if (!analytics) return color;
-
-  if (params[type] === "state__name" || params[type] === "labels__name")
-    color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
-
-  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase()];
-
-  if (params[type] === "priority") {
-    const priority = value.toLowerCase();
-
-    color =
-      priority === "urgent"
-        ? "#ef4444"
-        : priority === "high"
-        ? "#f97316"
-        : priority === "medium"
-        ? "#eab308"
-        : priority === "low"
-        ? "#22c55e"
-        : "#ced4da";
-  }
-
-  return color ?? generateRandomColor(value);
-};
-
-export const renderMonthAndYear = (date: string | number | null): string => {
-  if (!date || date === "") return "";
-
-  return (
-    (MONTHS_LIST.find((m) => `${m.value}` === `${date}`.split("-")[1])?.label.substring(0, 3) ??
-      "None") + ` ${date}`.split("-")[0] ?? ""
-  );
-};
diff --git a/apps/app/helpers/common.helper.ts b/apps/app/helpers/common.helper.ts
deleted file mode 100644
index 4220a7174ce..00000000000
--- a/apps/app/helpers/common.helper.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const debounce = (func: any, wait: number, immediate: boolean = false) => {
-  let timeout: any;
-
-  return function executedFunction(...args: any) {
-    const later = () => {
-      timeout = null;
-      if (!immediate) func(...args);
-    };
-
-    const callNow = immediate && !timeout;
-
-    clearTimeout(timeout);
-
-    timeout = setTimeout(later, wait);
-
-    if (callNow) func(...args);
-  };
-};
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
deleted file mode 100644
index 5728a918c6a..00000000000
--- a/apps/app/helpers/date-time.helper.ts
+++ /dev/null
@@ -1,405 +0,0 @@
-export const renderDateFormat = (date: string | Date | null) => {
-  if (!date) return "N/A";
-
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [year, month, day].join("-");
-};
-
-export const renderShortNumericDateFormat = (date: string | Date) =>
-  new Date(date).toLocaleDateString("en-UK", {
-    day: "numeric",
-    month: "short",
-  });
-
-export const renderLongDetailDateFormat = (date: string | Date) =>
-  new Date(date).toLocaleDateString("zh-CN", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-
-export const findHowManyDaysLeft = (date: string | Date) => {
-  const today = new Date();
-  const eventDate = new Date(date);
-  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
-  return Math.ceil(timeDiff / (1000 * 3600 * 24));
-};
-
-export const getDatesInRange = (startDate: string | Date, endDate: string | Date) => {
-  startDate = new Date(startDate);
-  endDate = new Date(endDate);
-
-  const date = new Date(startDate.getTime());
-  const dates = [];
-
-  while (date <= endDate) {
-    dates.push(new Date(date));
-    date.setDate(date.getDate() + 1);
-  }
-
-  return dates;
-};
-
-export const timeAgo = (time: any) => {
-  switch (typeof time) {
-    case "number":
-      break;
-    case "string":
-      time = +new Date(time);
-      break;
-    case "object":
-      if (time.constructor === Date) time = time.getTime();
-      break;
-    default:
-      time = +new Date();
-  }
-
-  var time_formats = [
-    [60, "秒", 1], // 60
-    [120, "1分钟前", "1 分钟后"], // 60*2
-    [3600, "分钟", 60], // 60*60, 60
-    [7200, "1小时前", "1 小时后"], // 60*60*2
-    [86400, "小时", 3600], // 60*60*24, 60*60
-    [172800, "昨天", "明天"], // 60*60*24*2
-    [604800, "天", 86400], // 60*60*24*7, 60*60*24
-    [1209600, "上周", "下周"], // 60*60*24*7*4*2
-    [2419200, "周数", 604800], // 60*60*24*7*4, 60*60*24*7
-    [4838400, "上个月", "下个月"], // 60*60*24*7*4*2
-    [29030400, "月数", 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
-    [58060800, "去年", "下一年"], // 60*60*24*7*4*12*2
-    [2903040000, "年数", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
-    [5806080000, "上世纪", "下一世纪"], // 60*60*24*7*4*12*100*2
-    [58060800000, "世纪", 2903040000], // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
-  ];
-
-  var seconds = (+new Date() - time) / 1000,
-    token = "前",
-    list_choice = 1;
-
-  if (seconds == 0) {
-    return "现在";
-  }
-  if (seconds < 0) {
-    seconds = Math.abs(seconds);
-    token = "从现在起";
-    list_choice = 2;
-  }
-  var i = 0,
-    format: any[];
-  while ((format = time_formats[i++]))
-    if (seconds < format[0]) {
-      if (typeof format[2] == "string") return format[list_choice];
-      else return Math.floor(seconds / format[2]) + " " + format[1] + " " + token;
-    }
-  return time;
-};
-
-export const formatDateDistance = (date: string | Date) => {
-  const today = new Date();
-  const eventDate = new Date(date);
-  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
-  const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
-
-  if (days < 1) {
-    const hours = Math.ceil(timeDiff / (1000 * 3600));
-    if (hours < 1) {
-      const minutes = Math.ceil(timeDiff / (1000 * 60));
-      if (minutes < 1) {
-        return "Just now";
-      } else {
-        return `${minutes}m`;
-      }
-    } else {
-      return `${hours}h`;
-    }
-  } else if (days < 7) {
-    return `${days}d`;
-  } else if (days < 30) {
-    return `${Math.floor(days / 7)}w`;
-  } else if (days < 365) {
-    return `${Math.floor(days / 30)}m`;
-  } else {
-    return `${Math.floor(days / 365)}y`;
-  }
-};
-
-export const getDateRangeStatus = (
-  startDate: string | null | undefined,
-  endDate: string | null | undefined
-) => {
-  if (!startDate || !endDate) return "draft";
-
-  const today = renderDateFormat(new Date());
-  const now = new Date(today);
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-
-  if (start <= now && end >= now) {
-    return "current";
-  } else if (start > now) {
-    return "upcoming";
-  } else {
-    return "completed";
-  }
-};
-
-export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
-  if (!date || date === "") return null;
-
-  date = new Date(date);
-
-  const months = [
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    "10",
-    "11",
-    "12",
-  ];
-  const day = date.getDate();
-  const month = months[date.getMonth()];
-  const year = date.getFullYear();
-
-  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${year}-${month}-${day}`;
-};
-
-export const renderShortDate = (date: string | Date, placeholder?: string) => {
-  if (!date || date === "") return null;
-
-  date = new Date(date);
-
-  const months = [
-    "1",
-    "2",
-    "3",
-    "4",
-    "5",
-    "6",
-    "7",
-    "8",
-    "9",
-    "10",
-    "11",
-    "12",
-  ];
-  const day = date.getDate();
-  const month = months[date.getMonth()];
-
-  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month}/${day} `;
-};
-
-export const render12HourFormatTime = (date: string | Date): string => {
-  if (!date || date === "") return "";
-
-  date = new Date(date);
-
-  let hours = date.getHours();
-  const minutes = date.getMinutes();
-
-  let period = "AM";
-
-  if (hours >= 12) {
-    period = "PM";
-
-    if (hours > 12) hours -= 12;
-  }
-
-  return hours + ":" + (minutes < 10 ? `0${minutes}` : minutes) + " " + period;
-};
-
-export const render24HourFormatTime = (date: string | Date): string => {
-  if (!date || date === "") return "";
-
-  date = new Date(date);
-
-  const hours = date.getHours();
-  let minutes: any = date.getMinutes();
-
-  // add leading zero to single digit minutes
-  if (minutes < 10) minutes = "0" + minutes;
-
-  return hours + ":" + minutes;
-};
-
-export const isDateRangeValid = (startDate: string, endDate: string) =>
-  new Date(startDate) < new Date(endDate);
-
-export const isDateGreaterThanToday = (dateStr: string) => {
-  const date = new Date(dateStr);
-  const today = new Date();
-  return date > today;
-};
-
-export const renderLongDateFormat = (dateString: string | Date) => {
-  const date = new Date(dateString);
-  const day = date.getDate();
-  const year = date.getFullYear();
-  const monthNames = [
-    "1月",
-    "2月",
-    "3月",
-    "4月",
-    "5月",
-    "6月",
-    "7月",
-    "8月",
-    "9月",
-    "10月",
-    "11月",
-    "12月",
-  ];
-  const monthIndex = date.getMonth();
-  const monthName = monthNames[monthIndex];
-  const suffixes = ["st", "nd", "rd", "th"];
-  let suffix = "";
-  if (day === 1 || day === 21 || day === 31) {
-    suffix = suffixes[0];
-  } else if (day === 2 || day === 22) {
-    suffix = suffixes[1];
-  } else if (day === 3 || day === 23) {
-    suffix = suffixes[2];
-  } else {
-    suffix = suffixes[3];
-  }
-  return `${day}${suffix} ${monthName} ${year}`;
-};
-
-/**
- *
- * @returns {Array} Array of time objects with label and value as keys
- */
-
-export const getTimestampAfterCurrentTime = (): Array<{
-  label: string;
-  value: Date;
-}> => {
-  const current = new Date();
-  const time = [];
-  for (let i = 0; i < 24; i++) {
-    const newTime = new Date(current.getTime() + i * 60 * 60 * 1000);
-    time.push({
-      label: newTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-      value: newTime,
-    });
-  }
-  return time;
-};
-
-/**
- * @returns {Array} Array of date objects with label and value as keys
- * @description Returns an array of date objects starting from current date to 7 days after
- */
-
-export const getDatesAfterCurrentDate = (): Array<{
-  label: string;
-  value: Date;
-}> => {
-  const current = new Date();
-  const date = [];
-  for (let i = 0; i < 7; i++) {
-    const newDate = new Date(Math.round(current.getTime() / (30 * 60 * 1000)) * 30 * 60 * 1000);
-    date.push({
-      label: newDate.toLocaleDateString([], {
-        day: "numeric",
-        month: "long",
-        year: "numeric",
-      }),
-      value: newDate,
-    });
-  }
-  return date;
-};
-
-/**
- * @returns {boolean} true if date is valid
- * @description Returns true if date is valid
- * @param {string} date
- * @example checkIfStringIsDate("2021-01-01") // true
- * @example checkIfStringIsDate("2021-01-32") // false
- */
-
-export const checkIfStringIsDate = (date: string): boolean =>
-  new Date(date).toString() !== "Invalid Date";
-
-// return an array of dates starting from 12:00 to 23:30 with 30 minutes interval as dates
-export const getDatesWith30MinutesInterval = (): Array<Date> => {
-  const dates = [];
-  const current = new Date();
-  for (let i = 0; i < 24; i++) {
-    const newDate = new Date(current.getTime() + i * 60 * 60 * 1000);
-    dates.push(newDate);
-  }
-  return dates;
-};
-
-export const getAllTimeIn30MinutesInterval = (): Array<{
-  label: string;
-  value: string;
-}> => [
-  { label: "12:00", value: "12:00" },
-  { label: "12:30", value: "12:30" },
-  { label: "01:00", value: "01:00" },
-  { label: "01:30", value: "01:30" },
-  { label: "02:00", value: "02:00" },
-  { label: "02:30", value: "02:30" },
-  { label: "03:00", value: "03:00" },
-  { label: "03:30", value: "03:30" },
-  { label: "04:00", value: "04:00" },
-  { label: "04:30", value: "04:30" },
-  { label: "05:00", value: "05:00" },
-  { label: "05:30", value: "05:30" },
-  { label: "06:00", value: "06:00" },
-  { label: "06:30", value: "06:30" },
-  { label: "07:00", value: "07:00" },
-  { label: "07:30", value: "07:30" },
-  { label: "08:00", value: "08:00" },
-  { label: "08:30", value: "08:30" },
-  { label: "09:00", value: "09:00" },
-  { label: "09:30", value: "09:30" },
-  { label: "10:00", value: "10:00" },
-  { label: "10:30", value: "10:30" },
-  { label: "11:00", value: "11:00" },
-  { label: "11:30", value: "11:30" },
-];
-
-/**
- * @returns {number} total number of days in range
- * @description Returns total number of days in range
- * @param {string} startDate
- * @param {string} endDate
- * @param {boolean} inclusive
- * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
- */
-
-export const findTotalDaysInRange = (
-  startDate: Date | string,
-  endDate: Date | string,
-  inclusive: boolean
-): number => {
-  if (!startDate || !endDate) return 0;
-
-  startDate = new Date(startDate);
-  endDate = new Date(endDate);
-
-  // find number of days between startDate and endDate
-  const diffInTime = endDate.getTime() - startDate.getTime();
-  const diffInDays = diffInTime / (1000 * 3600 * 24);
-
-  // if inclusive is true, add 1 to diffInDays
-  if (inclusive) return diffInDays + 1;
-
-  return diffInDays;
-};
diff --git a/apps/app/helpers/emoji.helper.tsx b/apps/app/helpers/emoji.helper.tsx
deleted file mode 100644
index 06bf8ba15a9..00000000000
--- a/apps/app/helpers/emoji.helper.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-export const getRandomEmoji = () => {
-  const emojis = [
-    "8986",
-    "9200",
-    "128204",
-    "127773",
-    "127891",
-    "127947",
-    "128076",
-    "128077",
-    "128187",
-    "128188",
-    "128512",
-    "128522",
-    "128578",
-  ];
-
-  return emojis[Math.floor(Math.random() * emojis.length)];
-};
-
-export const renderEmoji = (
-  emoji:
-    | string
-    | {
-        name: string;
-        color: string;
-      }
-) => {
-  if (!emoji) return;
-
-  if (typeof emoji === "object")
-    return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
-        {emoji.name}
-      </span>
-    );
-  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
-};
-
-export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
-  reactions: any,
-  key: string
-) => {
-  const groupedReactions = reactions.reduce((acc: any, reaction: any) => {
-    if (!acc[reaction[key]]) {
-      acc[reaction[key]] = [];
-    }
-    acc[reaction[key]].push(reaction);
-    return acc;
-  }, {} as { [key: string]: any[] });
-
-  return groupedReactions;
-};
diff --git a/apps/app/helpers/string.helper.ts b/apps/app/helpers/string.helper.ts
deleted file mode 100644
index 0fc84fda15e..00000000000
--- a/apps/app/helpers/string.helper.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
-
-export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
-
-export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
-
-export const truncateText = (str: string, length: number) => {
-  if (!str || str === "") return "";
-
-  return str.length > length ? `${str.substring(0, length)}...` : str;
-};
-
-export const createSimilarString = (str: string) => {
-  const shuffled = str
-    .split("")
-    .sort(() => Math.random() - 0.5)
-    .join("");
-
-  return shuffled;
-};
-
-const fallbackCopyTextToClipboard = (text: string) => {
-  var 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
-    var successful = document.execCommand("copy");
-  } catch (err) {}
-
-  document.body.removeChild(textArea);
-};
-
-export const copyTextToClipboard = async (text: string) => {
-  if (!navigator.clipboard) {
-    fallbackCopyTextToClipboard(text);
-    return;
-  }
-  await navigator.clipboard.writeText(text);
-};
-
-export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-primary-100))";
-
-  string = `${string}`;
-
-  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
-  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; // Higher saturation for pastel colors
-  const lightness = 60; // Mid-range lightness for pastel colors
-
-  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
-  return randomColor;
-};
-
-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: This function will remove all the HTML tags from the string
- * @param {string} html
- * @return {string}
- * @example:
- * const html = "<p>Some text</p>";
- * const text = stripHTML(html);
- * console.log(text); // Some text
- */
-
-export const stripHTML = (html: string) => {
-  const tmp = document.createElement("DIV");
-  tmp.innerHTML = html;
-  return tmp.textContent || tmp.innerText || "";
-};
-
-/**
- * @description: This function return number count in string if number is more than 100 then it will return 99+
- * @param {number} number
- * @return {string}
- * @example:
- * const number = 100;
- * const text = getNumberCount(number);
- * console.log(text); // 99+
- */
-
-export const getNumberCount = (number: number): string => {
-  if (number > 99) {
-    return "99+";
-  }
-  return number.toString();
-};
-
-export const objToQueryParams = (obj: any) => {
-  const params = new URLSearchParams();
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (value !== undefined && value !== null) params.append(key, value as string);
-  }
-
-  return params.toString();
-};
diff --git a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx b/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
deleted file mode 100644
index 8d32d5e4b41..00000000000
--- a/apps/app/hooks/gantt-chart/cycle-issues-view.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartCycleIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  cycleId: string | undefined
-) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
-
-  const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId && cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartCycleIssues;
diff --git a/apps/app/hooks/gantt-chart/issue-view.tsx b/apps/app/hooks/gantt-chart/issue-view.tsx
deleted file mode 100644
index ba9465114b4..00000000000
--- a/apps/app/hooks/gantt-chart/issue-view.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
-
-  const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartIssues;
diff --git a/apps/app/hooks/gantt-chart/module-issues-view.tsx b/apps/app/hooks/gantt-chart/module-issues-view.tsx
deleted file mode 100644
index 3d88cab4f29..00000000000
--- a/apps/app/hooks/gantt-chart/module-issues-view.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import useSWR from "swr";
-
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartModuleIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  moduleId: string | undefined
-) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
-
-  const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId && moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartModuleIssues;
diff --git a/apps/app/hooks/gantt-chart/view-issues-view.tsx b/apps/app/hooks/gantt-chart/view-issues-view.tsx
deleted file mode 100644
index 8e0bc496b89..00000000000
--- a/apps/app/hooks/gantt-chart/view-issues-view.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { VIEW_ISSUES } from "constants/fetch-keys";
-
-const useGanttChartViewIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  viewId: string | undefined
-) => {
-  const { params } = useIssuesView();
-  const { order_by, group_by, ...viewGanttParams } = params;
-
-  // all issues under the view
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId && viewId
-      ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, order_by, start_target_date: true })
-      : null,
-    workspaceSlug && projectId && viewId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), {
-            ...viewGanttParams,
-            start_target_date: true,
-          })
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartViewIssues;
diff --git a/apps/app/hooks/my-issues/use-my-issues-filter.tsx b/apps/app/hooks/my-issues/use-my-issues-filter.tsx
deleted file mode 100644
index 2de72918f2d..00000000000
--- a/apps/app/hooks/my-issues/use-my-issues-filter.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { useEffect, useCallback } from "react";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// types
-import {
-  IIssueFilterOptions,
-  IWorkspaceMember,
-  IWorkspaceViewProps,
-  Properties,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
-} from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
-
-const initialValues: IWorkspaceViewProps = {
-  issueView: "list",
-  filters: {
-    assignees: null,
-    created_by: null,
-    labels: null,
-    priority: null,
-    state_group: null,
-    subscriber: null,
-    start_date: null,
-    target_date: null,
-    type: null,
-  },
-  groupByProperty: null,
-  orderBy: "-created_at",
-  properties: {
-    assignee: true,
-    start_date: true,
-    due_date: true,
-    key: true,
-    labels: true,
-    priority: true,
-    state: true,
-    sub_issue_count: true,
-    attachment_count: true,
-    link: true,
-    estimate: true,
-    created_on: true,
-    updated_on: true,
-  },
-  showEmptyGroups: true,
-};
-
-const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
-  const { data: myWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null,
-    {
-      shouldRetryOnError: false,
-    }
-  );
-
-  const saveData = useCallback(
-    (data: Partial<IWorkspaceViewProps>) => {
-      if (!workspaceSlug || !myWorkspace) return;
-
-      const oldData = { ...myWorkspace };
-
-      mutate<IWorkspaceMember>(
-        WORKSPACE_MEMBERS_ME(workspaceSlug.toString()),
-        (prevData) => {
-          if (!prevData) return;
-          return {
-            ...prevData,
-            view_props: {
-              ...prevData?.view_props,
-              ...data,
-            },
-          };
-        },
-        false
-      );
-
-      workspaceService.updateWorkspaceView(workspaceSlug, {
-        view_props: {
-          ...oldData.view_props,
-          ...data,
-        },
-      });
-    },
-    [myWorkspace, workspaceSlug]
-  );
-
-  const issueView = (myWorkspace?.view_props ?? initialValues).issueView;
-  const groupBy = (myWorkspace?.view_props ?? initialValues).groupByProperty;
-  const orderBy = (myWorkspace?.view_props ?? initialValues).orderBy;
-  const showEmptyGroups = (myWorkspace?.view_props ?? initialValues).showEmptyGroups;
-  const filters = (myWorkspace?.view_props ?? initialValues).filters;
-
-  const setIssueView = useCallback(
-    (newView: TIssueViewOptions) => {
-      const payload: Partial<IWorkspaceViewProps> = {
-        issueView: newView,
-      };
-
-      if (newView === "kanban" && groupBy === null) payload.groupByProperty = "state_detail.group";
-
-      saveData(payload);
-    },
-    [groupBy, saveData]
-  );
-
-  const setGroupBy = useCallback(
-    (newGroup: TIssueGroupByOptions) => {
-      saveData({
-        groupByProperty: newGroup,
-      });
-    },
-    [saveData]
-  );
-
-  const setOrderBy = useCallback(
-    (newOrderBy: TIssueOrderByOptions) => {
-      saveData({
-        orderBy: newOrderBy,
-      });
-    },
-    [saveData]
-  );
-
-  const setShowEmptyGroups = useCallback(() => {
-    if (!myWorkspace) return;
-
-    saveData({
-      showEmptyGroups: !myWorkspace?.view_props?.showEmptyGroups,
-    });
-  }, [myWorkspace, saveData]);
-
-  const setProperty = useCallback(
-    (key: keyof Properties) => {
-      if (!myWorkspace) return;
-
-      saveData({
-        properties: {
-          ...myWorkspace.view_props?.properties,
-          [key]: !myWorkspace.view_props?.properties[key],
-        },
-      });
-    },
-    [myWorkspace, saveData]
-  );
-
-  const setFilters = useCallback(
-    (updatedFilter: Partial<IIssueFilterOptions>) => {
-      if (!myWorkspace) return;
-
-      saveData({
-        filters: {
-          ...myWorkspace.view_props?.filters,
-          ...updatedFilter,
-        },
-      });
-    },
-    [myWorkspace, saveData]
-  );
-
-  useEffect(() => {
-    if (!myWorkspace || !workspaceSlug) return;
-
-    if (!myWorkspace.view_props) {
-      workspaceService.updateWorkspaceView(workspaceSlug, {
-        view_props: { ...initialValues },
-      });
-    }
-  }, [myWorkspace, workspaceSlug]);
-
-  const newProperties: Properties = {
-    assignee: myWorkspace?.view_props.properties.assignee ?? true,
-    start_date: myWorkspace?.view_props.properties.start_date ?? true,
-    due_date: myWorkspace?.view_props.properties.due_date ?? true,
-    key: myWorkspace?.view_props.properties.key ?? true,
-    labels: myWorkspace?.view_props.properties.labels ?? true,
-    priority: myWorkspace?.view_props.properties.priority ?? true,
-    state: myWorkspace?.view_props.properties.state ?? true,
-    sub_issue_count: myWorkspace?.view_props.properties.sub_issue_count ?? true,
-    attachment_count: myWorkspace?.view_props.properties.attachment_count ?? true,
-    link: myWorkspace?.view_props.properties.link ?? true,
-    estimate: myWorkspace?.view_props.properties.estimate ?? true,
-    created_on: myWorkspace?.view_props.properties.created_on ?? true,
-    updated_on: myWorkspace?.view_props.properties.updated_on ?? true,
-  };
-
-  return {
-    issueView,
-    setIssueView,
-    groupBy,
-    setGroupBy,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    properties: newProperties,
-    setProperty,
-    filters,
-    setFilters,
-  };
-};
-
-export default useMyIssuesFilters;
diff --git a/apps/app/hooks/my-issues/use-my-issues.tsx b/apps/app/hooks/my-issues/use-my-issues.tsx
deleted file mode 100644
index 2cb97ecd01b..00000000000
--- a/apps/app/hooks/my-issues/use-my-issues.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useMemo } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import { USER_ISSUES } from "constants/fetch-keys";
-
-const useMyIssues = (workspaceSlug: string | undefined) => {
-  const router = useRouter();
-
-  const { filters, groupBy, orderBy } = useMyIssuesFilters(workspaceSlug);
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: groupBy,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: orderBy,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
-  };
-
-  const { data: myIssues, mutate: mutateMyIssues } = useSWR(
-    workspaceSlug && router.pathname.includes("my-issues")
-      ? USER_ISSUES(workspaceSlug.toString(), params)
-      : null,
-    workspaceSlug && router.pathname.includes("my-issues")
-      ? () => userService.userIssues(workspaceSlug.toString(), params)
-      : null
-  );
-
-  const groupedIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    if (!myIssues) return undefined;
-
-    if (Array.isArray(myIssues))
-      return {
-        allIssues: myIssues,
-      };
-
-    if (groupBy === "state_detail.group") {
-      return myIssues
-        ? Object.assign(
-            {
-              backlog: [],
-              unstarted: [],
-              started: [],
-              completed: [],
-              cancelled: [],
-            },
-            myIssues
-          )
-        : undefined;
-    }
-
-    return myIssues;
-  }, [groupBy, myIssues]);
-
-  const isEmpty =
-    Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedIssues ?? {}).length === 0;
-
-  return {
-    groupedIssues,
-    isEmpty,
-    mutateMyIssues,
-    params,
-  };
-};
-
-export default useMyIssues;
diff --git a/apps/app/hooks/use-calendar-issues-view.tsx b/apps/app/hooks/use-calendar-issues-view.tsx
deleted file mode 100644
index d69864c2d77..00000000000
--- a/apps/app/hooks/use-calendar-issues-view.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { issueViewContext } from "contexts/issue-view.context";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useCalendarIssuesView = () => {
-  const {
-    issueView,
-    calendarDateRange,
-    setCalendarDateRange,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: calendarDateRange,
-  };
-
-  const { data: projectCalendarIssues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
-      : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: cycleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: moduleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: viewCalendarIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const calendarIssues = cycleId
-    ? (cycleCalendarIssues as IIssue[])
-    : moduleId
-    ? (moduleCalendarIssues as IIssue[])
-    : viewId
-    ? (viewCalendarIssues as IIssue[])
-    : (projectCalendarIssues as IIssue[]);
-
-  return {
-    issueView,
-    calendarIssues: calendarIssues ?? [],
-    calendarDateRange,
-    setCalendarDateRange,
-    filters,
-    setFilters,
-    params,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } as const;
-};
-
-export default useCalendarIssuesView;
diff --git a/apps/app/hooks/use-inbox-view.tsx b/apps/app/hooks/use-inbox-view.tsx
deleted file mode 100644
index a5dedc3803c..00000000000
--- a/apps/app/hooks/use-inbox-view.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { inboxViewContext } from "contexts/inbox-view-context";
-// services
-import inboxServices from "services/inbox.service";
-// types
-import { IInboxQueryParams } from "types";
-// fetch-keys
-import { INBOX_ISSUES } from "constants/fetch-keys";
-
-const useInboxView = () => {
-  const { filters, setFilters, clearAllFilters } = useContext(inboxViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxId } = router.query;
-
-  const params: IInboxQueryParams = {
-    priority: filters?.priority ? filters?.priority.join(",") : null,
-    inbox_status: filters?.inbox_status ? filters?.inbox_status.join(",") : null,
-  };
-
-  const { data: inboxIssues, mutate: mutateInboxIssues } = useSWR(
-    workspaceSlug && projectId && inboxId && params
-      ? INBOX_ISSUES(inboxId.toString(), params)
-      : null,
-    workspaceSlug && projectId && inboxId && params
-      ? () =>
-          inboxServices.getInboxIssues(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString(),
-            params
-          )
-      : null
-  );
-
-  let filtersLength = 0;
-  Object.keys(filters ?? {}).forEach((key) => {
-    const filterKey = key as keyof typeof filters;
-
-    if (filters[filterKey] && Array.isArray(filters[filterKey]))
-      filtersLength += (filters[filterKey] ?? []).length;
-  });
-
-  return {
-    filters,
-    setFilters,
-    clearAllFilters,
-    filtersLength,
-    params,
-    issues: inboxIssues,
-    mutate: mutateInboxIssues,
-  } as const;
-};
-
-export default useInboxView;
diff --git a/apps/app/hooks/use-issue-properties.tsx b/apps/app/hooks/use-issue-properties.tsx
deleted file mode 100644
index d5d1072cedf..00000000000
--- a/apps/app/hooks/use-issue-properties.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-import useSWR from "swr";
-
-// services
-import issueServices from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-// types
-import { IssuePriorities, Properties } from "types";
-
-const initialValues: Properties = {
-  assignee: true,
-  start_date: true,
-  due_date: true,
-  key: true,
-  labels: true,
-  priority: true,
-  state: true,
-  sub_issue_count: true,
-  attachment_count: true,
-  link: true,
-  estimate: true,
-  created_on: true,
-  updated_on: true,
-};
-
-const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
-  const [properties, setProperties] = useState<Properties>(initialValues);
-
-  const { user } = useUser();
-
-  const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
-    workspaceSlug && projectId
-      ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`
-      : null,
-    workspaceSlug && projectId
-      ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
-      : null
-  );
-
-  useEffect(() => {
-    if (!issueProperties || !workspaceSlug || !projectId || !user) return;
-
-    setProperties({ ...initialValues, ...issueProperties.properties });
-
-    if (Object.keys(issueProperties).length === 0)
-      issueServices.createIssueProperties(workspaceSlug, projectId, {
-        properties: { ...initialValues },
-        user: user.id,
-      });
-    else if (Object.keys(issueProperties?.properties).length === 0)
-      issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
-        properties: { ...initialValues },
-        user: user.id,
-      });
-  }, [issueProperties, workspaceSlug, projectId, user]);
-
-  const updateIssueProperties = useCallback(
-    (key: keyof Properties) => {
-      if (!workspaceSlug || !user) return;
-
-      setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
-
-      if (issueProperties && projectId) {
-        mutateIssueProperties(
-          (prev: any) =>
-            ({
-              ...prev,
-              properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
-            } as IssuePriorities),
-          false
-        );
-        if (Object.keys(issueProperties).length > 0) {
-          issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
-            properties: {
-              ...issueProperties.properties,
-              [key]: !issueProperties.properties[key],
-            },
-            user: user.id,
-          });
-        } else {
-          issueServices.createIssueProperties(workspaceSlug, projectId, {
-            properties: { ...initialValues },
-            user: user.id,
-          });
-        }
-      }
-    },
-    [workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
-  );
-
-  const newProperties: Properties = {
-    assignee: properties.assignee,
-    start_date: properties.start_date,
-    due_date: properties.due_date,
-    key: properties.key,
-    labels: properties.labels,
-    priority: properties.priority,
-    state: properties.state,
-    sub_issue_count: properties.sub_issue_count,
-    attachment_count: properties.attachment_count,
-    link: properties.link,
-    estimate: properties.estimate,
-    created_on: properties.created_on,
-    updated_on: properties.updated_on,
-  };
-
-  return [newProperties, updateIssueProperties] as const;
-};
-
-export default useIssuesProperties;
diff --git a/apps/app/hooks/use-issues-view.tsx b/apps/app/hooks/use-issues-view.tsx
deleted file mode 100644
index 767dbdb4ce7..00000000000
--- a/apps/app/hooks/use-issues-view.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { useContext, useMemo } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { issueViewContext } from "contexts/issue-view.context";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-import stateService from "services/state.service";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
-import type { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  STATES_LIST,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useIssuesView = () => {
-  const {
-    issueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    showSubIssues,
-    setShowEmptyGroups,
-    setShowSubIssues,
-    calendarDateRange,
-    setCalendarDateRange,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, archivedIssueId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-
-  const params: any = {
-    order_by: orderBy,
-    group_by: groupByProperty,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    sub_issue: showSubIssues,
-  };
-
-  const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
-    workspaceSlug && projectId && params
-      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
-      : null,
-    workspaceSlug && projectId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, params)
-      : null
-  );
-
-  const { data: projectArchivedIssues, mutate: mutateProjectArchivedIssues } = useSWR(
-    workspaceSlug && projectId && params && isArchivedIssues && !archivedIssueId
-      ? PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
-      : null,
-    workspaceSlug && projectId && params && isArchivedIssues && !archivedIssueId
-      ? () => issuesService.getArchivedIssues(workspaceSlug as string, projectId as string, params)
-      : null
-  );
-
-  const { data: cycleIssues, mutate: mutateCycleIssues } = useSWR(
-    workspaceSlug && projectId && cycleId && params
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
-      : null,
-    workspaceSlug && projectId && cycleId && params
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string,
-            params
-          )
-      : null
-  );
-
-  const { data: moduleIssues, mutate: mutateModuleIssues } = useSWR(
-    workspaceSlug && projectId && moduleId && params
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
-      : null,
-    workspaceSlug && projectId && moduleId && params
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            moduleId as string,
-            params
-          )
-      : null
-  );
-
-  const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const statesList = getStatesList(states);
-  const activeStatesList = statesList?.filter(
-    (state) => state.group === "started" || state.group === "unstarted"
-  );
-  const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
-
-  const stateIds =
-    filters && filters?.type === "active"
-      ? activeStatesList?.map((state) => state.id)
-      : filters?.type === "backlog"
-      ? backlogStatesList?.map((state) => state.id)
-      : statesList?.map((state) => state.id);
-
-  const filteredStateIds =
-    (filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ??
-    [];
-
-  const emptyStatesObject: { [key: string]: [] } = {};
-  for (let i = 0; i < filteredStateIds.length; i++) {
-    emptyStatesObject[filteredStateIds[i]] = [];
-  }
-
-  const groupedByIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    const issuesToGroup = cycleId
-      ? cycleIssues
-      : moduleId
-      ? moduleIssues
-      : viewId
-      ? viewIssues
-      : isArchivedIssues
-      ? projectArchivedIssues
-      : projectIssues;
-
-    if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
-    if (groupByProperty === "state")
-      return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
-
-    return issuesToGroup;
-  }, [
-    projectIssues,
-    cycleIssues,
-    moduleIssues,
-    viewIssues,
-    projectArchivedIssues,
-    groupByProperty,
-    cycleId,
-    moduleId,
-    viewId,
-    isArchivedIssues,
-    emptyStatesObject,
-  ]);
-
-  const isEmpty =
-    Object.values(groupedByIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedByIssues ?? {}).length === 0;
-
-  return {
-    groupedByIssues,
-    mutateIssues: cycleId
-      ? mutateCycleIssues
-      : moduleId
-      ? mutateModuleIssues
-      : viewId
-      ? mutateViewIssues
-      : isArchivedIssues
-      ? mutateProjectArchivedIssues
-      : mutateProjectIssues,
-    issueView: isArchivedIssues ? "list" : issueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups: isArchivedIssues ? false : showEmptyGroups,
-    showSubIssues,
-    setShowEmptyGroups,
-    setShowSubIssues,
-    calendarDateRange,
-    setCalendarDateRange,
-    filters,
-    setFilters,
-    params,
-    isEmpty,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } as const;
-};
-
-export default useIssuesView;
diff --git a/apps/app/hooks/use-profile-issues.tsx b/apps/app/hooks/use-profile-issues.tsx
deleted file mode 100644
index 6b4d4abfaed..00000000000
--- a/apps/app/hooks/use-profile-issues.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useContext, useEffect, useMemo } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// contexts
-import { profileIssuesContext } from "contexts/profile-issues-context";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import { USER_PROFILE_ISSUES } from "constants/fetch-keys";
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
-
-const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
-  const {
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    showSubIssues,
-    setShowSubIssues,
-    filters,
-    setFilters,
-    properties,
-    setProperties,
-  } = useContext(profileIssuesContext);
-
-  const router = useRouter();
-
-  const { memberRole } = useWorkspaceMyMembership();
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: groupByProperty,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: orderBy,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-  };
-
-  const { data: userProfileIssues, mutate: mutateProfileIssues } = useSWR(
-    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
-      ? USER_PROFILE_ISSUES(workspaceSlug.toString(), userId.toString(), params)
-      : null,
-    workspaceSlug && userId && (memberRole.isOwner || memberRole.isMember || memberRole.isViewer)
-      ? () => userService.getUserProfileIssues(workspaceSlug.toString(), userId.toString(), params)
-      : null
-  );
-
-  const groupedIssues:
-    | {
-        [key: string]: IIssue[];
-      }
-    | undefined = useMemo(() => {
-    if (!userProfileIssues) return undefined;
-
-    if (Array.isArray(userProfileIssues))
-      return {
-        allIssues: userProfileIssues,
-      };
-
-    return userProfileIssues;
-  }, [userProfileIssues]);
-
-  useEffect(() => {
-    if (!userId || !filters) return;
-
-    if (
-      router.pathname.includes("assigned") &&
-      (!filters.assignees || !filters.assignees.includes(userId))
-    ) {
-      setFilters({ assignees: [...(filters.assignees ?? []), userId] });
-      return;
-    }
-
-    if (
-      router.pathname.includes("created") &&
-      (!filters.created_by || !filters.created_by.includes(userId))
-    ) {
-      setFilters({ created_by: [...(filters.created_by ?? []), userId] });
-      return;
-    }
-
-    if (router.pathname.includes("subscribed") && filters.subscriber === null) {
-      setFilters({ subscriber: [userId] });
-      return;
-    }
-  }, [filters, router, setFilters, userId]);
-
-  const isEmpty =
-    Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||
-    Object.keys(groupedIssues ?? {}).length === 0;
-
-  return {
-    groupedIssues,
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    showSubIssues,
-    setShowSubIssues,
-    filters,
-    setFilters,
-    properties,
-    setProperties,
-    isEmpty,
-    mutateProfileIssues,
-    params,
-  };
-};
-
-export default useProfileIssues;
diff --git a/apps/app/hooks/use-project-details.tsx b/apps/app/hooks/use-project-details.tsx
deleted file mode 100644
index 477c82587a0..00000000000
--- a/apps/app/hooks/use-project-details.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
-
-const useProjectDetails = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const {
-    data: projectDetails,
-    error: projectDetailsError,
-    mutate: mutateProjectDetails,
-  } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  return {
-    projectDetails,
-    projectDetailsError,
-    mutateProjectDetails,
-  };
-};
-
-export default useProjectDetails;
diff --git a/apps/app/hooks/use-project-members.tsx b/apps/app/hooks/use-project-members.tsx
deleted file mode 100644
index b810dcef9d7..00000000000
--- a/apps/app/hooks/use-project-members.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import useSWR from "swr";
-// services
-import projectService from "services/project.service";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// hooks
-import useUser from "./use-user";
-
-const useProjectMembers = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  fetchCondition?: boolean
-) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const { user } = useUser();
-  // fetching project members
-  const { data: members } = useSWR(
-    workspaceSlug && projectId && fetchCondition ? PROJECT_MEMBERS(projectId) : null,
-    workspaceSlug && projectId && fetchCondition
-      ? () => projectService.projectMembers(workspaceSlug, projectId)
-      : null
-  );
-
-  const hasJoined = members?.some((item: any) => item.member.id === (user as any)?.id);
-
-  const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
-  const isMember = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 15
-  );
-  const isViewer = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 10
-  );
-  const isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
-
-  return {
-    members,
-    hasJoined,
-    isOwner,
-    isMember,
-    isViewer,
-    isGuest,
-  };
-};
-
-export default useProjectMembers;
diff --git a/apps/app/hooks/use-projects.tsx b/apps/app/hooks/use-projects.tsx
deleted file mode 100644
index 3363ff27857..00000000000
--- a/apps/app/hooks/use-projects.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-
-const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: projects, mutate: mutateProjects } = useSWR(
-    workspaceSlug && fetchCondition
-      ? PROJECTS_LIST(workspaceSlug as string, { is_favorite: type ?? "all" })
-      : null,
-    workspaceSlug && fetchCondition
-      ? () => projectService.getProjects(workspaceSlug as string, { is_favorite: type ?? "all" })
-      : null
-  );
-
-  const recentProjects = [...(projects ?? [])]
-    ?.sort((a, b) => Date.parse(`${a.updated_at}`) - Date.parse(`${b.updated_at}`))
-    ?.slice(0, 3);
-
-  return {
-    projects: projects
-      ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[])
-      : undefined,
-    recentProjects: recentProjects || [],
-    mutateProjects,
-  };
-};
-
-export default useProjects;
diff --git a/apps/app/hooks/use-spreadsheet-issues-view.tsx b/apps/app/hooks/use-spreadsheet-issues-view.tsx
deleted file mode 100644
index 145313dac4b..00000000000
--- a/apps/app/hooks/use-spreadsheet-issues-view.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useContext } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { issueViewContext } from "contexts/issue-view.context";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useSpreadsheetIssuesView = () => {
-  const {
-    issueView,
-    orderBy,
-    setOrderBy,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const params: any = {
-    order_by: orderBy,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    sub_issue: "false",
-  };
-
-  const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
-      : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const spreadsheetIssues = cycleId
-    ? (cycleSpreadsheetIssues as IIssue[])
-    : moduleId
-    ? (moduleSpreadsheetIssues as IIssue[])
-    : viewId
-    ? (viewSpreadsheetIssues as IIssue[])
-    : (projectSpreadsheetIssues as IIssue[]);
-
-  return {
-    issueView,
-    mutateIssues: cycleId
-      ? mutateCycleSpreadsheetIssues
-      : moduleId
-      ? mutateModuleSpreadsheetIssues
-      : viewId
-      ? mutateViewSpreadsheetIssues
-      : mutateProjectSpreadsheetIssues,
-    spreadsheetIssues: spreadsheetIssues ?? [],
-    orderBy,
-    setOrderBy,
-    filters,
-    setFilters,
-    params,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-    setIssueView,
-  } as const;
-};
-
-export default useSpreadsheetIssuesView;
diff --git a/apps/app/hooks/use-sub-issue.tsx b/apps/app/hooks/use-sub-issue.tsx
deleted file mode 100644
index 8eb30fd0b4a..00000000000
--- a/apps/app/hooks/use-sub-issue.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// types
-import { ISubIssueResponse } from "types";
-// fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
-
-const useSubIssue = (issueId: string, isExpanded: boolean) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const shouldFetch = workspaceSlug && projectId && issueId && isExpanded;
-
-  const { data: subIssuesResponse, isLoading } = useSWR<ISubIssueResponse>(
-    shouldFetch ? SUB_ISSUES(issueId as string) : null,
-    shouldFetch
-      ? () =>
-          issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
-  return {
-    subIssues: subIssuesResponse?.sub_issues ?? [],
-    isLoading,
-  };
-};
-
-export default useSubIssue;
diff --git a/apps/app/hooks/use-theme.tsx b/apps/app/hooks/use-theme.tsx
deleted file mode 100644
index 81e9249daf7..00000000000
--- a/apps/app/hooks/use-theme.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { themeContext } from "contexts/theme.context";
-
-const useTheme = () => {
-  const themeContextData = useContext(themeContext);
-  return themeContextData;
-};
-
-export default useTheme;
diff --git a/apps/app/hooks/use-workspace-details.tsx b/apps/app/hooks/use-workspace-details.tsx
deleted file mode 100644
index 4a2f9762646..00000000000
--- a/apps/app/hooks/use-workspace-details.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-
-const useWorkspaceDetails = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // Fetching Workspace Details
-  const {
-    data: workspaceDetails,
-    error: workspaceDetailsError,
-    mutate: mutateWorkspaceDetails,
-  } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.getWorkspace(workspaceSlug as string) : null
-  );
-
-  useEffect(() => {
-    if (workspaceDetailsError?.status === 404) {
-      router.push("/404");
-    } else if (workspaceDetailsError) {
-      router.push("/error");
-    }
-  }, [workspaceDetailsError, router]);
-
-  return {
-    workspaceDetails,
-    workspaceDetailsError,
-    mutateWorkspaceDetails,
-  };
-};
-
-export default useWorkspaceDetails;
diff --git a/apps/app/hooks/use-workspace-members.tsx b/apps/app/hooks/use-workspace-members.tsx
deleted file mode 100644
index d4104d3bdf6..00000000000
--- a/apps/app/hooks/use-workspace-members.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import useSWR from "swr";
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// hooks
-import useUser from "./use-user";
-
-const useWorkspaceMembers = (workspaceSlug: string | undefined, fetchCondition?: boolean) => {
-  fetchCondition = fetchCondition ?? true;
-
-  const { user } = useUser();
-
-  const { data: workspaceMembers, error: workspaceMemberErrors } = useSWR(
-    workspaceSlug && fetchCondition ? WORKSPACE_MEMBERS(workspaceSlug) : null,
-    workspaceSlug && fetchCondition ? () => workspaceService.workspaceMembers(workspaceSlug) : null
-  );
-
-  const hasJoined = workspaceMembers?.some((item: any) => item.member.id === (user as any)?.id);
-
-  const isOwner = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 20
-  );
-  const isMember = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 15
-  );
-  const isViewer = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 10
-  );
-  const isGuest = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 5
-  );
-
-  return {
-    workspaceMembers,
-    workspaceMemberErrors,
-    hasJoined,
-    isOwner,
-    isMember,
-    isViewer,
-    isGuest,
-  };
-};
-
-export default useWorkspaceMembers;
diff --git a/apps/app/hooks/use-workspaces.tsx b/apps/app/hooks/use-workspaces.tsx
deleted file mode 100644
index d924d0f692f..00000000000
--- a/apps/app/hooks/use-workspaces.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// fetch-keys
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-const useWorkspaces = () => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // API to fetch user information
-  const { data, error, mutate } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces());
-  // active workspace
-  const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
-
-  return {
-    workspaces: data,
-    error,
-    activeWorkspace,
-    mutateWorkspaces: mutate,
-  };
-};
-
-export default useWorkspaces;
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
deleted file mode 100644
index f2fbdc78c3b..00000000000
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// next imports
-import { useRouter } from "next/router";
-import Link from "next/link";
-// icons
-import { Bars3Icon } from "@heroicons/react/24/outline";
-// ui components
-import { Tooltip } from "components/ui";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-type Props = {
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-  noHeader: boolean;
-};
-
-const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-const plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL ? NEXT_PUBLIC_DEPLOY_URL : "http://localhost:3001";
-
-const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => {
-  const { projectDetails } = useProjectDetails();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  return (
-    <div
-      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 px-5 py-4 ${
-        noHeader ? "md:hidden" : ""
-      }`}
-    >
-      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
-        <div className="block md:hidden">
-          <button
-            type="button"
-            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-            onClick={() => setToggleSidebar((prevData) => !prevData)}
-          >
-            <Bars3Icon className="h-5 w-5" />
-          </button>
-        </div>
-        <div>{breadcrumbs}</div>
-
-        {projectDetails && projectDetails?.is_deployed && (
-          <Link href={`${plane_deploy_url}/${workspaceSlug}/${projectId}`}>
-            <a target="_blank" rel="noreferrer">
-              <Tooltip
-                tooltipContent="This project is public, and live on web."
-                position="bottom-left"
-              >
-                <div className="transition-all flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 p-1 rounded overflow-hidden relative flex items-center gap-1 cursor-pointer group">
-                  <div className="w-[14px] h-[14px] flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">
-                      radio_button_checked
-                    </span>
-                  </div>
-                  <div className="text-xs font-medium">Public</div>
-                  <div className="w-[14px] h-[14px] hidden group-hover:flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">open_in_new</span>
-                  </div>
-                </div>
-              </Tooltip>
-            </a>
-          </Link>
-        )}
-
-        <div className="flex-shrink-0">{left}</div>
-      </div>
-      <div className="flex-shrink-0">{right}</div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx
deleted file mode 100644
index 9290c00c62b..00000000000
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// hooks
-import useTheme from "hooks/use-theme";
-// components
-import {
-  WorkspaceHelpSection,
-  WorkspaceSidebarDropdown,
-  WorkspaceSidebarMenu,
-  WorkspaceSidebarQuickAction,
-} from "components/workspace";
-import { ProjectSidebarList } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project/modal";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-
-export interface SidebarProps {
-  toggleSidebar: boolean;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const store: any = useMobxStore();
-  // theme
-  const { collapsed: sidebarCollapse } = useTheme();
-
-  return (
-    <div
-      id="app-sidebar"
-      className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
-        store?.theme?.sidebarCollapsed ? "" : "md:w-[280px]"
-      } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
-    >
-      <div className="flex h-full w-full flex-1 flex-col">
-        <WorkspaceSidebarDropdown />
-        <WorkspaceSidebarQuickAction />
-        <WorkspaceSidebarMenu />
-        <ProjectSidebarList />
-        <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
-      </div>
-      <PublishProjectModal />
-    </div>
-  );
-});
-
-export default Sidebar;
diff --git a/apps/app/layouts/auth-layout/index.ts b/apps/app/layouts/auth-layout/index.ts
deleted file mode 100644
index 6790a6b1692..00000000000
--- a/apps/app/layouts/auth-layout/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./project-authorization-wrapper";
-export * from "./workspace-authorization-wrapper";
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
deleted file mode 100644
index 5f31dcd6716..00000000000
--- a/apps/app/layouts/default-layout/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-type Props = {
-  children: React.ReactNode;
-  gradient?: boolean;
-};
-
-const DefaultLayout: React.FC<Props> = ({ children, gradient = false }) => (
-  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
-    {children}
-  </div>
-);
-
-export default DefaultLayout;
diff --git a/apps/app/lib/mobx/store-init.tsx b/apps/app/lib/mobx/store-init.tsx
deleted file mode 100644
index 5ec2165b132..00000000000
--- a/apps/app/lib/mobx/store-init.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect } from "react";
-// next themes
-import { useTheme } from "next-themes";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-// theme helpers
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-
-const MobxStoreInit = () => {
-  const store: any = useMobxStore();
-  const { setTheme } = useTheme();
-
-  useEffect(() => {
-    // sidebar collapsed toggle
-    if (
-      localStorage &&
-      localStorage.getItem("app_sidebar_collapsed") &&
-      store?.theme?.sidebarCollapsed === null
-    )
-      store.theme.setSidebarCollapsed(
-        localStorage.getItem("app_sidebar_collapsed")
-          ? localStorage.getItem("app_sidebar_collapsed") === "true"
-            ? true
-            : false
-          : false
-      );
-
-    // theme
-    if (store.theme.theme === null && store?.user?.currentUserSettings) {
-      let currentTheme = localStorage.getItem("theme");
-      currentTheme = currentTheme ? currentTheme : "system";
-
-      // validating the theme and applying for initial state
-      if (currentTheme) {
-        setTheme(currentTheme);
-        store.theme.setTheme({ theme: { theme: currentTheme } });
-      }
-    }
-  }, [store?.theme, store?.user, setTheme]);
-
-  useEffect(() => {
-    // current user
-    if (store?.user?.currentUser === null) store.user.setCurrentUser();
-
-    // current user settings
-    if (store?.user?.currentUserSettings === null) store.user.setCurrentUserSettings();
-  }, [store?.user]);
-
-  return <></>;
-};
-
-export default MobxStoreInit;
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
deleted file mode 100644
index 646504a5406..00000000000
--- a/apps/app/next.config.js
+++ /dev/null
@@ -1,34 +0,0 @@
-require("dotenv").config({ path: ".env" });
-
-const { withSentryConfig } = require("@sentry/nextjs");
-const path = require("path");
-const extraImageDomains = (process.env.NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS ?? "")
-  .split(",")
-  .filter((domain) => domain.length > 0);
-
-const nextConfig = {
-  reactStrictMode: false,
-  swcMinify: true,
-  images: {
-    domains: [
-      "vinci-web.s3.amazonaws.com",
-      "planefs-staging.s3.ap-south-1.amazonaws.com",
-      "planefs.s3.amazonaws.com",
-      "images.unsplash.com",
-      "avatars.githubusercontent.com",
-      "localhost",
-      ...extraImageDomains,
-    ],
-  },
-  output: "standalone",
-  experimental: {
-    // this includes files from the monorepo base two directories up
-    outputFileTracingRoot: path.join(__dirname, "../../"),
-  },
-};
-
-if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
-  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
-} else {
-  module.exports = nextConfig;
-}
diff --git a/apps/app/pages/404.tsx b/apps/app/pages/404.tsx
deleted file mode 100644
index a56166b56a8..00000000000
--- a/apps/app/pages/404.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// ui
-import { SecondaryButton } from "components/ui";
-// images
-import Image404 from "public/404.svg";
-// types
-import type { NextPage } from "next";
-
-const PageNotFound: NextPage = () => (
-  <DefaultLayout>
-    <div className="grid h-full place-items-center p-4">
-      <div className="space-y-8 text-center">
-        <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-          <Image src={Image404} layout="fill" alt="404- Page not found" />
-        </div>
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold">哎呀！出错了</h3>
-          <p className="text-sm text-custom-text-200">
-            抱歉，找不到您要查找的页面。该页面可能已被删除、更改名称或暂时不可用。
-          </p>
-        </div>
-        <Link href="/">
-          <a className="block">
-            <SecondaryButton size="md">返回首页</SecondaryButton>
-          </a>
-        </Link>
-      </div>
-    </div>
-  </DefaultLayout>
-);
-
-export default PageNotFound;
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
deleted file mode 100644
index 4a0e5d13b74..00000000000
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import useSWR from "swr";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// services
-import userService from "services/user.service";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import SettingsNavbar from "layouts/settings-navbar";
-// components
-import { ActivityIcon, ActivityMessage } from "components/core";
-import { TipTapEditor } from "components/tiptap";
-// icons
-import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
-// ui
-import { Icon, Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// fetch-keys
-import { USER_ACTIVITY } from "constants/fetch-keys";
-// helper
-import { timeAgo } from "helpers/date-time.helper";
-
-const ProfileActivity = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: userActivity } = useSWR(
-    workspaceSlug ? USER_ACTIVITY : null,
-    workspaceSlug ? () => userService.getUserWorkspaceActivity(workspaceSlug.toString()) : null
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Profile Activity" />
-        </Breadcrumbs>
-      }
-    >
-      <div className="p-8">
-        <div className="mb-8 space-y-6">
-          <div>
-            <h3 className="text-3xl font-semibold">个人资料设置</h3>
-            <p className="mt-1 text-custom-text-200">
-              这些信息只有您自己能看到
-            </p>
-          </div>
-          <SettingsNavbar profilePage />
-        </div>
-        {userActivity ? (
-          <div>
-            <ul role="list" className="-mb-4">
-              {userActivity.results.map((activityItem: any, activityIdx: number) => {
-                if (activityItem.field === "comment") {
-                  return (
-                    <div key={activityItem.id} className="mt-2">
-                      <div className="relative flex items-start space-x-3">
-                        <div className="relative px-1">
-                          {activityItem.field ? (
-                            activityItem.new_value === "restore" && (
-                              <Icon iconName="history" className="text-sm text-custom-text-200" />
-                            )
-                          ) : activityItem.actor_detail.avatar &&
-                            activityItem.actor_detail.avatar !== "" ? (
-                            <img
-                              src={activityItem.actor_detail.avatar}
-                              alt={activityItem.actor_detail.display_name}
-                              height={30}
-                              width={30}
-                              className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
-                            />
-                          ) : (
-                            <div
-                              className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-                            >
-                              {activityItem.actor_detail.display_name?.charAt(0)}
-                            </div>
-                          )}
-
-                          <span className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                            <ChatBubbleLeftEllipsisIcon
-                              className="h-3.5 w-3.5 text-custom-text-200"
-                              aria-hidden="true"
-                            />
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <div>
-                            <div className="text-xs">
-                              {activityItem.actor_detail.is_bot
-                                ? activityItem.actor_detail.first_name + " Bot"
-                                : activityItem.actor_detail.display_name}
-                            </div>
-                            <p className="mt-0.5 text-xs text-custom-text-200">
-                              评论 {timeAgo(activityItem.created_at)}
-                            </p>
-                          </div>
-                          <div className="issue-comments-section p-0">
-                            <TipTapEditor
-                              workspaceSlug={workspaceSlug as string}
-                              value={
-                                activityItem?.new_value !== ""
-                                  ? activityItem.new_value
-                                  : activityItem.old_value
-                              }
-                              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-                              noBorder
-                              borderOnFocus={false}
-                              editable={false}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                }
-
-                const message =
-                  activityItem.verb === "created" &&
-                  activityItem.field !== "cycles" &&
-                  activityItem.field !== "modules" &&
-                  activityItem.field !== "attachment" &&
-                  activityItem.field !== "link" &&
-                  activityItem.field !== "estimate" ? (
-                    <span className="text-custom-text-200">
-                      created{" "}
-                      <Link
-                        href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
-                      >
-                        <a className="inline-flex items-center hover:underline">
-                          this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
-                        </a>
-                      </Link>
-                    </span>
-                  ) : activityItem.field ? (
-                    <ActivityMessage activity={activityItem} showIssue />
-                  ) : (
-                    "创建任务"
-                  );
-
-                if ("field" in activityItem && activityItem.field !== "updated_by") {
-                  return (
-                    <li key={activityItem.id}>
-                      <div className="relative pb-1">
-                        {userActivity.results.length > 1 &&
-                        activityIdx !== userActivity.results.length - 1 ? (
-                          <span
-                            className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
-                            aria-hidden="true"
-                          />
-                        ) : null}
-                        <div className="relative flex items-start space-x-2">
-                          <>
-                            <div>
-                              <div className="relative px-1.5">
-                                <div className="mt-1.5">
-                                  <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                                    {activityItem.field ? (
-                                      activityItem.new_value === "restore" ? (
-                                        <Icon
-                                          iconName="history"
-                                          className="text-sm text-custom-text-200"
-                                        />
-                                      ) : (
-                                        <ActivityIcon activity={activityItem} />
-                                      )
-                                    ) : activityItem.actor_detail.avatar &&
-                                      activityItem.actor_detail.avatar !== "" ? (
-                                      <img
-                                        src={activityItem.actor_detail.avatar}
-                                        alt={activityItem.actor_detail.display_name}
-                                        height={24}
-                                        width={24}
-                                        className="rounded-full"
-                                      />
-                                    ) : (
-                                      <div
-                                        className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                                      >
-                                        {activityItem.actor_detail.display_name?.charAt(0)}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="min-w-0 flex-1 py-3">
-                              <div className="text-xs text-custom-text-200 break-words">
-                                {activityItem.field === "archived_at" &&
-                                activityItem.new_value !== "restore" ? (
-                                  <span className="text-gray font-medium">Plane</span>
-                                ) : activityItem.actor_detail.is_bot ? (
-                                  <span className="text-gray font-medium">
-                                    {activityItem.actor_detail.first_name} Bot
-                                  </span>
-                                ) : (
-                                  <Link
-                                    href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}
-                                  >
-                                    <a className="text-gray font-medium">
-                                      {activityItem.actor_detail.display_name}
-                                    </a>
-                                  </Link>
-                                )}{" "}
-                                {message}{" "}
-                                <span className="whitespace-nowrap">
-                                  {timeAgo(activityItem.created_at)}
-                                </span>
-                              </div>
-                            </div>
-                          </>
-                        </div>
-                      </div>
-                    </li>
-                  );
-                }
-              })}
-            </ul>
-          </div>
-        ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
-        )}
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default ProfileActivity;
diff --git a/apps/app/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/apps/app/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
deleted file mode 100644
index a601165037a..00000000000
--- a/apps/app/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
-import { ProfileAuthWrapper } from "layouts/profile-layout";
-// components
-import { ProfileIssuesView } from "components/profile";
-// types
-import type { NextPage } from "next";
-
-const ProfileAssignedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
-
-export default ProfileAssignedIssues;
diff --git a/apps/app/pages/[workspaceSlug]/profile/[userId]/created.tsx b/apps/app/pages/[workspaceSlug]/profile/[userId]/created.tsx
deleted file mode 100644
index 1cac31e629e..00000000000
--- a/apps/app/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
-// layouts
-import { ProfileAuthWrapper } from "layouts/profile-layout";
-// components
-import { ProfileIssuesView } from "components/profile";
-// types
-import type { NextPage } from "next";
-
-const ProfileCreatedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
-
-export default ProfileCreatedIssues;
diff --git a/apps/app/pages/[workspaceSlug]/profile/[userId]/index.tsx b/apps/app/pages/[workspaceSlug]/profile/[userId]/index.tsx
deleted file mode 100644
index 0cf54bb0d03..00000000000
--- a/apps/app/pages/[workspaceSlug]/profile/[userId]/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
-// layouts
-import { ProfileAuthWrapper } from "layouts/profile-layout";
-// components
-import {
-  ProfileActivity,
-  ProfilePriorityDistribution,
-  ProfileStateDistribution,
-  ProfileStats,
-  ProfileWorkload,
-} from "components/profile";
-// types
-import type { NextPage } from "next";
-import { IUserStateDistribution, TStateGroups } from "types";
-// constants
-import { USER_PROFILE_DATA } from "constants/fetch-keys";
-import { GROUP_CHOICES } from "constants/project";
-
-const ProfileOverview: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query;
-
-  const { data: userProfile } = useSWR(
-    workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
-    workspaceSlug && userId
-      ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString())
-      : null
-  );
-
-  const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
-    const group = userProfile?.state_distribution.find((g) => g.state_group === key);
-
-    if (group) return group;
-    else return { state_group: key as TStateGroups, state_count: 0 };
-  });
-
-  return (
-    <ProfileAuthWrapper>
-      <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
-        <ProfileStats userProfile={userProfile} />
-        <ProfileWorkload stateDistribution={stateDistribution} />
-        <div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
-          <ProfilePriorityDistribution userProfile={userProfile} />
-          <ProfileStateDistribution
-            stateDistribution={stateDistribution}
-            userProfile={userProfile}
-          />
-        </div>
-        <ProfileActivity />
-      </div>
-    </ProfileAuthWrapper>
-  );
-};
-
-export default ProfileOverview;
diff --git a/apps/app/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/apps/app/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
deleted file mode 100644
index 3a1ca01ee39..00000000000
--- a/apps/app/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-// contexts
-import { ProfileIssuesContextProvider } from "contexts/profile-issues-context";
-// layouts
-import { ProfileAuthWrapper } from "layouts/profile-layout";
-// components
-import { ProfileIssuesView } from "components/profile";
-// types
-import type { NextPage } from "next";
-
-const ProfileSubscribedIssues: NextPage = () => (
-  <ProfileIssuesContextProvider>
-    <ProfileAuthWrapper>
-      <ProfileIssuesView />
-    </ProfileAuthWrapper>
-  </ProfileIssuesContextProvider>
-);
-
-export default ProfileSubscribedIssues;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
deleted file mode 100644
index f2458573def..00000000000
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// components
-import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
-// ui
-import { Icon, Loader } from "components/ui";
-import { Breadcrumbs } from "components/breadcrumbs";
-// types
-import { IIssue } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const defaultValues = {
-  name: "",
-  description: "",
-  description_html: "",
-  estimate_point: null,
-  state: "",
-  assignees_list: [],
-  priority: "low",
-  target_date: new Date().toString(),
-  issue_cycle: null,
-  issue_module: null,
-  labels_list: [],
-};
-
-const ArchivedIssueDetailsPage: NextPage = () => {
-  const [isRestoring, setIsRestoring] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, archivedIssueId } = router.query;
-
-  const { user } = useUserAuth();
-  const { setToastAlert } = useToast();
-
-  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
-    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
-    workspaceSlug && projectId && archivedIssueId
-      ? () =>
-          issuesService.retrieveArchivedIssue(
-            workspaceSlug as string,
-            projectId as string,
-            archivedIssueId as string
-          )
-      : null
-  );
-
-  const { reset, control, watch } = useForm<IIssue>({
-    defaultValues,
-  });
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !archivedIssueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(archivedIssueId as string),
-        (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload: Partial<IIssue> = {
-        ...formData,
-      };
-
-      await issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          archivedIssueId as string,
-          payload,
-          user
-        )
-        .then(() => {
-          mutateIssueDetails();
-          mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, archivedIssueId, projectId, mutateIssueDetails, user]
-  );
-
-  useEffect(() => {
-    if (!issueDetails) return;
-
-    mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
-    reset({
-      ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
-      labels_list: issueDetails.labels_list ?? issueDetails.labels,
-      labels: issueDetails.labels_list ?? issueDetails.labels,
-    });
-  }, [issueDetails, reset, archivedIssueId]);
-
-  const handleUnArchive = async () => {
-    if (!workspaceSlug || !projectId || !archivedIssueId) return;
-
-    setIsRestoring(true);
-
-    await issuesService
-      .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success",
-          message: `${issueDetails?.project_detail?.identifier}-${issueDetails?.sequence_id} is restored successfully under the project ${issueDetails?.project_detail?.name}`,
-        });
-        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${archivedIssueId}`);
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message: "出错了。请重试。",
-        });
-      })
-      .finally(() => setIsRestoring(false));
-  };
-
-  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
-              issueDetails?.sequence_id ?? "..."
-            } Details`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
-      {issueDetails && projectId ? (
-        <div className="flex h-full overflow-hidden">
-          <div className="w-2/3 h-full overflow-y-auto space-y-2 divide-y-2 divide-custom-border-300 p-5">
-            {issueDetails.archived_at && (
-              <div className="flex items-center justify-between gap-2 px-2.5 py-2 text-sm border rounded-md text-custom-text-200 border-custom-border-200 bg-custom-background-90">
-                <div className="flex gap-2 items-center">
-                  <Icon iconName="archive" className="" />
-                  <p>This issue has been archived by Plane.</p>
-                </div>
-                <button
-                  className="flex items-center gap-2 p-1.5 text-sm rounded-md border border-custom-border-200"
-                  onClick={handleUnArchive}
-                  disabled={isRestoring}
-                >
-                  <Icon iconName="history" />
-                  <span>{isRestoring ? "Restoring..." : "Restore Issue"}</span>
-                </button>
-              </div>
-            )}
-            <div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60 pointer-events-none">
-              <IssueMainContent
-                issueDetails={issueDetails}
-                submitChanges={submitChanges}
-                uneditable
-              />
-            </div>
-          </div>
-          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
-            <IssueDetailsSidebar
-              control={control}
-              issueDetail={issueDetails}
-              submitChanges={submitChanges}
-              watch={watch}
-              uneditable
-            />
-          </div>
-        </div>
-      ) : (
-        <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>
-      )}
-    </ProjectAuthorizationWrapper>
-  );
-};
-
-export default ArchivedIssueDetailsPage;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
deleted file mode 100644
index 03b8298b36e..00000000000
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// components
-import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
-// ui
-import { EmptyState, Loader } from "components/ui";
-import { Breadcrumbs } from "components/breadcrumbs";
-// images
-import emptyIssue from "public/empty-state/issue.svg";
-// types
-import { IIssue } from "types";
-import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const defaultValues = {
-  assignees_list: [],
-  description: "",
-  description_html: "",
-  estimate_point: null,
-  issue_cycle: null,
-  issue_module: null,
-  labels_list: [],
-  name: "",
-  priority: "low",
-  start_date: null,
-  state: "",
-  target_date: null,
-};
-
-const IssueDetailsPage: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
-  // console.log(workspaceSlug, "workspaceSlug")
-
-  const { user } = useUserAuth();
-
-  const {
-    data: issueDetails,
-    mutate: mutateIssueDetails,
-    error,
-  } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
-  const { reset, control, watch } = useForm<IIssue>({
-    defaultValues,
-  });
-
-  const submitChanges = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-        (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload: Partial<IIssue> = {
-        ...formData,
-      };
-
-      delete payload.blocker_issues;
-      delete payload.blocked_issues;
-
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutateIssueDetails();
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
-  );
-
-  useEffect(() => {
-    if (!issueDetails) return;
-
-    mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-    reset({
-      ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
-      labels_list: issueDetails.labels_list ?? issueDetails.labels,
-      labels: issueDetails.labels_list ?? issueDetails.labels,
-    });
-  }, [issueDetails, reset, issueId]);
-
-  return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem
-            title={`${truncateText(issueDetails?.project_detail.name ?? "项目", 32)} 任务`}
-            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
-            linkTruncate
-          />
-          <Breadcrumbs.BreadcrumbItem
-            title={`任务 ${issueDetails?.project_detail.identifier ?? "项目"}-${
-              issueDetails?.sequence_id ?? "..."
-            } 详情`}
-            unshrinkTitle
-          />
-        </Breadcrumbs>
-      }
-    >
-      {error ? (
-        <EmptyState
-          image={emptyIssue}
-          title="任务不存在"
-          description="您要查找的任务不存在、已存档或已删除。"
-          primaryButton={{
-            text: "查看其他任务",
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
-          }}
-        />
-      ) : issueDetails && projectId ? (
-        <div className="flex h-full overflow-hidden">
-          <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
-            <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
-          </div>
-          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">
-            <IssueDetailsSidebar
-              control={control}
-              issueDetail={issueDetails}
-              submitChanges={submitChanges}
-              watch={watch}
-            />
-          </div>
-        </div>
-      ) : (
-        <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>
-      )}
-    </ProjectAuthorizationWrapper>
-  );
-};
-
-export default IssueDetailsPage;
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
deleted file mode 100644
index 6731cd33f3f..00000000000
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { SettingsHeader } from "components/workspace";
-// ui
-import { SecondaryButton } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const BillingSettings: NextPage = () => {
-  const {
-    query: { workspaceSlug },
-  } = useRouter();
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="p-8">
-        <SettingsHeader />
-        <section className="space-y-8">
-          <div>
-            <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
-            <p className="mt-4 text-sm text-custom-text-200">Free launch preview</p>
-          </div>
-          <div className="space-y-8 md:w-2/3">
-            <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="https://plane.so/pricing" target="_blank" rel="noreferrer">
-                <SecondaryButton outline>View Plans</SecondaryButton>
-              </a>
-            </div>
-          </div>
-        </section>
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default BillingSettings;
diff --git a/apps/app/pages/[workspaceSlug]/settings/exports.tsx b/apps/app/pages/[workspaceSlug]/settings/exports.tsx
deleted file mode 100644
index 7f98d36184f..00000000000
--- a/apps/app/pages/[workspaceSlug]/settings/exports.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { SettingsHeader } from "components/workspace";
-// components
-import ExportGuide from "components/exporter/guide";
-import { IntegrationAndImportExportBanner } from "components/ui";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const ImportExport: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Export Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="p-8 space-y-4">
-        <SettingsHeader />
-        <IntegrationAndImportExportBanner bannerName="Export" />
-        <ExportGuide />
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default ImportExport;
diff --git a/apps/app/pages/[workspaceSlug]/settings/imports.tsx b/apps/app/pages/[workspaceSlug]/settings/imports.tsx
deleted file mode 100644
index a0a46f0bc9d..00000000000
--- a/apps/app/pages/[workspaceSlug]/settings/imports.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { SettingsHeader } from "components/workspace";
-// components
-import IntegrationGuide from "components/integration/guide";
-import { IntegrationAndImportExportBanner } from "components/ui";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const ImportExport: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="p-8 space-y-4">
-        <SettingsHeader />
-        <IntegrationAndImportExportBanner
-          bannerName="Import/ Export"
-          description="Integrations and importers are only available on the cloud version. We plan to open-source
-        our SDKs in the near future so that the community can request or contribute integrations as
-        needed."
-        />
-        <IntegrationGuide />
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default ImportExport;
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
deleted file mode 100644
index 1b7a540c424..00000000000
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-import IntegrationService from "services/integration";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { SettingsHeader } from "components/workspace";
-// components
-import { SingleIntegrationCard } from "components/integration";
-// ui
-import { IntegrationAndImportExportBanner, Loader } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// types
-import type { NextPage } from "next";
-// fetch-keys
-import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-
-const WorkspaceIntegrations: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug ? IntegrationService.getAppIntegrationsList() : null
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
-            link={`/${workspaceSlug}`}
-            linkTruncate
-          />
-          <BreadcrumbItem title="Integrations" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
-      <div className="p-8">
-        <SettingsHeader />
-        <section className="space-y-5">
-          <IntegrationAndImportExportBanner bannerName="Integrations" />
-          <div className="space-y-5">
-            {appIntegrations ? (
-              appIntegrations.map((integration) => (
-                <SingleIntegrationCard key={integration.id} integration={integration} />
-              ))
-            ) : (
-              <Loader className="space-y-5">
-                <Loader.Item height="60px" />
-                <Loader.Item height="60px" />
-              </Loader>
-            )}
-          </div>
-        </section>
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
-
-export default WorkspaceIntegrations;
diff --git a/apps/app/pages/_app.tsx b/apps/app/pages/_app.tsx
deleted file mode 100644
index 5ef047ca967..00000000000
--- a/apps/app/pages/_app.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// next imports
-import Head from "next/head";
-import dynamic from "next/dynamic";
-import Router from "next/router";
-
-// themes
-import { ThemeProvider } from "next-themes";
-
-// styles
-import "styles/globals.css";
-import "styles/editor.css";
-import "styles/command-pallette.css";
-import "styles/nprogress.css";
-import "styles/react-datepicker.css";
-
-// nprogress
-import NProgress from "nprogress";
-
-// contexts
-import { UserProvider } from "contexts/user.context";
-import { ToastContextProvider } from "contexts/toast.context";
-import { ThemeContextProvider } from "contexts/theme.context";
-// types
-import type { AppProps } from "next/app";
-// constants
-import { THEMES } from "constants/themes";
-// constants
-import {
-  SITE_NAME,
-  SITE_DESCRIPTION,
-  SITE_URL,
-  TWITTER_USER_NAME,
-  SITE_KEYWORDS,
-  SITE_TITLE,
-} from "constants/seo-variables";
-// mobx store provider
-import { MobxStoreProvider } from "lib/mobx/store-provider";
-import MobxStoreInit from "lib/mobx/store-init";
-
-const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
-
-// nprogress
-NProgress.configure({ showSpinner: false });
-Router.events.on("routeChangeStart", NProgress.start);
-Router.events.on("routeChangeError", NProgress.done);
-Router.events.on("routeChangeComplete", NProgress.done);
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    // <UserProvider>
-    // mobx root provider
-    <MobxStoreProvider {...pageProps}>
-      <ThemeProvider themes={THEMES} defaultTheme="system">
-        <ToastContextProvider>
-          <CrispWithNoSSR />
-          <Head>
-            <title>{SITE_TITLE}</title>
-            <meta property="og:site_name" content={SITE_NAME} />
-            <meta property="og:title" content={SITE_TITLE} />
-            <meta property="og:url" content={SITE_URL} />
-            <meta name="description" content={SITE_DESCRIPTION} />
-            <meta property="og:description" content={SITE_DESCRIPTION} />
-            <meta name="keywords" content={SITE_KEYWORDS} />
-            <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
-            <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
-            <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
-            <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
-            <link rel="manifest" href="/site.webmanifest.json" />
-            <link rel="shortcut icon" href="/favicon/favicon.ico" />
-          </Head>
-          <MobxStoreInit />
-          <Component {...pageProps} />
-        </ToastContextProvider>
-      </ThemeProvider>
-    </MobxStoreProvider>
-    // </UserProvider>
-  );
-}
-
-export default MyApp;
diff --git a/apps/app/pages/_document.tsx b/apps/app/pages/_document.tsx
deleted file mode 100644
index 5c5ca02509b..00000000000
--- a/apps/app/pages/_document.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-
-class MyDocument extends Document {
-  render() {
-    const isSessionRecorderEnabled = parseInt(
-      process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0"
-    );
-
-    return (
-      <Html>
-        <Head>
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="apple-touch-icon" href="/icon.png" />
-          <meta name="theme-color" content="#fff" />
-          {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
-            <script
-              defer
-              data-domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
-              src="https://plausible.io/js/script.js"
-            />
-          )}
-          <script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2" />
-          {isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
-            <script
-              defer
-              dangerouslySetInnerHTML={{
-                __html: `(function(c,l,a,r,i,t,y){
-              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-          })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY}");`,
-              }}
-            />
-          )}
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;
diff --git a/apps/app/pages/api/track-event.ts b/apps/app/pages/api/track-event.ts
deleted file mode 100644
index baae6e67aa7..00000000000
--- a/apps/app/pages/api/track-event.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-
-// jitsu
-import { createClient } from "@jitsu/nextjs";
-import { convertCookieStringToObject } from "lib/cookie";
-
-const jitsu = createClient({
-  key: process.env.TRACKER_ACCESS_KEY || "",
-  tracking_host: "https://t.jitsu.com",
-});
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { eventName, user, extra } = req.body;
-
-  if (!eventName) {
-    return res.status(400).json({ message: "错误请求" });
-  }
-
-  if (!user) return res.status(401).json({ message: "未经授权" });
-
-  // TODO: cache user info
-
-  jitsu
-    .id({
-      id: user.id,
-      email: user.email,
-      first_name: user.first_name,
-      last_name: user.last_name,
-      display_name: user?.display_name,
-    })
-    .then(() => {
-      jitsu.track(eventName, {
-        ...extra,
-      });
-    });
-
-  res.status(200).json({ message: "成功" });
-}
diff --git a/apps/app/pages/api/unsplash.ts b/apps/app/pages/api/unsplash.ts
deleted file mode 100644
index 5eab60b92a8..00000000000
--- a/apps/app/pages/api/unsplash.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-
-// TODO: remove NEXT_PUBLIC_ prefix from env variable
-const unsplashKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { query, page, per_page = 20 } = req.query;
-
-  const url = query
-    ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
-    : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
-
-  const response = await fetch(url, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
-
-  const data = await response.json();
-
-  res.status(200).json(data);
-}
diff --git a/apps/app/pages/error.tsx b/apps/app/pages/error.tsx
deleted file mode 100644
index 19663e68e67..00000000000
--- a/apps/app/pages/error.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// types
-import type { NextPage } from "next";
-
-const ErrorPage: NextPage = () => (
-  <DefaultLayout>
-    <div className="h-full w-full">
-      <h2 className="text-3xl">Error!</h2>
-    </div>
-  </DefaultLayout>
-);
-
-export default ErrorPage;
diff --git a/apps/app/pages/installations/[provider]/index.tsx b/apps/app/pages/installations/[provider]/index.tsx
deleted file mode 100644
index 2becb1f88f1..00000000000
--- a/apps/app/pages/installations/[provider]/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useEffect } from "react";
-
-// services
-import appinstallationsService from "services/app-installations.service";
-
-import useToast from "hooks/use-toast";
-
-// components
-import { Spinner } from "components/ui";
-
-import { useRouter } from "next/router";
-
-interface IGithuPostInstallationProps {
-  installation_id: string;
-  setup_action: string;
-  state: string;
-  provider: string;
-  code: string;
-}
-
-// TODO:Change getServerSideProps to router.query
-const AppPostInstallation = ({
-  installation_id,
-  setup_action,
-  state,
-  provider,
-  code,
-}: IGithuPostInstallationProps) => {
-  const { setToastAlert } = useToast();
-
-  useEffect(() => {
-    if (provider === "github" && state && installation_id) {
-      appinstallationsService
-        .addInstallationApp(state, provider, { installation_id })
-        .then(() => {
-          window.opener = null;
-          window.open("", "_self");
-          window.close();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } else if (provider === "slack" && state && code) {
-      appinstallationsService
-        .getSlackAuthDetails(code)
-        .then((res) => {
-          const [workspaceSlug, projectId, integrationId] = state.split(",");
-
-          if (!projectId) {
-            const payload = {
-              metadata: {
-                ...res,
-              },
-            };
-
-            appinstallationsService
-              .addInstallationApp(state, provider, payload)
-              .then((r) => {
-                window.opener = null;
-                window.open("", "_self");
-                window.close();
-              })
-              .catch((err) => {
-                throw err?.response;
-              });
-          } else {
-            const payload = {
-              access_token: res.access_token,
-              bot_user_id: res.bot_user_id,
-              webhook_url: res.incoming_webhook.url,
-              data: res,
-              team_id: res.team.id,
-              team_name: res.team.name,
-              scopes: res.scope,
-            };
-            appinstallationsService
-              .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
-              .then((r) => {
-                window.opener = null;
-                window.open("", "_self");
-                window.close();
-              })
-              .catch((err) => {
-                throw err.response;
-              });
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    }
-  }, [state, installation_id, provider, code]);
-
-  return (
-    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
-      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
-      <Spinner />
-    </div>
-  );
-};
-
-export async function getServerSideProps(context: any) {
-  return {
-    props: context.query,
-  };
-}
-
-export default AppPostInstallation;
diff --git a/apps/app/pages/sign-up.tsx b/apps/app/pages/sign-up.tsx
deleted file mode 100644
index 3d6a03bee9b..00000000000
--- a/apps/app/pages/sign-up.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-// next-themes
-import { useTheme } from "next-themes";
-// services
-import authenticationService from "services/authentication.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// components
-import { EmailPasswordForm } from "components/account";
-// ui
-import { Spinner } from "components/ui";
-// images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-// types
-import type { NextPage } from "next";
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  medium?: string;
-};
-
-const SignUp: NextPage = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
-  const router = useRouter();
-
-  const { setToastAlert } = useToast();
-
-  const { setTheme } = useTheme();
-
-  const { mutateUser } = useUserAuth("sign-in");
-
-  const handleSignUp = async (formData: EmailPasswordFormValues) => {
-    const payload = {
-      email: formData.email,
-      password: formData.password ?? "",
-    };
-
-    await authenticationService
-      .emailSignUp(payload)
-      .then(async (response) => {
-        setToastAlert({
-          type: "success",
-          title: "成功!",
-          message: "账号创建成功。",
-        });
-
-        if (response) await mutateUser();
-        router.push("/");
-      })
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "错误!",
-          message:
-            err?.error ||
-            "出错了。请稍后再试或联系支持团队。",
-        })
-      );
-  };
-
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
-
-  useEffect(() => {
-    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
-    else setIsLoading(false);
-  }, [router]);
-
-  if (isLoading)
-    return (
-      <div className="grid place-items-center h-screen w-full">
-        <Spinner />
-      </div>
-    );
-
-  return (
-    <DefaultLayout>
-      <>
-        <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
-        <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
-          <div className="grid place-items-center bg-custom-background-100">
-            <div className="h-[30px] w-[30px]">
-              <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-            </div>
-          </div>
-        </div>
-      </>
-      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
-        <div>
-          <EmailPasswordForm onSubmit={handleSignUp} />
-        </div>
-      </div>
-    </DefaultLayout>
-  );
-};
-
-export default SignUp;
diff --git a/apps/app/services/ai.service.ts b/apps/app/services/ai.service.ts
deleted file mode 100644
index ecb1ada52d1..00000000000
--- a/apps/app/services/ai.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import { ICurrentUserResponse, IGptResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class AiServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createGptTask(
-    workspaceSlug: string,
-    projectId: string,
-    data: { prompt: string; task: string },
-    user: ICurrentUserResponse | undefined
-  ): Promise<IGptResponse> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/ai-assistant/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackAskGptEvent(response?.data, "ASK_GPT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default new AiServices();
diff --git a/apps/app/services/api.service.ts b/apps/app/services/api.service.ts
deleted file mode 100644
index 361fea03eaa..00000000000
--- a/apps/app/services/api.service.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import axios from "axios";
-import Cookies from "js-cookie";
-
-const unAuthorizedStatus = [401];
-const nonValidatedRoutes = [
-  "/",
-  "/magic-sign-in",
-  "/reset-password",
-  "/workspace-member-invitation",
-  "/sign-up",
-];
-
-const validateRouteCheck = (route: string): boolean => {
-  let validationToggle = false;
-  const routeCheck = nonValidatedRoutes.find((_route: string) => _route === route);
-  if (routeCheck) validationToggle = true;
-  return validationToggle;
-};
-
-axios.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    const { status }: any = error.response;
-    if (!validateRouteCheck(window.location.pathname)) {
-      if (unAuthorizedStatus.includes(status)) {
-        Cookies.remove("refreshToken", { path: "/" });
-        Cookies.remove("accessToken", { path: "/" });
-        window.location.href = `/?next_url=${window.location.pathname}`;
-      }
-    }
-    return Promise.reject(error);
-  }
-);
-
-abstract class APIService {
-  protected baseURL: string;
-  protected headers: any = {};
-
-  constructor(baseURL: string) {
-    this.baseURL = baseURL;
-  }
-
-  setRefreshToken(token: string) {
-    Cookies.set("refreshToken", token);
-  }
-
-  getRefreshToken() {
-    return Cookies.get("refreshToken");
-  }
-
-  purgeRefreshToken() {
-    Cookies.remove("refreshToken", { path: "/" });
-  }
-
-  setAccessToken(token: string) {
-    Cookies.set("accessToken", token);
-  }
-
-  getAccessToken() {
-    return Cookies.get("accessToken");
-  }
-
-  purgeAccessToken() {
-    Cookies.remove("accessToken", { path: "/" });
-  }
-
-  getHeaders() {
-    return {
-      Authorization: `Bearer ${this.getAccessToken()}`,
-    };
-  }
-
-  getWithoutBase(url: string, config = {}): Promise<any> {
-    return axios({
-      method: "get",
-      url: url,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  get(url: string, config = {}): Promise<any> {
-    return axios({
-      method: "get",
-      url: this.baseURL + url,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  post(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "post",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  put(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "put",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  patch(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "patch",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  delete(url: string, data?: any, config = {}): Promise<any> {
-    return axios({
-      method: "delete",
-      url: this.baseURL + url,
-      data: data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "post",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken()
-        ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" }
-        : {},
-      ...config,
-    });
-  }
-
-  request(config = {}) {
-    return axios(config);
-  }
-}
-
-export default APIService;
diff --git a/apps/app/services/app-installations.service.ts b/apps/app/services/app-installations.service.ts
deleted file mode 100644
index 8ee04dcfe55..00000000000
--- a/apps/app/services/app-installations.service.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-// services
-import axios from "axios";
-import APIService from "services/api.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-class AppInstallationsService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async addInstallationApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/workspace-integrations/${provider}/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async addSlackChannel(workspaceSlug: string, projectId: string, integrationId: string | null | undefined, data: any): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getSlackChannelDetail(workspaceSlug: string, projectId: string, integrationId: string | null | undefined): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async removeSlackChannel(workspaceSlug: string, projectId: string, integrationId: string | null | undefined, slackSyncId: string | undefined): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/${slackSyncId}`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getSlackAuthDetails(code: string): Promise<any> {
-    const response = await axios({
-      method: "post",
-      url: "/api/slack-redirect",
-      data: {
-        code,
-      },
-    });
-
-    return response.data;
-  }
-}
-
-export default new AppInstallationsService();
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
deleted file mode 100644
index 89cd50a2fcc..00000000000
--- a/apps/app/services/cycles.service.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IIssue } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectCycleServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createCycle(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCyclesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    cycleType: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
-  ): Promise<ICycle[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
-      params: {
-        cycle_view: cycleType,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCycleDetails(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<ICycle> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
-      .then((res) => res?.data)
-      .catch((err) => {
-        throw err?.response?.data;
-      });
-  }
-
-  async getCycleIssues(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<IIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCycleIssuesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    queries?: any
-  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
-      { params: queries }
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: Partial<ICycle>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackCycleEvent(response?.data, "CYCLE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async cycleDateCheck(
-    workspaceSlug: string,
-    projectId: string,
-    data: CycleDateCheckData
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addCycleToFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      cycle: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async transferIssues(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: {
-      new_cycle_id: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeCycleFromFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ProjectCycleServices();
diff --git a/apps/app/services/estimates.service.ts b/apps/app/services/estimates.service.ts
deleted file mode 100644
index 8b0fe25f4ec..00000000000
--- a/apps/app/services/estimates.service.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-// services
-import APIService from "services/api.service";
-// types
-import type { ICurrentUserResponse, IEstimate, IEstimateFormData } from "types";
-import trackEventServices from "services/track-event.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectEstimateServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createEstimate(
-    workspaceSlug: string,
-    projectId: string,
-    data: IEstimateFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async patchEstimate(
-    workspaceSlug: string,
-    projectId: string,
-    estimateId: string,
-    data: IEstimateFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getEstimateDetails(
-    workspaceSlug: string,
-    projectId: string,
-    estimateId: string
-  ): Promise<IEstimate> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getEstimatesList(workspaceSlug: string, projectId: string): Promise<IEstimate[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteEstimate(
-    workspaceSlug: string,
-    projectId: string,
-    estimateId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ProjectEstimateServices();
diff --git a/apps/app/services/file.service.ts b/apps/app/services/file.service.ts
deleted file mode 100644
index d2f01428da4..00000000000
--- a/apps/app/services/file.service.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-interface UnSplashImage {
-  id: string;
-  created_at: Date;
-  updated_at: Date;
-  promoted_at: Date;
-  width: number;
-  height: number;
-  color: string;
-  blur_hash: string;
-  description: null;
-  alt_description: string;
-  urls: UnSplashImageUrls;
-  [key: string]: any;
-}
-
-interface UnSplashImageUrls {
-  raw: string;
-  full: string;
-  regular: string;
-  small: string;
-  thumb: string;
-  small_s3: string;
-}
-
-class FileServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
-    return this.mediaUpload(`/api/workspaces/${workspaceSlug}/file-assets/`, file)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
-    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
-      .then((response) => response?.status)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteFile(workspaceId: string, assetUrl: string): Promise<any> {
-    const lastIndex = assetUrl.lastIndexOf("/");
-    const assetId = assetUrl.substring(lastIndex + 1);
-
-    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async uploadUserFile(file: FormData): Promise<any> {
-    return this.mediaUpload(`/api/users/file-assets/`, file)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteUserFile(assetUrl: string): Promise<any> {
-    const lastIndex = assetUrl.lastIndexOf("/");
-    const assetId = assetUrl.substring(lastIndex + 1);
-
-    return this.delete(`/api/users/file-assets/${assetId}`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
-    const url = "/api/unsplash";
-
-    return this.request({
-      method: "get",
-      url,
-      params: {
-        page,
-        per_page: 20,
-        query,
-      },
-    })
-      .then((response) => response?.data?.results ?? response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new FileServices();
diff --git a/apps/app/services/inbox.service.ts b/apps/app/services/inbox.service.ts
deleted file mode 100644
index 61949c87749..00000000000
--- a/apps/app/services/inbox.service.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-// types
-import type {
-  IInboxIssue,
-  IInbox,
-  TInboxStatus,
-  IInboxIssueDetail,
-  ICurrentUserResponse,
-  IInboxFilterOptions,
-  IInboxQueryParams,
-} from "types";
-
-class InboxServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getInboxes(workspaceSlug: string, projectId: string): Promise<IInbox[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getInboxById(workspaceSlug: string, projectId: string, inboxId: string): Promise<IInbox> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchInbox(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    data: Partial<IInbox>
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getInboxIssues(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    params?: IInboxQueryParams
-  ): Promise<IInboxIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`,
-      { params }
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getInboxIssueById(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    inboxIssueId: string
-  ): Promise<IInboxIssueDetail> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteInboxIssue(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    inboxIssueId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markInboxStatus(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    inboxIssueId: string,
-    data: TInboxStatus,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IInboxIssue> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
-      data
-    )
-      .then((response) => {
-        const action =
-          data.status === -1
-            ? "INBOX_ISSUE_REJECTED"
-            : data.status === 0
-            ? "INBOX_ISSUE_SNOOZED"
-            : data.status === 1
-            ? "INBOX_ISSUE_ACCEPTED"
-            : "INBOX_ISSUE_DUPLICATED";
-        if (trackEvent) trackEventServices.trackInboxEvent(response?.data, action, user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchInboxIssue(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    inboxIssueId: string,
-    data: { issue: Partial<IInboxIssue> },
-    user: ICurrentUserResponse | undefined
-  ): Promise<IInboxIssue> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createInboxIssue(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IInboxIssueDetail> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-const inboxServices = new InboxServices();
-
-export default inboxServices;
diff --git a/apps/app/services/integration/csv.services.ts b/apps/app/services/integration/csv.services.ts
deleted file mode 100644
index f19cc4a74a9..00000000000
--- a/apps/app/services/integration/csv.services.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-import { ICurrentUserResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class CSVIntegrationService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async exportCSVService(
-    workspaceSlug: string,
-    data: {
-      provider: string;
-      project: string[];
-    },
-    user: ICurrentUserResponse
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackExporterEvent(
-            {
-              workspaceSlug,
-            },
-            "CSV_EXPORTER_CREATE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new CSVIntegrationService();
diff --git a/apps/app/services/integration/github.service.ts b/apps/app/services/integration/github.service.ts
deleted file mode 100644
index 494785f04b7..00000000000
--- a/apps/app/services/integration/github.service.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-import { ICurrentUserResponse, IGithubRepoInfo, IGithubServiceImportFormData } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-const integrationServiceType: string = "github";
-class GithubIntegrationService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async listAllRepositories(workspaceSlug: string, integrationSlug: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getGithubRepoInfo(
-    workspaceSlug: string,
-    params: { owner: string; repo: string }
-  ): Promise<IGithubRepoInfo> {
-    return this.get(`/api/workspaces/${workspaceSlug}/importers/${integrationServiceType}/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createGithubServiceImport(
-    workspaceSlug: string,
-    data: IGithubServiceImportFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackImporterEvent(response?.data, "GITHUB_IMPORTER_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new GithubIntegrationService();
diff --git a/apps/app/services/integration/index.ts b/apps/app/services/integration/index.ts
deleted file mode 100644
index 2b32a5bd02c..00000000000
--- a/apps/app/services/integration/index.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import {
-  IAppIntegration,
-  ICurrentUserResponse,
-  IImporterService,
-  IWorkspaceIntegration,
-  IExportServiceResponse,
-} from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class IntegrationService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getAppIntegrationsList(): Promise<IAppIntegration[]> {
-    return this.get(`/api/integrations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getWorkspaceIntegrationsList(workspaceSlug: string): Promise<IWorkspaceIntegration[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`
-    )
-      .then((res) => res?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getImporterServicesList(workspaceSlug: string): Promise<IImporterService[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/importers/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async getExportsServicesList(
-    workspaceSlug: string,
-    cursor: string,
-    per_page: number
-  ): Promise<IExportServiceResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/export-issues`, {
-      params: {
-        per_page,
-        cursor,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteImporterService(
-    workspaceSlug: string,
-    service: string,
-    importerId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/importers/${service}/${importerId}/`)
-      .then((response) => {
-        const eventName = service === "github" ? "GITHUB_IMPORTER_DELETE" : "JIRA_IMPORTER_DELETE";
-
-        if (trackEvent) trackEventServices.trackImporterEvent(response?.data, eventName, user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new IntegrationService();
diff --git a/apps/app/services/integration/jira.service.ts b/apps/app/services/integration/jira.service.ts
deleted file mode 100644
index 8f6a9fec9c0..00000000000
--- a/apps/app/services/integration/jira.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import { IJiraMetadata, IJiraResponse, IJiraImporterForm, ICurrentUserResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class JiraImportedService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getJiraProjectInfo(workspaceSlug: string, params: IJiraMetadata): Promise<IJiraResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/importers/jira`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createJiraImporter(
-    workspaceSlug: string,
-    data: IJiraImporterForm,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IJiraResponse> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/jira/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackImporterEvent(response?.data, "JIRA_IMPORTER_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-const jiraImporterService = new JiraImportedService();
-
-export default jiraImporterService;
diff --git a/apps/app/services/issues.service.ts b/apps/app/services/issues.service.ts
deleted file mode 100644
index b8875e6c5e0..00000000000
--- a/apps/app/services/issues.service.ts
+++ /dev/null
@@ -1,590 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// type
-import type {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueActivity,
-  IIssueComment,
-  IIssueLabels,
-  IIssueViewOptions,
-  ISubIssueResponse,
-} from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectIssuesServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createIssues(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssues(workspaceSlug: string, projectId: string): Promise<IIssue[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssuesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    queries?: any
-  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
-      params: queries,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async retrieve(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueActivities(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IIssueActivity[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addIssueToCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: {
-      issues: string[];
-    },
-    user: ICurrentUserResponse | undefined
-  ) {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueMovedToCycleOrModuleEvent(
-            {
-              workspaceSlug,
-              workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
-              projectId,
-              projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
-              projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
-              issueId: response?.data?.[0]?.issue_detail?.id,
-              cycleId,
-            },
-            response.data.length > 1 ? "ISSUE_MOVED_TO_CYCLE_IN_BULK" : "ISSUE_MOVED_TO_CYCLE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeIssueFromCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    bridgeId: string
-  ) {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueProperties(
-    workspaceSlug: string,
-    projectId: string,
-    issuePropertyId: string,
-    data: any
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/` +
-        `${issuePropertyId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<IIssueComment>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    commentId: string,
-    data: IIssueComment,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    commentId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueCommentEvent(
-            {
-              issueId,
-              commentId,
-            },
-            "ISSUE_COMMENT_DELETE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getWorkspaceLabels(workspaceSlug: string): Promise<IIssueLabels[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IIssueLabels> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
-      .then((response: { data: IIssueLabels; [key: string]: any }) => {
-        if (trackEvent)
-          trackEventServices.trackIssueLabelEvent(
-            {
-              workSpaceId: response?.data?.workspace_detail?.id,
-              workSpaceName: response?.data?.workspace_detail?.name,
-              workspaceSlug,
-              projectId,
-              projectIdentifier: response?.data?.project_detail?.identifier,
-              projectName: response?.data?.project_detail?.name,
-              labelId: response?.data?.id,
-              color: response?.data?.color,
-            },
-            "ISSUE_LABEL_CREATE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    labelId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueLabelEvent(
-            {
-              workSpaceId: response?.data?.workspace_detail?.id,
-              workSpaceName: response?.data?.workspace_detail?.name,
-              workspaceSlug,
-              projectId,
-              projectIdentifier: response?.data?.project_detail?.identifier,
-              projectName: response?.data?.project_detail?.name,
-              labelId: response?.data?.id,
-              color: response?.data?.color,
-            },
-            "ISSUE_LABEL_UPDATE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    labelId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueLabelEvent(
-            {
-              workspaceSlug,
-              projectId,
-            },
-            "ISSUE_LABEL_DELETE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<IIssue>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issuesId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackIssueEvent({ issuesId }, "ISSUE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async bulkDeleteIssues(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackIssueBulkDeleteEvent(data, user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async subIssues(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<ISubIssueResponse> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addSubIssues(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: { sub_issue_ids: string[] }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: {
-      metadata: any;
-      title: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    linkId: string,
-    data: {
-      metadata: any;
-      title: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    linkId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async uploadIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    file: FormData
-  ): Promise<any> {
-    return this.mediaUpload(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`,
-      file
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    assetId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/${assetId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
-      params: queries,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async unarchiveIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/unarchive/${issueId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async retrieveArchivedIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issueId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteArchivedIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issuesId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issuesId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ProjectIssuesServices();
diff --git a/apps/app/services/modules.service.ts b/apps/app/services/modules.service.ts
deleted file mode 100644
index c70066a1e2a..00000000000
--- a/apps/app/services/modules.service.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "./track-event.service";
-
-// types
-import type { IIssueViewOptions, IModule, IIssue, ICurrentUserResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectIssuesServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createModule(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getModuleDetails(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string
-  ): Promise<IModule> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    data: Partial<IModule>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackModuleEvent(response?.data, "MODULE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getModuleIssues(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string
-  ): Promise<IIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getModuleIssuesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    queries?: any
-  ): Promise<
-    | IIssue[]
-    | {
-        [key: string]: IIssue[];
-      }
-  > {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
-      { params: queries }
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addIssuesToModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    data: { issues: string[] },
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackIssueMovedToCycleOrModuleEvent(
-            {
-              workspaceSlug,
-              workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
-              projectId,
-              projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
-              projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
-              issueId: response?.data?.[0]?.issue_detail?.id,
-              moduleId,
-            },
-            response?.data?.length > 1 ? "ISSUE_MOVED_TO_MODULE_IN_BULK" : "ISSUE_MOVED_TO_MODULE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeIssueFromModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    bridgeId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/${bridgeId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createModuleLink(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    data: {
-      metadata: any;
-      title: string;
-      url: string;
-    }
-  ): Promise<any> {
-    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: {
-      metadata: any;
-      title: string;
-      url: string;
-    },
-
-  ): Promise<any> {
-    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;
-      });
-  }
-}
-
-export default new ProjectIssuesServices();
diff --git a/apps/app/services/notifications.service.ts b/apps/app/services/notifications.service.ts
deleted file mode 100644
index 01c139b5154..00000000000
--- a/apps/app/services/notifications.service.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-// types
-import type {
-  IUserNotification,
-  INotificationParams,
-  NotificationCount,
-  PaginatedUserNotification,
-  IMarkAllAsReadPayload,
-} from "types";
-
-class UserNotificationsServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getUserNotifications(
-    workspaceSlug: string,
-    params: INotificationParams
-  ): Promise<IUserNotification[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserNotificationDetailById(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markUserNotificationAsRead(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markUserNotificationAsUnread(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markUserNotificationAsArchived(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markUserNotificationAsUnarchived(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchUserNotification(
-    workspaceSlug: string,
-    notificationId: string,
-    data: Partial<IUserNotification>
-  ): Promise<IUserNotification> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteUserNotification(workspaceSlug: string, notificationId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async subscribeToIssueNotifications(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueNotificationSubscriptionStatus(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<{
-    subscribed: boolean;
-  }> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async unsubscribeFromIssueNotifications(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUnreadNotificationsCount(workspaceSlug: string): Promise<NotificationCount> {
-    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/unread/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getNotifications(url: string): Promise<PaginatedUserNotification> {
-    return this.get(url)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async markAllNotificationsAsRead(
-    workspaceSlug: string,
-    payload: IMarkAllAsReadPayload
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, {
-      ...payload,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-const userNotificationServices = new UserNotificationsServices();
-
-export default userNotificationServices;
diff --git a/apps/app/services/pages.service.ts b/apps/app/services/pages.service.ts
deleted file mode 100644
index 72b12012e31..00000000000
--- a/apps/app/services/pages.service.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import { IPage, IPageBlock, RecentPagesResponse, IIssue, ICurrentUserResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class PageServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createPage(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IPage>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IPage> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchPage(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    data: Partial<IPage>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IPage> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deletePage(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackPageEvent(response?.data, "PAGE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addPageToFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      page: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removePageFromFavorites(workspaceSlug: string, projectId: string, pageId: string) {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getPagesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    pageType: "all" | "favorite" | "created_by_me" | "created_by_other"
-  ): Promise<IPage[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, {
-      params: {
-        page_view: pageType,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getRecentPages(workspaceSlug: string, projectId: string): Promise<RecentPagesResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, {
-      params: {
-        page_view: "recent",
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getPageDetails(workspaceSlug: string, projectId: string, pageId: string): Promise<IPage> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createPageBlock(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    data: Partial<IPageBlock>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IPageBlock> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getPageBlock(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    pageBlockId: string
-  ): Promise<IPageBlock[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchPageBlock(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    pageBlockId: string,
-    data: Partial<IPageBlock>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IPage> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deletePageBlock(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    pageBlockId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async listPageBlocks(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string
-  ): Promise<IPageBlock[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async convertPageBlockToIssue(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    blockId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IIssue> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${blockId}/issues/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackPageBlockEvent(
-            response?.data,
-            "PAGE_BLOCK_CONVERTED_TO_ISSUE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new PageServices();
diff --git a/apps/app/services/project-publish.service.ts b/apps/app/services/project-publish.service.ts
deleted file mode 100644
index 4ee01a94b2d..00000000000
--- a/apps/app/services/project-publish.service.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse } from "types";
-import { IProjectPublishSettings } from "store/project-publish";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`
-    )
-      .then((response) => {
-        if (trackEvent) {
-          // trackEventServices.trackProjectPublishSettingsEvent(
-          //   response.data,
-          //   "GET_PROJECT_PUBLISH_SETTINGS",
-          //   user
-          // );
-        }
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async createProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) {
-          //   trackEventServices.trackProjectPublishSettingsEvent(
-          //     response.data,
-          //     "CREATE_PROJECT_PUBLISH_SETTINGS",
-          //     user
-          //   );
-        }
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) {
-          //   trackEventServices.trackProjectPublishSettingsEvent(
-          //     response.data,
-          //     "UPDATE_PROJECT_PUBLISH_SETTINGS",
-          //     user
-          //   );
-        }
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`
-    )
-      .then((response) => {
-        if (trackEvent) {
-          //   trackEventServices.trackProjectPublishSettingsEvent(
-          //     response.data,
-          //     "DELETE_PROJECT_PUBLISH_SETTINGS",
-          //     user
-          //   );
-        }
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default ProjectServices;
diff --git a/apps/app/services/project.service.ts b/apps/app/services/project.service.ts
deleted file mode 100644
index 961333bee57..00000000000
--- a/apps/app/services/project.service.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import type {
-  GithubRepositoriesResponse,
-  ICurrentUserResponse,
-  IProject,
-  IProjectBulkInviteFormData,
-  IProjectMember,
-  IProjectMemberInvitation,
-  ISearchIssueResponse,
-  ProjectPreferences,
-  ProjectViewTheme,
-  TProjectIssuesSearchParams,
-} from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ProjectServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createProject(
-    workspaceSlug: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackProjectEvent(response.data, "CREATE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
-      params: {
-        name: data,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProjects(
-    workspaceSlug: string,
-    params: {
-      is_favorite: "all" | boolean;
-    }
-  ): Promise<IProject[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProject(workspaceSlug: string, projectId: string): Promise<IProject> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteProject(
-    workspaceSlug: string,
-    projectId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async inviteProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: IProjectBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackProjectEvent(
-            {
-              workspaceId: response?.data?.workspace?.id,
-              workspaceSlug,
-              projectId,
-              projectName: response?.data?.project?.name,
-              memberEmail: response?.data?.member?.email,
-            },
-            "PROJECT_MEMBER_INVITE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinProject(workspaceSlug: string, data: any): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinProjects(data: any): Promise<any> {
-    return this.post("/api/users/me/invitations/projects/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMembersWithEmail(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<IProjectMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<IProjectMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string,
-    data: Partial<IProjectMember>
-  ): Promise<IProjectMember> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectInvitations(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectInvitationsWithEmail(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProjectInvitation(
-    workspaceSlug: string,
-    projectId: string,
-    invitationId: string
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteProjectInvitation(
-    workspaceSlug: string,
-    projectId: string,
-    invitationId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async setProjectView(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      view_props?: ProjectViewTheme;
-      default_props?: ProjectViewTheme;
-      preferences?: ProjectPreferences;
-      sort_order?: number;
-    }
-  ): Promise<any> {
-    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
-    return this.getWithoutBase(url)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async syncGithubRepository(
-    workspaceSlug: string,
-    projectId: string,
-    workspaceIntegrationId: string,
-    data: {
-      name: string;
-      owner: string;
-      repository_id: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProjectGithubRepository(
-    workspaceSlug: string,
-    projectId: string,
-    integrationId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addProjectToFavorites(
-    workspaceSlug: string,
-    data: {
-      project: string;
-    }
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectIssuesSearch(
-    workspaceSlug: string,
-    projectId: string,
-    params: TProjectIssuesSearchParams
-  ): Promise<ISearchIssueResponse[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ProjectServices();
diff --git a/apps/app/services/reaction.service.ts b/apps/app/services/reaction.service.ts
deleted file mode 100644
index 3ba8a83e453..00000000000
--- a/apps/app/services/reaction.service.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-// types
-import type {
-  ICurrentUserResponse,
-  IssueReaction,
-  IssueCommentReaction,
-  IssueReactionForm,
-  IssueCommentReactionForm,
-} from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ReactionService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createIssueReaction(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: IssueReactionForm,
-    user?: ICurrentUserResponse
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackReactionEvent(response?.data, "ISSUE_REACTION_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async listIssueReactions(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IssueReaction[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueReaction(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    reaction: string,
-    user?: ICurrentUserResponse
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/${reaction}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackReactionEvent(response?.data, "ISSUE_REACTION_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueCommentReaction(
-    workspaceSlug: string,
-    projectId: string,
-    commentId: string,
-    data: IssueCommentReactionForm,
-    user?: ICurrentUserResponse
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackReactionEvent(
-            response?.data,
-            "ISSUE_COMMENT_REACTION_CREATE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async listIssueCommentReactions(
-    workspaceSlug: string,
-    projectId: string,
-    commentId: string
-  ): Promise<IssueCommentReaction[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueCommentReaction(
-    workspaceSlug: string,
-    projectId: string,
-    commentId: string,
-    reaction: string,
-    user?: ICurrentUserResponse
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/${reaction}/`
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackReactionEvent(
-            response?.data,
-            "ISSUE_COMMENT_REACTION_DELETE",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-const reactionService = new ReactionService();
-
-export default reactionService;
diff --git a/apps/app/services/state.service.ts b/apps/app/services/state.service.ts
deleted file mode 100644
index 52481f8bb31..00000000000
--- a/apps/app/services/state.service.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-// types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
-
-class ProjectStateServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createState(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getStates(workspaceSlug: string, projectId: string): Promise<IStateResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssuesByState(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?group_by=state`)
-
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateState(
-    workspaceSlug: string,
-    projectId: string,
-    stateId: string,
-    data: IState,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async patchState(
-    workspaceSlug: string,
-    projectId: string,
-    stateId: string,
-    data: Partial<IState>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteState(
-    workspaceSlug: string,
-    projectId: string,
-    stateId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackStateEvent(response?.data, "STATE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default new ProjectStateServices();
diff --git a/apps/app/services/track-event.service.ts b/apps/app/services/track-event.service.ts
deleted file mode 100644
index f55a6f36696..00000000000
--- a/apps/app/services/track-event.service.ts
+++ /dev/null
@@ -1,884 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-// types
-import type {
-  ICurrentUserResponse,
-  ICycle,
-  IEstimate,
-  IGptResponse,
-  IIssue,
-  IIssueComment,
-  IModule,
-  IPage,
-  IPageBlock,
-  IProject,
-  IState,
-  IView,
-  IWorkspace,
-  IssueCommentReaction,
-  IssueReaction,
-} from "types";
-
-type WorkspaceEventType =
-  | "CREATE_WORKSPACE"
-  | "UPDATE_WORKSPACE"
-  | "DELETE_WORKSPACE"
-  | "WORKSPACE_USER_INVITE"
-  | "WORKSPACE_USER_INVITE_ACCEPT"
-  | "WORKSPACE_USER_BULK_INVITE_ACCEPT";
-
-type ProjectEventType =
-  | "CREATE_PROJECT"
-  | "UPDATE_PROJECT"
-  | "DELETE_PROJECT"
-  | "PROJECT_MEMBER_INVITE";
-
-type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
-
-type CycleEventType = "CYCLE_CREATE" | "CYCLE_UPDATE" | "CYCLE_DELETE";
-
-type StateEventType = "STATE_CREATE" | "STATE_UPDATE" | "STATE_DELETE";
-
-type ModuleEventType = "MODULE_CREATE" | "MODULE_UPDATE" | "MODULE_DELETE";
-
-type PagesEventType = "PAGE_CREATE" | "PAGE_UPDATE" | "PAGE_DELETE";
-
-type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";
-
-type IssueCommentEventType =
-  | "ISSUE_COMMENT_CREATE"
-  | "ISSUE_COMMENT_UPDATE"
-  | "ISSUE_COMMENT_DELETE";
-
-type Toggle =
-  | "TOGGLE_CYCLE"
-  | "TOGGLE_MODULE"
-  | "TOGGLE_VIEW"
-  | "TOGGLE_PAGES"
-  | "TOGGLE_STATE"
-  | "TOGGLE_INBOX";
-
-export type MiscellaneousEventType = `${Toggle}_ON` | `${Toggle}_OFF`;
-
-type IntegrationEventType = "ADD_WORKSPACE_INTEGRATION" | "REMOVE_WORKSPACE_INTEGRATION";
-
-type GitHubSyncEventType = "GITHUB_REPO_SYNC";
-
-type PageBlocksEventType =
-  | "PAGE_BLOCK_CREATE"
-  | "PAGE_BLOCK_UPDATE"
-  | "PAGE_BLOCK_DELETE"
-  | "PAGE_BLOCK_CONVERTED_TO_ISSUE";
-
-type IssueLabelEventType = "ISSUE_LABEL_CREATE" | "ISSUE_LABEL_UPDATE" | "ISSUE_LABEL_DELETE";
-
-type GptEventType = "ASK_GPT" | "USE_GPT_RESPONSE_IN_ISSUE" | "USE_GPT_RESPONSE_IN_PAGE_BLOCK";
-
-type IssueEstimateEventType = "ESTIMATE_CREATE" | "ESTIMATE_UPDATE" | "ESTIMATE_DELETE";
-
-type InboxEventType =
-  | "INBOX_CREATE"
-  | "INBOX_UPDATE"
-  | "INBOX_DELETE"
-  | "INBOX_ISSUE_CREATE"
-  | "INBOX_ISSUE_UPDATE"
-  | "INBOX_ISSUE_DELETE"
-  | "INBOX_ISSUE_DUPLICATED"
-  | "INBOX_ISSUE_ACCEPTED"
-  | "INBOX_ISSUE_SNOOZED"
-  | "INBOX_ISSUE_REJECTED";
-
-type ImporterEventType =
-  | "GITHUB_IMPORTER_CREATE"
-  | "GITHUB_IMPORTER_DELETE"
-  | "JIRA_IMPORTER_CREATE"
-  | "JIRA_IMPORTER_DELETE";
-
-type ExporterEventType = "CSV_EXPORTER_CREATE";
-
-type AnalyticsEventType =
-  | "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS"
-  | "WORKSPACE_CUSTOM_ANALYTICS"
-  | "WORKSPACE_ANALYTICS_EXPORT"
-  | "PROJECT_SCOPE_AND_DEMAND_ANALYTICS"
-  | "PROJECT_CUSTOM_ANALYTICS"
-  | "PROJECT_ANALYTICS_EXPORT"
-  | "CYCLE_SCOPE_AND_DEMAND_ANALYTICS"
-  | "CYCLE_CUSTOM_ANALYTICS"
-  | "CYCLE_ANALYTICS_EXPORT"
-  | "MODULE_SCOPE_AND_DEMAND_ANALYTICS"
-  | "MODULE_CUSTOM_ANALYTICS"
-  | "MODULE_ANALYTICS_EXPORT";
-
-type ReactionEventType =
-  | "ISSUE_REACTION_CREATE"
-  | "ISSUE_COMMENT_REACTION_CREATE"
-  | "ISSUE_REACTION_DELETE"
-  | "ISSUE_COMMENT_REACTION_DELETE";
-
-class TrackEventServices extends APIService {
-  constructor() {
-    super("/");
-  }
-
-  async trackWorkspaceEvent(
-    data: IWorkspace | any,
-    eventName: WorkspaceEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (
-      eventName !== "DELETE_WORKSPACE" &&
-      eventName !== "WORKSPACE_USER_INVITE" &&
-      eventName !== "WORKSPACE_USER_INVITE_ACCEPT" &&
-      eventName !== "WORKSPACE_USER_BULK_INVITE_ACCEPT"
-    )
-      payload = {
-        workspaceId: data.id,
-        workspaceSlug: data.slug,
-        workspaceName: data.name,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackProjectEvent(
-    data: Partial<IProject> | any,
-    eventName: ProjectEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.id,
-        projectName: data?.name,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackUserOnboardingCompleteEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName: "USER_ONBOARDING_COMPLETE",
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackUserTourCompleteEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName: "USER_TOUR_COMPLETE",
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueEvent(
-    data: IIssue | any,
-    eventName: IssueEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "ISSUE_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        issueId: data?.id,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueMarkedAsDoneEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    if (!trackEvent) return;
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName: "ISSUES_MARKED_AS_DONE",
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssuePartialPropertyUpdateEvent(
-    data: any,
-    propertyName:
-      | "ISSUE_PROPERTY_UPDATE_PRIORITY"
-      | "ISSUE_PROPERTY_UPDATE_STATE"
-      | "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
-      | "ISSUE_PROPERTY_UPDATE_DUE_DATE"
-      | "ISSUE_PROPERTY_UPDATE_ESTIMATE",
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    if (!trackEvent) return;
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName: propertyName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueCommentEvent(
-    data: Partial<IIssueComment> | any,
-    eventName: IssueCommentEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "ISSUE_COMMENT_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        issueId: data?.issue,
-      };
-    else payload = data;
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueMovedToCycleOrModuleEvent(
-    data: any,
-    eventName:
-      | "ISSUE_MOVED_TO_CYCLE"
-      | "ISSUE_MOVED_TO_MODULE"
-      | "ISSUE_MOVED_TO_CYCLE_IN_BULK"
-      | "ISSUE_MOVED_TO_MODULE_IN_BULK",
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueBulkDeleteEvent(data: any, user: ICurrentUserResponse | undefined): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName: "ISSUE_BULK_DELETE",
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueLabelEvent(
-    data: any,
-    eventName: IssueLabelEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackStateEvent(
-    data: IState | any,
-    eventName: StateEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "STATE_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        stateId: data.id,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackCycleEvent(
-    data: ICycle | any,
-    eventName: CycleEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "CYCLE_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        cycleId: data.id,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackModuleEvent(
-    data: IModule | any,
-    eventName: ModuleEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "MODULE_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        moduleId: data.id,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackPageEvent(
-    data: Partial<IPage> | any,
-    eventName: PagesEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "PAGE_DELETE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        pageId: data.id,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackPageBlockEvent(
-    data: Partial<IPageBlock> | IIssue,
-    eventName: PageBlocksEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "PAGE_BLOCK_DELETE" && eventName !== "PAGE_BLOCK_CONVERTED_TO_ISSUE")
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        pageId: (data as IPageBlock)?.page,
-        pageBlockId: data.id,
-      };
-    else if (eventName === "PAGE_BLOCK_CONVERTED_TO_ISSUE") {
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-        issueId: data?.id,
-      };
-    } else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackAskGptEvent(
-    data: IGptResponse,
-    eventName: GptEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    const payload = {
-      workspaceId: data?.workspace_detail?.id,
-      workspaceName: data?.workspace_detail?.name,
-      workspaceSlug: data?.workspace_detail?.slug,
-      projectId: data?.project_detail?.id,
-      projectIdentifier: data?.project_detail?.identifier,
-      projectName: data?.project_detail?.name,
-      count: data?.count,
-    };
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackUseGPTResponseEvent(
-    data: IIssue | IPageBlock,
-    eventName: GptEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    if (!trackEvent) return;
-
-    let payload: any;
-
-    if (eventName === "USE_GPT_RESPONSE_IN_ISSUE") {
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectIdentifier: data?.project_detail?.identifier,
-        projectName: data?.project_detail?.name,
-        issueId: data.id,
-      };
-    } else if (eventName === "USE_GPT_RESPONSE_IN_PAGE_BLOCK") {
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectIdentifier: data?.project_detail?.identifier,
-        projectName: data?.project_detail?.name,
-        pageId: (data as IPageBlock)?.page,
-        pageBlockId: data.id,
-      };
-    }
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackViewEvent(
-    data: IView,
-    eventName: ViewEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName === "VIEW_DELETE") payload = data;
-    else
-      payload = {
-        labels: Boolean(data.query_data.labels),
-        assignees: Boolean(data.query_data.assignees),
-        priority: Boolean(data.query_data.priority),
-        state: Boolean(data.query_data.state),
-        created_by: Boolean(data.query_data.created_by),
-      };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackMiscellaneousEvent(
-    data: any,
-    eventName: MiscellaneousEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackAppIntegrationEvent(
-    data: any,
-    eventName: IntegrationEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackGitHubSyncEvent(
-    data: any,
-    eventName: GitHubSyncEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...data,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackIssueEstimateEvent(
-    data: { estimate: IEstimate },
-    eventName: IssueEstimateEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName === "ESTIMATE_DELETE") payload = data;
-    else
-      payload = {
-        workspaceId: data?.estimate?.workspace_detail?.id,
-        workspaceName: data?.estimate?.workspace_detail?.name,
-        workspaceSlug: data?.estimate?.workspace_detail?.slug,
-        projectId: data?.estimate?.project_detail?.id,
-        projectName: data?.estimate?.project_detail?.name,
-        projectIdentifier: data?.estimate?.project_detail?.identifier,
-        estimateId: data.estimate?.id,
-      };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackImporterEvent(
-    data: any,
-    eventName: ImporterEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName === "GITHUB_IMPORTER_DELETE" || eventName === "JIRA_IMPORTER_DELETE")
-      payload = data;
-    else
-      payload = {
-        workspaceId: data?.workspace_detail?.id,
-        workspaceName: data?.workspace_detail?.name,
-        workspaceSlug: data?.workspace_detail?.slug,
-        projectId: data?.project_detail?.id,
-        projectName: data?.project_detail?.name,
-        projectIdentifier: data?.project_detail?.identifier,
-      };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackAnalyticsEvent(
-    data: any,
-    eventName: AnalyticsEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    const payload = { ...data };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: payload,
-        user: user,
-      },
-    });
-  }
-
-  // track exporter function\
-  async trackExporterEvent(
-    data: any,
-    eventName: ExporterEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    const payload = { ...data };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  // TODO: add types to the data
-  async trackInboxEvent(
-    data: any,
-    eventName: InboxEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName !== "INBOX_DELETE")
-      payload = {
-        issue: data?.issue?.id,
-        inbox: data?.id,
-        workspaceId: data?.issue?.workspace_detail?.id,
-        workspaceName: data?.issue?.workspace_detail?.name,
-        workspaceSlug: data?.issue?.workspace_detail?.slug,
-        projectId: data?.issue?.project_detail?.id,
-        projectName: data?.issue?.project_detail?.name,
-      };
-    else payload = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: {
-          ...payload,
-        },
-        user: user,
-      },
-    });
-  }
-
-  async trackReactionEvent(
-    data: IssueReaction | IssueCommentReaction,
-    eventName: ReactionEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    let payload: any;
-    if (eventName === "ISSUE_REACTION_DELETE" || eventName === "ISSUE_COMMENT_REACTION_DELETE")
-      payload = data;
-    else
-      payload = {
-        workspaceId: data?.workspace,
-        projectId: data?.project,
-        reaction: data?.reaction,
-      };
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: payload,
-        user: user,
-      },
-    });
-  }
-
-  // project publish settings track events starts
-  async trackProjectPublishSettingsEvent(
-    data: any,
-    eventName: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    const payload: any = data;
-
-    return this.request({
-      url: "/api/track-event",
-      method: "POST",
-      data: {
-        eventName,
-        extra: payload,
-        user: user,
-      },
-    });
-  }
-
-  // project publish settings track events ends
-}
-
-const trackEventServices = new TrackEventServices();
-
-export default trackEventServices;
diff --git a/apps/app/services/user.service.ts b/apps/app/services/user.service.ts
deleted file mode 100644
index 0e5def647bd..00000000000
--- a/apps/app/services/user.service.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-import type {
-  ICurrentUserResponse,
-  IIssue,
-  IUser,
-  IUserActivityResponse,
-  IUserProfileData,
-  IUserProfileProjectSegregation,
-  IUserWorkspaceDashboard,
-} from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class UserService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  currentUserConfig() {
-    return {
-      url: `${this.baseURL}/api/users/me/`,
-      headers: this.getHeaders(),
-    };
-  }
-
-  async userIssues(
-    workspaceSlug: string,
-    params: any
-  ): Promise<
-    | {
-        [key: string]: IIssue[];
-      }
-    | IIssue[]
-  > {
-    return this.get(`/api/workspaces/${workspaceSlug}/my-issues/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async currentUser(): Promise<ICurrentUserResponse> {
-    return this.get("/api/users/me/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateUser(data: Partial<IUser>): Promise<any> {
-    return this.patch("/api/users/me/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateUserOnBoard({ userRole }: any, user: ICurrentUserResponse | undefined): Promise<any> {
-    return this.patch("/api/users/me/onboard/", {
-      is_onboarded: true,
-    })
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackUserOnboardingCompleteEvent(
-            {
-              user_role: userRole ?? "None",
-            },
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateUserTourCompleted(user: ICurrentUserResponse): Promise<any> {
-    return this.patch("/api/users/me/tour-completed/", {
-      is_tour_completed: true,
-    })
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackUserTourCompleteEvent(
-            {
-              user_role: user.role ?? "None",
-            },
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserWorkspaceActivity(workspaceSlug: string): Promise<IUserActivityResponse> {
-    return this.get(`/api/users/workspaces/${workspaceSlug}/activities/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async userWorkspaceDashboard(
-    workspaceSlug: string,
-    month: number
-  ): Promise<IUserWorkspaceDashboard> {
-    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, {
-      params: {
-        month: month,
-      },
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async forgotPassword(data: { email: string }): Promise<any> {
-    return this.post(`/api/forgot-password/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async resetPassword(
-    uidb64: string,
-    token: string,
-    data: {
-      new_password: string;
-      confirm_password: string;
-    }
-  ): Promise<any> {
-    return this.post(`/api/reset-password/${uidb64}/${token}/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserProfileData(workspaceSlug: string, userId: string): Promise<IUserProfileData> {
-    return this.get(`/api/workspaces/${workspaceSlug}/user-stats/${userId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserProfileProjectsSegregation(
-    workspaceSlug: string,
-    userId: string
-  ): Promise<IUserProfileProjectSegregation> {
-    return this.get(`/api/workspaces/${workspaceSlug}/user-profile/${userId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserProfileActivity(
-    workspaceSlug: string,
-    userId: string
-  ): Promise<IUserActivityResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/?per_page=15`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getUserProfileIssues(
-    workspaceSlug: string,
-    userId: string,
-    params: any
-  ): Promise<
-    | {
-        [key: string]: IIssue[];
-      }
-    | IIssue[]
-  > {
-    return this.get(`/api/workspaces/${workspaceSlug}/user-issues/${userId}/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new UserService();
diff --git a/apps/app/services/views.service.ts b/apps/app/services/views.service.ts
deleted file mode 100644
index e1d25925ed7..00000000000
--- a/apps/app/services/views.service.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-import { ICurrentUserResponse } from "types";
-
-// types
-import { IView } from "types/views";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class ViewServices extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async createView(
-    workspaceSlug: string,
-    projectId: string,
-    data: IView,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    data: IView,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    data: Partial<IView>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackViewEvent(response?.data, "VIEW_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViews(workspaceSlug: string, projectId: string): Promise<IView[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IView> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addViewToFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      view: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeViewFromFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ViewServices();
diff --git a/apps/app/services/web-waitlist.service.ts b/apps/app/services/web-waitlist.service.ts
deleted file mode 100644
index b56906bbaed..00000000000
--- a/apps/app/services/web-waitlist.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-// types
-import { IWebWaitListResponse } from "types";
-
-class WebWailtListServices extends APIService {
-  constructor() {
-    const origin = typeof window !== "undefined" ? window.location.origin || "" : "";
-    super(origin);
-  }
-
-  async create({ email }: { email: string }): Promise<IWebWaitListResponse> {
-    return this.post(`/api/web-waitlist`, { email: email })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default new WebWailtListServices();
diff --git a/apps/app/services/workspace.service.ts b/apps/app/services/workspace.service.ts
deleted file mode 100644
index 8097253e634..00000000000
--- a/apps/app/services/workspace.service.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-// types
-import {
-  IWorkspace,
-  IWorkspaceMember,
-  IWorkspaceMemberInvitation,
-  ILastActiveWorkspaceDetails,
-  IWorkspaceSearchResults,
-  IProductUpdateResponse,
-  ICurrentUserResponse,
-  IWorkspaceBulkInviteFormData,
-  IWorkspaceViewProps,
-} from "types";
-
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
-
-class WorkspaceService extends APIService {
-  constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async userWorkspaces(): Promise<IWorkspace[]> {
-    return this.get("/api/users/me/workspaces/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getWorkspace(workspaceSlug: string): Promise<IWorkspace> {
-    return this.get(`/api/workspaces/${workspaceSlug}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async createWorkspace(
-    data: Partial<IWorkspace>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IWorkspace> {
-    return this.post("/api/workspaces/", data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackWorkspaceEvent(response.data, "CREATE_WORKSPACE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateWorkspace(
-    workspaceSlug: string,
-    data: Partial<IWorkspace>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IWorkspace> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackWorkspaceEvent(response.data, "UPDATE_WORKSPACE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteWorkspace(
-    workspaceSlug: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/`)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackWorkspaceEvent({ workspaceSlug }, "DELETE_WORKSPACE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async inviteWorkspace(
-    workspaceSlug: string,
-    data: IWorkspaceBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinWorkspace(
-    workspaceSlug: string,
-    invitationId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`,
-      data,
-      {
-        headers: {},
-      }
-    )
-      .then((response) => {
-        if (trackEvent)
-          trackEventServices.trackWorkspaceEvent(
-            response.data,
-            "WORKSPACE_USER_INVITE_ACCEPT",
-            user
-          );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async joinWorkspaces(data: any): Promise<any> {
-    return this.post("/api/users/me/invitations/workspaces/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
-    return this.get("/api/users/last-visited-workspace/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get("/api/users/me/invitations/workspaces/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceMembersWithEmail(workspaceSlug: string): Promise<IWorkspaceMember[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateWorkspaceView(
-    workspaceSlug: string,
-    data: { view_props: IWorkspaceViewProps }
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/workspace-views/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateWorkspaceMember(
-    workspaceSlug: string,
-    memberId: string,
-    data: Partial<IWorkspaceMember>
-  ): Promise<IWorkspaceMember> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/members/${memberId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceInvitationsWithEmail(
-    workspaceSlug: string
-  ): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
-    return this.get(`/api/users/me/invitations/${invitationId}/`, { headers: {} })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async workspaceSlugCheck(slug: string): Promise<any> {
-    return this.get(`/api/workspace-slug-check/?slug=${slug}`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async searchWorkspace(
-    workspaceSlug: string,
-    params: {
-      project_id?: string;
-      search: string;
-      workspace_search: boolean;
-    }
-  ): Promise<IWorkspaceSearchResults> {
-    return this.get(`/api/workspaces/${workspaceSlug}/search/`, {
-      params,
-    })
-      .then((res) => res?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async getProductUpdates(): Promise<IProductUpdateResponse[]> {
-    return this.get("/api/release-notes/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new WorkspaceService();
diff --git a/apps/app/store/issues.ts b/apps/app/store/issues.ts
deleted file mode 100644
index 538c5e2a9a2..00000000000
--- a/apps/app/store/issues.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-// mobx
-import { action, observable, runInAction, makeAutoObservable } from "mobx";
-// services
-import issueService from "services/issues.service";
-// types
-import type { ICurrentUserResponse, IIssue } from "types";
-
-class IssuesStore {
-  issues: { [key: string]: IIssue } = {};
-  isIssuesLoading: boolean = false;
-  rootStore: any | null = null;
-
-  constructor(_rootStore: any | null = null) {
-    makeAutoObservable(this, {
-      issues: observable.ref,
-      loadIssues: action,
-      getIssueById: action,
-      isIssuesLoading: observable,
-      createIssue: action,
-      updateIssue: action,
-      deleteIssue: action,
-    });
-
-    this.rootStore = _rootStore;
-  }
-
-  /**
-   * @description Fetch all issues of a project and hydrate issues field
-   */
-
-  loadIssues = async (workspaceSlug: string, projectId: string) => {
-    this.isIssuesLoading = true;
-    try {
-      const issuesResponse: IIssue[] = (await issueService.getIssuesWithParams(
-        workspaceSlug,
-        projectId
-      )) as IIssue[];
-
-      const issues: { [kye: string]: IIssue } = {};
-      issuesResponse.forEach((issue) => {
-        issues[issue.id] = issue;
-      });
-
-      runInAction(() => {
-        this.issues = issues;
-        this.isIssuesLoading = false;
-      });
-    } catch (error) {
-      this.isIssuesLoading = false;
-      console.error("Fetching issues error", error);
-    }
-  };
-
-  getIssueById = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IIssue> => {
-    if (this.issues[issueId]) return this.issues[issueId];
-
-    try {
-      const issueResponse: IIssue = await issueService.retrieve(workspaceSlug, projectId, issueId);
-
-      const issues = {
-        ...this.issues,
-        [issueId]: { ...issueResponse },
-      };
-
-      runInAction(() => {
-        this.issues = issues;
-      });
-
-      return issueResponse;
-    } catch (error) {
-      throw error;
-    }
-  };
-
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueForm: IIssue,
-    user: ICurrentUserResponse
-  ): Promise<IIssue> => {
-    try {
-      const issueResponse = await issueService.createIssues(
-        workspaceSlug,
-        projectId,
-        issueForm,
-        user
-      );
-
-      const issues = {
-        ...this.issues,
-        [issueResponse.id]: { ...issueResponse },
-      };
-
-      runInAction(() => {
-        this.issues = issues;
-      });
-      return issueResponse;
-    } catch (error) {
-      console.error("Creating issue error", error);
-      throw error;
-    }
-  };
-
-  updateIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    issueForm: Partial<IIssue>,
-    user: ICurrentUserResponse
-  ) => {
-    // keep a copy of the issue in the store
-    const originalIssue = { ...this.issues[issueId] };
-
-    // immediately update the issue in the store
-    const updatedIssue = { ...originalIssue, ...issueForm };
-
-    try {
-      runInAction(() => {
-        this.issues[issueId] = updatedIssue;
-      });
-
-      // make a patch request to update the issue
-      const issueResponse: IIssue = await issueService.patchIssue(
-        workspaceSlug,
-        projectId,
-        issueId,
-        issueForm,
-        user
-      );
-
-      const updatedIssues = { ...this.issues };
-      updatedIssues[issueId] = { ...issueResponse };
-
-      runInAction(() => {
-        this.issues = updatedIssues;
-      });
-    } catch (error) {
-      // if there is an error, revert the changes
-      runInAction(() => {
-        this.issues[issueId] = originalIssue;
-      });
-
-      return error;
-    }
-  };
-
-  deleteIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    user: ICurrentUserResponse
-  ) => {
-    const issues = { ...this.issues };
-    delete issues[issueId];
-
-    try {
-      runInAction(() => {
-        this.issues = issues;
-      });
-
-      issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
-    } catch (error) {
-      console.error("Deleting issue error", error);
-    }
-  };
-}
-
-export default IssuesStore;
diff --git a/apps/app/store/project-publish.tsx b/apps/app/store/project-publish.tsx
deleted file mode 100644
index 1b27d5fff9c..00000000000
--- a/apps/app/store/project-publish.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// types
-import { RootStore } from "./root";
-// services
-import ProjectServices from "services/project-publish.service";
-
-export type IProjectPublishSettingsViewKeys =
-  | "list"
-  | "gantt"
-  | "kanban"
-  | "calendar"
-  | "spreadsheet"
-  | string;
-
-export interface IProjectPublishSettingsViews {
-  list: boolean;
-  gantt: boolean;
-  kanban: boolean;
-  calendar: boolean;
-  spreadsheet: boolean;
-}
-
-export interface IProjectPublishSettings {
-  id?: string;
-  project?: string;
-  comments: boolean;
-  reactions: boolean;
-  votes: boolean;
-  views: IProjectPublishSettingsViews;
-  inbox: null;
-}
-
-export interface IProjectPublishStore {
-  loader: boolean;
-  error: any | null;
-
-  projectPublishModal: boolean;
-  project_id: string | null;
-  projectPublishSettings: IProjectPublishSettings | "not-initialized";
-
-  handleProjectModal: (project_id: string | null) => void;
-
-  getProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    user: any
-  ) => Promise<void>;
-  createProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
-  updateProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => Promise<void>;
-  deleteProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
-  ) => Promise<void>;
-}
-
-class ProjectPublishStore implements IProjectPublishStore {
-  loader: boolean = false;
-  error: any | null = null;
-
-  projectPublishModal: boolean = false;
-  project_id: string | null = null;
-  projectPublishSettings: IProjectPublishSettings | "not-initialized" = "not-initialized";
-
-  // root store
-  rootStore;
-  // service
-  projectPublishService;
-
-  constructor(_rootStore: RootStore) {
-    makeObservable(this, {
-      // observable
-      loader: observable,
-      error: observable,
-
-      projectPublishModal: observable,
-      project_id: observable,
-      projectPublishSettings: observable.ref,
-      // action
-      handleProjectModal: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-    this.projectPublishService = new ProjectServices();
-  }
-
-  handleProjectModal = (project_id: string | null = null) => {
-    if (project_id) {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = project_id;
-    } else {
-      this.projectPublishModal = !this.projectPublishModal;
-      this.project_id = null;
-      this.projectPublishSettings = "not-initialized";
-    }
-  };
-
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectPublishService.getProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        user
-      );
-
-      if (response && response.length > 0) {
-        const _projectPublishSettings: IProjectPublishSettings = {
-          id: response[0]?.id,
-          comments: response[0]?.comments,
-          reactions: response[0]?.reactions,
-          votes: response[0]?.votes,
-          views: {
-            list: response[0]?.views?.list || false,
-            kanban: response[0]?.views?.kanban || false,
-            calendar: response[0]?.views?.calendar || false,
-            gantt: response[0]?.views?.gantt || false,
-            spreadsheet: response[0]?.views?.spreadsheet || false,
-          },
-          inbox: response[0]?.inbox || null,
-          project: response[0]?.project || null,
-        };
-
-        runInAction(() => {
-          this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
-          this.error = null;
-        });
-      } else {
-        this.projectPublishSettings = "not-initialized";
-        this.loader = false;
-        this.error = null;
-      }
-      return response;
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-
-  createProjectSettingsAsync = async (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectPublishService.createProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        data,
-        user
-      );
-
-      if (response) {
-        const _projectPublishSettings: IProjectPublishSettings = {
-          id: response?.id || null,
-          comments: response?.comments || false,
-          reactions: response?.reactions || false,
-          votes: response?.votes || false,
-          views: { ...response?.views },
-          inbox: response?.inbox || null,
-          project: response?.project || null,
-        };
-
-        runInAction(() => {
-          this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
-          this.error = null;
-        });
-
-        return response;
-      }
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-
-  updateProjectSettingsAsync = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectPublishService.updateProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id,
-        data,
-        user
-      );
-
-      if (response) {
-        const _projectPublishSettings: IProjectPublishSettings = {
-          id: response?.id || null,
-          comments: response?.comments || false,
-          reactions: response?.reactions || false,
-          votes: response?.votes || false,
-          views: { ...response?.views },
-          inbox: response?.inbox || null,
-          project: response?.project || null,
-        };
-
-        runInAction(() => {
-          this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
-          this.error = null;
-        });
-
-        return response;
-      }
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-
-  deleteProjectSettingsAsync = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
-  ) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectPublishService.deleteProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        project_publish_id,
-        user
-      );
-
-      runInAction(() => {
-        this.projectPublishSettings = "not-initialized";
-        this.loader = false;
-        this.error = null;
-      });
-
-      return response;
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-}
-
-export default ProjectPublishStore;
diff --git a/apps/app/store/root.ts b/apps/app/store/root.ts
deleted file mode 100644
index 40dd62fe6d2..00000000000
--- a/apps/app/store/root.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// mobx lite
-import { enableStaticRendering } from "mobx-react-lite";
-// store imports
-import UserStore from "./user";
-import ThemeStore from "./theme";
-import IssuesStore from "./issues";
-import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
-
-enableStaticRendering(typeof window === "undefined");
-
-export class RootStore {
-  user;
-  theme;
-  projectPublish: IProjectPublishStore;
-  issues: IssuesStore;
-
-  constructor() {
-    this.user = new UserStore(this);
-    this.theme = new ThemeStore(this);
-    this.projectPublish = new ProjectPublishStore(this);
-    this.issues = new IssuesStore(this);
-  }
-}
diff --git a/apps/app/store/theme.ts b/apps/app/store/theme.ts
deleted file mode 100644
index ecd02ec97be..00000000000
--- a/apps/app/store/theme.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// mobx
-import { action, observable, makeObservable } from "mobx";
-// helper
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-// interfaces
-import { ICurrentUserSettings } from "types";
-
-class ThemeStore {
-  sidebarCollapsed: boolean | null = null;
-  theme: string | null = null;
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any | null = null) {
-    makeObservable(this, {
-      // observable
-      sidebarCollapsed: observable,
-      theme: observable,
-      // action
-      setSidebarCollapsed: action,
-      setTheme: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-    this.initialLoad();
-  }
-
-  setSidebarCollapsed(collapsed: boolean | null = null) {
-    if (collapsed === null) {
-      let _sidebarCollapsed: string | boolean | null =
-        localStorage.getItem("app_sidebar_collapsed");
-      _sidebarCollapsed = _sidebarCollapsed ? (_sidebarCollapsed === "true" ? true : false) : false;
-      this.sidebarCollapsed = _sidebarCollapsed;
-    } else {
-      this.sidebarCollapsed = collapsed;
-      localStorage.setItem("app_sidebar_collapsed", collapsed.toString());
-    }
-  }
-
-  setTheme = async (_theme: { theme: ICurrentUserSettings }) => {
-    try {
-      const currentTheme: string = _theme.theme.theme.toString();
-
-      // updating the local storage theme value
-      localStorage.setItem("theme", currentTheme);
-      // updating the mobx theme value
-      this.theme = currentTheme;
-
-      // applying the theme to platform if the selected theme is custom
-      if (currentTheme === "custom") {
-        const themeSettings = this.rootStore.user.currentUserSettings || null;
-        applyTheme(
-          themeSettings?.theme?.palette !== ",,,,"
-            ? themeSettings?.theme?.palette
-            : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          themeSettings?.theme?.darkPalette
-        );
-      } else unsetCustomCssVariables();
-    } catch (error) {
-      console.error("setting user theme error", error);
-    }
-  };
-
-  // init load
-  initialLoad() {}
-}
-
-export default ThemeStore;
diff --git a/apps/app/store/user.ts b/apps/app/store/user.ts
deleted file mode 100644
index 28dd3b8d25a..00000000000
--- a/apps/app/store/user.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// mobx
-import { action, observable, computed, runInAction, makeObservable } from "mobx";
-// services
-import UserService from "services/user.service";
-// interfaces
-import { ICurrentUser, ICurrentUserSettings } from "types/users";
-
-class UserStore {
-  currentUser: ICurrentUser | null = null;
-  currentUserSettings: ICurrentUserSettings | null = null;
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any) {
-    makeObservable(this, {
-      // observable
-      currentUser: observable.ref,
-      currentUserSettings: observable.ref,
-      // action
-      setCurrentUser: action,
-      setCurrentUserSettings: action,
-      updateCurrentUser: action,
-      updateCurrentUserSettings: action,
-      // computed
-    });
-    this.rootStore = _rootStore;
-    this.initialLoad();
-  }
-
-  setCurrentUser = async () => {
-    try {
-      let userResponse: ICurrentUser | null = await UserService.currentUser();
-      userResponse = userResponse || null;
-
-      if (userResponse) {
-        const userPayload: ICurrentUser = {
-          id: userResponse?.id,
-          avatar: userResponse?.avatar,
-          first_name: userResponse?.first_name,
-          last_name: userResponse?.last_name,
-          username: userResponse?.username,
-          email: userResponse?.email,
-          mobile_number: userResponse?.mobile_number,
-          is_email_verified: userResponse?.is_email_verified,
-          is_tour_completed: userResponse?.is_tour_completed,
-          onboarding_step: userResponse?.onboarding_step,
-          is_onboarded: userResponse?.is_onboarded,
-          role: userResponse?.role,
-        };
-        runInAction(() => {
-          this.currentUser = userPayload;
-        });
-      }
-    } catch (error) {
-      console.error("Fetching current user error", error);
-    }
-  };
-
-  setCurrentUserSettings = async () => {
-    try {
-      let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
-      userSettingsResponse = userSettingsResponse || null;
-
-      if (userSettingsResponse) {
-        const themePayload = {
-          theme: { ...userSettingsResponse?.theme },
-        };
-        runInAction(() => {
-          this.currentUserSettings = themePayload;
-          this.rootStore.theme.setTheme(themePayload);
-        });
-      }
-    } catch (error) {
-      console.error("Fetching current user error", error);
-    }
-  };
-
-  updateCurrentUser = async (user: ICurrentUser) => {
-    try {
-      let userResponse: ICurrentUser = await UserService.updateUser(user);
-      userResponse = userResponse || null;
-
-      if (userResponse) {
-        const userPayload: ICurrentUser = {
-          id: userResponse?.id,
-          avatar: userResponse?.avatar,
-          first_name: userResponse?.first_name,
-          last_name: userResponse?.last_name,
-          username: userResponse?.username,
-          email: userResponse?.email,
-          mobile_number: userResponse?.mobile_number,
-          is_email_verified: userResponse?.is_email_verified,
-          is_tour_completed: userResponse?.is_tour_completed,
-          onboarding_step: userResponse?.onboarding_step,
-          is_onboarded: userResponse?.is_onboarded,
-          role: userResponse?.role,
-        };
-        runInAction(() => {
-          this.currentUser = userPayload;
-        });
-        return userPayload;
-      }
-    } catch (error) {
-      console.error("Updating user error", error);
-      return error;
-    }
-  };
-
-  updateCurrentUserSettings = async (userTheme: ICurrentUserSettings) => {
-    try {
-      let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
-      userSettingsResponse = userSettingsResponse || null;
-      if (userSettingsResponse) {
-        const themePayload = {
-          theme: { ...userSettingsResponse?.theme },
-        };
-        runInAction(() => {
-          this.currentUserSettings = themePayload;
-          this.rootStore.theme.setTheme(themePayload);
-        });
-        return themePayload;
-      }
-    } catch (error) {
-      console.error("Updating user settings error", error);
-      return error;
-    }
-  };
-
-  // init load
-  initialLoad() {}
-}
-
-export default UserStore;
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
deleted file mode 100644
index 57c23c911b5..00000000000
--- a/apps/app/styles/editor.css
+++ /dev/null
@@ -1,152 +0,0 @@
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: rgb(var(--color-text-400));
-  pointer-events: none;
-  height: 0;
-}
-
-.ProseMirror .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: rgb(var(--color-text-400));
-  pointer-events: none;
-  height: 0;
-}
-
-/* Custom image styles */
-
-.ProseMirror img {
-  transition: filter 0.1s ease-in-out;
-
-  &:hover {
-    cursor: pointer;
-    filter: brightness(90%);
-  }
-
-  &.ProseMirror-selectednode {
-    outline: 3px solid #5abbf7;
-    filter: brightness(90%);
-  }
-}
-
-/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
-
-ul[data-type="taskList"] li > label {
-  margin-right: 0.2rem;
-  user-select: none;
-}
-
-@media screen and (max-width: 768px) {
-  ul[data-type="taskList"] li > label {
-    margin-right: 0.5rem;
-  }
-}
-
-ul[data-type="taskList"] li > label input[type="checkbox"] {
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: rgb(var(--color-background-100));
-  margin: 0;
-  cursor: pointer;
-  width: 1.2rem;
-  height: 1.2rem;
-  position: relative;
-  border: 2px solid rgb(var(--color-text-100));
-  margin-right: 0.3rem;
-  display: grid;
-  place-content: center;
-
-  &:hover {
-    background-color: rgb(var(--color-background-80));
-  }
-
-  &:active {
-    background-color: rgb(var(--color-background-90));
-  }
-
-  &::before {
-    content: "";
-    width: 0.65em;
-    height: 0.65em;
-    transform: scale(0);
-    transition: 120ms transform ease-in-out;
-    box-shadow: inset 1em 1em;
-    transform-origin: center;
-    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  }
-
-  &:checked::before {
-    transform: scale(1);
-  }
-}
-
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
-  color: rgb(var(--color-text-200));
-  text-decoration: line-through;
-  text-decoration-thickness: 2px;
-}
-
-/* Overwrite tippy-box original max-width */
-
-.tippy-box {
-  max-width: 400px !important;
-}
-
-.ProseMirror {
-  position: relative;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-  outline: none;
-  cursor: text;
-  line-height: 1.2;
-  font-family: inherit;
-  font-size: 14px;
-  color: inherit;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  appearance: textfield;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.fadeIn {
-  opacity: 1;
-  transition: opacity 0.3s ease-in;
-}
-
-.fadeOut {
-  opacity: 0;
-  transition: opacity 0.2s ease-out;
-}
-
-.img-placeholder {
-  position: relative;
-  width: 35%;
-
-  &:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 45%;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 3px solid rgba(var(--color-text-200));
-    border-top-color: rgba(var(--color-text-800)); 
-    animation: spinning 0.6s linear infinite;
-  }
-}
-
-@keyframes spinning {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
deleted file mode 100644
index cdb67cbc5f7..00000000000
--- a/apps/app/styles/globals.css
+++ /dev/null
@@ -1,357 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 250, 250, 250; /* secondary bg */
-    --color-background-80: 245, 245, 245; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
-      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 12px 24px 0px rgba(16, 24, 40, 0.12), 0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 250, 250, 250; /* secondary bg */
-    --color-background-80: 245, 245, 245; /* tertiary bg */
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-background-100: 7, 7, 7; /* primary bg */
-    --color-background-90: 11, 11, 11; /* secondary bg */
-    --color-background-80: 23, 23, 23; /* tertiary bg */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-.horizontal-scroll-enable {
-  overflow-x: scroll;
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar {
-  display: block;
-  height: 7px;
-  width: 0;
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar-track {
-  height: 7px;
-  background-color: rgba(var(--color-background-100));
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-80));
-}
-
-.vertical-scroll-enable::-webkit-scrollbar {
-  display: block;
-  width: 5px;
-}
-
-.vertical-scroll-enable::-webkit-scrollbar-track {
-  width: 5px;
-}
-
-.vertical-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-90));
-}
-/* end scrollbar style */
-
-.tags-input-container {
-  border: 2px solid #000;
-  padding: 0.5em;
-  border-radius: 3px;
-  width: min(80vw, 600px);
-  margin-top: 1em;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-.tag-item {
-  background-color: rgb(218, 216, 216);
-  display: inline-block;
-  padding: 0.5em 0.75em;
-  border-radius: 20px;
-}
-.tag-item .close {
-  height: 20px;
-  width: 20px;
-  background-color: rgb(48, 48, 48);
-  color: #fff;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0.5em;
-  font-size: 18px;
-  cursor: pointer;
-}
-
-.tags-input {
-  flex-grow: 1;
-  padding: 0.5em 0;
-  border: none;
-  outline: none;
-}
-
-/* emoji icon picker */
-.conical-gradient {
-  background: conic-gradient(
-    from 180deg at 50% 50%,
-    #ff6b00 0deg,
-    #f7ae59 70.5deg,
-    #3f76ff 151.12deg,
-    #05c3ff 213deg,
-    #18914f 289.87deg,
-    #f6f172 329.25deg,
-    #ff6b00 360deg
-  );
-}
-
-/* progress bar */
-.progress-bar {
-  fill: currentColor;
-  color: rgba(var(--color-sidebar-background-100));
-}
-
-/* lineclamp */
-.lineclamp {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-/* popover2 styling */
-.bp4-popover2-transition-container {
-  z-index: 1 !important;
-}
-
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
-}
-
-.bp4-overlay-content {
-  z-index: 555 !important;
-}
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
deleted file mode 100644
index 0b7b5861aeb..00000000000
--- a/apps/app/tailwind.config.js
+++ /dev/null
@@ -1,206 +0,0 @@
-const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
-
-module.exports = {
-  darkMode: "class",
-  content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
-  theme: {
-    extend: {
-      boxShadow: {
-        "custom-shadow-2xs": "var(--color-shadow-2xs)",
-        "custom-shadow-xs": "var(--color-shadow-xs)",
-        "custom-shadow-sm": "var(--color-shadow-sm)",
-        "custom-shadow-rg": "var(--color-shadow-rg)",
-        "custom-shadow-md": "var(--color-shadow-md)",
-        "custom-shadow-lg": "var(--color-shadow-lg)",
-        "custom-shadow-xl": "var(--color-shadow-xl)",
-        "custom-shadow-2xl": "var(--color-shadow-2xl)",
-        "custom-shadow-3xl": "var(--color-shadow-3xl)",
-        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
-        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
-        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
-        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
-        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
-        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
-        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
-        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
-        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
-      },
-      colors: {
-        custom: {
-          primary: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-primary-10"),
-            20: convertToRGB("--color-primary-20"),
-            30: convertToRGB("--color-primary-30"),
-            40: convertToRGB("--color-primary-40"),
-            50: convertToRGB("--color-primary-50"),
-            60: convertToRGB("--color-primary-60"),
-            70: convertToRGB("--color-primary-70"),
-            80: convertToRGB("--color-primary-80"),
-            90: convertToRGB("--color-primary-90"),
-            100: convertToRGB("--color-primary-100"),
-            200: convertToRGB("--color-primary-200"),
-            300: convertToRGB("--color-primary-300"),
-            400: convertToRGB("--color-primary-400"),
-            500: convertToRGB("--color-primary-500"),
-            600: convertToRGB("--color-primary-600"),
-            700: convertToRGB("--color-primary-700"),
-            800: convertToRGB("--color-primary-800"),
-            900: convertToRGB("--color-primary-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-primary-100"),
-          },
-          background: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-background-10"),
-            20: convertToRGB("--color-background-20"),
-            30: convertToRGB("--color-background-30"),
-            40: convertToRGB("--color-background-40"),
-            50: convertToRGB("--color-background-50"),
-            60: convertToRGB("--color-background-60"),
-            70: convertToRGB("--color-background-70"),
-            80: convertToRGB("--color-background-80"),
-            90: convertToRGB("--color-background-90"),
-            100: convertToRGB("--color-background-100"),
-            200: convertToRGB("--color-background-200"),
-            300: convertToRGB("--color-background-300"),
-            400: convertToRGB("--color-background-400"),
-            500: convertToRGB("--color-background-500"),
-            600: convertToRGB("--color-background-600"),
-            700: convertToRGB("--color-background-700"),
-            800: convertToRGB("--color-background-800"),
-            900: convertToRGB("--color-background-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-background-100"),
-          },
-          text: {
-            0: "rgb(255, 255, 255)",
-            10: convertToRGB("--color-text-10"),
-            20: convertToRGB("--color-text-20"),
-            30: convertToRGB("--color-text-30"),
-            40: convertToRGB("--color-text-40"),
-            50: convertToRGB("--color-text-50"),
-            60: convertToRGB("--color-text-60"),
-            70: convertToRGB("--color-text-70"),
-            80: convertToRGB("--color-text-80"),
-            90: convertToRGB("--color-text-90"),
-            100: convertToRGB("--color-text-100"),
-            200: convertToRGB("--color-text-200"),
-            300: convertToRGB("--color-text-300"),
-            400: convertToRGB("--color-text-400"),
-            500: convertToRGB("--color-text-500"),
-            600: convertToRGB("--color-text-600"),
-            700: convertToRGB("--color-text-700"),
-            800: convertToRGB("--color-text-800"),
-            900: convertToRGB("--color-text-900"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-text-100"),
-          },
-          border: {
-            0: "rgb(255, 255, 255)",
-            100: convertToRGB("--color-border-100"),
-            200: convertToRGB("--color-border-200"),
-            300: convertToRGB("--color-border-300"),
-            400: convertToRGB("--color-border-400"),
-            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-border-200"),
-          },
-          sidebar: {
-            background: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-background-10"),
-              20: convertToRGB("--color-sidebar-background-20"),
-              30: convertToRGB("--color-sidebar-background-30"),
-              40: convertToRGB("--color-sidebar-background-40"),
-              50: convertToRGB("--color-sidebar-background-50"),
-              60: convertToRGB("--color-sidebar-background-60"),
-              70: convertToRGB("--color-sidebar-background-70"),
-              80: convertToRGB("--color-sidebar-background-80"),
-              90: convertToRGB("--color-sidebar-background-90"),
-              100: convertToRGB("--color-sidebar-background-100"),
-              200: convertToRGB("--color-sidebar-background-200"),
-              300: convertToRGB("--color-sidebar-background-300"),
-              400: convertToRGB("--color-sidebar-background-400"),
-              500: convertToRGB("--color-sidebar-background-500"),
-              600: convertToRGB("--color-sidebar-background-600"),
-              700: convertToRGB("--color-sidebar-background-700"),
-              800: convertToRGB("--color-sidebar-background-800"),
-              900: convertToRGB("--color-sidebar-background-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-background-100"),
-            },
-            text: {
-              0: "rgb(255, 255, 255)",
-              10: convertToRGB("--color-sidebar-text-10"),
-              20: convertToRGB("--color-sidebar-text-20"),
-              30: convertToRGB("--color-sidebar-text-30"),
-              40: convertToRGB("--color-sidebar-text-40"),
-              50: convertToRGB("--color-sidebar-text-50"),
-              60: convertToRGB("--color-sidebar-text-60"),
-              70: convertToRGB("--color-sidebar-text-70"),
-              80: convertToRGB("--color-sidebar-text-80"),
-              90: convertToRGB("--color-sidebar-text-90"),
-              100: convertToRGB("--color-sidebar-text-100"),
-              200: convertToRGB("--color-sidebar-text-200"),
-              300: convertToRGB("--color-sidebar-text-300"),
-              400: convertToRGB("--color-sidebar-text-400"),
-              500: convertToRGB("--color-sidebar-text-500"),
-              600: convertToRGB("--color-sidebar-text-600"),
-              700: convertToRGB("--color-sidebar-text-700"),
-              800: convertToRGB("--color-sidebar-text-800"),
-              900: convertToRGB("--color-sidebar-text-900"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-text-100"),
-            },
-            border: {
-              0: "rgb(255, 255, 255)",
-              100: convertToRGB("--color-sidebar-border-100"),
-              200: convertToRGB("--color-sidebar-border-200"),
-              300: convertToRGB("--color-sidebar-border-300"),
-              400: convertToRGB("--color-sidebar-border-400"),
-              1000: "rgb(0, 0, 0)",
-              DEFAULT: convertToRGB("--color-sidebar-border-200"),
-            },
-          },
-          backdrop: "#131313",
-        },
-      },
-      keyframes: {
-        leftToaster: {
-          "0%": { left: "-20rem" },
-          "100%": { left: "0" },
-        },
-        rightToaster: {
-          "0%": { right: "-20rem" },
-          "100%": { right: "0" },
-        },
-      },
-      typography: ({ theme }) => ({
-        brand: {
-          css: {
-            "--tw-prose-body": convertToRGB("--color-text-100"),
-            "--tw-prose-p": convertToRGB("--color-text-100"),
-            "--tw-prose-headings": convertToRGB("--color-text-100"),
-            "--tw-prose-lead": convertToRGB("--color-text-100"),
-            "--tw-prose-links": convertToRGB("--color-primary-100"),
-            "--tw-prose-bold": convertToRGB("--color-text-100"),
-            "--tw-prose-counters": convertToRGB("--color-text-100"),
-            "--tw-prose-bullets": convertToRGB("--color-text-100"),
-            "--tw-prose-hr": convertToRGB("--color-text-100"),
-            "--tw-prose-quotes": convertToRGB("--color-text-100"),
-            "--tw-prose-quote-borders": convertToRGB("--color-border"),
-            "--tw-prose-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
-            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
-            "--tw-prose-th-borders": convertToRGB("--color-border"),
-            "--tw-prose-td-borders": convertToRGB("--color-border"),
-          },
-        },
-      }),
-    },
-    fontFamily: {
-      custom: ["Inter", "sans-serif"],
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
-};
diff --git a/apps/app/types/analytics.d.ts b/apps/app/types/analytics.d.ts
deleted file mode 100644
index 651596f19bc..00000000000
--- a/apps/app/types/analytics.d.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-export interface IAnalyticsResponse {
-  total: number;
-  distribution: IAnalyticsData;
-  extras: {
-    colors: IAnalyticsExtra[];
-    assignee_details: {
-      assignees__id: string | null;
-      assignees__display_name: string | null;
-      assignees__avatar: string | null;
-      assignees__first_name: string;
-      assignees__last_name: string;
-    }[];
-  };
-}
-
-export interface IAnalyticsData {
-  [key: string]: {
-    dimension: string | null;
-    segment?: string;
-    count?: number;
-    estimate?: number | null;
-  }[];
-}
-
-export interface IAnalyticsExtra {
-  name: string;
-  color: string;
-}
-
-export type TXAxisValues =
-  | "state__name"
-  | "state__group"
-  | "labels__name"
-  | "assignees__id"
-  | "estimate_point"
-  | "issue_cycle__cycle__name"
-  | "issue_module__module__name"
-  | "priority"
-  | "start_date"
-  | "target_date"
-  | "created_at"
-  | "completed_at";
-
-export type TYAxisValues = "issue_count" | "estimate";
-
-export interface IAnalyticsParams {
-  x_axis: TXAxisValues;
-  y_axis: TYAxisValues;
-  segment?: TXAxisValues | null;
-  project?: string[] | null;
-  cycle?: string | null;
-  module?: string | null;
-}
-
-export interface ISaveAnalyticsFormData {
-  name: string;
-  description: string;
-  query_dict: IExportAnalyticsFormData;
-}
-export interface IExportAnalyticsFormData {
-  x_axis: TXAxisValues;
-  y_axis: TYAxisValues;
-  segment?: TXAxisValues | null;
-  project?: string[];
-}
-
-export interface IDefaultAnalyticsUser {
-  assignees__avatar: string | null;
-  assignees__first_name: string;
-  assignees__last_name: string;
-  assignees__display_name: string;
-  assignees__id: string;
-  count: number;
-}
-
-export interface IDefaultAnalyticsResponse {
-  issue_completed_month_wise: { month: number; count: number }[];
-  most_issue_closed_user: IDefaultAnalyticsUser[];
-  most_issue_created_user: {
-    created_by__avatar: string | null;
-    created_by__first_name: string;
-    created_by__last_name: string;
-    created_by__display_name: string;
-    created_by__id: string;
-    count: number;
-  }[];
-  open_estimate_sum: number;
-  open_issues: number;
-  open_issues_classified: { state_group: string; state_count: number }[];
-  pending_issue_user: IDefaultAnalyticsUser[];
-  total_estimate_sum: number;
-  total_issues: number;
-  total_issues_classified: { state_group: string; state_count: number }[];
-}
diff --git a/apps/app/types/inbox.d.ts b/apps/app/types/inbox.d.ts
deleted file mode 100644
index 5c922e059e2..00000000000
--- a/apps/app/types/inbox.d.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { IIssue, IIssueFilterOptions, IIssueLabels } from "./issues";
-import type { IProjectLite } from "./projects";
-import { IState } from "./state";
-import { IUserLite } from "./users";
-
-export interface IInboxIssue extends Partial<IIssue> {
-  bridge_id: string;
-  issue_inbox: {
-    duplicate_to: string | null;
-    snoozed_till: Date | null;
-    source: string;
-    status: -2 | -1 | 0 | 1 | 2;
-  }[];
-}
-
-export interface IInboxIssueDetail extends IIssue {
-  id: string;
-  project_detail: IProjectLite;
-  created_at: string;
-  updated_at: string;
-  issue_inbox: {
-    duplicate_to: string | null;
-    id: string;
-    snoozed_till: Date | null;
-    source: string;
-    status: -2 | -1 | 0 | 1 | 2;
-  }[];
-  created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
-}
-export interface IInbox {
-  id: string;
-  project_detail: IProjectLite;
-  pending_issue_count: number;
-  created_at: Date;
-  updated_at: Date;
-  name: string;
-  description: string;
-  is_default: boolean;
-  created_by: string;
-  updated_by: string;
-  project: string;
-  view_props: { filters: IInboxFilterOptions };
-  workspace: string;
-}
-
-interface StatePending {
-  readonly status: -2;
-}
-interface StatusReject {
-  status: -1;
-}
-
-interface StatusSnoozed {
-  status: 0;
-  snoozed_till: Date;
-}
-
-interface StatusAccepted {
-  status: 1;
-}
-
-interface StatusDuplicate {
-  status: 2;
-  duplicate_to: string;
-}
-
-export type TInboxStatus =
-  | StatusReject
-  | StatusSnoozed
-  | StatusAccepted
-  | StatusDuplicate
-  | StatePending;
-
-export interface IInboxFilterOptions {
-  priority: string[] | null;
-  inbox_status: number[] | null;
-}
-
-export interface IInboxQueryParams {
-  priority: string | null;
-  inbox_status: string | null;
-}
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
deleted file mode 100644
index 55c95e5f391..00000000000
--- a/apps/app/types/users.d.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import {
-  IIssue,
-  IIssueActivity,
-  IIssueLite,
-  IWorkspace,
-  IWorkspaceLite,
-  NestedKeyOf,
-  Properties,
-  TStateGroups,
-} from "./";
-
-export interface IUser {
-  avatar: string;
-  cover_image: string | null;
-  created_at: readonly Date;
-  created_location: readonly string;
-  date_joined: readonly Date;
-  email: string;
-  display_name: string;
-  first_name: string;
-  id: readonly string;
-  is_email_verified: boolean;
-  is_onboarded: boolean;
-  is_tour_completed: boolean;
-  last_location: readonly string;
-  last_login: readonly Date;
-  last_name: string;
-  mobile_number: string;
-  my_issues_prop: {
-    properties: Properties;
-    groupBy: NestedKeyOf<IIssue> | null;
-  } | null;
-  onboarding_step: TOnboardingSteps;
-  role: string;
-  token: string;
-  theme: ICustomTheme;
-  updated_at: readonly Date;
-  username: string;
-  user_timezone: string;
-
-  [...rest: string]: any;
-}
-
-export interface ICustomTheme {
-  background: string;
-  text: string;
-  primary: string;
-  sidebarBackground: string;
-  sidebarText: string;
-  darkPalette: boolean;
-  palette: string;
-  theme: string;
-}
-
-export interface ICurrentUserResponse extends IUser {
-  assigned_issues: number;
-  last_workspace_id: string | null;
-  workspace_invites: number;
-  workspace: {
-    fallback_workspace_id: string | null;
-    fallback_workspace_slug: string | null;
-    invites: number;
-    last_workspace_id: string | null;
-    last_workspace_slug: string | null;
-  };
-}
-export interface IUserLite {
-  avatar: string;
-  created_at: Date;
-  display_name: string;
-  first_name: string;
-  readonly id: string;
-  is_bot: boolean;
-  last_name: string;
-}
-
-export interface IUserMemberLite extends IUserLite {
-  email: string;
-}
-
-export interface IUserActivity {
-  created_date: string;
-  activity_count: number;
-}
-
-export interface IUserPriorityDistribution {
-  priority: string;
-  priority_count: number;
-}
-
-export interface IUserStateDistribution {
-  state_group: TStateGroups;
-  state_count: number;
-}
-
-export interface IUserWorkspaceDashboard {
-  assigned_issues_count: number;
-  completed_issues_count: number;
-  issue_activities: IUserActivity[];
-  issues_due_week_count: number;
-  overdue_issues: IIssueLite[];
-  completed_issues: {
-    week_in_month: number;
-    completed_count: number;
-  }[];
-  pending_issues_count: number;
-  state_distribution: IUserStateDistribution[];
-  upcoming_issues: IIssueLite[];
-}
-
-export interface IUserActivityResponse {
-  count: number;
-  extra_stats: null;
-  next_cursor: string;
-  next_page_results: boolean;
-  prev_cursor: string;
-  prev_page_results: boolean;
-  results: IIssueActivity[];
-  total_pages: number;
-}
-
-export type UserAuth = {
-  isMember: boolean;
-  isOwner: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-export type TOnboardingSteps = {
-  profile_complete: boolean;
-  workspace_create: boolean;
-  workspace_invite: boolean;
-  workspace_join: boolean;
-};
-
-export interface IUserProfileData {
-  assigned_issues: number;
-  completed_issues: number;
-  created_issues: number;
-  pending_issues: number;
-  priority_distribution: IUserPriorityDistribution[];
-  state_distribution: IUserStateDistribution[];
-  subscribed_issues: number;
-}
-
-export interface IUserProfileProjectSegregation {
-  project_data: {
-    assigned_issues: number;
-    completed_issues: number;
-    created_issues: number;
-    emoji: string | null;
-    icon_prop: null;
-    id: string;
-    identifier: string;
-    name: string;
-    pending_issues: number;
-  }[];
-  user_data: {
-    avatar: string;
-    cover_image: string | null;
-    date_joined: Date;
-    display_name: string;
-    first_name: string;
-    last_name: string;
-    user_timezone: string;
-  };
-}
-
-export interface ICurrentUser {
-  id: readonly string;
-  avatar: string;
-  first_name: string;
-  last_name: string;
-  username: string;
-  email: string;
-  mobile_number: string;
-  is_email_verified: boolean;
-  is_tour_completed: boolean;
-  onboarding_step: TOnboardingSteps;
-  is_onboarded: boolean;
-  role: string;
-}
-
-export interface ICustomTheme {
-  background: string;
-  text: string;
-  primary: string;
-  sidebarBackground: string;
-  sidebarText: string;
-  darkPalette: boolean;
-  palette: string;
-  theme: string;
-}
-
-export interface ICurrentUserSettings {
-  theme: ICustomTheme;
-}
diff --git a/apps/app/types/views.d.ts b/apps/app/types/views.d.ts
deleted file mode 100644
index e1246af5aa2..00000000000
--- a/apps/app/types/views.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface IView {
-  id: string;
-  access: string;
-  created_at: Date;
-  updated_at: Date;
-  is_favorite: boolean;
-  created_by: string;
-  updated_by: string;
-  name: string;
-  description: string;
-  query: IQuery;
-  query_data: IQuery;
-  project: string;
-  workspace: string;
-}
-
-export interface IQuery {
-  assignees: string[] | null;
-  created_by: string[] | null;
-  labels: string[] | null;
-  priority: string[] | null;
-  state: string[] | null;
-  start_date: string[] | null;
-  target_date: string[] | null;
-  type: "active" | "backlog" | null;
-}
diff --git a/apps/space/.env.example b/apps/space/.env.example
deleted file mode 100644
index 4fb0e4df6c9..00000000000
--- a/apps/space/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-NEXT_PUBLIC_API_BASE_URL=''
\ No newline at end of file
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
deleted file mode 100644
index 7b4ed614233..00000000000
--- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// next imports
-import Link from "next/link";
-import Image from "next/image";
-import { Metadata, ResolvingMetadata } from "next";
-// components
-import IssueNavbar from "components/issues/navbar";
-import IssueFilter from "components/issues/filters-render";
-// service
-import ProjectService from "services/project.service";
-import { redirect } from "next/navigation";
-
-type LayoutProps = {
-  params: { workspace_slug: string; project_slug: string };
-};
-
-export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
-  // read route params
-  const { workspace_slug, project_slug } = params;
-  const projectServiceInstance = new ProjectService();
-
-  try {
-    const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
-
-    return {
-      title: `${project?.project_details?.name} | ${workspace_slug}`,
-      description: `${
-        project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`
-      }`,
-      icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
-        typeof project?.project_details?.emoji != "object"
-          ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
-          : "✈️"
-      }</text></svg>`,
-    };
-  } catch (error: any) {
-    if (error?.data?.error) {
-      redirect(`/project-not-published`);
-    }
-    return {};
-  }
-}
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
-    <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
-      <IssueNavbar />
-    </div>
-    {/* <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
-      <IssueFilter />
-    </div> */}
-    <div className="w-full h-full relative bg-gray-100/50 overflow-hidden">{children}</div>
-
-    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
-      <Link href="https://plane.so" className="p-1 px-2 flex items-center gap-1" target="_blank">
-        <div className="w-[24px] h-[24px] relative flex justify-center items-center">
-          <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
-        </div>
-        <div className="text-xs">
-          Powered by <b>Plane Deploy</b>
-        </div>
-      </Link>
-    </div>
-  </div>
-);
-
-export default RootLayout;
diff --git a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx b/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
deleted file mode 100644
index 81c2b48c2c1..00000000000
--- a/apps/space/app/[workspace_slug]/[project_slug]/page.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-// next imports
-import { useRouter, useParams, useSearchParams } from "next/navigation";
-// mobx
-import { observer } from "mobx-react-lite";
-// components
-import { IssueListView } from "components/issues/board-views/list";
-import { IssueKanbanView } from "components/issues/board-views/kanban";
-import { IssueCalendarView } from "components/issues/board-views/calendar";
-import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
-import { IssueGanttView } from "components/issues/board-views/gantt";
-// mobx store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { TIssueBoardKeys } from "store/types";
-
-const WorkspaceProjectPage = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const routerParams = useParams();
-  const routerSearchparams = useSearchParams();
-
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-  const board =
-    routerSearchparams &&
-    routerSearchparams.get("board") != null &&
-    (routerSearchparams.get("board") as TIssueBoardKeys | "");
-
-  // updating default board view when we are in the issues page
-  useEffect(() => {
-    if (workspace_slug && project_slug && store?.project?.workspaceProjectSettings) {
-      const workspacePRojectSettingViews = store?.project?.workspaceProjectSettings?.views;
-      const userAccessViews: TIssueBoardKeys[] = [];
-
-      Object.keys(workspacePRojectSettingViews).filter((_key) => {
-        if (_key === "list" && workspacePRojectSettingViews.list === true) userAccessViews.push(_key);
-        if (_key === "kanban" && workspacePRojectSettingViews.kanban === true) userAccessViews.push(_key);
-        if (_key === "calendar" && workspacePRojectSettingViews.calendar === true) userAccessViews.push(_key);
-        if (_key === "spreadsheet" && workspacePRojectSettingViews.spreadsheet === true) userAccessViews.push(_key);
-        if (_key === "gantt" && workspacePRojectSettingViews.gantt === true) userAccessViews.push(_key);
-      });
-
-      if (userAccessViews && userAccessViews.length > 0) {
-        if (!board) {
-          store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-          router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-        } else {
-          if (userAccessViews.includes(board)) {
-            if (store.issue.currentIssueBoardView === null) store.issue.setCurrentIssueBoardView(board);
-            else {
-              if (board === store.issue.currentIssueBoardView)
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              else {
-                store.issue.setCurrentIssueBoardView(board);
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              }
-            }
-          } else {
-            store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-            router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-          }
-        }
-      }
-    }
-  }, [workspace_slug, project_slug, board, router, store?.issue, store?.project?.workspaceProjectSettings]);
-
-  useEffect(() => {
-    if (workspace_slug && project_slug) {
-      store?.project?.getProjectSettingsAsync(workspace_slug, project_slug);
-      store?.issue?.getIssuesAsync(workspace_slug, project_slug);
-    }
-  }, [workspace_slug, project_slug, store?.project, store?.issue]);
-
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      {store?.issue?.loader && !store.issue.issues ? (
-        <div className="text-sm text-center py-10 text-gray-500">Loading...</div>
-      ) : (
-        <>
-          {store?.issue?.error ? (
-            <div className="text-sm text-center py-10 text-gray-500">Something went wrong.</div>
-          ) : (
-            store?.issue?.currentIssueBoardView && (
-              <>
-                {store?.issue?.currentIssueBoardView === "list" && (
-                  <div className="relative w-full h-full overflow-y-auto">
-                    <div className="container mx-auto px-5 py-3">
-                      <IssueListView />
-                    </div>
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-5">
-                    <IssueKanbanView />
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "calendar" && <IssueCalendarView />}
-                {store?.issue?.currentIssueBoardView === "spreadsheet" && <IssueSpreadsheetView />}
-                {store?.issue?.currentIssueBoardView === "gantt" && <IssueGanttView />}
-              </>
-            )
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-
-export default WorkspaceProjectPage;
diff --git a/apps/space/app/[workspace_slug]/page.tsx b/apps/space/app/[workspace_slug]/page.tsx
deleted file mode 100644
index c35662f5a62..00000000000
--- a/apps/space/app/[workspace_slug]/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-const WorkspaceProjectPage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Workspace Space</div>
-);
-
-export default WorkspaceProjectPage;
diff --git a/apps/space/app/layout.tsx b/apps/space/app/layout.tsx
deleted file mode 100644
index b63f748e8ab..00000000000
--- a/apps/space/app/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-// root styles
-import "styles/globals.css";
-// mobx store provider
-import { MobxStoreProvider } from "lib/mobx/store-provider";
-import MobxStoreInit from "lib/mobx/store-init";
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <html lang="en">
-    <body className="antialiased w-100">
-      <MobxStoreProvider>
-        <MobxStoreInit />
-        <main>{children}</main>
-      </MobxStoreProvider>
-    </body>
-  </html>
-);
-
-export default RootLayout;
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
deleted file mode 100644
index 6a18b728395..00000000000
--- a/apps/space/app/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-import React from "react";
-
-const HomePage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Deploy</div>
-);
-
-export default HomePage;
diff --git a/apps/space/app/project-not-published/page.tsx b/apps/space/app/project-not-published/page.tsx
deleted file mode 100644
index 82a2ff5da42..00000000000
--- a/apps/space/app/project-not-published/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// next imports
-import Image from "next/image";
-
-const CustomProjectNotPublishedError = () => (
-  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
-    <div className="max-w-[700px] space-y-5">
-      <div className="flex items-center flex-col gap-3 text-center">
-        <div className="relative w-[240px] h-[240px]">
-          <Image src={`/project-not-published.svg`} layout="fill" alt="404- Page not found" />
-        </div>
-        <div className="text-xl font-medium">
-          Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
-        </div>
-        <div className="text-sm text-custom-text-200">
-          If this is your project, login to your workspace to adjust its visibility settings and make it public.
-        </div>
-      </div>
-
-      <div className="text-center flex justify-center items-center">
-        <a
-          href={`https://app.plane.so/`}
-          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
-        >
-          Go to your Workspace
-        </a>
-      </div>
-    </div>
-  </div>
-);
-
-export default CustomProjectNotPublishedError;
diff --git a/apps/space/components/icons/index.ts b/apps/space/components/icons/index.ts
deleted file mode 100644
index 5f23e0f3aa0..00000000000
--- a/apps/space/components/icons/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./issue-group/backlog-state-icon";
-export * from "./issue-group/unstarted-state-icon";
-export * from "./issue-group/started-state-icon";
-export * from "./issue-group/completed-state-icon";
-export * from "./issue-group/cancelled-state-icon";
diff --git a/apps/space/components/icons/issue-group/backlog-state-icon.tsx b/apps/space/components/icons/issue-group/backlog-state-icon.tsx
deleted file mode 100644
index f2f62d24a64..00000000000
--- a/apps/space/components/icons/issue-group/backlog-state-icon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const BacklogStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["backlog"],
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
-  </svg>
-);
diff --git a/apps/space/components/icons/issue-group/cancelled-state-icon.tsx b/apps/space/components/icons/issue-group/cancelled-state-icon.tsx
deleted file mode 100644
index e244c191a66..00000000000
--- a/apps/space/components/icons/issue-group/cancelled-state-icon.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CancelledStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["cancelled"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,32.44q9.54,9.75,19.09,19.48"
-        />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,51.92,51.73,32.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/space/components/icons/issue-group/completed-state-icon.tsx b/apps/space/components/icons/issue-group/completed-state-icon.tsx
deleted file mode 100644
index 417ebbf3ff3..00000000000
--- a/apps/space/components/icons/issue-group/completed-state-icon.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CompletedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["completed"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M30.45,43.75l6.61,6.61L53.92,34"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/space/components/icons/issue-group/started-state-icon.tsx b/apps/space/components/icons/issue-group/started-state-icon.tsx
deleted file mode 100644
index 4ebd1771f7f..00000000000
--- a/apps/space/components/icons/issue-group/started-state-icon.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const StartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["started"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.36 83.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/space/components/icons/issue-group/unstarted-state-icon.tsx b/apps/space/components/icons/issue-group/unstarted-state-icon.tsx
deleted file mode 100644
index f79bc00fc68..00000000000
--- a/apps/space/components/icons/issue-group/unstarted-state-icon.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const UnstartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["unstarted"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-      </g>
-    </g>
-  </svg>
-);
diff --git a/apps/space/components/icons/types.d.ts b/apps/space/components/icons/types.d.ts
deleted file mode 100644
index f82a181472a..00000000000
--- a/apps/space/components/icons/types.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type Props = {
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-  className?: string;
-};
diff --git a/apps/space/components/issues/board-views/block-due-date.tsx b/apps/space/components/issues/board-views/block-due-date.tsx
deleted file mode 100644
index 6d3cc3cc034..00000000000
--- a/apps/space/components/issues/board-views/block-due-date.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-// helpers
-import { renderDateFormat } from "constants/helpers";
-
-export const findHowManyDaysLeft = (date: string | Date) => {
-  const today = new Date();
-  const eventDate = new Date(date);
-  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
-  return Math.ceil(timeDiff / (1000 * 3600 * 24));
-};
-
-const validDate = (date: any, state: string): string => {
-  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
-    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
-  else {
-    const today = new Date();
-    const dueDate = new Date(date);
-
-    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
-    else return `bg-green-500/10 text-green-500 border-green-500/50`;
-  }
-};
-
-export const IssueBlockDueDate = ({ due_date, state }: any) => (
-  <div
-    className={`h-[24px] rounded-sm flex px-2 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
-    ${validDate(due_date, state)}`}
-  >
-    {renderDateFormat(due_date)}
-  </div>
-);
diff --git a/apps/space/components/issues/board-views/block-labels.tsx b/apps/space/components/issues/board-views/block-labels.tsx
deleted file mode 100644
index 90cc1629c93..00000000000
--- a/apps/space/components/issues/board-views/block-labels.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-export const IssueBlockLabels = ({ labels }: any) => (
-  <div className="relative flex items-center flex-wrap gap-1">
-    {labels &&
-      labels.length > 0 &&
-      labels.map((_label: any) => (
-        <div
-          className={`h-[24px] rounded-sm flex px-1 items-center border gap-1 !bg-transparent !text-gray-700`}
-          style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
-        >
-          <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
-          <div className="text-sm">{_label?.name}</div>
-        </div>
-      ))}
-  </div>
-);
diff --git a/apps/space/components/issues/board-views/block-priority.tsx b/apps/space/components/issues/board-views/block-priority.tsx
deleted file mode 100644
index 61ca5076587..00000000000
--- a/apps/space/components/issues/board-views/block-priority.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-// types
-import { TIssuePriorityKey } from "store/types/issue";
-// constants
-import { issuePriorityFilter } from "constants/data";
-
-export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey | null }) => {
-  const priority_detail = priority != null ? issuePriorityFilter(priority) : null;
-
-  if (priority_detail === null) return <></>;
-  return (
-    <div className={`w-[24px] h-[24px] rounded-sm flex justify-center items-center ${priority_detail?.className}`}>
-      <span className="material-symbols-rounded text-[16px]">{priority_detail?.icon}</span>
-    </div>
-  );
-};
diff --git a/apps/space/components/issues/board-views/block-state.tsx b/apps/space/components/issues/board-views/block-state.tsx
deleted file mode 100644
index 87cd65938da..00000000000
--- a/apps/space/components/issues/board-views/block-state.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-// constants
-import { issueGroupFilter } from "constants/data";
-
-export const IssueBlockState = ({ state }: any) => {
-  const stateGroup = issueGroupFilter(state.group);
-
-  if (stateGroup === null) return <></>;
-  return (
-    <div
-      className={`h-[24px] rounded-sm flex px-1 items-center border ${stateGroup?.className} gap-1 !bg-transparent !text-gray-700`}
-    >
-      <stateGroup.icon />
-      <div className="text-sm">{state?.name}</div>
-    </div>
-  );
-};
diff --git a/apps/space/components/issues/board-views/kanban/block.tsx b/apps/space/components/issues/board-views/kanban/block.tsx
deleted file mode 100644
index 22af77568b9..00000000000
--- a/apps/space/components/issues/board-views/kanban/block.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { IssueBlockPriority } from "components/issues/board-views/block-priority";
-import { IssueBlockState } from "components/issues/board-views/block-state";
-import { IssueBlockLabels } from "components/issues/board-views/block-labels";
-import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssue } from "store/types/issue";
-import { RootStore } from "store/root";
-
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
-
-  return (
-    <div className="p-2 px-3 bg-white space-y-2 rounded-sm shadow">
-      {/* id */}
-      <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-        {store?.project?.project?.identifier}-{issue?.sequence_id}
-      </div>
-
-      {/* name */}
-      <div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
-
-      {/* priority */}
-      <div className="relative flex flex-wrap items-center gap-2 w-full">
-        {issue?.priority && (
-          <div className="flex-shrink-0">
-            <IssueBlockPriority priority={issue?.priority} />
-          </div>
-        )}
-        {/* state */}
-        {issue?.state_detail && (
-          <div className="flex-shrink-0">
-            <IssueBlockState state={issue?.state_detail} />
-          </div>
-        )}
-        {/* labels */}
-        {issue?.label_details && issue?.label_details.length > 0 && (
-          <div className="flex-shrink-0">
-            <IssueBlockLabels labels={issue?.label_details} />
-          </div>
-        )}
-        {/* due date */}
-        {issue?.target_date && (
-          <div className="flex-shrink-0">
-            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/space/components/issues/board-views/kanban/header.tsx b/apps/space/components/issues/board-views/kanban/header.tsx
deleted file mode 100644
index 43c19f5f526..00000000000
--- a/apps/space/components/issues/board-views/kanban/header.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// interfaces
-import { IIssueState } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
-
-  const stateGroup = issueGroupFilter(state.group);
-
-  if (stateGroup === null) return <></>;
-
-  return (
-    <div className="py-2 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
-        <stateGroup.icon />
-      </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/board-views/kanban/index.tsx b/apps/space/components/issues/board-views/kanban/index.tsx
deleted file mode 100644
index d716356ffd8..00000000000
--- a/apps/space/components/issues/board-views/kanban/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { IssueListHeader } from "components/issues/board-views/kanban/header";
-import { IssueListBlock } from "components/issues/board-views/kanban/block";
-// interfaces
-import { IIssueState, IIssue } from "store/types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const IssueKanbanView = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return (
-    <div className="relative w-full h-full overflow-hidden overflow-x-auto flex gap-3">
-      {store?.issue?.states &&
-        store?.issue?.states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
-          <div className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
-            <div className="flex-shrink-0">
-              <IssueListHeader state={_state} />
-            </div>
-            <div className="w-full h-full overflow-hidden overflow-y-auto">
-              {store.issue.getFilteredIssuesByState(_state.id) &&
-              store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-                <div className="space-y-3 pb-2">
-                  {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock issue={_issue} />
-                  ))}
-                </div>
-              ) : (
-                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-gray-600">
-                  No Issues are available.
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/board-views/list/block.tsx b/apps/space/components/issues/board-views/list/block.tsx
deleted file mode 100644
index b9dfcc6ab77..00000000000
--- a/apps/space/components/issues/board-views/list/block.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { IssueBlockPriority } from "components/issues/board-views/block-priority";
-import { IssueBlockState } from "components/issues/board-views/block-state";
-import { IssueBlockLabels } from "components/issues/board-views/block-labels";
-import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssue } from "store/types/issue";
-import { RootStore } from "store/root";
-
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
-
-  return (
-    <div className="p-2 px-3 relative flex items-center gap-3">
-      <div className="relative flex items-center gap-3 w-full">
-        {/* id */}
-        <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-          {store?.project?.project?.identifier}-{issue?.sequence_id}
-        </div>
-        {/* name */}
-        <div className="font-medium text-gray-800 h-full line-clamp-1">{issue.name}</div>
-      </div>
-
-      {/* priority */}
-      {issue?.priority && (
-        <div className="flex-shrink-0">
-          <IssueBlockPriority priority={issue?.priority} />
-        </div>
-      )}
-
-      {/* state */}
-      {issue?.state_detail && (
-        <div className="flex-shrink-0">
-          <IssueBlockState state={issue?.state_detail} />
-        </div>
-      )}
-
-      {/* labels */}
-      {issue?.label_details && issue?.label_details.length > 0 && (
-        <div className="flex-shrink-0">
-          <IssueBlockLabels labels={issue?.label_details} />
-        </div>
-      )}
-
-      {/* due date */}
-      {issue?.target_date && (
-        <div className="flex-shrink-0">
-          <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/space/components/issues/board-views/list/header.tsx b/apps/space/components/issues/board-views/list/header.tsx
deleted file mode 100644
index e87cac6f778..00000000000
--- a/apps/space/components/issues/board-views/list/header.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// interfaces
-import { IIssueState } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
-
-  const stateGroup = issueGroupFilter(state.group);
-
-  if (stateGroup === null) return <></>;
-
-  return (
-    <div className="py-2 px-3 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
-        <stateGroup.icon />
-      </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/board-views/list/index.tsx b/apps/space/components/issues/board-views/list/index.tsx
deleted file mode 100644
index 7a7ec0de13a..00000000000
--- a/apps/space/components/issues/board-views/list/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { IssueListHeader } from "components/issues/board-views/list/header";
-import { IssueListBlock } from "components/issues/board-views/list/block";
-// interfaces
-import { IIssueState, IIssue } from "store/types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const IssueListView = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return (
-    <>
-      {store?.issue?.states &&
-        store?.issue?.states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
-          <div className="relative w-full">
-            <IssueListHeader state={_state} />
-            {store.issue.getFilteredIssuesByState(_state.id) &&
-            store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="bg-white divide-y">
-                {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock issue={_issue} />
-                ))}
-              </div>
-            ) : (
-              <div className="bg-white p-5 text-sm text-gray-600">No Issues are available.</div>
-            )}
-          </div>
-        ))}
-    </>
-  );
-});
diff --git a/apps/space/components/issues/filters-render/label/filter-label-block.tsx b/apps/space/components/issues/filters-render/label/filter-label-block.tsx
deleted file mode 100644
index 0606bfc9524..00000000000
--- a/apps/space/components/issues/filters-render/label/filter-label-block.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssueLabel } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
-  const store = useMobxStore();
-
-  const removeLabelFromFilter = () => {};
-
-  return (
-    <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10`, borderColor: `${label?.color}50` }}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${label?.color}` }} />
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{label?.name}</div>
-      <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
-        onClick={removeLabelFromFilter}
-      >
-        <span className="material-symbols-rounded text-[14px]">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/filters-render/label/index.tsx b/apps/space/components/issues/filters-render/label/index.tsx
deleted file mode 100644
index 7d313153a78..00000000000
--- a/apps/space/components/issues/filters-render/label/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueLabel } from "./filter-label-block";
-// interfaces
-import { IIssueLabel } from "store/types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueLabelFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const clearLabelFilters = () => {};
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Labels</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.labels &&
-            store?.issue?.labels.map((_label: IIssueLabel, _index: number) => <RenderIssueLabel label={_label} />)}
-        </div>
-        <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
-          onClick={clearLabelFilters}
-        >
-          <span className="material-symbols-rounded text-[16px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueLabelFilter;
diff --git a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx b/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
deleted file mode 100644
index 98173fd66d6..00000000000
--- a/apps/space/components/issues/filters-render/priority/filter-priority-block.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssuePriorityFilters } from "store/types/issue";
-
-export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
-  const store = useMobxStore();
-
-  const removePriorityFromFilter = () => {};
-
-  return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
-        priority.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-[14px]">{priority?.icon}</span>
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{priority?.title}</div>
-      <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
-        onClick={removePriorityFromFilter}
-      >
-        <span className="material-symbols-rounded text-[14px]">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/filters-render/state/filter-state-block.tsx b/apps/space/components/issues/filters-render/state/filter-state-block.tsx
deleted file mode 100644
index 95a4f4c7094..00000000000
--- a/apps/space/components/issues/filters-render/state/filter-state-block.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssueState } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
-  const store = useMobxStore();
-
-  const stateGroup = issueGroupFilter(state.group);
-
-  const removeStateFromFilter = () => {};
-
-  if (stateGroup === null) return <></>;
-  return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
-        stateGroup.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <stateGroup.icon />
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{state?.name}</div>
-      <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
-        onClick={removeStateFromFilter}
-      >
-        <span className="material-symbols-rounded text-[14px]">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/apps/space/components/issues/filters-render/state/index.tsx b/apps/space/components/issues/filters-render/state/index.tsx
deleted file mode 100644
index fc73af381f2..00000000000
--- a/apps/space/components/issues/filters-render/state/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueState } from "./filter-state-block";
-// interfaces
-import { IIssueState } from "store/types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueStateFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const clearStateFilters = () => {};
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">State</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.states &&
-            store?.issue?.states.map((_state: IIssueState, _index: number) => <RenderIssueState state={_state} />)}
-        </div>
-        <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
-          onClick={clearStateFilters}
-        >
-          <span className="material-symbols-rounded text-[16px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueStateFilter;
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
deleted file mode 100644
index 71a2fabcc40..00000000000
--- a/apps/space/components/issues/navbar/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-// next imports
-import Image from "next/image";
-// components
-import { NavbarSearch } from "./search";
-import { NavbarIssueBoardView } from "./issue-board-view";
-import { NavbarIssueFilter } from "./issue-filter";
-import { NavbarIssueView } from "./issue-view";
-import { NavbarTheme } from "./theme";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const renderEmoji = (emoji: string | { name: string; color: string }) => {
-  if (!emoji) return;
-
-  if (typeof emoji === "object")
-    return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
-        {emoji.name}
-      </span>
-    );
-  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
-};
-
-const IssueNavbar = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return (
-    <div className="px-5 relative w-full flex items-center gap-4">
-      {/* project detail */}
-      <div className="flex-shrink-0 flex items-center gap-2">
-        <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center bg-gray-100 text-[24px]">
-          {store?.project?.project && store?.project?.project?.emoji ? (
-            renderEmoji(store?.project?.project?.emoji)
-          ) : (
-            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
-          )}
-        </div>
-        <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
-          {store?.project?.project?.name || `...`}
-        </div>
-      </div>
-
-      {/* issue search bar */}
-      <div className="w-full">
-        <NavbarSearch />
-      </div>
-
-      {/* issue views */}
-      <div className="flex-shrink-0 relative flex items-center gap-1 transition-all ease-in-out delay-150">
-        <NavbarIssueBoardView />
-      </div>
-
-      {/* issue filters */}
-      {/* <div className="flex-shrink-0 relative flex items-center gap-2">
-        <NavbarIssueFilter />
-        <NavbarIssueView />
-      </div> */}
-
-      {/* theming */}
-      {/* <div className="flex-shrink-0 relative">
-        <NavbarTheme />
-      </div> */}
-    </div>
-  );
-});
-
-export default IssueNavbar;
diff --git a/apps/space/components/issues/navbar/issue-board-view.tsx b/apps/space/components/issues/navbar/issue-board-view.tsx
deleted file mode 100644
index 57c8b27c16f..00000000000
--- a/apps/space/components/issues/navbar/issue-board-view.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-// next imports
-import { useRouter, useParams } from "next/navigation";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// constants
-import { issueViews } from "constants/data";
-// interfaces
-import { TIssueBoardKeys } from "store/types";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const NavbarIssueBoardView = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const routerParams = useParams();
-
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-
-  const handleCurrentBoardView = (boardView: TIssueBoardKeys) => {
-    store?.issue?.setCurrentIssueBoardView(boardView);
-    router.replace(`/${workspace_slug}/${project_slug}?board=${boardView}`);
-  };
-
-  return (
-    <>
-      {store?.project?.workspaceProjectSettings &&
-        issueViews &&
-        issueViews.length > 0 &&
-        issueViews.map(
-          (_view) =>
-            store?.project?.workspaceProjectSettings?.views[_view?.key] && (
-              <div
-                key={_view?.key}
-                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer text-gray-500 ${
-                  _view?.key === store?.issue?.currentIssueBoardView
-                    ? `bg-gray-200/60 text-gray-800`
-                    : `hover:bg-gray-200/60 text-gray-600`
-                }`}
-                onClick={() => handleCurrentBoardView(_view?.key)}
-                title={_view?.title}
-              >
-                <span className={`material-symbols-rounded text-[18px] ${_view?.className ? _view?.className : ``}`}>
-                  {_view?.icon}
-                </span>
-              </div>
-            )
-        )}
-    </>
-  );
-});
diff --git a/apps/space/components/issues/navbar/issue-filter.tsx b/apps/space/components/issues/navbar/issue-filter.tsx
deleted file mode 100644
index 10255882d6e..00000000000
--- a/apps/space/components/issues/navbar/issue-filter.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const NavbarIssueFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  return <div>Filter</div>;
-});
diff --git a/apps/space/components/issues/navbar/theme.tsx b/apps/space/components/issues/navbar/theme.tsx
deleted file mode 100644
index c122f847841..00000000000
--- a/apps/space/components/issues/navbar/theme.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-export const NavbarTheme = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const handleTheme = () => {
-    store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
-  };
-
-  return (
-    <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer bg-gray-100 hover:bg-gray-200 hover:bg-gray-200/60 text-gray-600 transition-all"
-      onClick={handleTheme}
-    >
-      {store?.theme?.theme === "light" ? (
-        <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
-      ) : (
-        <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
-      )}
-    </div>
-  );
-});
diff --git a/apps/space/constants/data.ts b/apps/space/constants/data.ts
deleted file mode 100644
index 81ccae11683..00000000000
--- a/apps/space/constants/data.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-// interfaces
-import {
-  IIssueBoardViews,
-  // priority
-  TIssuePriorityKey,
-  // state groups
-  TIssueGroupKey,
-  IIssuePriorityFilters,
-  IIssueGroup,
-} from "store/types/issue";
-// icons
-import {
-  BacklogStateIcon,
-  UnstartedStateIcon,
-  StartedStateIcon,
-  CompletedStateIcon,
-  CancelledStateIcon,
-} from "components/icons";
-
-// all issue views
-export const issueViews: IIssueBoardViews[] = [
-  {
-    key: "list",
-    title: "List View",
-    icon: "format_list_bulleted",
-    className: "",
-  },
-  {
-    key: "kanban",
-    title: "Board View",
-    icon: "grid_view",
-    className: "",
-  },
-  // {
-  //   key: "calendar",
-  //   title: "Calendar View",
-  //   icon: "calendar_month",
-  //   className: "",
-  // },
-  // {
-  //   key: "spreadsheet",
-  //   title: "Spreadsheet View",
-  //   icon: "table_chart",
-  //   className: "",
-  // },
-  // {
-  //   key: "gantt",
-  //   title: "Gantt Chart View",
-  //   icon: "waterfall_chart",
-  //   className: "rotate-90",
-  // },
-];
-
-// issue priority filters
-export const issuePriorityFilters: IIssuePriorityFilters[] = [
-  {
-    key: "urgent",
-    title: "Urgent",
-    className: "border border-red-500/50 bg-red-500/20 text-red-500",
-    icon: "error",
-  },
-  {
-    key: "high",
-    title: "High",
-    className: "border border-orange-500/50 bg-orange-500/20 text-orange-500",
-    icon: "signal_cellular_alt",
-  },
-  {
-    key: "medium",
-    title: "Medium",
-    className: "border border-yellow-500/50 bg-yellow-500/20 text-yellow-500",
-    icon: "signal_cellular_alt_2_bar",
-  },
-  {
-    key: "low",
-    title: "Low",
-    className: "border border-green-500/50 bg-green-500/20 text-green-500",
-    icon: "signal_cellular_alt_1_bar",
-  },
-  {
-    key: "none",
-    title: "None",
-    className: "border border-gray-500/50 bg-gray-500/20 text-gray-500",
-    icon: "block",
-  },
-];
-
-export const issuePriorityFilter = (priorityKey: TIssuePriorityKey): IIssuePriorityFilters | null => {
-  const currentIssuePriority: IIssuePriorityFilters | undefined | null =
-    issuePriorityFilters && issuePriorityFilters.length > 0
-      ? issuePriorityFilters.find((_priority) => _priority.key === priorityKey)
-      : null;
-
-  if (currentIssuePriority === undefined || currentIssuePriority === null) return null;
-  return { ...currentIssuePriority };
-};
-
-// issue group filters
-export const issueGroupColors: {
-  [key: string]: string;
-} = {
-  backlog: "#d9d9d9",
-  unstarted: "#3f76ff",
-  started: "#f59e0b",
-  completed: "#16a34a",
-  cancelled: "#dc2626",
-};
-
-export const issueGroups: IIssueGroup[] = [
-  {
-    key: "backlog",
-    title: "Backlog",
-    color: "#d9d9d9",
-    className: `border-[#d9d9d9]/50 text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogStateIcon,
-  },
-  {
-    key: "unstarted",
-    title: "Unstarted",
-    color: "#3f76ff",
-    className: `border-[#3f76ff]/50 text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedStateIcon,
-  },
-  {
-    key: "started",
-    title: "Started",
-    color: "#f59e0b",
-    className: `border-[#f59e0b]/50 text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedStateIcon,
-  },
-  {
-    key: "completed",
-    title: "Completed",
-    color: "#16a34a",
-    className: `border-[#16a34a]/50 text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedStateIcon,
-  },
-  {
-    key: "cancelled",
-    title: "Cancelled",
-    color: "#dc2626",
-    className: `border-[#dc2626]/50 text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledStateIcon,
-  },
-];
-
-export const issueGroupFilter = (issueKey: TIssueGroupKey): IIssueGroup | null => {
-  const currentIssueStateGroup: IIssueGroup | undefined | null =
-    issueGroups && issueGroups.length > 0 ? issueGroups.find((group) => group.key === issueKey) : null;
-
-  if (currentIssueStateGroup === undefined || currentIssueStateGroup === null) return null;
-  return { ...currentIssueStateGroup };
-};
diff --git a/apps/space/constants/helpers.ts b/apps/space/constants/helpers.ts
deleted file mode 100644
index fd4dba21770..00000000000
--- a/apps/space/constants/helpers.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const renderDateFormat = (date: string | Date | null) => {
-  if (!date) return "N/A";
-
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [year, month, day].join("-");
-};
diff --git a/apps/space/lib/mobx/store-init.tsx b/apps/space/lib/mobx/store-init.tsx
deleted file mode 100644
index a31bc822fde..00000000000
--- a/apps/space/lib/mobx/store-init.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const MobxStoreInit = () => {
-  const store: RootStore = useMobxStore();
-
-  useEffect(() => {
-    // theme
-    const _theme = localStorage && localStorage.getItem("app_theme") ? localStorage.getItem("app_theme") : "light";
-    if (_theme && store?.theme?.theme != _theme) store.theme.setTheme(_theme);
-    else localStorage.setItem("app_theme", _theme && _theme != "light" ? "dark" : "light");
-  }, [store?.theme]);
-
-  return <></>;
-};
-
-export default MobxStoreInit;
diff --git a/apps/space/next.config.js b/apps/space/next.config.js
deleted file mode 100644
index 4128b636a7d..00000000000
--- a/apps/space/next.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @type {import('next').NextConfig} */
-const path = require("path");
-
-const nextConfig = {
-  reactStrictMode: false,
-  swcMinify: true,
-  experimental: {
-    outputFileTracingRoot: path.join(__dirname, "../../"),
-    appDir: true,
-  },
-  output: "standalone",
-};
-
-module.exports = nextConfig;
diff --git a/apps/space/package.json b/apps/space/package.json
deleted file mode 100644
index e37dfa54a76..00000000000
--- a/apps/space/package.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "space",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "next dev -p 4000",
-    "build": "next build",
-    "start": "next start -p 4000",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@headlessui/react": "^1.7.13",
-    "@types/node": "18.14.1",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "axios": "^1.3.4",
-    "eslint": "8.34.0",
-    "eslint-config-next": "13.2.1",
-    "js-cookie": "^3.0.1",
-    "mobx": "^6.10.0",
-    "mobx-react-lite": "^4.0.3",
-    "next": "^13.4.16",
-    "nprogress": "^0.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "4.9.5",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
-    "@types/js-cookie": "^3.0.3",
-    "@types/uuid": "^9.0.1",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7"
-  }
-}
diff --git a/apps/space/pages/404.tsx b/apps/space/pages/404.tsx
deleted file mode 100644
index d10d95fb9bd..00000000000
--- a/apps/space/pages/404.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// next imports
-import Image from "next/image";
-
-const Custom404Error = () => (
-  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
-    <div className="max-w-[700px] space-y-5">
-      <div className="flex items-center flex-col gap-3 text-center">
-        <div className="relative w-[240px] h-[240px]">
-          <Image src={`/404.svg`} layout="fill" alt="404- Page not found" />
-        </div>
-        <div className="text-xl font-medium">Oops! Something went wrong.</div>
-        <div className="text-sm text-custom-text-200">
-          Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
-          temporarily unavailable.
-        </div>
-      </div>
-
-      <div className="text-center flex justify-center items-center">
-        <a
-          href={`https://app.plane.so/`}
-          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
-        >
-          Go to your Workspace
-        </a>
-      </div>
-    </div>
-  </div>
-);
-
-export default Custom404Error;
diff --git a/apps/space/pages/_app.tsx b/apps/space/pages/_app.tsx
deleted file mode 100644
index 8681006e165..00000000000
--- a/apps/space/pages/_app.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// styles
-import "styles/globals.css";
-// types
-import type { AppProps } from "next/app";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
diff --git a/apps/space/pages/_document.tsx b/apps/space/pages/_document.tsx
deleted file mode 100644
index 8b41d05fce8..00000000000
--- a/apps/space/pages/_document.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;
diff --git a/apps/space/postcss.config.js b/apps/space/postcss.config.js
deleted file mode 100644
index 12a703d900d..00000000000
--- a/apps/space/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/apps/space/public/plane-logo.webp b/apps/space/public/plane-logo.webp
deleted file mode 100644
index 52e7c98da21..00000000000
Binary files a/apps/space/public/plane-logo.webp and /dev/null differ
diff --git a/apps/space/services/api.service.ts b/apps/space/services/api.service.ts
deleted file mode 100644
index 4cf26d9ee62..00000000000
--- a/apps/space/services/api.service.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-// axios
-import axios from "axios";
-// js cookie
-import Cookies from "js-cookie";
-
-abstract class APIService {
-  protected baseURL: string;
-  protected headers: any = {};
-
-  constructor(_baseURL: string) {
-    this.baseURL = _baseURL;
-  }
-
-  setRefreshToken(token: string) {
-    Cookies.set("refreshToken", token);
-  }
-
-  getRefreshToken() {
-    return Cookies.get("refreshToken");
-  }
-
-  purgeRefreshToken() {
-    Cookies.remove("refreshToken", { path: "/" });
-  }
-
-  setAccessToken(token: string) {
-    Cookies.set("accessToken", token);
-  }
-
-  getAccessToken() {
-    return Cookies.get("accessToken");
-  }
-
-  purgeAccessToken() {
-    Cookies.remove("accessToken", { path: "/" });
-  }
-
-  getHeaders() {
-    return {
-      Authorization: `Bearer ${this.getAccessToken()}`,
-    };
-  }
-
-  get(url: string, config = {}): Promise<any> {
-    return axios({
-      method: "get",
-      url: this.baseURL + url,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  post(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "post",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  put(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "put",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  patch(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "patch",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  delete(url: string, data?: any, config = {}): Promise<any> {
-    return axios({
-      method: "delete",
-      url: this.baseURL + url,
-      data: data,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
-  request(config = {}) {
-    return axios(config);
-  }
-}
-
-export default APIService;
diff --git a/apps/space/services/issue.service.ts b/apps/space/services/issue.service.ts
deleted file mode 100644
index 38b2f7a1d37..00000000000
--- a/apps/space/services/issue.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-class IssueService extends APIService {
-  constructor() {
-    super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getPublicIssues(workspace_slug: string, project_slug: string): Promise<any> {
-    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default IssueService;
diff --git a/apps/space/services/project.service.ts b/apps/space/services/project.service.ts
deleted file mode 100644
index 6f0275877f6..00000000000
--- a/apps/space/services/project.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-class ProjectService extends APIService {
-  constructor() {
-    super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise<any> {
-    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default ProjectService;
diff --git a/apps/space/services/user.service.ts b/apps/space/services/user.service.ts
deleted file mode 100644
index a84358a9645..00000000000
--- a/apps/space/services/user.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-class UserService extends APIService {
-  constructor() {
-    super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
-  }
-
-  async currentUser(): Promise<any> {
-    return this.get("/api/users/me/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default UserService;
diff --git a/apps/space/store/issue.ts b/apps/space/store/issue.ts
deleted file mode 100644
index 79ad4b9102c..00000000000
--- a/apps/space/store/issue.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// service
-import IssueService from "services/issue.service";
-// types
-import { TIssueBoardKeys } from "store/types/issue";
-import { IIssueStore, IIssue, IIssueState, IIssueLabel } from "./types";
-
-class IssueStore implements IIssueStore {
-  currentIssueBoardView: TIssueBoardKeys | null = null;
-
-  loader: boolean = false;
-  error: any | null = null;
-
-  states: IIssueState[] | null = null;
-  labels: IIssueLabel[] | null = null;
-  issues: IIssue[] | null = null;
-
-  userSelectedStates: string[] = [];
-  userSelectedLabels: string[] = [];
-  // root store
-  rootStore;
-  // service
-  issueService;
-
-  constructor(_rootStore: any) {
-    makeObservable(this, {
-      // observable
-      currentIssueBoardView: observable,
-
-      loader: observable,
-      error: observable,
-
-      states: observable.ref,
-      labels: observable.ref,
-      issues: observable.ref,
-
-      userSelectedStates: observable,
-      userSelectedLabels: observable,
-      // action
-      setCurrentIssueBoardView: action,
-      getIssuesAsync: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-    this.issueService = new IssueService();
-  }
-
-  // computed
-  getCountOfIssuesByState(state_id: string): number {
-    return this.issues?.filter((issue) => issue.state == state_id).length || 0;
-  }
-
-  getFilteredIssuesByState(state_id: string): IIssue[] | [] {
-    return this.issues?.filter((issue) => issue.state == state_id) || [];
-  }
-
-  // action
-  setCurrentIssueBoardView = async (view: TIssueBoardKeys) => {
-    this.currentIssueBoardView = view;
-  };
-
-  getIssuesAsync = async (workspace_slug: string, project_slug: string) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.issueService.getPublicIssues(workspace_slug, project_slug);
-
-      if (response) {
-        const _states: IIssueState[] = [...response?.states];
-        const _labels: IIssueLabel[] = [...response?.labels];
-        const _issues: IIssue[] = [...response?.issues];
-        runInAction(() => {
-          this.states = _states;
-          this.labels = _labels;
-          this.issues = _issues;
-          this.loader = false;
-        });
-        return response;
-      }
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-}
-
-export default IssueStore;
diff --git a/apps/space/store/project.ts b/apps/space/store/project.ts
deleted file mode 100644
index e5ac58261f3..00000000000
--- a/apps/space/store/project.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// mobx
-import { observable, action, makeObservable, runInAction } from "mobx";
-// service
-import ProjectService from "services/project.service";
-// types
-import { IProjectStore, IWorkspace, IProject, IProjectSettings } from "./types";
-
-class ProjectStore implements IProjectStore {
-  loader: boolean = false;
-  error: any | null = null;
-
-  workspace: IWorkspace | null = null;
-  project: IProject | null = null;
-  workspaceProjectSettings: IProjectSettings | null = null;
-  // root store
-  rootStore;
-  // service
-  projectService;
-
-  constructor(_rootStore: any | null = null) {
-    makeObservable(this, {
-      // observable
-      workspace: observable.ref,
-      project: observable.ref,
-      workspaceProjectSettings: observable.ref,
-      loader: observable,
-      error: observable.ref,
-      // action
-      getProjectSettingsAsync: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-    this.projectService = new ProjectService();
-  }
-
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectService.getProjectSettingsAsync(workspace_slug, project_slug);
-
-      if (response) {
-        const _project: IProject = { ...response?.project_details };
-        const _workspace: IWorkspace = { ...response?.workspace_detail };
-        const _workspaceProjectSettings: IProjectSettings = {
-          comments: response?.comments,
-          reactions: response?.reactions,
-          votes: response?.votes,
-          views: { ...response?.views },
-        };
-        runInAction(() => {
-          this.project = _project;
-          this.workspace = _workspace;
-          this.workspaceProjectSettings = _workspaceProjectSettings;
-          this.loader = false;
-        });
-      }
-      return response;
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-}
-
-export default ProjectStore;
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
deleted file mode 100644
index dd6d620c018..00000000000
--- a/apps/space/store/root.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// mobx lite
-import { enableStaticRendering } from "mobx-react-lite";
-// store imports
-import UserStore from "./user";
-import ThemeStore from "./theme";
-import IssueStore from "./issue";
-import ProjectStore from "./project";
-// types
-import { IIssueStore, IProjectStore, IThemeStore, IUserStore } from "./types";
-
-enableStaticRendering(typeof window === "undefined");
-
-export class RootStore {
-  user: IUserStore;
-  theme: IThemeStore;
-  issue: IIssueStore;
-  project: IProjectStore;
-
-  constructor() {
-    this.user = new UserStore(this);
-    this.theme = new ThemeStore(this);
-    this.issue = new IssueStore(this);
-    this.project = new ProjectStore(this);
-  }
-}
diff --git a/apps/space/store/theme.ts b/apps/space/store/theme.ts
deleted file mode 100644
index 809d56b97c7..00000000000
--- a/apps/space/store/theme.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// types
-import { IThemeStore } from "./types";
-
-class ThemeStore implements IThemeStore {
-  theme: "light" | "dark" = "light";
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any | null = null) {
-    makeObservable(this, {
-      // observable
-      theme: observable,
-      // action
-      setTheme: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-  }
-
-  setTheme = async (_theme: "light" | "dark" | string) => {
-    try {
-      localStorage.setItem("app_theme", _theme);
-      this.theme = _theme === "light" ? "light" : "dark";
-    } catch (error) {
-      console.error("setting user theme error", error);
-    }
-  };
-}
-
-export default ThemeStore;
diff --git a/apps/space/store/types/index.ts b/apps/space/store/types/index.ts
deleted file mode 100644
index 5a0a51eda44..00000000000
--- a/apps/space/store/types/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./user";
-export * from "./theme";
-export * from "./project";
-export * from "./issue";
diff --git a/apps/space/store/types/issue.ts b/apps/space/store/types/issue.ts
deleted file mode 100644
index 5feeba7bd40..00000000000
--- a/apps/space/store/types/issue.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-export type TIssueBoardKeys = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
-
-export interface IIssueBoardViews {
-  key: TIssueBoardKeys;
-  title: string;
-  icon: string;
-  className: string;
-}
-
-export type TIssuePriorityKey = "urgent" | "high" | "medium" | "low" | "none";
-export type TIssuePriorityTitle = "Urgent" | "High" | "Medium" | "Low" | "None";
-export interface IIssuePriorityFilters {
-  key: TIssuePriorityKey;
-  title: TIssuePriorityTitle;
-  className: string;
-  icon: string;
-}
-
-export type TIssueGroupKey = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
-export type TIssueGroupTitle = "Backlog" | "Unstarted" | "Started" | "Completed" | "Cancelled";
-
-export interface IIssueGroup {
-  key: TIssueGroupKey;
-  title: TIssueGroupTitle;
-  color: string;
-  className: string;
-  icon: React.FC;
-}
-
-export interface IIssue {
-  id: string;
-  sequence_id: number;
-  name: string;
-  description_html: string;
-  priority: TIssuePriorityKey | null;
-  state: string;
-  state_detail: any;
-  label_details: any;
-  target_date: any;
-}
-
-export interface IIssueState {
-  id: string;
-  name: string;
-  group: TIssueGroupKey;
-  color: string;
-}
-
-export interface IIssueLabel {
-  id: string;
-  name: string;
-  color: string;
-}
-
-export interface IIssueStore {
-  currentIssueBoardView: TIssueBoardKeys | null;
-  loader: boolean;
-  error: any | null;
-
-  states: IIssueState[] | null;
-  labels: IIssueLabel[] | null;
-  issues: IIssue[] | null;
-
-  userSelectedStates: string[];
-  userSelectedLabels: string[];
-
-  getCountOfIssuesByState: (state: string) => number;
-  getFilteredIssuesByState: (state: string) => IIssue[];
-
-  setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
-  getIssuesAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
-}
diff --git a/apps/space/store/types/project.ts b/apps/space/store/types/project.ts
deleted file mode 100644
index 41f4c2f44d1..00000000000
--- a/apps/space/store/types/project.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export interface IWorkspace {
-  id: string;
-  name: string;
-  slug: string;
-}
-
-export interface IProject {
-  id: string;
-  identifier: string;
-  name: string;
-  description: string;
-  icon: string;
-  cover_image: string | null;
-  icon_prop: string | null;
-  emoji: string | null;
-}
-
-export interface IProjectSettings {
-  comments: boolean;
-  reactions: boolean;
-  votes: boolean;
-  views: {
-    list: boolean;
-    gantt: boolean;
-    kanban: boolean;
-    calendar: boolean;
-    spreadsheet: boolean;
-  };
-}
-
-export interface IProjectStore {
-  loader: boolean;
-  error: any | null;
-
-  workspace: IWorkspace | null;
-  project: IProject | null;
-  workspaceProjectSettings: IProjectSettings | null;
-
-  getProjectSettingsAsync: (workspace_slug: string, project_slug: string) => Promise<void>;
-}
diff --git a/apps/space/store/types/user.ts b/apps/space/store/types/user.ts
deleted file mode 100644
index 0293c538168..00000000000
--- a/apps/space/store/types/user.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IUserStore {
-  currentUser: any | null;
-  getUserAsync: () => void;
-}
diff --git a/apps/space/store/user.ts b/apps/space/store/user.ts
deleted file mode 100644
index 2f4782236dc..00000000000
--- a/apps/space/store/user.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// service
-import UserService from "services/user.service";
-// types
-import { IUserStore } from "./types";
-
-class UserStore implements IUserStore {
-  currentUser: any | null = null;
-  // root store
-  rootStore;
-  // service
-  userService;
-
-  constructor(_rootStore: any) {
-    makeObservable(this, {
-      // observable
-      currentUser: observable,
-      // actions
-      // computed
-    });
-    this.rootStore = _rootStore;
-    this.userService = new UserService();
-  }
-
-  getUserAsync = async () => {
-    try {
-      const response = this.userService.currentUser();
-      if (response) {
-        runInAction(() => {
-          this.currentUser = response;
-        });
-      }
-    } catch (error) {
-      console.error("error", error);
-      runInAction(() => {
-        // render error actions
-      });
-    }
-  };
-}
-
-export default UserStore;
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
deleted file mode 100644
index e493f0abc1c..00000000000
--- a/apps/space/styles/globals.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/apps/space/tailwind.config.js b/apps/space/tailwind.config.js
deleted file mode 100644
index 55aaa9a319a..00000000000
--- a/apps/space/tailwind.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./layouts/**/*.tsx",
-    "./components/**/*.{js,ts,jsx,tsx}",
-    "./constants/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {},
-    },
-  },
-  plugins: [],
-};
diff --git a/apps/space/tsconfig.json b/apps/space/tsconfig.json
deleted file mode 100644
index 5404bd9fbf9..00000000000
--- a/apps/space/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "baseUrl": ".",
-    "paths": {},
-    "plugins": [{ "name": "next" }]
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "server.js", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/deploy/heroku/Dockerfile b/deploy/heroku/Dockerfile
deleted file mode 100644
index edae3278838..00000000000
--- a/deploy/heroku/Dockerfile
+++ /dev/null
@@ -1,4 +0,0 @@
-# Deploy the Plane image
-FROM makeplane/plane
-
-LABEL maintainer="engineering@plane.so"
\ No newline at end of file
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
new file mode 100644
index 00000000000..33a0f6673ce
--- /dev/null
+++ b/deploy/selfhost/docker-compose.yml
@@ -0,0 +1,168 @@
+version: "3.8"
+
+x-app-env : &app-env
+  environment:
+    - NGINX_PORT=${NGINX_PORT:-84}
+    - DEBUG=${DEBUG:-0}
+    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.selfhosted}
+    - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
+    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces}
+    - SENTRY_DSN=${SENTRY_DSN:-""}
+    - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
+    - DOCKERIZED=${DOCKERIZED:-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}
+    - PGDATA=${PGDATA:-/var/lib/postgresql/data}
+    - DATABASE_URL=${DATABASE_URL:-postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${PGHOST}/${PGDATABASE}}
+    # REDIS SETTINGS
+    - REDIS_HOST=${REDIS_HOST:-plane-redis}
+    - REDIS_PORT=${REDIS_PORT:-6379}
+    - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
+    # EMAIL SETTINGS
+    - EMAIL_HOST=${EMAIL_HOST:-""}
+    - EMAIL_HOST_USER=${EMAIL_HOST_USER:-""}
+    - EMAIL_HOST_PASSWORD=${EMAIL_HOST_PASSWORD:-""}
+    - EMAIL_PORT=${EMAIL_PORT:-587}
+    - EMAIL_FROM=${EMAIL_FROM:-"Team Plane &lt;team@mailer.plane.so&gt;"}
+    - EMAIL_USE_TLS=${EMAIL_USE_TLS:-1}
+    - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
+    - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
+    - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
+    # OPENAI SETTINGS
+    - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
+    - OPENAI_API_KEY=${OPENAI_API_KEY:-"sk-"}
+    - GPT_ENGINE=${GPT_ENGINE:-"gpt-3.5-turbo"}
+    # LOGIN/SIGNUP SETTINGS
+    - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
+    - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
+    - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
+    - 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}
+
+services:
+  web:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-frontend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: /usr/local/bin/start.sh web/server.js web
+    deploy:
+      replicas: ${WEB_REPLICAS:-1}
+    depends_on:
+      - api
+      - worker
+
+  space:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-space:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: /usr/local/bin/start.sh space/server.js space
+    deploy:
+      replicas: ${SPACE_REPLICAS:-1}
+    depends_on:
+      - api
+      - worker
+      - web
+
+  api:
+    <<: *app-env
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/takeoff
+    deploy:
+      replicas: ${API_REPLICAS:-1}
+    depends_on:
+      - plane-db
+      - plane-redis
+
+  worker:
+    <<: *app-env
+    container_name: bgworker
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/worker
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    <<: *app-env
+    container_name: beatworker
+    platform: linux/amd64
+    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    restart: unless-stopped
+    command: ./bin/beat
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  plane-db:
+    <<: *app-env
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: unless-stopped
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    
+  plane-redis:
+    <<: *app-env
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: unless-stopped
+    volumes:
+      - redisdata:/data
+
+  plane-minio:
+    <<: *app-env
+    container_name: plane-minio
+    image: minio/minio
+    restart: unless-stopped
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+
+  createbuckets:
+    <<: *app-env
+    image: minio/mc
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    depends_on:
+      - plane-minio
+
+  # Comment this if you already have a reverse proxy running
+  proxy:
+    <<: *app-env
+    container_name: proxy
+    platform: linux/amd64
+    image: makeplane/plane-proxy:${APP_RELEASE:-latest}
+    ports:
+        - ${NGINX_PORT}:80
+    depends_on:
+      - web
+      - api
+      - space
+
+volumes:
+  pgdata:
+  redisdata:
+  uploads:
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
new file mode 100755
index 00000000000..f9437a844b1
--- /dev/null
+++ b/deploy/selfhost/install.sh
@@ -0,0 +1,111 @@
+#!/bin/bash
+
+BRANCH=${BRANCH:-master}
+SCRIPT_DIR=$PWD
+PLANE_INSTALL_DIR=$PWD/plane-app
+mkdir -p $PLANE_INSTALL_DIR/archive
+
+function install(){
+    echo 
+    echo "Installing on $PLANE_INSTALL_DIR"
+    download
+}
+function download(){
+    cd $SCRIPT_DIR
+    TS=$(date +%s)
+    if [ -f "$PLANE_INSTALL_DIR/docker-compose.yaml" ]
+    then
+        mv $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml
+    fi
+
+    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)
+
+    if [ -f "$PLANE_INSTALL_DIR/.env" ];
+    then
+        cp $PLANE_INSTALL_DIR/.env $PLANE_INSTALL_DIR/archive/$TS.env
+    else
+        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+    fi
+
+
+    echo ""
+    echo "Latest version is now available for you to use"
+    echo ""
+    echo "In case of Upgrade, your new setting file is availabe as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
+    echo ""
+
+}
+function startServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose up -d
+    cd $SCRIPT_DIR
+}
+function stopServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose down
+    cd $SCRIPT_DIR
+}
+function restartServices(){
+    cd $PLANE_INSTALL_DIR
+    docker compose restart
+    cd $SCRIPT_DIR
+}
+function upgrade(){
+    echo "***** STOPPING SERVICES ****"
+    stopServices
+
+    echo
+    echo "***** DOWNLOADING LATEST VERSION ****"
+    download
+
+    echo "***** PLEASE VALIDATE AND START SERVICES ****"
+
+}
+function askForAction(){
+    echo
+    echo "Select a Action you want to perform:"
+    echo "   1) Install"
+    echo "   2) Start"
+    echo "   3) Stop"
+    echo "   4) Restart"
+    echo "   5) Upgrade"
+    echo "   6) Exit"
+    echo 
+    read -p "Action [2]: " ACTION
+    until [[ -z "$ACTION" || "$ACTION" =~ ^[1-6]$ ]]; do
+        echo "$ACTION: invalid selection."
+        read -p "Action [2]: " ACTION
+    done
+    echo
+
+
+    if [ "$ACTION" == "1" ]
+    then
+        install
+        askForAction
+    elif [ "$ACTION" == "2" ] || [ "$ACTION" == "" ]
+    then
+        startServices
+        askForAction
+    elif [ "$ACTION" == "3" ] 
+    then
+        stopServices
+        askForAction
+    elif [ "$ACTION" == "4" ] 
+    then
+        restartServices
+        askForAction
+    elif [ "$ACTION" == "5" ] 
+    then
+        upgrade
+        askForAction
+    elif [ "$ACTION" == "6" ] 
+    then
+        exit 0
+    else
+        echo "INVALID ACTION SUPPLIED"
+    fi
+}
+
+askForAction
diff --git a/deploy/selfhost/variables.env b/deploy/selfhost/variables.env
new file mode 100644
index 00000000000..1e507a54b6b
--- /dev/null
+++ b/deploy/selfhost/variables.env
@@ -0,0 +1,63 @@
+APP_RELEASE=latest
+
+WEB_REPLICAS=1
+SPACE_REPLICAS=1
+API_REPLICAS=1
+
+NGINX_PORT=80
+DEBUG=0
+DJANGO_SETTINGS_MODULE=plane.settings.selfhosted
+NEXT_PUBLIC_ENABLE_OAUTH=0
+NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
+SENTRY_DSN=""
+GITHUB_CLIENT_SECRET=""
+DOCKERIZED=1
+
+#DB SETTINGS
+PGHOST=plane-db
+PGDATABASE=plane
+POSTGRES_USER=plane
+POSTGRES_PASSWORD=plane
+POSTGRES_DB=plane
+PGDATA=/var/lib/postgresql/data
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${PGHOST}/${PGDATABASE}
+
+# REDIS SETTINGS
+REDIS_HOST=plane-redis
+REDIS_PORT=6379
+REDIS_URL=redis://${REDIS_HOST}:6379/
+
+# EMAIL SETTINGS
+EMAIL_HOST=""
+EMAIL_HOST_USER=""
+EMAIL_HOST_PASSWORD=""
+EMAIL_PORT=587
+EMAIL_FROM="Team Plane &lt;team@mailer.plane.so&gt;"
+EMAIL_USE_TLS=1
+EMAIL_USE_SSL=0
+DEFAULT_EMAIL=captain@plane.so
+DEFAULT_PASSWORD=password123
+
+# OPENAI SETTINGS
+OPENAI_API_BASE=https://api.openai.com/v1
+OPENAI_API_KEY="sk-"
+GPT_ENGINE="gpt-3.5-turbo"
+
+# LOGIN/SIGNUP SETTINGS
+ENABLE_SIGNUP=1
+ENABLE_EMAIL_PASSWORD=1
+ENABLE_MAGIC_LINK_LOGIN=0
+SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5
+
+# DATA STORE SETTINGS
+USE_MINIO=1
+AWS_REGION=""
+AWS_ACCESS_KEY_ID="access-key"
+AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_S3_ENDPOINT_URL=http://plane-minio:9000
+AWS_S3_BUCKET_NAME=uploads
+MINIO_ROOT_USER="access-key"
+MINIO_ROOT_PASSWORD="secret-key"
+BUCKET_NAME=uploads
+FILE_SIZE_LIMIT=5242880
+
diff --git a/docker-compose-hub.yml b/docker-compose-hub.yml
deleted file mode 100644
index fcb93c530dd..00000000000
--- a/docker-compose-hub.yml
+++ /dev/null
@@ -1,163 +0,0 @@
-version: "3.8"
-
-x-api-and-worker-env:
-        &api-and-worker-env
-        DEBUG: ${DEBUG}
-        SENTRY_DSN: ${SENTRY_DSN}
-        DJANGO_SETTINGS_MODULE: plane.settings.production
-        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-        REDIS_URL: redis://plane-redis:6379/
-        EMAIL_HOST: ${EMAIL_HOST}
-        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-        EMAIL_PORT: ${EMAIL_PORT}
-        EMAIL_FROM: ${EMAIL_FROM}
-        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-        AWS_REGION: ${AWS_REGION}
-        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-        WEB_URL: ${WEB_URL}
-        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-        DISABLE_COLLECTSTATIC: 1
-        DOCKERIZED: 1
-        OPENAI_API_BASE: ${OPENAI_API_BASE}
-        OPENAI_API_KEY: ${OPENAI_API_KEY}
-        GPT_ENGINE: ${GPT_ENGINE}
-        SECRET_KEY: ${SECRET_KEY}
-        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-        USE_MINIO: ${USE_MINIO}
-        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
-
-services:
-        plane-web:
-                container_name: planefrontend
-                image: makeplane/plane-frontend:latest
-                restart: always
-                command: /usr/local/bin/start.sh apps/app/server.js app
-                env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
-                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
-                        NEXT_PUBLIC_GITHUB_ID: "0"
-                        NEXT_PUBLIC_SENTRY_DSN: "0"
-                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
-                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
-                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
-                        NEXT_PUBLIC_TRACK_EVENTS: "0"
-                depends_on:
-                        - plane-api
-                        - plane-worker
-
-        plane-api:
-                container_name: planebackend
-                image: makeplane/plane-backend:latest
-                restart: always
-                command: ./bin/takeoff
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-db
-                        - plane-redis
-
-        plane-worker:
-                container_name: planebgworker
-                image: makeplane/plane-worker:latest
-                restart: always
-                command: ./bin/worker
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
-
-        plane-beat-worker:
-                container_name: planebeatworker
-                image: makeplane/plane-worker:latest
-                restart: always
-                command: ./bin/beat
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
-
-
-        plane-db:
-                container_name: plane-db
-                image: postgres:15.2-alpine
-                restart: always
-                command: postgres -c 'max_connections=1000'
-                volumes:
-                        - pgdata:/var/lib/postgresql/data
-                env_file:
-                        - .env
-                environment:
-                        POSTGRES_USER: ${PGUSER}
-                        POSTGRES_DB: ${PGDATABASE}
-                        POSTGRES_PASSWORD: ${PGPASSWORD}
-                        PGDATA: /var/lib/postgresql/data
-
-        plane-redis:
-                container_name: plane-redis
-                image: redis:6.2.7-alpine
-                restart: always
-                volumes:
-                        - redisdata:/data
-
-        plane-minio:
-                container_name: plane-minio
-                image: minio/minio
-                restart: always
-                command: server /export --console-address ":9090"
-                volumes:
-                        - uploads:/export
-                env_file:
-                        - .env
-                environment:
-                        MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
-                        MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
-
-        createbuckets:
-                image: minio/mc
-                entrypoint: >
-                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
-                env_file:
-                        - .env
-                depends_on:
-                        - plane-minio
-
-        # Comment this if you already have a reverse proxy running
-        plane-proxy:
-                container_name: planeproxy
-                image: makeplane/plane-proxy:latest
-                ports:
-                        - ${NGINX_PORT}:80
-                env_file:
-                        - .env
-                environment:
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
-                        BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
-                depends_on:
-                        - plane-web
-                        - plane-api
-
-volumes:
-        pgdata:
-        redisdata:
-        uploads:
diff --git a/docker-compose-local.yml b/docker-compose-local.yml
new file mode 100644
index 00000000000..4f433e3aceb
--- /dev/null
+++ b/docker-compose-local.yml
@@ -0,0 +1,178 @@
+version: "3.8"
+
+networks:
+  dev_env:
+    driver: bridge
+
+volumes:
+  redisdata:
+  uploads:
+  pgdata:
+  
+
+services:
+  plane-redis:
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - redisdata:/data
+ 
+  plane-minio:
+    container_name: plane-minio
+    image: minio/minio
+    restart: unless-stopped
+    networks:
+      - dev_env
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+    env_file:
+      - .env
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+ 
+  createbuckets:
+    image: minio/mc
+    networks:
+      - dev_env
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    env_file:
+      - .env
+    depends_on:
+      - plane-minio
+ 
+  plane-db:
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${PGUSER}
+      POSTGRES_DB: ${PGDATABASE}
+      POSTGRES_PASSWORD: ${PGPASSWORD}
+      PGDATA: /var/lib/postgresql/data
+
+  web:
+    container_name: web
+    build:
+      context: .
+      dockerfile: ./web/Dockerfile.dev
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - .:/app
+    command: yarn dev --filter=web
+    env_file:
+      - ./web/.env
+    depends_on:
+      - api
+      - worker
+
+  space:
+    build:
+      context: .
+      dockerfile: ./space/Dockerfile.dev
+    container_name: space
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - .:/app
+    command: yarn dev --filter=space
+    env_file:
+      - ./space/.env
+    depends_on:
+      - api
+      - worker
+      - web
+
+  api:
+    container_name: api
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000 --settings=plane.settings.local"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+  
+  worker:
+    container_name: bgworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "celery -A plane worker -l info"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    container_name: beatworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apiserver:/code
+    command: /bin/sh -c "celery -A plane beat -l info"
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  proxy:
+    container_name: proxy
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    networks:
+      - dev_env
+    ports:
+      - ${NGINX_PORT}:80
+    env_file:
+      - .env
+    environment:
+      FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+      BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+    depends_on:
+      - web
+      - api
+      - space
diff --git a/docker-compose.yml b/docker-compose.yml
index d2df6ad09a6..0895aa1ae2b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,176 +1,140 @@
 version: "3.8"
 
-x-api-and-worker-env:
-        &api-and-worker-env
-        DEBUG: ${DEBUG}
-        SENTRY_DSN: ${SENTRY_DSN}
-        DJANGO_SETTINGS_MODULE: plane.settings.production
-        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-        REDIS_URL: redis://plane-redis:6379/
-        EMAIL_HOST: ${EMAIL_HOST}
-        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-        EMAIL_PORT: ${EMAIL_PORT}
-        EMAIL_FROM: ${EMAIL_FROM}
-        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-        AWS_REGION: ${AWS_REGION}
-        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-        WEB_URL: ${WEB_URL}
-        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-        DISABLE_COLLECTSTATIC: 1
-        DOCKERIZED: 1
-        OPENAI_API_BASE: ${OPENAI_API_BASE}
-        OPENAI_API_KEY: ${OPENAI_API_KEY}
-        GPT_ENGINE: ${GPT_ENGINE}
-        SECRET_KEY: ${SECRET_KEY}
-        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-        USE_MINIO: ${USE_MINIO}
-        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
-
 services:
-        plane-web:
-                container_name: planefrontend
-                build:
-                        context: .
-                        dockerfile: ./apps/app/Dockerfile.dev
-                        args:
-                                NEXT_PUBLIC_API_BASE_URL: http://localhost:8000
-                                NEXT_PUBLIC_DEPLOY_URL: http://localhost/spaces
-                restart: always
-                command: /usr/local/bin/start.sh apps/app/server.js app
-                env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
-                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
-                        NEXT_PUBLIC_GITHUB_ID: "0"
-                        NEXT_PUBLIC_SENTRY_DSN: "0"
-                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
-                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
-                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
-                        NEXT_PUBLIC_TRACK_EVENTS: "0"
-                depends_on:
-                        - plane-api
-                        - plane-worker
+  web:
+    container_name: web
+    build:
+      context: .
+      dockerfile: ./web/Dockerfile.web
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: /usr/local/bin/start.sh web/server.js web
+    depends_on:
+      - api
+      - worker
+
+  space:
+    container_name: space
+    build:
+      context: .
+      dockerfile: ./space/Dockerfile.space
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: /usr/local/bin/start.sh space/server.js space
+    depends_on:
+      - api
+      - worker
+      - web
 
-        plane-api:
-                container_name: planebackend
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/takeoff
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-db
-                        - plane-redis
+  api:
+    container_name: api
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/takeoff
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - plane-db
+      - plane-redis
 
-        plane-worker:
-                container_name: planebgworker
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/worker
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
+  worker:
+    container_name: bgworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/worker
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
 
-        plane-beat-worker:
-                container_name: planebeatworker
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/beat
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
+  beat-worker:
+    container_name: beatworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/beat
+    env_file:
+      - ./apiserver/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
 
-        plane-db:
-                container_name: plane-db
-                image: postgres:15.2-alpine
-                restart: always
-                command: postgres -c 'max_connections=1000'
-                volumes:
-                        - pgdata:/var/lib/postgresql/data
-                env_file:
-                        - .env
-                environment:
-                        POSTGRES_USER: ${PGUSER}
-                        POSTGRES_DB: ${PGDATABASE}
-                        POSTGRES_PASSWORD: ${PGPASSWORD}
-                        PGDATA: /var/lib/postgresql/data
+  plane-db:
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: always
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${PGUSER}
+      POSTGRES_DB: ${PGDATABASE}
+      POSTGRES_PASSWORD: ${PGPASSWORD}
+      PGDATA: /var/lib/postgresql/data
 
-        plane-redis:
-                container_name: plane-redis
-                image: redis:6.2.7-alpine
-                restart: always
-                volumes:
-                        - redisdata:/data
+  plane-redis:
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: always
+    volumes:
+      - redisdata:/data
 
-        plane-minio:
-                container_name: plane-minio
-                image: minio/minio
-                restart: always
-                command: server /export --console-address ":9090"
-                volumes:
-                        - uploads:/export
-                env_file:
-                        - .env
-                environment:
-                        MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
-                        MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+  plane-minio:
+    container_name: plane-minio
+    image: minio/minio
+    restart: always
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
 
-        createbuckets:
-                image: minio/mc
-                entrypoint: >
-                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
-                env_file:
-                        - .env
-                depends_on:
-                        - plane-minio
+  createbuckets:
+    image: minio/mc
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    env_file:
+      - .env
+    depends_on:
+      - plane-minio
 
-        # Comment this if you already have a reverse proxy running
-        plane-proxy:
-                container_name: planeproxy
-                build:
-                        context: ./nginx
-                        dockerfile: Dockerfile
-                restart: always
-                ports:
-                        - ${NGINX_PORT}:80
-                env_file:
-                        - .env
-                environment:
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
-                        BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
-                depends_on:
-                        - plane-web
-                        - plane-api
+  # Comment this if you already have a reverse proxy running
+  proxy:
+    container_name: proxy
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    restart: always
+    ports:
+      - ${NGINX_PORT}:80
+    environment:
+      FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+      BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+    depends_on:
+      - web
+      - api
+      - space
 
 volumes:
-        pgdata:
-        redisdata:
-        uploads:
+  pgdata:
+  redisdata:
+  uploads:
diff --git a/nginx/nginx.conf.template b/nginx/nginx.conf.template
index 206c94b51c3..4775dcbfad4 100644
--- a/nginx/nginx.conf.template
+++ b/nginx/nginx.conf.template
@@ -1,26 +1,36 @@
-events { }
-
+events {
+}
 
 http {
-  sendfile on;
+    sendfile on;
 
-server {
-    listen       80;
-    root   /www/data/;
-    access_log /var/log/nginx/access.log;
+    server {
+        listen 80;
+        root /www/data/;
+        access_log /var/log/nginx/access.log;
 
-    client_max_body_size ${FILE_SIZE_LIMIT};
+        client_max_body_size ${FILE_SIZE_LIMIT};
 
-    location / {
-        proxy_pass http://planefrontend:3000/;       
-    }
+        add_header X-Content-Type-Options    "nosniff" always;
+        add_header Referrer-Policy           "no-referrer-when-downgrade" always;
+        add_header Permissions-Policy        "interest-cohort=()" always;
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
 
-    location /api/ {
-        proxy_pass http://planebackend:8000/api/;
-    }
+        location / {
+            proxy_pass http://web:3000/;
+        }
+
+        location /api/ {
+            proxy_pass http://api:8000/api/;
+        }
+
+        location /spaces/ {
+            rewrite ^/spaces/?$ /spaces/login break;
+            proxy_pass http://space:3000/spaces/;
+        }
 
-   location /${BUCKET_NAME}/ {
-        proxy_pass http://plane-minio:9000/uploads/;
+        location /${BUCKET_NAME}/ {
+            proxy_pass http://plane-minio:9000/uploads/;
+        }
     }
 }
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 804fb7b649b..86f010f3f75 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,36 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
+  "version": "0.13.2",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
-    "apps/*",
-    "packages/*"
+    "web",
+    "space",
+    "packages/editor/*",
+    "packages/eslint-config-custom",
+    "packages/tailwind-config-custom",
+    "packages/tsconfig",
+    "packages/ui"
   ],
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
     "start": "turbo run start",
     "lint": "turbo run lint",
-    "clean": "turbo run clean"
+    "clean": "turbo run clean",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.15",
     "eslint-config-custom": "*",
+    "postcss": "^8.4.29",
     "prettier": "latest",
-    "turbo": "latest"
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.3.3",
+    "turbo": "^1.10.16"
+  },
+  "resolutions": {
+    "@types/react": "18.2.0"
   },
   "packageManager": "yarn@1.22.19"
 }
diff --git a/packages/editor/core/Readme.md b/packages/editor/core/Readme.md
new file mode 100644
index 00000000000..56d1a502c79
--- /dev/null
+++ b/packages/editor/core/Readme.md
@@ -0,0 +1,112 @@
+# @plane/editor-core
+
+## Description
+
+The `@plane/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects but only for extending other editors.
+
+## Utilities
+
+We provide a wide range of utilities for extending the core itself.
+
+1. Merging classes and custom styling
+2. Adding new extensions
+3. Adding custom props
+4. Base menu items, and their commands
+
+This allows for extensive customization and flexibility in the Editors created using our `editor-core` package.
+
+### Here's a detailed overview of what's exported
+
+1. useEditor - A hook that you can use to extend the Plane editor.
+
+    | Prop | Type | Description |
+    | --- | --- | --- |
+    | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+    | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
+    | `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+    | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+    | `value` | `html string` | The initial content of the editor. |
+    | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+    | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+    | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+    | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert in case of content not being "saved". |
+    | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
+
+2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
+
+    | Prop | Type | Description |
+    | --- | --- | --- |
+    | `value` | `string` | The initial content of the editor. |
+    | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
+    | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+    | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
+
+3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
+
+4. UI Wrappers
+
+- `EditorContainer` - Wrap your Editor Container with this to apply base classes and styles.
+- `EditorContentWrapper` - Use this to get Editor's Content and base menus.
+
+5. Extending with Custom Styles
+
+```ts
+const customEditorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+```
+
+## Core features
+
+- **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data.
+- **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors.
+- **Turbo Pipeline**: Added a turbo pipeline for both dev and build tasks for projects depending on the editor package.
+
+```json
+    "web#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "space#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "web#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+    "space#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build"
+      ]
+    },
+
+```
+
+## Base extensions included
+
+- BulletList
+- OrderedList
+- Blockquote
+- Code
+- Gapcursor
+- Link
+- Image
+- Basic Marks
+  - Underline
+  - TextStyle
+  - Color
+- TaskList
+- Markdown
+- Table
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
new file mode 100644
index 00000000000..ab6c77724e5
--- /dev/null
+++ b/packages/editor/core/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "@plane/editor-core",
+  "version": "0.0.1",
+  "description": "Core Editor that powers Plane",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@blueprintjs/popover2": "^2.0.10",
+    "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-color": "^2.1.11",
+    "@tiptap/extension-image": "^2.1.7",
+    "@tiptap/extension-link": "^2.1.7",
+    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-table": "^2.1.6",
+    "@tiptap/extension-table-cell": "^2.1.6",
+    "@tiptap/extension-table-header": "^2.1.6",
+    "@tiptap/extension-table-row": "^2.1.6",
+    "@tiptap/extension-task-item": "^2.1.7",
+    "@tiptap/extension-task-list": "^2.1.7",
+    "@tiptap/extension-text-style": "^2.1.11",
+    "@tiptap/extension-underline": "^2.1.7",
+    "@tiptap/prosemirror-tables": "^1.1.4",
+    "jsx-dom-cjs": "^8.0.3",
+    "@tiptap/pm": "^2.1.7",
+    "@tiptap/react": "^2.1.7",
+    "@tiptap/starter-kit": "^2.1.10",
+    "@tiptap/suggestion": "^2.0.4",
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "18.0.11",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "lucide-react": "^0.244.0",
+    "react-markdown": "^8.0.7",
+    "react-moveable": "^0.54.2",
+    "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^9.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/core/postcss.config.js b/packages/editor/core/postcss.config.js
new file mode 100644
index 00000000000..07aa434b2bf
--- /dev/null
+++ b/packages/editor/core/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts
new file mode 100644
index 00000000000..9c1c292b274
--- /dev/null
+++ b/packages/editor/core/src/index.ts
@@ -0,0 +1,22 @@
+// styles
+// import "./styles/tailwind.css";
+// import "./styles/editor.css";
+
+export { isCellSelection } from "./ui/extensions/table/table/utilities/is-cell-selection";
+
+// utils
+export * from "./lib/utils";
+export * from "./ui/extensions/table/table";
+export { startImageUpload } from "./ui/plugins/upload-image";
+
+// components
+export { EditorContainer } from "./ui/components/editor-container";
+export { EditorContentWrapper } from "./ui/components/editor-content";
+
+// hooks
+export { useEditor } from "./ui/hooks/useEditor";
+export { useReadOnlyEditor } from "./ui/hooks/useReadOnlyEditor";
+
+// helper items
+export * from "./ui/menus/menu-items";
+export * from "./lib/editor-commands";
diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts
new file mode 100644
index 00000000000..497a63ca61a
--- /dev/null
+++ b/packages/editor/core/src/lib/editor-commands.ts
@@ -0,0 +1,91 @@
+import { Editor, Range } from "@tiptap/core";
+import { UploadImage } from "../types/upload-image";
+import { startImageUpload } from "../ui/plugins/upload-image";
+
+export const toggleHeadingOne = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+  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();
+  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();
+  else editor.chain().focus().toggleHeading({ level: 3 }).run()
+};
+
+export const toggleBold = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
+  else editor.chain().focus().toggleBold().run();
+};
+
+export const toggleItalic = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
+  else editor.chain().focus().toggleItalic().run();
+};
+
+export const toggleUnderline = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleUnderline().run();
+  else editor.chain().focus().toggleUnderline().run();
+};
+
+export const toggleCode = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleCode().run();
+  else editor.chain().focus().toggleCode().run();
+};
+export const toggleOrderedList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  else editor.chain().focus().toggleOrderedList().run();
+};
+
+export const toggleBulletList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
+  else editor.chain().focus().toggleBulletList().run();
+};
+
+export const toggleTaskList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
+  else editor.chain().focus().toggleTaskList().run()
+};
+
+export const toggleStrike = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
+  else editor.chain().focus().toggleStrike().run();
+};
+
+export const toggleBlockquote = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+  else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+};
+
+export const insertTableCommand = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+};
+
+export const unsetLinkEditor = (editor: Editor) => {
+  editor.chain().focus().unsetLink().run();
+};
+
+export const setLinkEditor = (editor: Editor, url: string) => {
+  editor.chain().focus().setLink({ href: url }).run();
+};
+
+export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).run();
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
+  input.onchange = async () => {
+    if (input.files?.length) {
+      const file = input.files[0];
+      const pos = editor.view.state.selection.from;
+      startImageUpload(file, editor.view, pos, uploadFile, setIsSubmitting);
+    }
+  };
+  input.click();
+};
+
diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts
new file mode 100644
index 00000000000..48467478022
--- /dev/null
+++ b/packages/editor/core/src/lib/utils.ts
@@ -0,0 +1,45 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+interface EditorClassNames {
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+}
+
+export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) => cn(
+  'relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md',
+  noBorder ? '' : 'border border-custom-border-200',
+  borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0',
+  customClassName
+);
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const findTableAncestor = (
+  node: Node | null
+): HTMLTableElement | null => {
+  while (node !== null && node.nodeName !== "TABLE") {
+    node = node.parentNode;
+  }
+  return node as HTMLTableElement;
+};
+
+export const getTrimmedHTML = (html: string) => {
+  html = html.replace(/^(<p><\/p>)+/, '');
+  html = html.replace(/(<p><\/p>)+$/, '');
+  return html;
+}
+
+export const isValidHttpUrl = (string: string): boolean => {
+  let url: URL;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}
diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
new file mode 100644
index 00000000000..85d881eeb46
--- /dev/null
+++ b/packages/editor/core/src/styles/editor.css
@@ -0,0 +1,231 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: rgb(var(--color-background-100));
+  margin: 0;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  border: 2px solid rgb(var(--color-text-100));
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-200));
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+  position: relative;
+  width: 35%;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 45%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid rgba(var(--color-text-200));
+    border-top-color: rgba(var(--color-text-800));
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#editor-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    border: 1px solid rgb(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgb(var(--color-border-200));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+  padding: 0px 1px;
+  margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/packages/editor/core/src/styles/tailwind.css b/packages/editor/core/src/styles/tailwind.css
new file mode 100644
index 00000000000..b5c61c95671
--- /dev/null
+++ b/packages/editor/core/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/editor/core/src/types/delete-image.ts b/packages/editor/core/src/types/delete-image.ts
new file mode 100644
index 00000000000..40bfffe2fd3
--- /dev/null
+++ b/packages/editor/core/src/types/delete-image.ts
@@ -0,0 +1 @@
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
diff --git a/packages/editor/core/src/types/mention-suggestion.ts b/packages/editor/core/src/types/mention-suggestion.ts
new file mode 100644
index 00000000000..9c9ab76069c
--- /dev/null
+++ b/packages/editor/core/src/types/mention-suggestion.ts
@@ -0,0 +1,10 @@
+export type IMentionSuggestion = {
+    id: string;
+    type: string;
+    avatar: string;
+    title: string;
+    subtitle: string;
+    redirect_uri: string;
+}
+
+export type IMentionHighlight = string
\ No newline at end of file
diff --git a/packages/editor/core/src/types/upload-image.ts b/packages/editor/core/src/types/upload-image.ts
new file mode 100644
index 00000000000..3cf1408d22b
--- /dev/null
+++ b/packages/editor/core/src/types/upload-image.ts
@@ -0,0 +1 @@
+export type UploadImage = (file: File) => Promise<string>;
diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
new file mode 100644
index 00000000000..050755f5a8b
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -0,0 +1,24 @@
+import { Editor } from "@tiptap/react";
+import { ReactNode } from "react";
+
+interface EditorContainerProps {
+  editor: Editor | null;
+  editorClassNames: string;
+  children: ReactNode;
+}
+
+export const EditorContainer = ({
+  editor,
+  editorClassNames,
+  children,
+}: EditorContainerProps) => (
+  <div
+    id="editor-container"
+    onClick={() => {
+      editor?.chain().focus().run();
+    }}
+    className={`cursor-text ${editorClassNames}`}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx
new file mode 100644
index 00000000000..d0531da0181
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@@ -0,0 +1,17 @@
+import { Editor, EditorContent } from "@tiptap/react";
+import { ReactNode } from "react";
+import { ImageResizer } from "../extensions/image/image-resize";
+
+interface EditorContentProps {
+  editor: Editor | null;
+  editorContentCustomClassNames: string | undefined;
+  children?: ReactNode;
+}
+
+export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
+  <div className={`contentEditor ${editorContentCustomClassNames}`}>
+    <EditorContent editor={editor} />
+    {(editor?.isActive("image") && editor?.isEditable) && <ImageResizer editor={editor} />}
+    {children}
+  </div>
+);
diff --git a/packages/editor/core/src/ui/extensions/image/image-resize.tsx b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
new file mode 100644
index 00000000000..5e86475cf2c
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
@@ -0,0 +1,44 @@
+import { Editor } from "@tiptap/react";
+import Moveable from "react-moveable";
+
+export const ImageResizer = ({ editor }: { editor: Editor }) => {
+  const updateMediaSize = () => {
+    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+    if (imageInfo) {
+      const selection = editor.state.selection;
+      editor.commands.setImage({
+        src: imageInfo.src,
+        width: Number(imageInfo.style.width.replace("px", "")),
+        height: Number(imageInfo.style.height.replace("px", "")),
+      } as any);
+      editor.commands.setNodeSelection(selection.from);
+    }
+  };
+
+  return (
+    <>
+      <Moveable
+        target={document.querySelector(".ProseMirror-selectednode") as any}
+        container={null}
+        origin={false}
+        edge={false}
+        throttleDrag={0}
+        keepRatio
+        resizable
+        throttleResize={0}
+        onResize={({ target, width, height, delta }: any) => {
+          delta[0] && (target!.style.width = `${width}px`);
+          delta[1] && (target!.style.height = `${height}px`);
+        }}
+        onResizeEnd={() => {
+          updateMediaSize();
+        }}
+        scalable
+        renderDirections={["w", "e"]}
+        onScale={({ target, transform }: any) => {
+          target!.style.transform = transform;
+        }}
+      />
+    </>
+  );
+};
diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx
new file mode 100644
index 00000000000..f9345509d98
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@@ -0,0 +1,23 @@
+import Image from "@tiptap/extension-image";
+import TrackImageDeletionPlugin from "../../plugins/delete-image";
+import UploadImagesPlugin from "../../plugins/upload-image";
+import { DeleteImage } from "../../../types/delete-image";
+
+const ImageExtension = (deleteImage: DeleteImage) => Image.extend({
+  addProseMirrorPlugins() {
+    return [UploadImagesPlugin(), TrackImageDeletionPlugin(deleteImage)];
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: "35%",
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+});
+
+export default ImageExtension;
diff --git a/packages/editor/core/src/ui/extensions/image/read-only-image.tsx b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
new file mode 100644
index 00000000000..73a763d0428
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
@@ -0,0 +1,17 @@
+import Image from "@tiptap/extension-image";
+
+const ReadOnlyImageExtension = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: "35%",
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+});
+
+export default ReadOnlyImageExtension;
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
new file mode 100644
index 00000000000..a7621ab20cb
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -0,0 +1,101 @@
+import StarterKit from "@tiptap/starter-kit";
+import TiptapLink from "@tiptap/extension-link";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Gapcursor from "@tiptap/extension-gapcursor";
+
+import TableHeader from "./table/table-header/table-header";
+import Table from "./table/table";
+import TableCell from "./table/table-cell/table-cell";
+import TableRow from "./table/table-row/table-row";
+
+import ImageExtension from "./image";
+
+import { DeleteImage } from "../../types/delete-image";
+import { isValidHttpUrl } from "../../lib/utils";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+import { Mentions } from "../mentions";
+
+
+export const CoreEditorExtensions = (
+  mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] },
+  deleteFile: DeleteImage,
+) => [
+    StarterKit.configure({
+      bulletList: {
+        HTMLAttributes: {
+          class: "list-disc list-outside leading-3 -mt-2",
+        },
+      },
+      orderedList: {
+        HTMLAttributes: {
+          class: "list-decimal list-outside leading-3 -mt-2",
+        },
+      },
+      listItem: {
+        HTMLAttributes: {
+          class: "leading-normal -mb-2",
+        },
+      },
+      blockquote: {
+        HTMLAttributes: {
+          class: "border-l-4 border-custom-border-300",
+        },
+      },
+      code: {
+        HTMLAttributes: {
+          class:
+            "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+          spellcheck: "false",
+        },
+      },
+      codeBlock: false,
+      horizontalRule: false,
+      dropcursor: {
+        color: "rgba(var(--color-text-100))",
+        width: 2,
+      },
+      gapcursor: false,
+    }),
+    Gapcursor,
+    TiptapLink.configure({
+      protocols: ["http", "https"],
+      validate: (url) => isValidHttpUrl(url),
+      HTMLAttributes: {
+        class:
+          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+      },
+    }),
+    ImageExtension(deleteFile).configure({
+      HTMLAttributes: {
+        class: "rounded-lg border border-custom-border-300",
+      },
+    }),
+    TiptapUnderline,
+    TextStyle,
+    Color,
+    TaskList.configure({
+      HTMLAttributes: {
+        class: "not-prose pl-2",
+      },
+    }),
+    TaskItem.configure({
+      HTMLAttributes: {
+        class: "flex items-start my-4",
+      },
+      nested: true,
+    }),
+    Markdown.configure({
+      html: true,
+      transformCopiedText: true,
+    }),
+    Table,
+    TableHeader,
+    TableCell,
+    TableRow,
+    Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false),
+  ];
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
new file mode 100644
index 00000000000..b39fe7104e5
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-cell"
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
new file mode 100644
index 00000000000..ac43875dac8
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@@ -0,0 +1,58 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableCellOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+export default Node.create<TableCellOptions>({
+  name: "tableCell",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    }
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1
+      },
+      rowspan: {
+        default: 1
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth")
+          const value = colwidth ? [parseInt(colwidth, 10)] : null
+
+          return value
+        }
+      },
+      background: {
+        default: "none"
+      }
+    }
+  },
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "td" }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`
+      }),
+      0
+    ]
+  }
+})
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/index.ts b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
new file mode 100644
index 00000000000..57137dedd43
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-header"
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
new file mode 100644
index 00000000000..712ca65f073
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -0,0 +1,57 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableHeaderOptions {
+  HTMLAttributes: Record<string, any>
+}
+export default Node.create<TableHeaderOptions>({
+  name: "tableHeader",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    }
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1
+      },
+      rowspan: {
+        default: 1
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth")
+          const value = colwidth ? [parseInt(colwidth, 10)] : null
+
+          return value
+        }
+      },
+      background: {
+        default: "rgb(var(--color-primary-100))"
+      }
+    }
+  },
+
+  tableRole: "header_cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "th" }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`
+      }),
+      0
+    ]
+  }
+})
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/index.ts b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
new file mode 100644
index 00000000000..9ecc2c0ae57
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-row"
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
new file mode 100644
index 00000000000..e922e7fa197
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableRowOptions {
+    HTMLAttributes: Record<string, any>
+}
+
+export default Node.create<TableRowOptions>({
+    name: "tableRow",
+
+    addOptions() {
+        return {
+            HTMLAttributes: {}
+        }
+    },
+
+    content: "(tableCell | tableHeader)*",
+
+    tableRole: "row",
+
+    parseHTML() {
+        return [{ tag: "tr" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "tr",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            0
+        ]
+    }
+})
diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
new file mode 100644
index 00000000000..d3159d4aa8c
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -0,0 +1,55 @@
+const icons = {
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  insertLeftTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+      >
+    <path
+      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertRightTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertTopTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertBottomTableIcon:`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+};
+
+export default icons;
diff --git a/packages/editor/core/src/ui/extensions/table/table/index.ts b/packages/editor/core/src/ui/extensions/table/table/index.ts
new file mode 100644
index 00000000000..5dbd0f38a45
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table"
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
new file mode 100644
index 00000000000..f5ec958a463
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@@ -0,0 +1,117 @@
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { findParentNode } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+
+const key = new PluginKey("tableControls");
+
+export function tableControls() {
+  return new Plugin({
+    key,
+    state: {
+      init() {
+        return new TableControlsState();
+      },
+      apply(tr, prev) {
+        return prev.apply(tr);
+      },
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          const pluginState = key.getState(view.state);
+
+          if (
+            !(event.target as HTMLElement).closest(".tableWrapper") &&
+            pluginState.values.hoveredTable
+          ) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: null,
+                setHoveredCell: null,
+              }),
+            );
+          }
+
+          const pos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!pos) return;
+
+          const table = findParentNode((node) => node.type.name === "table")(
+            TextSelection.create(view.state.doc, pos.pos),
+          );
+          const cell = findParentNode(
+            (node) =>
+              node.type.name === "tableCell" ||
+              node.type.name === "tableHeader",
+          )(TextSelection.create(view.state.doc, pos.pos));
+
+          if (!table || !cell) return;
+
+          if (pluginState.values.hoveredCell?.pos !== cell.pos) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: table,
+                setHoveredCell: cell,
+              }),
+            );
+          }
+        },
+      },
+      decorations: (state) => {
+        const pluginState = key.getState(state);
+        if (!pluginState) {
+          return null;
+        }
+
+        const { hoveredTable, hoveredCell } = pluginState.values;
+        const docSize = state.doc.content.size;
+        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+          const decorations = [
+            Decoration.node(
+              hoveredTable.pos,
+              hoveredTable.pos + hoveredTable.node.nodeSize,
+              {},
+              {
+                hoveredTable,
+                hoveredCell,
+              },
+            ),
+          ];
+
+          return DecorationSet.create(state.doc, decorations);
+        }
+
+        return null;
+      },
+    },
+  });
+}
+
+class TableControlsState {
+  values;
+
+  constructor(props = {}) {
+    this.values = {
+      hoveredTable: null,
+      hoveredCell: null,
+      ...props,
+    };
+  }
+
+  apply(tr: any) {
+    const actions = tr.getMeta(key);
+
+    if (actions?.setHoveredTable !== undefined) {
+      this.values.hoveredTable = actions.setHoveredTable;
+    }
+
+    if (actions?.setHoveredCell !== undefined) {
+      this.values.hoveredCell = actions.setHoveredCell;
+    }
+
+    return this;
+  }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
new file mode 100644
index 00000000000..6e3f9318e98
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -0,0 +1,530 @@
+import { h } from "jsx-dom-cjs";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Decoration, NodeView } from "@tiptap/pm/view";
+import tippy, { Instance, Props } from "tippy.js";
+
+import { Editor } from "@tiptap/core";
+import {
+  CellSelection,
+  TableMap,
+  updateColumnsOnResize,
+} from "@tiptap/prosemirror-tables";
+
+import icons from "./icons";
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLElement,
+  table: HTMLElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: any,
+) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild as HTMLElement;
+  const row = node.firstChild;
+
+  if (!row) return;
+
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
+    const { colspan, colwidth } = row.child(i).attrs;
+
+    for (let j = 0; j < colspan; j += 1, col += 1) {
+      const hasWidth =
+        overrideCol === col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? `${hasWidth}px` : "";
+
+      totalWidth += hasWidth || cellMinWidth;
+
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement("col")).style.width =
+          cssWidth;
+      } else {
+        if (nextDOM.style.width !== cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+
+        nextDOM = nextDOM.nextSibling as HTMLElement;
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+
+    nextDOM.parentNode?.removeChild(nextDOM);
+    nextDOM = after as HTMLElement;
+  }
+
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = "";
+  } else {
+    table.style.width = "";
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+
+const defaultTippyOptions: Partial<Props> = {
+  allowHTML: true,
+  arrow: false,
+  trigger: "click",
+  animation: "scale-subtle",
+  theme: "light-border no-padding",
+  interactive: true,
+  hideOnClick: true,
+  placement: "right",
+};
+
+function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+  return editor
+    .chain()
+    .focus()
+    .updateAttributes("tableCell", {
+      background: backgroundColor,
+    })
+    .updateAttributes("tableHeader", {
+      background: backgroundColor,
+    })
+    .run();
+}
+
+const columnsToolboxItems = [
+  {
+    label: "Add Column Before",
+    icon: icons.insertLeftTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnBefore().run(),
+  },
+  {
+    label: "Add Column After",
+    icon: icons.insertRightTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnAfter().run(),
+  },
+  {
+    label: "Pick Column Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLElement;
+      controlsContainer;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Column",
+    icon: icons.deleteColumn,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteColumn().run(),
+  },
+];
+
+const rowsToolboxItems = [
+  {
+    label: "Add Row Above",
+    icon: icons.insertTopTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowBefore().run(),
+  },
+  {
+    label: "Add Row Below",
+    icon: icons.insertBottomTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowAfter().run(),
+  },
+  {
+    label: "Pick Row Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLButtonElement;
+      controlsContainer:
+        | Element
+        | "parent"
+        | ((ref: Element) => Element)
+        | undefined;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Row",
+    icon: icons.deleteRow,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteRow().run(),
+  },
+];
+
+function createToolbox({
+  triggerButton,
+  items,
+  tippyOptions,
+  onClickItem,
+}: {
+  triggerButton: HTMLElement;
+  items: { icon: string; label: string }[];
+  tippyOptions: any;
+  onClickItem: any;
+}): Instance<Props> {
+  const toolbox = tippy(triggerButton, {
+    content: h(
+      "div",
+      { className: "tableToolbox" },
+      items.map((item) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            onClick() {
+              onClickItem(item);
+            },
+          },
+          [
+            h("div", {
+              className: "iconContainer",
+              innerHTML: item.icon,
+            }),
+            h("div", { className: "label" }, item.label),
+          ],
+        ),
+      ),
+    ),
+    ...tippyOptions,
+  });
+
+  return Array.isArray(toolbox) ? toolbox[0] : toolbox;
+}
+
+function createColorPickerToolbox({
+  triggerButton,
+  tippyOptions,
+  onSelectColor = () => {},
+}: {
+  triggerButton: HTMLElement;
+  tippyOptions: Partial<Props>;
+  onSelectColor?: (color: string) => void;
+}) {
+  const items = {
+    Default: "rgb(var(--color-primary-100))",
+    Orange: "#FFE5D1",
+    Grey: "#F1F1F1",
+    Yellow: "#FEF3C7",
+    Green: "#DCFCE7",
+    Red: "#FFDDDD",
+    Blue: "#D9E4FF",
+    Pink: "#FFE8FA",
+    Purple: "#E8DAFB",
+  };
+
+  const colorPicker = tippy(triggerButton, {
+    ...defaultTippyOptions,
+    content: h(
+      "div",
+      { className: "tableColorPickerToolbox" },
+      Object.entries(items).map(([key, value]) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            onClick: () => {
+              onSelectColor(value);
+              colorPicker.hide();
+            },
+          },
+          [
+            h("div", {
+              className: "colorContainer",
+              style: {
+                backgroundColor: value,
+              },
+            }),
+            h(
+              "div",
+              {
+                className: "label",
+              },
+              key,
+            ),
+          ],
+        ),
+      ),
+    ),
+    onHidden: (instance) => {
+      instance.destroy();
+    },
+    showOnCreate: true,
+    ...tippyOptions,
+  });
+
+  return colorPicker;
+}
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode;
+  cellMinWidth: number;
+  decorations: Decoration[];
+  editor: Editor;
+  getPos: () => number;
+  hoveredCell;
+  map: TableMap;
+  root: HTMLElement;
+  table: HTMLElement;
+  colgroup: HTMLElement;
+  tbody: HTMLElement;
+  rowsControl?: HTMLElement;
+  columnsControl?: HTMLElement;
+  columnsToolbox?: Instance<Props>;
+  rowsToolbox?: Instance<Props>;
+  controls?: HTMLElement;
+
+  get dom() {
+    return this.root;
+  }
+
+  get contentDOM() {
+    return this.tbody;
+  }
+
+  constructor(
+    node: ProseMirrorNode,
+    cellMinWidth: number,
+    decorations: Decoration[],
+    editor: Editor,
+    getPos: () => number,
+  ) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.decorations = decorations;
+    this.editor = editor;
+    this.getPos = getPos;
+    this.hoveredCell = null;
+    this.map = TableMap.get(node);
+
+    if (editor.isEditable) {
+      this.rowsControl = h(
+        "div",
+        { className: "rowsControl" },
+        h("button", {
+          onClick: () => this.selectRow(),
+        }),
+      );
+
+      this.columnsControl = h(
+        "div",
+        { className: "columnsControl" },
+        h("button", {
+          onClick: () => this.selectColumn(),
+        }),
+      );
+
+      this.controls = h(
+        "div",
+        { className: "tableControls", contentEditable: "false" },
+        this.rowsControl,
+        this.columnsControl,
+      );
+
+      this.columnsToolbox = createToolbox({
+        triggerButton: this.columnsControl.querySelector("button"),
+        items: columnsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.columnsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.columnsToolbox?.hide();
+        },
+      });
+
+      this.rowsToolbox = createToolbox({
+        triggerButton: this.rowsControl.firstElementChild,
+        items: rowsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.rowsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.rowsToolbox?.hide();
+        },
+      });
+    }
+
+    // Table
+
+    this.colgroup = h(
+      "colgroup",
+      null,
+      Array.from({ length: this.map.width }, () => 1).map(() => h("col")),
+    );
+    this.tbody = h("tbody");
+    this.table = h("table", null, this.colgroup, this.tbody);
+
+    this.root = h(
+      "div",
+      {
+        className: "tableWrapper controls--disabled",
+      },
+      this.controls,
+      this.table,
+    );
+
+    this.render();
+  }
+
+  update(node: ProseMirrorNode, decorations) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    this.decorations = decorations;
+    this.map = TableMap.get(this.node);
+
+    if (this.editor.isEditable) {
+      this.updateControls();
+    }
+
+    this.render();
+
+    return true;
+  }
+
+  render() {
+    if (this.colgroup.children.length !== this.map.width) {
+      const cols = Array.from({ length: this.map.width }, () => 1).map(() =>
+        h("col"),
+      );
+      this.colgroup.replaceChildren(...cols);
+    }
+
+    updateColumnsOnResize(
+      this.node,
+      this.colgroup,
+      this.table,
+      this.cellMinWidth,
+    );
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  updateControls() {
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(
+      this.decorations,
+    ).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }
+
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>,
+    ) as any;
+
+    if (table === undefined || cell === undefined) {
+      return this.root.classList.add("controls--disabled");
+    }
+
+    this.root.classList.remove("controls--disabled");
+    this.hoveredCell = cell;
+
+    const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
+
+    const tableRect = this.table.getBoundingClientRect();
+    const cellRect = cellDom.getBoundingClientRect();
+
+    this.columnsControl.style.left = `${
+      cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft
+    }px`;
+    this.columnsControl.style.width = `${cellRect.width}px`;
+
+    this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+    this.rowsControl.style.height = `${cellRect.height}px`;
+  }
+
+  selectColumn() {
+    if (!this.hoveredCell) return;
+
+    const colIndex = this.map.colCount(
+      this.hoveredCell.pos - (this.getPos() + 1),
+    );
+    const anchorCellPos = this.hoveredCell.pos;
+    const headCellPos =
+      this.map.map[colIndex + this.map.width * (this.map.height - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.view.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.state.tr.setSelection(cellSelection),
+    );
+  }
+
+  selectRow() {
+    if (!this.hoveredCell) return;
+
+    const anchorCellPos = this.hoveredCell.pos;
+    const anchorCellIndex = this.map.map.indexOf(
+      anchorCellPos - (this.getPos() + 1),
+    );
+    const headCellPos =
+      this.map.map[anchorCellIndex + (this.map.width - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.view.state.tr.setSelection(cellSelection),
+    );
+  }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts
new file mode 100644
index 00000000000..eab3cad92e0
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -0,0 +1,298 @@
+import { TextSelection } from "@tiptap/pm/state"
+
+import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"
+import {
+    addColumnAfter,
+    addColumnBefore,
+    addRowAfter,
+    addRowBefore,
+    CellSelection,
+    columnResizing,
+    deleteColumn,
+    deleteRow,
+    deleteTable,
+    fixTables,
+    goToNextCell,
+    mergeCells,
+    setCellAttr,
+    splitCell,
+    tableEditing,
+    toggleHeader,
+    toggleHeaderCell
+} from "@tiptap/prosemirror-tables"
+
+import { tableControls } from "./table-controls"
+import { TableView } from "./table-view"
+import { createTable } from "./utilities/create-table"
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected"
+
+export interface TableOptions {
+    HTMLAttributes: Record<string, any>
+    resizable: boolean
+    handleWidth: number
+    cellMinWidth: number
+    lastColumnResizable: boolean
+    allowTableNodeSelection: boolean
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        table: {
+            insertTable: (options?: {
+                rows?: number
+                cols?: number
+                withHeaderRow?: boolean
+            }) => ReturnType
+            addColumnBefore: () => ReturnType
+            addColumnAfter: () => ReturnType
+            deleteColumn: () => ReturnType
+            addRowBefore: () => ReturnType
+            addRowAfter: () => ReturnType
+            deleteRow: () => ReturnType
+            deleteTable: () => ReturnType
+            mergeCells: () => ReturnType
+            splitCell: () => ReturnType
+            toggleHeaderColumn: () => ReturnType
+            toggleHeaderRow: () => ReturnType
+            toggleHeaderCell: () => ReturnType
+            mergeOrSplit: () => ReturnType
+            setCellAttribute: (name: string, value: any) => ReturnType
+            goToNextCell: () => ReturnType
+            goToPreviousCell: () => ReturnType
+            fixTables: () => ReturnType
+            setCellSelection: (position: {
+                anchorCell: number
+                headCell?: number
+            }) => ReturnType
+        }
+    }
+
+    interface NodeConfig<Options, Storage> {
+        tableRole?:
+            | string
+            | ((this: {
+                  name: string
+                  options: Options
+                  storage: Storage
+                  parent: ParentConfig<NodeConfig<Options>>["tableRole"]
+              }) => string)
+    }
+}
+
+export default Node.create({
+    name: "table",
+
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            resizable: true,
+            handleWidth: 5,
+            cellMinWidth: 100,
+            lastColumnResizable: true,
+            allowTableNodeSelection: true
+        }
+    },
+
+    content: "tableRow+",
+
+    tableRole: "table",
+
+    isolating: true,
+
+    group: "block",
+
+    allowGapCursor: false,
+
+    parseHTML() {
+        return [{ tag: "table" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "table",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            ["tbody", 0]
+        ]
+    },
+
+    addCommands() {
+        return {
+            insertTable:
+                ({ rows = 3, cols = 3, withHeaderRow = true} = {}) =>
+                ({ tr, dispatch, editor }) => {
+                    const node = createTable(
+                        editor.schema,
+                        rows,
+                        cols,
+                        withHeaderRow
+                    )
+
+                    if (dispatch) {
+                        const offset = tr.selection.anchor + 1
+
+                        tr.replaceSelectionWith(node)
+                            .scrollIntoView()
+                            .setSelection(
+                                TextSelection.near(tr.doc.resolve(offset))
+                            )
+                    }
+
+                    return true
+                },
+            addColumnBefore:
+                () =>
+                ({ state, dispatch }) => addColumnBefore(state, dispatch),
+            addColumnAfter:
+                () =>
+                ({ state, dispatch }) => addColumnAfter(state, dispatch),
+            deleteColumn:
+                () =>
+                ({ state, dispatch }) => deleteColumn(state, dispatch),
+            addRowBefore:
+                () =>
+                ({ state, dispatch }) => addRowBefore(state, dispatch),
+            addRowAfter:
+                () =>
+                ({ state, dispatch }) => addRowAfter(state, dispatch),
+            deleteRow:
+                () =>
+                ({ state, dispatch }) => deleteRow(state, dispatch),
+            deleteTable:
+                () =>
+                ({ state, dispatch }) => deleteTable(state, dispatch),
+            mergeCells:
+                () =>
+                ({ state, dispatch }) => mergeCells(state, dispatch),
+            splitCell:
+                () =>
+                ({ state, dispatch }) => splitCell(state, dispatch),
+            toggleHeaderColumn:
+                () =>
+                ({ state, dispatch }) => toggleHeader("column")(state, dispatch),
+            toggleHeaderRow:
+                () =>
+                ({ state, dispatch }) => toggleHeader("row")(state, dispatch),
+            toggleHeaderCell:
+                () =>
+                ({ state, dispatch }) => toggleHeaderCell(state, dispatch),
+            mergeOrSplit:
+                () =>
+                ({ state, dispatch }) => {
+                    if (mergeCells(state, dispatch)) {
+                        return true
+                    }
+
+                    return splitCell(state, dispatch)
+                },
+            setCellAttribute:
+                (name, value) =>
+                ({ state, dispatch }) => setCellAttr(name, value)(state, dispatch),
+            goToNextCell:
+                () =>
+                ({ state, dispatch }) => goToNextCell(1)(state, dispatch),
+            goToPreviousCell:
+                () =>
+                ({ state, dispatch }) => goToNextCell(-1)(state, dispatch),
+            fixTables:
+                () =>
+                ({ state, dispatch }) => {
+                    if (dispatch) {
+                        fixTables(state)
+                    }
+
+                    return true
+                },
+            setCellSelection:
+                (position) =>
+                ({ tr, dispatch }) => {
+                    if (dispatch) {
+                        const selection = CellSelection.create(
+                            tr.doc,
+                            position.anchorCell,
+                            position.headCell
+                        )
+
+                        // @ts-ignore
+                        tr.setSelection(selection)
+                    }
+
+                    return true
+                }
+        }
+    },
+
+    addKeyboardShortcuts() {
+        return {
+            Tab: () => {
+                if (this.editor.commands.goToNextCell()) {
+                    return true
+                }
+
+                if (!this.editor.can().addRowAfter()) {
+                    return false
+                }
+
+                return this.editor.chain().addRowAfter().goToNextCell().run()
+            },
+            "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+            Backspace: deleteTableWhenAllCellsSelected,
+            "Mod-Backspace": deleteTableWhenAllCellsSelected,
+            Delete: deleteTableWhenAllCellsSelected,
+            "Mod-Delete": deleteTableWhenAllCellsSelected
+        }
+    },
+
+    addNodeView() {
+        return ({ editor, getPos, node, decorations }) => {
+            const { cellMinWidth } = this.options
+
+            return new TableView(
+                node,
+                cellMinWidth,
+                decorations,
+                editor,
+                getPos as () => number
+            )
+        }
+    },
+
+    addProseMirrorPlugins() {
+        const isResizable = this.options.resizable && this.editor.isEditable
+
+        const plugins = [
+            tableEditing({
+                allowTableNodeSelection: this.options.allowTableNodeSelection
+            }),
+            tableControls()
+        ]
+
+        if (isResizable) {
+            plugins.unshift(
+                columnResizing({
+                    handleWidth: this.options.handleWidth,
+                    cellMinWidth: this.options.cellMinWidth,
+                    // View: TableView,
+
+                    // @ts-ignore
+                    lastColumnResizable: this.options.lastColumnResizable
+                })
+            )
+        }
+
+        return plugins
+    },
+
+    extendNodeSchema(extension) {
+        const context = {
+            name: extension.name,
+            options: extension.options,
+            storage: extension.storage
+        }
+
+        return {
+            tableRole: callOrReturn(
+                getExtensionField(extension, "tableRole", context)
+            )
+        }
+    }
+})
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
new file mode 100644
index 00000000000..a3d7f2da814
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
@@ -0,0 +1,12 @@
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model"
+
+export function createCell(
+    cellType: NodeType,
+    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+): ProsemirrorNode | null | undefined {
+    if (cellContent) {
+        return cellType.createChecked(null, cellContent)
+    }
+
+    return cellType.createAndFill()
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
new file mode 100644
index 00000000000..75bf7cb41db
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
@@ -0,0 +1,45 @@
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model"
+
+import { createCell } from "./create-cell"
+import { getTableNodeTypes } from "./get-table-node-types"
+
+export function createTable(
+    schema: Schema,
+    rowsCount: number,
+    colsCount: number,
+    withHeaderRow: boolean,
+    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+): 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)
+
+        if (cell) {
+            cells.push(cell)
+        }
+
+        if (withHeaderRow) {
+            const headerCell = createCell(types.header_cell, cellContent)
+
+            if (headerCell) {
+                headerCells.push(headerCell)
+            }
+        }
+    }
+
+    const rows: ProsemirrorNode[] = []
+
+    for (let index = 0; index < rowsCount; index += 1) {
+        rows.push(
+            types.row.createChecked(
+                null,
+                withHeaderRow && index === 0 ? headerCells : cells
+            )
+        )
+    }
+
+    return types.table.createChecked(null, rows)
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
new file mode 100644
index 00000000000..dcb20b3239f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
@@ -0,0 +1,39 @@
+import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"
+
+import { isCellSelection } from "./is-cell-selection"
+
+export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
+    editor
+}) => {
+    const { selection } = editor.state
+
+    if (!isCellSelection(selection)) {
+        return false
+    }
+
+    let cellCount = 0
+    const table = findParentNodeClosestToPos(
+        selection.ranges[0].$from,
+        (node) => node.type.name === "table"
+    )
+
+    table?.node.descendants((node) => {
+        if (node.type.name === "table") {
+            return false
+        }
+
+        if (["tableCell", "tableHeader"].includes(node.type.name)) {
+            cellCount += 1
+        }
+    })
+
+    const allCellsSelected = cellCount === selection.ranges.length
+
+    if (!allCellsSelected) {
+        return false
+    }
+
+    editor.commands.deleteTable()
+
+    return true
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
new file mode 100644
index 00000000000..293878cb0a4
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
@@ -0,0 +1,21 @@
+import { NodeType, Schema } from "prosemirror-model"
+
+export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
+    if (schema.cached.tableNodeTypes) {
+        return schema.cached.tableNodeTypes
+    }
+
+    const roles: { [key: string]: NodeType } = {}
+
+    Object.keys(schema.nodes).forEach((type) => {
+        const nodeType = schema.nodes[type]
+
+        if (nodeType.spec.tableRole) {
+            roles[nodeType.spec.tableRole] = nodeType
+        }
+    })
+
+    schema.cached.tableNodeTypes = roles
+
+    return roles
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
new file mode 100644
index 00000000000..3c36bf055e2
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
@@ -0,0 +1,5 @@
+import { CellSelection } from "@tiptap/prosemirror-tables"
+
+export function isCellSelection(value: unknown): value is CellSelection {
+    return value instanceof CellSelection
+}
diff --git a/packages/editor/core/src/ui/hooks/useEditor.tsx b/packages/editor/core/src/ui/hooks/useEditor.tsx
new file mode 100644
index 00000000000..9fcf200fb98
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@@ -0,0 +1,85 @@
+import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import {
+  useImperativeHandle,
+  useRef,
+  MutableRefObject,
+  useEffect,
+} from "react";
+import { DeleteImage } from "../../types/delete-image";
+import { CoreEditorProps } from "../props";
+import { CoreEditorExtensions } from "../extensions";
+import { EditorProps } from "@tiptap/pm/view";
+import { getTrimmedHTML } from "../../lib/utils";
+import { UploadImage } from "../../types/upload-image";
+import { useInitializedContent } from "./useInitializedContent";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface CustomEditorProps {
+  uploadFile: UploadImage;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  value: string;
+  deleteFile: DeleteImage;
+  debouncedUpdatesEnabled?: boolean;
+  onChange?: (json: any, html: string) => void;
+  extensions?: any;
+  editorProps?: EditorProps;
+  forwardedRef?: any;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+}
+
+export const useEditor = ({
+  uploadFile,
+  deleteFile,
+  editorProps = {},
+  value,
+  extensions = [],
+  onChange,
+  setIsSubmitting,
+  forwardedRef,
+  setShouldShowAlert,
+  mentionHighlights,
+  mentionSuggestions
+}: CustomEditorProps) => {
+  const editor = useCustomEditor(
+    {
+      editorProps: {
+        ...CoreEditorProps(uploadFile, setIsSubmitting),
+        ...editorProps,
+      },
+      extensions: [...CoreEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}, deleteFile), ...extensions],
+      content:
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      onUpdate: async ({ editor }) => {
+        // for instant feedback loop
+        setIsSubmitting?.("submitting");
+        setShouldShowAlert?.(true);
+        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
+      },
+    },
+    [],
+  );
+
+  useInitializedContent(editor, value);
+
+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+  editorRef.current = editor;
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  if (!editor) {
+    return null;
+  }
+
+  return editor;
+};
\ No newline at end of file
diff --git a/packages/editor/core/src/ui/hooks/useInitializedContent.tsx b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
new file mode 100644
index 00000000000..8e2ce1717bf
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
@@ -0,0 +1,19 @@
+import { Editor } from "@tiptap/react";
+import { useEffect, useRef } from "react";
+
+export const useInitializedContent = (editor: Editor | null, value: string) => {
+  const hasInitializedContent = useRef(false);
+
+  useEffect(() => {
+    if (editor) {
+      const cleanedValue =
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>";
+      if (cleanedValue !== "<p></p>" && !hasInitializedContent.current) {
+        editor.commands.setContent(cleanedValue);
+        hasInitializedContent.current = true;
+      } else if (cleanedValue === "<p></p>" && hasInitializedContent.current) {
+        hasInitializedContent.current = false;
+      }
+    }
+  }, [value, editor]);
+};
diff --git a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
new file mode 100644
index 00000000000..9243c2f4e70
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@@ -0,0 +1,59 @@
+import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import {
+  useImperativeHandle,
+  useRef,
+  MutableRefObject,
+  useEffect,
+} from "react";
+import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
+import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
+import { EditorProps } from '@tiptap/pm/view';
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface CustomReadOnlyEditorProps {
+  value: string;
+  forwardedRef?: any;
+  extensions?: any;
+  editorProps?: EditorProps;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+}
+
+export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {}, mentionHighlights, mentionSuggestions}: CustomReadOnlyEditorProps) => {
+  const editor = useCustomEditor({
+    editable: false,
+    content:
+      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+    editorProps: {
+      ...CoreReadOnlyEditorProps,
+      ...editorProps,
+    },
+    extensions: [...CoreReadOnlyEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}), ...extensions],
+  });
+
+  const hasIntiliazedContent = useRef(false);
+  useEffect(() => {
+    if (editor && !value && !hasIntiliazedContent.current) {
+      editor.commands.setContent(value);
+      hasIntiliazedContent.current = true;
+    }
+  }, [value]);
+
+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+  editorRef.current = editor;
+
+  useImperativeHandle(forwardedRef, () => ({
+    clearEditor: () => {
+      editorRef.current?.commands.clearContent();
+    },
+    setEditorValue: (content: string) => {
+      editorRef.current?.commands.setContent(content);
+    },
+  }));
+
+  if (!editor) {
+    return null;
+  }
+
+  return editor;
+};
diff --git a/packages/editor/core/src/ui/index.tsx b/packages/editor/core/src/ui/index.tsx
new file mode 100644
index 00000000000..a314a265009
--- /dev/null
+++ b/packages/editor/core/src/ui/index.tsx
@@ -0,0 +1,103 @@
+"use client";
+import * as React from "react";
+import { Extension } from "@tiptap/react";
+import { UploadImage } from "../types/upload-image";
+import { DeleteImage } from "../types/delete-image";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/useEditor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import { IMentionSuggestion } from "../types/mention-suggestion";
+
+interface ICoreEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  editable?: boolean;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  accessValue: string;
+  onAccessChange: (accessKey: string) => void;
+  commentAccess: {
+    icon: string;
+    key: string;
+    label: "Private" | "Public";
+  }[];
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  extensions?: Extension[];
+  editorProps?: EditorProps;
+}
+
+interface EditorCoreProps extends ICoreEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const CoreEditor = ({
+  onChange,
+  debouncedUpdatesEnabled,
+  editable,
+  setIsSubmitting,
+  setShouldShowAlert,
+  editorContentCustomClassNames,
+  value,
+  uploadFile,
+  deleteFile,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  forwardedRef,
+}: EditorCoreProps) => {
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
+  (props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
+);
+
+CoreEditorWithRef.displayName = "CoreEditorWithRef";
+
+export { CoreEditor, CoreEditorWithRef };
diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/MentionList.tsx
new file mode 100644
index 00000000000..48aebaa119d
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/MentionList.tsx
@@ -0,0 +1,120 @@
+import { Editor } from "@tiptap/react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+interface MentionListProps {
+  items: IMentionSuggestion[];
+  command: (item: {
+    id: string;
+    label: string;
+    target: string;
+    redirect_uri: string;
+  }) => void;
+  editor: Editor;
+}
+
+// eslint-disable-next-line react/display-name
+const MentionList = forwardRef((props: MentionListProps, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index: number) => {
+    const item = props.items[index];
+
+    if (item) {
+      props.command({
+        id: item.id,
+        label: item.title,
+        target: "users",
+        redirect_uri: item.redirect_uri,
+      });
+    }
+  };
+
+  const upHandler = () => {
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length,
+    );
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [props.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 props.items && props.items.length !== 0 ? (
+    <div className="mentions absolute max-h-40 bg-custom-background-100 rounded-md shadow-custom-shadow-sm text-custom-text-300 text-sm overflow-y-auto w-48 p-1 space-y-0.5">
+      {props.items.length ? (
+        props.items.map((item, index) => (
+          <div
+            key={item.id}
+            className={`flex items-center gap-2 rounded p-1 hover:bg-custom-background-80 cursor-pointer ${
+              index === selectedIndex ? "bg-custom-background-80" : ""
+            }`}
+            onClick={() => selectItem(index)}
+          >
+            <div className="flex-shrink-0 h-4 w-4 grid place-items-center overflow-hidden">
+              {item.avatar && item.avatar.trim() !== "" ? (
+                <img
+                  src={item.avatar}
+                  className="h-full w-full object-cover rounded-sm"
+                  alt={item.title}
+                />
+              ) : (
+                <div className="h-full w-full grid place-items-center text-xs capitalize text-white rounded-sm bg-gray-700">
+                  {item.title[0]}
+                </div>
+              )}
+            </div>
+            <div className="flex-grow space-y-1 truncate">
+              <p className="text-sm font-medium truncate">{item.title}</p>
+              {/* <p className="text-xs text-gray-400">{item.subtitle}</p> */}
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="item">No result</div>
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+});
+
+MentionList.displayName = "MentionList";
+
+export default MentionList;
diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/packages/editor/core/src/ui/mentions/custom.tsx
new file mode 100644
index 00000000000..c3bfa370310
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@@ -0,0 +1,55 @@
+import { Mention, MentionOptions } from '@tiptap/extension-mention'
+import { mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import mentionNodeView from './mentionNodeView'
+import { IMentionHighlight } from '../../types/mention-suggestion'
+export interface CustomMentionOptions extends MentionOptions {
+  mentionHighlights: IMentionHighlight[]
+  readonly?: boolean
+}
+
+export const CustomMention = Mention.extend<CustomMentionOptions>({
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+      },
+      label: {
+        default: null,
+      },
+      target: {
+        default: null,
+      },
+      self: {
+        default: false
+      },
+      redirect_uri: {
+        default: "/"
+      }
+    }
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(mentionNodeView)
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'mention-component',
+      getAttrs: (node: string | HTMLElement) => {
+        if (typeof node === 'string') {
+          return null;
+        }
+        return {
+          id: node.getAttribute('data-mention-id') || '',
+          target: node.getAttribute('data-mention-target') || '',
+          label: node.innerText.slice(1) || '',
+          redirect_uri: node.getAttribute('redirect_uri')
+        }
+      },
+    }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['mention-component', mergeAttributes(HTMLAttributes)]
+  },
+})
diff --git a/packages/editor/core/src/ui/mentions/index.tsx b/packages/editor/core/src/ui/mentions/index.tsx
new file mode 100644
index 00000000000..ba1a9ed0b9d
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/index.tsx
@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+import suggestion from "./suggestion";
+import { CustomMention } from "./custom";
+import { IMentionHighlight, IMentionSuggestion } from "../../types/mention-suggestion";
+
+export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({
+  HTMLAttributes: {
+    'class' : "mention",
+  },
+  readonly: readonly,
+  mentionHighlights: mentionHighlights,
+  suggestion: suggestion(mentionSuggestions),
+})
+
diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
new file mode 100644
index 00000000000..331c701e2a3
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/display-name */
+// @ts-nocheck
+import { NodeViewWrapper } from "@tiptap/react";
+import { cn } from "../../lib/utils";
+import { useRouter } from "next/router";
+import { IMentionHighlight } from "../../types/mention-suggestion";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (props) => {
+  const router = useRouter();
+  const highlights = props.extension.options
+    .mentionHighlights as IMentionHighlight[];
+
+  const handleClick = () => {
+    if (!props.extension.options.readonly) {
+      router.push(props.node.attrs.redirect_uri);
+    }
+  };
+
+  return (
+    <NodeViewWrapper className="w-fit inline mention-component">
+      <span
+        className={cn(
+          "px-1 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 rounded font-medium mention",
+          {
+            "text-yellow-500 bg-yellow-500/20": highlights
+              ? highlights.includes(props.node.attrs.id)
+              : false,
+            "cursor-pointer": !props.extension.options.readonly,
+            // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
+          },
+        )}
+        onClick={handleClick}
+        data-mention-target={props.node.attrs.target}
+        data-mention-id={props.node.attrs.id}
+      >
+        @{props.node.attrs.label}
+      </span>
+    </NodeViewWrapper>
+  );
+};
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
new file mode 100644
index 00000000000..b4bbc53a6b1
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -0,0 +1,59 @@
+import { ReactRenderer } from '@tiptap/react'
+import { Editor } from "@tiptap/core";
+import tippy from 'tippy.js'
+
+import MentionList from './MentionList'
+import { IMentionSuggestion } from '../../types/mention-suggestion';
+
+const Suggestion = (suggestions: IMentionSuggestion[]) => ({
+  items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),
+  render: () => {
+    let reactRenderer: ReactRenderer | null = null;
+    let popup: any | null = null;
+
+    return {
+      onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+        reactRenderer = new ReactRenderer(MentionList, {
+          props,
+          editor: props.editor,
+        });
+        // @ts-ignore
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.querySelector("#editor-container"),
+          content: reactRenderer.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "bottom-start",
+        });
+      },
+
+      onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+        reactRenderer?.updateProps(props)
+
+        popup &&
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          });
+      },
+      onKeyDown: (props: { event: KeyboardEvent }) => {
+        if (props.event.key === "Escape") {
+          popup?.[0].hide();
+
+          return true;
+        }
+
+        // @ts-ignore
+        return reactRenderer?.ref?.onKeyDown(props);
+      },
+      onExit: () => {
+        popup?.[0].destroy();
+        reactRenderer?.destroy()
+      },
+    }
+  },
+})
+
+
+export default Suggestion;
diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx
new file mode 100644
index 00000000000..8a2651d1e69
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@@ -0,0 +1,145 @@
+import {
+  BoldIcon,
+  Heading1,
+  CheckSquare,
+  Heading2,
+  Heading3,
+  QuoteIcon,
+  ImageIcon,
+  TableIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikethroughIcon,
+  CodeIcon,
+} from "lucide-react";
+import { Editor } from "@tiptap/react";
+import { UploadImage } from "../../../types/upload-image";
+import {
+  insertImageCommand,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBold,
+  toggleBulletList,
+  toggleCode,
+  toggleHeadingOne,
+  toggleHeadingThree,
+  toggleHeadingTwo,
+  toggleItalic,
+  toggleOrderedList,
+  toggleStrike,
+  toggleTaskList,
+  toggleUnderline,
+} from "../../../lib/editor-commands";
+
+export interface EditorMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
+  name: "H1",
+  isActive: () => editor.isActive("heading", { level: 1 }),
+  command: () => toggleHeadingOne(editor),
+  icon: Heading1,
+});
+
+export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
+  name: "H2",
+  isActive: () => editor.isActive("heading", { level: 2 }),
+  command: () => toggleHeadingTwo(editor),
+  icon: Heading2,
+});
+
+export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
+  name: "H3",
+  isActive: () => editor.isActive("heading", { level: 3 }),
+  command: () => toggleHeadingThree(editor),
+  icon: Heading3,
+});
+
+export const BoldItem = (editor: Editor): EditorMenuItem => ({
+  name: "bold",
+  isActive: () => editor?.isActive("bold"),
+  command: () => toggleBold(editor),
+  icon: BoldIcon,
+});
+
+export const ItalicItem = (editor: Editor): EditorMenuItem => ({
+  name: "italic",
+  isActive: () => editor?.isActive("italic"),
+  command: () => toggleItalic(editor),
+  icon: ItalicIcon,
+});
+
+export const UnderLineItem = (editor: Editor): EditorMenuItem => ({
+  name: "underline",
+  isActive: () => editor?.isActive("underline"),
+  command: () => toggleUnderline(editor),
+  icon: UnderlineIcon,
+});
+
+export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
+  name: "strike",
+  isActive: () => editor?.isActive("strike"),
+  command: () => toggleStrike(editor),
+  icon: StrikethroughIcon,
+});
+
+export const CodeItem = (editor: Editor): EditorMenuItem => ({
+  name: "code",
+  isActive: () => editor?.isActive("code"),
+  command: () => toggleCode(editor),
+  icon: CodeIcon,
+});
+
+export const BulletListItem = (editor: Editor): EditorMenuItem => ({
+  name: "bullet-list",
+  isActive: () => editor?.isActive("bulletList"),
+  command: () => toggleBulletList(editor),
+  icon: ListIcon,
+});
+
+export const TodoListItem = (editor: Editor): EditorMenuItem => ({
+  name: "To-do List",
+  isActive: () => editor.isActive("taskItem"),
+  command: () => toggleTaskList(editor),
+  icon: CheckSquare,
+});
+
+export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
+  name: "ordered-list",
+  isActive: () => editor?.isActive("orderedList"),
+  command: () => toggleOrderedList(editor),
+  icon: ListOrderedIcon,
+});
+
+export const QuoteItem = (editor: Editor): EditorMenuItem => ({
+  name: "quote",
+  isActive: () => editor?.isActive("quote"),
+  command: () => toggleBlockquote(editor),
+  icon: QuoteIcon,
+});
+
+export const TableItem = (editor: Editor): EditorMenuItem => ({
+  name: "table",
+  isActive: () => editor?.isActive("table"),
+  command: () => insertTableCommand(editor),
+  icon: TableIcon,
+});
+
+export const ImageItem = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+): EditorMenuItem => ({
+  name: "image",
+  isActive: () => editor?.isActive("image"),
+  command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
+  icon: ImageIcon,
+});
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
new file mode 100644
index 00000000000..0e42ba64824
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
@@ -0,0 +1,16 @@
+const InsertBottomTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+);
+
+export default InsertBottomTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
new file mode 100644
index 00000000000..1fd75fe8754
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
@@ -0,0 +1,15 @@
+const InsertLeftTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+);
+export default InsertLeftTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
new file mode 100644
index 00000000000..1a65709694b
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
@@ -0,0 +1,16 @@
+const InsertRightTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+);
+
+export default InsertRightTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
new file mode 100644
index 00000000000..8f04f4f6126
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
@@ -0,0 +1,15 @@
+const InsertTopTableIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+);
+export default InsertTopTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx b/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
new file mode 100644
index 00000000000..f29d8a49177
--- /dev/null
+++ b/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
+            theme === "custom"
+              ? "bg-custom-background-100 text-custom-text-200"
+              : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5
+              className={`font-medium ${
+                theme === "custom" ? "text-custom-text-100" : "text-white"
+              }`}
+            >
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      }
+    />
+  );
+};
diff --git a/packages/editor/core/src/ui/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx
new file mode 100644
index 00000000000..56284472b21
--- /dev/null
+++ b/packages/editor/core/src/ui/plugins/delete-image.tsx
@@ -0,0 +1,68 @@
+import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { DeleteImage } from "../../types/delete-image";
+
+const deleteKey = new PluginKey("delete-image");
+const IMAGE_NODE_TYPE = "image";
+
+interface ImageNode extends ProseMirrorNode {
+  attrs: {
+    src: string;
+    id: string;
+  };
+}
+
+const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
+  new Plugin({
+    key: deleteKey,
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+      const newImageSources = new Set<string>();
+      newState.doc.descendants((node) => {
+        if (node.type.name === IMAGE_NODE_TYPE) {
+          newImageSources.add(node.attrs.src);
+        }
+      });
+
+      transactions.forEach((transaction) => {
+        if (!transaction.docChanged) return;
+
+        const removedImages: ImageNode[] = [];
+
+        oldState.doc.descendants((oldNode, oldPos) => {
+          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
+          if (oldPos < 0 || oldPos > newState.doc.content.size) return;
+          if (!newState.doc.resolve(oldPos).parent) return;
+
+          const newNode = newState.doc.nodeAt(oldPos);
+
+          // Check if the node has been deleted or replaced
+          if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
+            if (!newImageSources.has(oldNode.attrs.src)) {
+              removedImages.push(oldNode as ImageNode);
+            }
+          }
+        });
+
+        removedImages.forEach(async (node) => {
+          const src = node.attrs.src;
+          await onNodeDeleted(src, deleteImage);
+        });
+      });
+
+      return null;
+    },
+  });
+
+export default TrackImageDeletionPlugin;
+
+async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
+  try {
+    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+    const resStatus = await deleteImage(assetUrlWithWorkspaceId);
+    if (resStatus === 204) {
+      console.log("Image deleted successfully");
+    }
+  } catch (error) {
+    console.error("Error deleting image: ", error);
+  }
+}
diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx
new file mode 100644
index 00000000000..cdd62ae4836
--- /dev/null
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -0,0 +1,126 @@
+import { UploadImage } from "../../types/upload-image";
+import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
+
+const uploadKey = new PluginKey("upload-image");
+
+const UploadImagesPlugin = () =>
+  new Plugin({
+    key: uploadKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        set = set.map(tr.mapping, tr.doc);
+        // See if the transaction adds or removes any placeholders
+        const action = tr.getMeta(uploadKey);
+        if (action && action.add) {
+          const { id, pos, src } = action.add;
+
+          const placeholder = document.createElement("div");
+          placeholder.setAttribute("class", "img-placeholder");
+          const image = document.createElement("img");
+          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.src = src;
+          placeholder.appendChild(image);
+          const deco = Decoration.widget(pos + 1, placeholder, {
+            id,
+          });
+          set = set.add(tr.doc, [deco]);
+        } else if (action && action.remove) {
+          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+
+export default UploadImagesPlugin;
+
+function findPlaceholder(state: EditorState, id: {}) {
+  const decos = uploadKey.getState(state);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id
+  );
+  return found.length ? found[0].from : null;
+}
+
+export async function startImageUpload(
+  file: File,
+  view: EditorView,
+  pos: number,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+) {
+  if (!file.type.includes("image/")) {
+    return;
+  }
+
+  const id = {};
+
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  setIsSubmitting?.("submitting");
+  const src = await UploadImageHandler(file, uploadFile);
+  const { schema } = view.state;
+  pos = findPlaceholder(view.state, id);
+
+  if (pos == null) return;
+  const imageSrc = typeof src === "object" ? reader.result : src;
+
+  const node = schema.nodes.image.create({ src: imageSrc });
+  const transaction = view.state.tr
+    .replaceWith(pos, pos, node)
+    .setMeta(uploadKey, { remove: { id } });
+  view.dispatch(transaction);
+}
+
+const UploadImageHandler = (file: File,
+  uploadFile: UploadImage
+): Promise<string> => {
+  try {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const imageUrl = await uploadFile(file)
+
+        const image = new Image();
+        image.src = imageUrl;
+        image.onload = () => {
+          resolve(imageUrl);
+        };
+      } catch (error) {
+        if (error instanceof Error) {
+          console.log(error.message);
+        }
+        reject(error);
+      }
+    });
+  } catch (error) {
+    if (error instanceof Error) {
+      console.log(error.message);
+    }
+    return Promise.reject(error);
+  }
+};
diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx
new file mode 100644
index 00000000000..8f002b76c4c
--- /dev/null
+++ b/packages/editor/core/src/ui/props.tsx
@@ -0,0 +1,69 @@
+import { EditorProps } from "@tiptap/pm/view";
+import { findTableAncestor } from "../lib/utils";
+import { startImageUpload } from "./plugins/upload-image";
+import { UploadImage } from "../types/upload-image";
+
+export function CoreEditorProps(
+  uploadFile: UploadImage,
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+): EditorProps {
+  return {
+    attributes: {
+      class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
+    },
+    handleDOMEvents: {
+      keydown: (_view, event) => {
+        // prevent default event listeners from firing when slash command is active
+        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+          const slashCommand = document.querySelector("#slash-command");
+          if (slashCommand) {
+            return true;
+          }
+        }
+      },
+    },
+    handlePaste: (view, event) => {
+      if (typeof window !== "undefined") {
+        const selection: any = window?.getSelection();
+        if (selection.rangeCount !== 0) {
+          const range = selection.getRangeAt(0);
+          if (findTableAncestor(range.startContainer)) {
+            return;
+          }
+        }
+      }
+      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+        event.preventDefault();
+        const file = event.clipboardData.files[0];
+        const pos = view.state.selection.from;
+        startImageUpload(file, view, pos, uploadFile, setIsSubmitting);
+        return true;
+      }
+      return false;
+    },
+    handleDrop: (view, event, _slice, moved) => {
+      if (typeof window !== "undefined") {
+        const selection: any = window?.getSelection();
+        if (selection.rangeCount !== 0) {
+          const range = selection.getRangeAt(0);
+          if (findTableAncestor(range.startContainer)) {
+            return;
+          }
+        }
+      }
+      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        const coordinates = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        if (coordinates) {
+          startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting);
+        }
+        return true;
+      }
+      return false;
+    },
+  };
+}
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
new file mode 100644
index 00000000000..8901d34c517
--- /dev/null
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -0,0 +1,97 @@
+import StarterKit from "@tiptap/starter-kit";
+import TiptapLink from "@tiptap/extension-link";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import Gapcursor from "@tiptap/extension-gapcursor";
+
+import TableHeader from "../extensions/table/table-header/table-header";
+import Table from "../extensions/table/table";
+import TableCell from "../extensions/table/table-cell/table-cell";
+import TableRow from "../extensions/table/table-row/table-row";
+
+import ReadOnlyImageExtension from "../extensions/image/read-only-image";
+import { isValidHttpUrl } from "../../lib/utils";
+import { Mentions } from "../mentions";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+export const CoreReadOnlyEditorExtensions = (
+  mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] },
+) => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
+      },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
+      },
+    },
+    code: {
+      HTMLAttributes: {
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+    Gapcursor,
+    TiptapLink.configure({
+      protocols: ["http", "https"],
+      validate: (url) => isValidHttpUrl(url),
+      HTMLAttributes: {
+        class:
+          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+      },
+    }),
+    ReadOnlyImageExtension.configure({
+      HTMLAttributes: {
+        class: "rounded-lg border border-custom-border-300",
+      },
+    }),
+    TiptapUnderline,
+    TextStyle,
+    Color,
+    TaskList.configure({
+      HTMLAttributes: {
+        class: "not-prose pl-2",
+      },
+    }),
+    TaskItem.configure({
+      HTMLAttributes: {
+        class: "flex items-start my-4",
+      },
+      nested: true,
+    }),
+    Markdown.configure({
+      html: true,
+      transformCopiedText: true,
+    }),
+    Table,
+    TableHeader,
+    TableCell,
+    TableRow,
+    Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
+  ];
diff --git a/packages/editor/core/src/ui/read-only/props.tsx b/packages/editor/core/src/ui/read-only/props.tsx
new file mode 100644
index 00000000000..25db2b68c1a
--- /dev/null
+++ b/packages/editor/core/src/ui/read-only/props.tsx
@@ -0,0 +1,8 @@
+import { EditorProps } from "@tiptap/pm/view";
+
+export const CoreReadOnlyEditorProps: EditorProps =
+{
+  attributes: {
+    class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
+  },
+};
diff --git a/packages/editor/core/tailwind.config.js b/packages/editor/core/tailwind.config.js
new file mode 100644
index 00000000000..f3206315889
--- /dev/null
+++ b/packages/editor/core/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/core/tsconfig.json b/packages/editor/core/tsconfig.json
new file mode 100644
index 00000000000..57d0e9a74ce
--- /dev/null
+++ b/packages/editor/core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/core/tsup.config.ts b/packages/editor/core/tsup.config.ts
new file mode 100644
index 00000000000..5e89e04afad
--- /dev/null
+++ b/packages/editor/core/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/editor/lite-text-editor/Readme.md b/packages/editor/lite-text-editor/Readme.md
new file mode 100644
index 00000000000..948e2c34b2d
--- /dev/null
+++ b/packages/editor/lite-text-editor/Readme.md
@@ -0,0 +1,97 @@
+# @plane/lite-text-editor
+
+## Description
+
+The `@plane/lite-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Custom control over Enter key, etc.
+
+## Key Features
+
+- **Exported Components**: There are two components exported from the Lite text editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+
+  `LiteTextEditor` & `LiteTextEditorWithRef`
+
+- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Lite editor types (with and without Ref)
+  `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
+
+## LiteTextEditor
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+| `value` | `html string` | The initial content of the editor. |
+| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
+| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+1. Here is an example of how to use the `RichTextEditor` component
+
+```tsx
+<LiteTextEditor
+      onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+      deleteFile={fileService.deleteImage}
+      value={value}
+      debouncedUpdatesEnabled={false}
+      customClassName="min-h-[50px] p-3 shadow-sm"
+      onChange={(comment_json: Object, comment_html: string) => {
+        onChange(comment_html);
+      }}
+    />
+```
+
+2. Example of how to use the `LiteTextEditorWithRef` component
+
+```tsx
+  const editorRef = useRef<any>(null);
+
+  // can use it to set the editor's value
+  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+
+  // can use it to clear the editor
+  editorRef?.current?.clearEditor();
+
+  return ( 
+    <LiteTextEditorWithRef
+      onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+      deleteFile={fileService.deleteImage}
+      ref={editorRef}
+      value={value}
+      debouncedUpdatesEnabled={false}
+      customClassName="min-h-[50px] p-3 shadow-sm"
+      onChange={(comment_json: Object, comment_html: string) => {
+        onChange(comment_html);
+      }}
+    />
+)
+```
+
+## LiteReadOnlyEditor
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `html string` | The initial content of the editor. |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+Here is an example of how to use the `RichReadOnlyEditor` component
+
+```tsx
+  <LiteReadOnlyEditor
+    value={comment.comment_html}
+    customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+  />
+```
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
new file mode 100644
index 00000000000..3b6cd720b78
--- /dev/null
+++ b/packages/editor/lite-text-editor/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@plane/lite-text-editor",
+  "version": "0.0.1",
+  "description": "Package that powers Plane's Comment Editor",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@plane/editor-core": "*",
+    "@tiptap/extension-list-item": "^2.1.11",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "lowlight": "^2.9.0",
+    "lucide-react": "^0.244.0",
+    "react-markdown": "^8.0.7",
+    "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^9.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/lite-text-editor/postcss.config.js b/packages/editor/lite-text-editor/postcss.config.js
new file mode 100644
index 00000000000..07aa434b2bf
--- /dev/null
+++ b/packages/editor/lite-text-editor/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
new file mode 100644
index 00000000000..392928ccffd
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -0,0 +1,3 @@
+export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
+export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui"
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
new file mode 100644
index 00000000000..129efa4ee61
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+  Extension.create({
+    name: "enterKey",
+
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => {
+          if (onEnterKeyPress) {
+            onEnterKeyPress();
+          }
+          return true;
+        },
+        "Shift-Enter": ({ editor }) =>
+          editor.commands.first(({ commands }) => [
+            () => commands.newlineInCode(),
+            () => commands.splitListItem("listItem"),
+            () => commands.createParagraphNear(),
+            () => commands.liftEmptyBlock(),
+            () => commands.splitBlock(),
+          ]),
+      };
+    },
+  });
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
new file mode 100644
index 00000000000..4531e9516de
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
@@ -0,0 +1,5 @@
+import { EnterKeyExtension } from "./enter-key-extension";
+
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
+  // EnterKeyExtension(onEnterKeyPress),
+];
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
new file mode 100644
index 00000000000..ef321d511bf
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -0,0 +1,134 @@
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useEditor,
+} from "@plane/editor-core";
+import { FixedMenu } from "./menus/fixed-menu";
+import { LiteTextEditorExtensions } from "./extensions";
+
+export type UploadImage = (file: File) => Promise<string>;
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
+export type IMentionSuggestion = {
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+};
+
+export type IMentionHighlight = string;
+
+interface ILiteTextEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved"
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  commentAccessSpecifier?: {
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess: {
+      icon: any;
+      key: string;
+      label: "Private" | "Public";
+    }[];
+  };
+  onEnterKeyPress?: (e?: any) => void;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  submitButton?: React.ReactNode;
+}
+
+interface LiteTextEditorProps extends ILiteTextEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const LiteTextEditor = (props: LiteTextEditorProps) => {
+  const {
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    uploadFile,
+    deleteFile,
+    noBorder,
+    borderOnFocus,
+    customClassName,
+    forwardedRef,
+    commentAccessSpecifier,
+    onEnterKeyPress,
+    mentionHighlights,
+    mentionSuggestions,
+    submitButton,
+  } = props;
+
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+    extensions: LiteTextEditorExtensions(onEnterKeyPress),
+    mentionHighlights,
+    mentionSuggestions,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+        <div className="w-full mt-4">
+          <FixedMenu
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+            commentAccessSpecifier={commentAccessSpecifier}
+            submitButton={submitButton}
+          />
+        </div>
+      </div>
+    </EditorContainer>
+  );
+};
+
+const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
+);
+
+LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
+
+export { LiteTextEditor, LiteTextEditorWithRef };
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
new file mode 100644
index 00000000000..c0006b3f257
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
+    {iconName}
+  </span>
+);
+
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
new file mode 100644
index 00000000000..cf0d78688fa
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -0,0 +1,218 @@
+import { Editor } from "@tiptap/react";
+import { BoldIcon } from "lucide-react";
+
+import {
+  BoldItem,
+  BulletListItem,
+  cn,
+  CodeItem,
+  ImageItem,
+  ItalicItem,
+  NumberedListItem,
+  QuoteItem,
+  StrikeThroughItem,
+  TableItem,
+  UnderLineItem,
+} from "@plane/editor-core";
+import { Tooltip } from "../../tooltip";
+import { UploadImage } from "../..";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = {
+  editor: Editor;
+  commentAccessSpecifier?: {
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess:
+      | {
+          icon: any;
+          key: string;
+          label: "Private" | "Public";
+        }[]
+      | undefined;
+  };
+  uploadFile: UploadImage;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  submitButton: React.ReactNode;
+};
+
+export const FixedMenu = (props: EditorBubbleMenuProps) => {
+  const basicMarkItems: BubbleMenuItem[] = [
+    BoldItem(props.editor),
+    ItalicItem(props.editor),
+    UnderLineItem(props.editor),
+    StrikeThroughItem(props.editor),
+  ];
+
+  const listItems: BubbleMenuItem[] = [
+    BulletListItem(props.editor),
+    NumberedListItem(props.editor),
+  ];
+
+  const userActionItems: BubbleMenuItem[] = [
+    QuoteItem(props.editor),
+    CodeItem(props.editor),
+  ];
+
+  const complexItems: BubbleMenuItem[] = [
+    TableItem(props.editor),
+    ImageItem(props.editor, props.uploadFile, props.setIsSubmitting),
+  ];
+
+  const handleAccessChange = (accessKey: string) => {
+    props.commentAccessSpecifier?.onAccessChange(accessKey);
+  };
+
+  return (
+    <div className="flex items-stretch gap-1.5 w-full h-9 overflow-x-scroll">
+      {props.commentAccessSpecifier && (
+        <div className="flex-shrink-0 flex items-stretch gap-0.5 border-[0.5px] border-custom-border-200 rounded p-1">
+          {props?.commentAccessSpecifier.commentAccess?.map((access) => (
+            <Tooltip key={access.key} tooltipContent={access.label}>
+              <button
+                type="button"
+                onClick={() => handleAccessChange(access.key)}
+                className={`aspect-square grid place-items-center p-1 rounded-sm hover:bg-custom-background-90 ${
+                  props.commentAccessSpecifier?.accessValue === access.key
+                    ? "bg-custom-background-90"
+                    : ""
+                }`}
+              >
+                <access.icon
+                  className={`w-3.5 h-3.5 ${
+                    props.commentAccessSpecifier?.accessValue === access.key
+                      ? "text-custom-text-100"
+                      : "text-custom-text-400"
+                  }`}
+                  strokeWidth={2}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
+      <div className="flex items-stretch justify-between gap-2 w-full border-[0.5px] border-custom-border-200 bg-custom-background-90 rounded p-1">
+        <div className="flex items-stretch">
+          <div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
+            {basicMarkItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {listItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {userActionItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 pl-2.5">
+            {complexItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+        <div className="sticky right-1">{props.submitButton}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
new file mode 100644
index 00000000000..a3de061ae48
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
+
+interface ICoreReadOnlyEditor {
+  value: string;
+  editorContentCustomClassNames?: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  mentionHighlights: string[];
+}
+
+interface EditorCoreProps extends ICoreReadOnlyEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const LiteReadOnlyEditor = ({
+  editorContentCustomClassNames,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  value,
+  forwardedRef,
+  mentionHighlights,
+}: EditorCoreProps) => {
+  const editor = useReadOnlyEditor({
+    value,
+    forwardedRef,
+    mentionHighlights,
+  });
+
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const LiteReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  ICoreReadOnlyEditor
+>((props, ref) => <LiteReadOnlyEditor {...props} forwardedRef={ref} />);
+
+LiteReadOnlyEditorWithRef.displayName = "LiteReadOnlyEditorWithRef";
+
+export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef };
diff --git a/packages/editor/lite-text-editor/src/ui/tooltip.tsx b/packages/editor/lite-text-editor/src/ui/tooltip.tsx
new file mode 100644
index 00000000000..a2f2414e529
--- /dev/null
+++ b/packages/editor/lite-text-editor/src/ui/tooltip.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
+            theme === "custom"
+              ? "bg-custom-background-100 text-custom-text-200"
+              : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5
+              className={`font-medium ${
+                theme === "custom" ? "text-custom-text-100" : "text-white"
+              }`}
+            >
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({
+        isOpen: isTooltipOpen,
+        ref: eleReference,
+        ...tooltipProps
+      }) =>
+        React.cloneElement(children, {
+          ref: eleReference,
+          ...tooltipProps,
+          ...children.props,
+        })
+      }
+    />
+  );
+};
diff --git a/packages/editor/lite-text-editor/tailwind.config.js b/packages/editor/lite-text-editor/tailwind.config.js
new file mode 100644
index 00000000000..f3206315889
--- /dev/null
+++ b/packages/editor/lite-text-editor/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/lite-text-editor/tsconfig.json b/packages/editor/lite-text-editor/tsconfig.json
new file mode 100644
index 00000000000..57d0e9a74ce
--- /dev/null
+++ b/packages/editor/lite-text-editor/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/lite-text-editor/tsup.config.ts b/packages/editor/lite-text-editor/tsup.config.ts
new file mode 100644
index 00000000000..5e89e04afad
--- /dev/null
+++ b/packages/editor/lite-text-editor/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/editor/rich-text-editor/Readme.md b/packages/editor/rich-text-editor/Readme.md
new file mode 100644
index 00000000000..c8414f62d6a
--- /dev/null
+++ b/packages/editor/rich-text-editor/Readme.md
@@ -0,0 +1,99 @@
+# @plane/rich-text-editor
+
+## Description
+
+The `@plane/rich-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Slash Commands and many more.
+
+## Key Features
+
+- **Exported Components**: There are two components exported from the Rich text editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+
+  `RichTextEditor` & `RichTextEditorWithRef`
+
+- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Rich editor types (with and without Ref)
+  `RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`
+
+## RichTextEditor
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+| `value` | `html string` | The initial content of the editor. |
+| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+1. Here is an example of how to use the `RichTextEditor` component
+
+```tsx
+<RichTextEditor
+  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+  deleteFile={fileService.deleteImage}
+  value={value}
+  debouncedUpdatesEnabled={true}
+  setShouldShowAlert={setShowAlert}
+  setIsSubmitting={setIsSubmitting}
+  customClassName={
+    isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
+  }
+  noBorder={!isAllowed}
+  onChange={(description: Object, description_html: string) => {
+    setShowAlert(true);
+    setIsSubmitting("submitting");
+    onChange(description_html);
+    // custom stuff you want to do
+  }}
+/>
+```
+
+2. Example of how to use the `RichTextEditorWithRef` component
+
+```tsx
+  const editorRef = useRef<any>(null);
+
+  // can use it to set the editor's value
+  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+
+  // can use it to clear the editor
+  editorRef?.current?.clearEditor();
+
+  return (<RichTextEditorWithRef
+      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+      deleteFile={fileService.deleteImage}
+      ref={editorRef}
+      debouncedUpdatesEnabled={false}
+      value={value}
+      customClassName="min-h-[150px]"
+      onChange={(description: Object, description_html: string) => {
+          onChange(description_html);
+          // custom stuff you want to do
+  } } />)
+```
+
+## RichReadOnlyEditor
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `html string` | The initial content of the editor. |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+
+### Usage
+
+Here is an example of how to use the `RichReadOnlyEditor` component
+
+```tsx
+  <RichReadOnlyEditor
+    value={issueDetails.description_html}
+    customClassName="p-3 min-h-[50px] shadow-sm" />
+```
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
new file mode 100644
index 00000000000..db793261cc2
--- /dev/null
+++ b/packages/editor/rich-text-editor/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@plane/rich-text-editor",
+  "version": "0.0.1",
+  "description": "Rich Text Editor that powers Plane",
+  "private": true,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.1.11",
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@plane/editor-core": "*",
+    "@tiptap/extension-code-block-lowlight": "^2.1.11",
+    "@tiptap/extension-horizontal-rule": "^2.1.11",
+    "@tiptap/extension-placeholder": "^2.1.11",
+    "@tiptap/suggestion": "^2.1.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^3.0.0",
+    "lucide-react": "^0.244.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "react": "^18.2.0",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}
diff --git a/packages/editor/rich-text-editor/postcss.config.js b/packages/editor/rich-text-editor/postcss.config.js
new file mode 100644
index 00000000000..07aa434b2bf
--- /dev/null
+++ b/packages/editor/rich-text-editor/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts
new file mode 100644
index 00000000000..e296a617171
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/index.ts
@@ -0,0 +1,5 @@
+import "./styles/github-dark.css";
+
+export { RichTextEditor, RichTextEditorWithRef } from "./ui";
+export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui"
diff --git a/packages/editor/rich-text-editor/src/styles/github-dark.css b/packages/editor/rich-text-editor/src/styles/github-dark.css
new file mode 100644
index 00000000000..20a7f4e66bf
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/styles/github-dark.css
@@ -0,0 +1,2 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
+.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
new file mode 100644
index 00000000000..f0f3bed3423
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@@ -0,0 +1,59 @@
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Placeholder from "@tiptap/extension-placeholder";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { common, createLowlight } from 'lowlight'
+import { InputRule } from "@tiptap/core";
+
+import ts from "highlight.js/lib/languages/typescript";
+
+import SlashCommand from "./slash-command";
+import { UploadImage } from "../";
+
+const lowlight = createLowlight(common)
+lowlight.register("ts", ts);
+
+export const RichTextEditorExtensions = (
+  uploadFile: UploadImage,
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+) => [
+    HorizontalRule.extend({
+      addInputRules() {
+        return [
+          new InputRule({
+            find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+            handler: ({ state, range, commands }) => {
+              commands.splitBlock();
+
+              const attributes = {};
+              const { tr } = state;
+              const start = range.from;
+              const end = range.to;
+              // @ts-ignore
+              tr.replaceWith(start - 1, end, this.type.create(attributes));
+            },
+          }),
+        ];
+      },
+    }).configure({
+      HTMLAttributes: {
+        class: "mb-6 border-t border-custom-border-300",
+      },
+    }),
+    SlashCommand(uploadFile, setIsSubmitting),
+    CodeBlockLowlight.configure({
+      lowlight,
+    }),
+    Placeholder.configure({
+      placeholder: ({ node }) => {
+        if (node.type.name === "heading") {
+          return `Heading ${node.attrs.level}`;
+        }
+        if (node.type.name === "image" || node.type.name === "table") {
+          return "";
+        }
+
+        return "Press '/' for commands...";
+      },
+      includeChildren: true,
+    }),
+  ];
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
new file mode 100644
index 00000000000..bab13304a54
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
@@ -0,0 +1,385 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import { Editor, Range, Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Text,
+  TextQuote,
+  Code,
+  MinusSquare,
+  CheckSquare,
+  ImageIcon,
+  Table,
+} from "lucide-react";
+import { UploadImage } from "../";
+import {
+  cn,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  insertImageCommand,
+  toggleHeadingOne,
+  toggleHeadingTwo,
+  toggleHeadingThree,
+} from "@plane/editor-core";
+
+interface CommandItemProps {
+  title: string;
+  description: string;
+  icon: ReactNode;
+}
+
+interface CommandProps {
+  editor: Editor;
+  range: Range;
+}
+
+const Command = Extension.create({
+  name: "slash-command",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: any;
+        }) => {
+          props.command({ editor, range });
+        },
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        allow({ editor }) {
+          return !editor.isActive("table");
+        },
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
+
+const getSuggestionItems =
+  (
+    uploadFile: UploadImage,
+    setIsSubmitting?: (
+      isSubmitting: "submitting" | "submitted" | "saved",
+    ) => void,
+  ) =>
+  ({ query }: { query: string }) =>
+    [
+      {
+        title: "Text",
+        description: "Just start typing with plain text.",
+        searchTerms: ["p", "paragraph"],
+        icon: <Text size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .toggleNode("paragraph", "paragraph")
+            .run();
+        },
+      },
+      {
+        title: "Heading 1",
+        description: "Big section heading.",
+        searchTerms: ["title", "big", "large"],
+        icon: <Heading1 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingOne(editor, range);
+        },
+      },
+      {
+        title: "Heading 2",
+        description: "Medium section heading.",
+        searchTerms: ["subtitle", "medium"],
+        icon: <Heading2 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingTwo(editor, range);
+        },
+      },
+      {
+        title: "Heading 3",
+        description: "Small section heading.",
+        searchTerms: ["subtitle", "small"],
+        icon: <Heading3 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingThree(editor, range);
+        },
+      },
+      {
+        title: "To-do List",
+        description: "Track tasks with a to-do list.",
+        searchTerms: ["todo", "task", "list", "check", "checkbox"],
+        icon: <CheckSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleTaskList(editor, range);
+        },
+      },
+      {
+        title: "Bullet List",
+        description: "Create a simple bullet list.",
+        searchTerms: ["unordered", "point"],
+        icon: <List size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleBulletList(editor, range);
+        },
+      },
+      {
+        title: "Divider",
+        description: "Visually divide blocks",
+        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+        icon: <MinusSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+        },
+      },
+      {
+        title: "Table",
+        description: "Create a Table",
+        searchTerms: ["table", "cell", "db", "data", "tabular"],
+        icon: <Table size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertTableCommand(editor, range);
+        },
+      },
+      {
+        title: "Numbered List",
+        description: "Create a list with numbering.",
+        searchTerms: ["ordered"],
+        icon: <ListOrdered size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleOrderedList(editor, range);
+        },
+      },
+      {
+        title: "Quote",
+        description: "Capture a quote.",
+        searchTerms: ["blockquote"],
+        icon: <TextQuote size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          toggleBlockquote(editor, range),
+      },
+      {
+        title: "Code",
+        description: "Capture a code snippet.",
+        searchTerms: ["codeblock"],
+        icon: <Code size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+      },
+      {
+        title: "Image",
+        description: "Upload an image from your computer.",
+        searchTerms: ["photo", "picture", "media"],
+        icon: <ImageIcon size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
+        },
+      },
+    ].filter((item) => {
+      if (typeof query === "string" && query.length > 0) {
+        const search = query.toLowerCase();
+        return (
+          item.title.toLowerCase().includes(search) ||
+          item.description.toLowerCase().includes(search) ||
+          (item.searchTerms &&
+            item.searchTerms.some((term: string) => term.includes(search)))
+        );
+      }
+      return true;
+    });
+
+export 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 CommandList = ({
+  items,
+  command,
+}: {
+  items: CommandItemProps[];
+  command: any;
+  editor: any;
+  range: any;
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index];
+      if (item) {
+        command(item);
+      }
+    },
+    [command, items],
+  );
+
+  useEffect(() => {
+    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+        if (e.key === "ArrowUp") {
+          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+          return true;
+        }
+        if (e.key === "ArrowDown") {
+          setSelectedIndex((selectedIndex + 1) % items.length);
+          return true;
+        }
+        if (e.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [items, selectedIndex, setSelectedIndex, selectItem]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+
+  const commandListContainer = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const container = commandListContainer?.current;
+
+    const item = container?.children[selectedIndex] as HTMLElement;
+
+    if (item && container) updateScrollView(container, item);
+  }, [selectedIndex]);
+
+  return items.length > 0 ? (
+    <div
+      id="slash-command"
+      ref={commandListContainer}
+      className="z-50 fixed h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-100 px-1 py-2 shadow-md transition-all"
+    >
+      {items.map((item: CommandItemProps, index: number) => (
+        <button
+          className={cn(
+            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+            {
+              "bg-custom-primary-100/5  text-custom-text-100":
+                index === selectedIndex,
+            },
+          )}
+          key={index}
+          onClick={() => selectItem(index)}
+        >
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border border-custom-border-300 bg-custom-background-100">
+            {item.icon}
+          </div>
+          <div>
+            <p className="font-medium">{item.title}</p>
+            <p className="text-xs text-custom-text-300">{item.description}</p>
+          </div>
+        </button>
+      ))}
+    </div>
+  ) : null;
+};
+
+const renderItems = () => {
+  let component: ReactRenderer | null = null;
+  let popup: any | null = null;
+
+  return {
+    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component = new ReactRenderer(CommandList, {
+        props,
+        // @ts-ignore
+        editor: props.editor,
+      });
+
+      // @ts-ignore
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.querySelector("#editor-container"),
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+      component?.updateProps(props);
+
+      popup &&
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+    },
+    onKeyDown: (props: { event: KeyboardEvent }) => {
+      if (props.event.key === "Escape") {
+        popup?.[0].hide();
+
+        return true;
+      }
+
+      // @ts-ignore
+      return component?.ref?.onKeyDown(props);
+    },
+    onExit: () => {
+      popup?.[0].destroy();
+      component?.destroy();
+    },
+  };
+};
+
+export const SlashCommand = (
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+) =>
+  Command.configure({
+    suggestion: {
+      items: getSuggestionItems(uploadFile, setIsSubmitting),
+      render: renderItems,
+    },
+  });
+
+export default SlashCommand;
diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
new file mode 100644
index 00000000000..a0dbe7226e6
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+import * as React from 'react';
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core';
+import { EditorBubbleMenu } from './menus/bubble-menu';
+import { RichTextEditorExtensions } from './extensions';
+
+export type UploadImage = (file: File) => Promise<string>;
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
+
+export type IMentionSuggestion = {
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+}
+
+export type IMentionHighlight = string
+
+interface IRichTextEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+}
+
+interface RichTextEditorProps extends IRichTextEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const RichTextEditor = ({
+  onChange,
+  debouncedUpdatesEnabled,
+  setIsSubmitting,
+  setShouldShowAlert,
+  editorContentCustomClassNames,
+  value,
+  uploadFile,
+  deleteFile,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  forwardedRef,
+  mentionHighlights,
+  mentionSuggestions
+}: RichTextEditorProps) => {
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+    extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting),
+    mentionHighlights,
+    mentionSuggestions
+  });
+
+  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      {editor && <EditorBubbleMenu editor={editor} />}
+      <div className="flex flex-col">
+        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+      </div>
+    </EditorContainer >
+  );
+};
+
+const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>((props, ref) => (
+  <RichTextEditor {...props} forwardedRef={ref} />
+));
+
+RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
+
+export { RichTextEditor, RichTextEditorWithRef};
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
new file mode 100644
index 00000000000..f9d830599a8
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@@ -0,0 +1,158 @@
+import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react";
+import { FC, useEffect, useState } from "react";
+import { BoldIcon } from "lucide-react";
+
+import { NodeSelector } from "./node-selector";
+import { LinkSelector } from "./link-selector";
+import {
+  BoldItem,
+  cn,
+  CodeItem,
+  isCellSelection,
+  ItalicItem,
+  StrikeThroughItem,
+  UnderLineItem,
+} from "@plane/editor-core";
+
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}
+
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
+  const items: BubbleMenuItem[] = [
+    BoldItem(props.editor),
+    ItalicItem(props.editor),
+    UnderLineItem(props.editor),
+    StrikeThroughItem(props.editor),
+    CodeItem(props.editor),
+  ];
+
+  const bubbleMenuProps: EditorBubbleMenuProps = {
+    ...props,
+    shouldShow: ({ view, state, editor }) => {
+      const { selection } = state;
+
+      const { empty } = selection;
+      const hasEditorFocus = view.hasFocus();
+
+      // if (typeof window !== "undefined") {
+      //   const selection: any = window?.getSelection();
+      //   if (selection.rangeCount !== 0) {
+      //     const range = selection.getRangeAt(0);
+      //     if (findTableAncestor(range.startContainer)) {
+      //       console.log("table");
+      //       return false;
+      //     }
+      //   }
+      // }
+
+      if (
+        !hasEditorFocus ||
+        empty ||
+        !editor.isEditable ||
+        editor.isActive("image") ||
+        isNodeSelection(selection) ||
+        isCellSelection(selection) ||
+        isSelecting
+      ) {
+        return false;
+      }
+      return true;
+    },
+    tippyOptions: {
+      moveTransition: "transform 0.15s ease-out",
+      onHidden: () => {
+        setIsNodeSelectorOpen(false);
+        setIsLinkSelectorOpen(false);
+      },
+    },
+  };
+
+  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+
+  const [isSelecting, setIsSelecting] = useState(false);
+  useEffect(() => {
+    function handleMouseDown() {
+      function handleMouseMove() {
+        if (!props.editor.state.selection.empty) {
+          setIsSelecting(true);
+          document.removeEventListener("mousemove", handleMouseMove);
+        }
+      }
+
+      function handleMouseUp() {
+        setIsSelecting(false);
+
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
+  return (
+    <BubbleMenu
+      {...bubbleMenuProps}
+      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+    >
+      {isSelecting ? null : (
+        <>
+          {!props.editor.isActive("table") && (
+            <NodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsLinkSelectorOpen(false);
+              }}
+            />
+          )}
+          <LinkSelector
+            editor={props.editor!!}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+              setIsNodeSelectorOpen(false);
+            }}
+          />
+          <div className="flex">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+                  {
+                    "text-custom-text-100 bg-custom-primary-100/5":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-4 w-4", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                />
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </BubbleMenu>
+  );
+};
diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
similarity index 86%
rename from apps/app/components/tiptap/bubble-menu/link-selector.tsx
rename to packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
index 1596870f704..7dddc9d984b 100644
--- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@@ -1,15 +1,14 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import { cn } from "../utils";
-import isValidHttpUrl from "./utils/link-validator";
+import { cn, isValidHttpUrl, setLinkEditor, unsetLinkEditor, } from "@plane/editor-core";
+
 interface LinkSelectorProps {
   editor: Editor;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-
 export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -17,7 +16,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
     const input = inputRef.current;
     const url = input?.value;
     if (url && isValidHttpUrl(url)) {
-      editor.chain().focus().setLink({ href: url }).run();
+      setLinkEditor(editor, url);
       setIsOpen(false);
     }
   }, [editor, inputRef, setIsOpen]);
@@ -52,7 +51,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
           className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
-              e.preventDefault(); onLinkSubmit();
+              e.preventDefault();
+              onLinkSubmit();
             }
           }}
         >
@@ -68,14 +68,16 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
               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={() => {
-                editor.chain().focus().unsetLink().run();
+                unsetLinkEditor(editor);
                 setIsOpen(false);
               }}
             >
               <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"
+            <button
+              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
+              type="button"
               onClick={() => {
                 onLinkSubmit();
               }}
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
new file mode 100644
index 00000000000..b8b7ffc58db
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@@ -0,0 +1,82 @@
+import { BulletListItem, cn, CodeItem, HeadingOneItem, HeadingThreeItem, HeadingTwoItem, NumberedListItem, QuoteItem, TodoListItem } from "@plane/editor-core";
+import { Editor } from "@tiptap/react";
+import {
+  Check,
+  ChevronDown,
+  TextIcon,
+} from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { BubbleMenuItem } from ".";
+
+interface NodeSelectorProps {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+  const items: BubbleMenuItem[] = [
+    {
+      name: "Text",
+      icon: TextIcon,
+      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () =>
+        editor.isActive("paragraph") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("orderedList"),
+    },
+    HeadingOneItem(editor),
+    HeadingTwoItem(editor),
+    HeadingThreeItem(editor),
+    TodoListItem(editor),
+    BulletListItem(editor),
+    NumberedListItem(editor),
+    QuoteItem(editor),
+    CodeItem(editor),
+  ];
+
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+    name: "Multiple",
+  };
+
+  return (
+    <div className="relative h-full">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+      >
+        <span>{activeItem?.name}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {isOpen && (
+        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+          {items.map((item, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => {
+                item.command();
+                setIsOpen(false);
+              }}
+              className={cn(
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+              )}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-custom-border-300 p-1">
+                  <item.icon className="h-3 w-3" />
+                </div>
+                <span>{item.name}</span>
+              </div>
+              {activeItem.name === item.name && <Check className="h-4 w-4" />}
+            </button>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+};
diff --git a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
new file mode 100644
index 00000000000..46905f263d2
--- /dev/null
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@@ -0,0 +1,57 @@
+"use client"
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core';
+import * as React from 'react';
+
+interface IRichTextReadOnlyEditor {
+  value: string;
+  editorContentCustomClassNames?: string;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  mentionHighlights?: string[];
+}
+
+interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const RichReadOnlyEditor = ({
+  editorContentCustomClassNames,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  value,
+  forwardedRef,
+  mentionHighlights,
+}: RichTextReadOnlyEditorProps) => {
+  const editor = useReadOnlyEditor({
+    value,
+    forwardedRef,
+    mentionHighlights,
+  });
+
+  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+      <div className="flex flex-col">
+        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+      </div>
+    </EditorContainer >
+  );
+};
+
+const RichReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => (
+  <RichReadOnlyEditor {...props} forwardedRef={ref} />
+));
+
+RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";
+
+export { RichReadOnlyEditor , RichReadOnlyEditorWithRef };
diff --git a/packages/editor/rich-text-editor/tailwind.config.js b/packages/editor/rich-text-editor/tailwind.config.js
new file mode 100644
index 00000000000..f3206315889
--- /dev/null
+++ b/packages/editor/rich-text-editor/tailwind.config.js
@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};
diff --git a/packages/editor/rich-text-editor/tsconfig.json b/packages/editor/rich-text-editor/tsconfig.json
new file mode 100644
index 00000000000..57d0e9a74ce
--- /dev/null
+++ b/packages/editor/rich-text-editor/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/rich-text-editor/tsup.config.ts b/packages/editor/rich-text-editor/tsup.config.ts
new file mode 100644
index 00000000000..5e89e04afad
--- /dev/null
+++ b/packages/editor/rich-text-editor/tsup.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: false,
+  external: ["react"],
+  injectStyle: true,
+  ...options,
+}));
diff --git a/packages/eslint-config-custom/index.js b/packages/eslint-config-custom/index.js
index 4d829512596..82be6537692 100644
--- a/packages/eslint-config-custom/index.js
+++ b/packages/eslint-config-custom/index.js
@@ -4,7 +4,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint"],
   settings: {
     next: {
-      rootDir: ["app/", "docs/", "packages/*/"],
+      rootDir: ["web/", "space/", "packages/*/"],
     },
   },
   rules: {
@@ -16,5 +16,7 @@ module.exports = {
     "no-duplicate-imports": "error",
     "arrow-body-style": ["error", "as-needed"],
     "react/self-closing-comp": ["error", { component: true, html: true }],
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"],
   },
 };
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 16fed7a78c7..11e970d0e23 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,6 +1,7 @@
 {
   "name": "eslint-config-custom",
-  "version": "0.0.0",
+  "private": true,
+  "version": "0.13.2",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
new file mode 100644
index 00000000000..286dfc3b686
--- /dev/null
+++ b/packages/tailwind-config-custom/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "tailwind-config-custom",
+  "version": "0.13.2",
+  "description": "common tailwind configuration across monorepo",
+  "main": "index.js",
+  "private": true,
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "tailwindcss": "^3.2.7",
+    "tailwindcss-animate": "^1.0.6"
+  }
+}
diff --git a/apps/app/postcss.config.js b/packages/tailwind-config-custom/postcss.config.js
similarity index 100%
rename from apps/app/postcss.config.js
rename to packages/tailwind-config-custom/postcss.config.js
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
new file mode 100644
index 00000000000..efc47b4c7e1
--- /dev/null
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -0,0 +1,362 @@
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: {
+    relative: true,
+    files: [
+      "./components/**/*.tsx",
+      "./constants/**/*.{js,ts,jsx,tsx}",
+      "./layouts/**/*.tsx",
+      "./pages/**/*.tsx",
+      "./ui/**/*.tsx",
+      "../packages/ui/**/*.{js,ts,jsx,tsx}",
+      "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",
+    ],
+  },
+  theme: {
+    extend: {
+      boxShadow: {
+        "custom-shadow-2xs": "var(--color-shadow-2xs)",
+        "custom-shadow-xs": "var(--color-shadow-xs)",
+        "custom-shadow-sm": "var(--color-shadow-sm)",
+        "custom-shadow-rg": "var(--color-shadow-rg)",
+        "custom-shadow-md": "var(--color-shadow-md)",
+        "custom-shadow-lg": "var(--color-shadow-lg)",
+        "custom-shadow-xl": "var(--color-shadow-xl)",
+        "custom-shadow-2xl": "var(--color-shadow-2xl)",
+        "custom-shadow-3xl": "var(--color-shadow-3xl)",
+        "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)",
+        "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)",
+        "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)",
+        "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",
+        "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)",
+        "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)",
+        "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)",
+        "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)",
+        "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)",
+      },
+      colors: {
+        custom: {
+          primary: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-primary-10"),
+            20: convertToRGB("--color-primary-20"),
+            30: convertToRGB("--color-primary-30"),
+            40: convertToRGB("--color-primary-40"),
+            50: convertToRGB("--color-primary-50"),
+            60: convertToRGB("--color-primary-60"),
+            70: convertToRGB("--color-primary-70"),
+            80: convertToRGB("--color-primary-80"),
+            90: convertToRGB("--color-primary-90"),
+            100: convertToRGB("--color-primary-100"),
+            200: convertToRGB("--color-primary-200"),
+            300: convertToRGB("--color-primary-300"),
+            400: convertToRGB("--color-primary-400"),
+            500: convertToRGB("--color-primary-500"),
+            600: convertToRGB("--color-primary-600"),
+            700: convertToRGB("--color-primary-700"),
+            800: convertToRGB("--color-primary-800"),
+            900: convertToRGB("--color-primary-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
+          },
+          background: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-background-10"),
+            20: convertToRGB("--color-background-20"),
+            30: convertToRGB("--color-background-30"),
+            40: convertToRGB("--color-background-40"),
+            50: convertToRGB("--color-background-50"),
+            60: convertToRGB("--color-background-60"),
+            70: convertToRGB("--color-background-70"),
+            80: convertToRGB("--color-background-80"),
+            90: convertToRGB("--color-background-90"),
+            100: convertToRGB("--color-background-100"),
+            200: convertToRGB("--color-background-200"),
+            300: convertToRGB("--color-background-300"),
+            400: convertToRGB("--color-background-400"),
+            500: convertToRGB("--color-background-500"),
+            600: convertToRGB("--color-background-600"),
+            700: convertToRGB("--color-background-700"),
+            800: convertToRGB("--color-background-800"),
+            900: convertToRGB("--color-background-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
+          },
+          text: {
+            0: "rgb(255, 255, 255)",
+            10: convertToRGB("--color-text-10"),
+            20: convertToRGB("--color-text-20"),
+            30: convertToRGB("--color-text-30"),
+            40: convertToRGB("--color-text-40"),
+            50: convertToRGB("--color-text-50"),
+            60: convertToRGB("--color-text-60"),
+            70: convertToRGB("--color-text-70"),
+            80: convertToRGB("--color-text-80"),
+            90: convertToRGB("--color-text-90"),
+            100: convertToRGB("--color-text-100"),
+            200: convertToRGB("--color-text-200"),
+            300: convertToRGB("--color-text-300"),
+            400: convertToRGB("--color-text-400"),
+            500: convertToRGB("--color-text-500"),
+            600: convertToRGB("--color-text-600"),
+            700: convertToRGB("--color-text-700"),
+            800: convertToRGB("--color-text-800"),
+            900: convertToRGB("--color-text-900"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-text-100"),
+          },
+          border: {
+            0: "rgb(255, 255, 255)",
+            100: convertToRGB("--color-border-100"),
+            200: convertToRGB("--color-border-200"),
+            300: convertToRGB("--color-border-300"),
+            400: convertToRGB("--color-border-400"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-border-200"),
+          },
+          sidebar: {
+            background: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-background-10"),
+              20: convertToRGB("--color-sidebar-background-20"),
+              30: convertToRGB("--color-sidebar-background-30"),
+              40: convertToRGB("--color-sidebar-background-40"),
+              50: convertToRGB("--color-sidebar-background-50"),
+              60: convertToRGB("--color-sidebar-background-60"),
+              70: convertToRGB("--color-sidebar-background-70"),
+              80: convertToRGB("--color-sidebar-background-80"),
+              90: convertToRGB("--color-sidebar-background-90"),
+              100: convertToRGB("--color-sidebar-background-100"),
+              200: convertToRGB("--color-sidebar-background-200"),
+              300: convertToRGB("--color-sidebar-background-300"),
+              400: convertToRGB("--color-sidebar-background-400"),
+              500: convertToRGB("--color-sidebar-background-500"),
+              600: convertToRGB("--color-sidebar-background-600"),
+              700: convertToRGB("--color-sidebar-background-700"),
+              800: convertToRGB("--color-sidebar-background-800"),
+              900: convertToRGB("--color-sidebar-background-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
+            },
+            text: {
+              0: "rgb(255, 255, 255)",
+              10: convertToRGB("--color-sidebar-text-10"),
+              20: convertToRGB("--color-sidebar-text-20"),
+              30: convertToRGB("--color-sidebar-text-30"),
+              40: convertToRGB("--color-sidebar-text-40"),
+              50: convertToRGB("--color-sidebar-text-50"),
+              60: convertToRGB("--color-sidebar-text-60"),
+              70: convertToRGB("--color-sidebar-text-70"),
+              80: convertToRGB("--color-sidebar-text-80"),
+              90: convertToRGB("--color-sidebar-text-90"),
+              100: convertToRGB("--color-sidebar-text-100"),
+              200: convertToRGB("--color-sidebar-text-200"),
+              300: convertToRGB("--color-sidebar-text-300"),
+              400: convertToRGB("--color-sidebar-text-400"),
+              500: convertToRGB("--color-sidebar-text-500"),
+              600: convertToRGB("--color-sidebar-text-600"),
+              700: convertToRGB("--color-sidebar-text-700"),
+              800: convertToRGB("--color-sidebar-text-800"),
+              900: convertToRGB("--color-sidebar-text-900"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-text-100"),
+            },
+            border: {
+              0: "rgb(255, 255, 255)",
+              100: convertToRGB("--color-sidebar-border-100"),
+              200: convertToRGB("--color-sidebar-border-200"),
+              300: convertToRGB("--color-sidebar-border-300"),
+              400: convertToRGB("--color-sidebar-border-400"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-border-200"),
+            },
+          },
+          backdrop: "#131313",
+        },
+      },
+      keyframes: {
+        leftToaster: {
+          "0%": { left: "-20rem" },
+          "100%": { left: "0" },
+        },
+        rightToaster: {
+          "0%": { right: "-20rem" },
+          "100%": { right: "0" },
+        },
+        "bar-loader": {
+          from: { left: "-100%" },
+          to: { left: "100%" },
+        },
+      },
+      typography: ({ theme }) => ({
+        brand: {
+          css: {
+            "--tw-prose-body": convertToRGB("--color-text-100"),
+            "--tw-prose-p": convertToRGB("--color-text-100"),
+            "--tw-prose-headings": convertToRGB("--color-text-100"),
+            "--tw-prose-lead": convertToRGB("--color-text-100"),
+            "--tw-prose-links": convertToRGB("--color-primary-100"),
+            "--tw-prose-bold": convertToRGB("--color-text-100"),
+            "--tw-prose-counters": convertToRGB("--color-text-100"),
+            "--tw-prose-bullets": convertToRGB("--color-text-100"),
+            "--tw-prose-hr": convertToRGB("--color-text-100"),
+            "--tw-prose-quotes": convertToRGB("--color-text-100"),
+            "--tw-prose-quote-borders": convertToRGB("--color-border"),
+            "--tw-prose-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-code": convertToRGB("--color-text-100"),
+            "--tw-prose-pre-bg": convertToRGB("--color-background-100"),
+            "--tw-prose-th-borders": convertToRGB("--color-border"),
+            "--tw-prose-td-borders": convertToRGB("--color-border"),
+          },
+        },
+      }),
+      screens: {
+        "3xl": "1792px",
+      },
+      // scale down font sizes to 90% of default
+      fontSize: {
+        xs: "0.675rem",
+        sm: "0.7875rem",
+        base: "0.9rem",
+        lg: "1.0125rem",
+        xl: "1.125rem",
+        "2xl": "1.35rem",
+        "3xl": "1.6875rem",
+        "4xl": "2.25rem",
+        "5xl": "2.7rem",
+        "6xl": "3.375rem",
+        "7xl": "4.05rem",
+        "8xl": "5.4rem",
+        "9xl": "7.2rem",
+      },
+      // scale down spacing to 90% of default
+      padding: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      margin: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      space: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+      gap: {
+        0: "0",
+        0.5: "0.1125rem",
+        1: "0.225rem",
+        1.5: "0.3375rem",
+        2: "0.45rem",
+        2.5: "0.5625rem",
+        3: "0.675rem",
+        3.5: "0.7875rem",
+        4: "0.9rem",
+        5: "1.125rem",
+        6: "1.35rem",
+        7: "1.575rem",
+        8: "1.8rem",
+        9: "2.025rem",
+        10: "2.25rem",
+        11: "2.475rem",
+        12: "2.7rem",
+        16: "3.6rem",
+        20: "4.5rem",
+        24: "5.4rem",
+        32: "7.2rem",
+        40: "9rem",
+        48: "10.8rem",
+        56: "12.6rem",
+        64: "14.4rem",
+        72: "16.2rem",
+        80: "18rem",
+        96: "21.6rem",
+      },
+    },
+    fontFamily: {
+      custom: ["Inter", "sans-serif"],
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
index d72a9f3a278..2825abe07ce 100644
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@@ -16,5 +16,7 @@
     "skipLibCheck": true,
     "strict": true
   },
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index f4810fc3fa8..58bfb84516c 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.0.0",
+  "version": "0.13.2",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json
index bdd954367b0..211c87d8d8e 100644
--- a/packages/tsconfig/react-library.json
+++ b/packages/tsconfig/react-library.json
@@ -3,9 +3,10 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["ES2015"],
+    "jsx": "react-jsx",
+    "lib": ["ES2015", "DOM"],
     "module": "ESNext",
-    "target": "es6"
+    "target": "es6",
+    "sourceMap": true
   }
 }
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 00000000000..ce447bf1c1a
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1 @@
+# UI Package
diff --git a/packages/ui/button/index.tsx b/packages/ui/button/index.tsx
deleted file mode 100644
index 0a1550ec0b6..00000000000
--- a/packages/ui/button/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const Button = () => {
-  return <button>button</button>;
-};
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
deleted file mode 100644
index 677dc8f4d02..00000000000
--- a/packages/ui/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// import * as React from "react";
-// components
-// export * from "./breadcrumbs";
-// export * from "./button";
-// export * from "./custom-listbox";
-// export * from "./custom-menu";
-// export * from "./custom-select";
-// export * from "./empty-space";
-// export * from "./header-button";
-// export * from "./input";
-// export * from "./loader";
-// export * from "./outline-button";
-// export * from "./select";
-// export * from "./spinner";
-// export * from "./text-area";
-// export * from "./tooltip";
-export * from "./button";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 63e41b917e7..72413eb7cb0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,22 +1,44 @@
 {
-  "name": "ui",
-  "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@plane/ui",
+  "description": "UI components shared across multiple apps internally",
+  "private": true,
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "lint": "eslint *.ts*"
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@types/react-color": "^3.0.9",
+    "@types/node": "^20.5.2",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "classnames": "^2.3.2",
-    "eslint": "^7.32.0",
     "eslint-config-custom": "*",
-    "next": "12.3.2",
     "react": "^18.2.0",
+    "tailwind-config-custom": "*",
     "tsconfig": "*",
+    "tsup": "^5.10.1",
     "typescript": "4.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
+    "@headlessui/react": "^1.7.17",
+    "@popperjs/core": "^2.11.8",
+    "react-color": "^2.19.3",
+    "react-popper": "^2.3.0"
   }
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
new file mode 100644
index 00000000000..129aa7f59ec
--- /dev/null
+++ b/packages/ui/postcss.config.js
@@ -0,0 +1 @@
+module.exports = require("tailwind-config-custom/postcss.config");
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
new file mode 100644
index 00000000000..25a3c76fc5f
--- /dev/null
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+// types
+import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
+
+type Props = {
+  /**
+   * The children of the avatar group.
+   * These should ideally should be `Avatar` components
+   */
+  children: React.ReactNode;
+  /**
+   * The maximum number of avatars to display.
+   * If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+};
+
+export const AvatarGroup: React.FC<Props> = (props) => {
+  const { children, max = 2, showTooltip = true, size = "md" } = props;
+
+  // calculate total length of avatars inside the group
+  const totalAvatars = React.Children.toArray(children).length;
+
+  // if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+
+  // slice the children to the maximum number of avatars
+  const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
+
+  // assign the necessary props from the AvatarGroup component to the Avatar components
+  const avatarsWithUpdatedProps = avatars.map((avatar) => {
+    const updatedProps: Partial<Props> = {
+      showTooltip,
+      size,
+    };
+
+    return React.cloneElement(avatar as React.ReactElement, updatedProps);
+  });
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <div className={`flex ${sizeInfo.spacing}`}>
+      {avatarsWithUpdatedProps.map((avatar, index) => (
+        <div
+          key={index}
+          className="ring-1 ring-custom-background-100 rounded-full"
+        >
+          {avatar}
+        </div>
+      ))}
+      {maxAvatarsToRender < totalAvatars && (
+        <Tooltip
+          tooltipContent={`${totalAvatars} total`}
+          disabled={!showTooltip}
+        >
+          <div
+            className={`${
+              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+            } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
+            style={
+              isAValidNumber(size)
+                ? {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                  }
+                : {}
+            }
+          >
+            +{totalAvatars - max}
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
new file mode 100644
index 00000000000..2c6b5b9a3d7
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+// ui
+import { Tooltip } from "../tooltip";
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+type Props = {
+  /**
+   * The name of the avatar which will be displayed on the tooltip
+   */
+  name?: string;
+  /**
+   * The background color if the avatar image fails to load
+   */
+  fallbackBackgroundColor?: string;
+  /**
+   * The text to display if the avatar image fails to load
+   */
+  fallbackText?: string;
+  /**
+   * The text color if the avatar image fails to load
+   */
+  fallbackTextColor?: string;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+  /**
+   * The shape of the avatar
+   * Possible values: "circle", "square"
+   * @default "circle"
+   */
+  shape?: "circle" | "square";
+  /**
+   * The source of the avatar image
+   */
+  src?: string;
+};
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-sm",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-xs",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded-md";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: any) => {
+  return typeof value === "number" && !isNaN(value);
+};
+
+export const Avatar: React.FC<Props> = (props) => {
+  const {
+    name,
+    fallbackBackgroundColor,
+    fallbackText,
+    fallbackTextColor,
+    showTooltip = true,
+    size = "md",
+    shape = "circle",
+    src,
+  } = props;
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <Tooltip
+      tooltipContent={fallbackText ?? name ?? "?"}
+      disabled={!showTooltip}
+    >
+      <div
+        className={`${
+          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
+        } overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
+        style={
+          isAValidNumber(size)
+            ? {
+                height: `${size}px`,
+                width: `${size}px`,
+              }
+            : {}
+        }
+      >
+        {src ? (
+          <img
+            src={src}
+            className={`h-full w-full ${getBorderRadius(shape)}`}
+            alt={name}
+          />
+        ) : (
+          <div
+            className={`${
+              sizeInfo.fontSize
+            } grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
+            style={{
+              backgroundColor:
+                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+              color: fallbackTextColor ?? "#ffffff",
+            }}
+          >
+            {name ? name[0].toUpperCase() : fallbackText ?? "?"}
+          </div>
+        )}
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts
new file mode 100644
index 00000000000..3ccfbeca093
--- /dev/null
+++ b/packages/ui/src/avatar/index.ts
@@ -0,0 +1,2 @@
+export * from "./avatar-group";
+export * from "./avatar";
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 00000000000..94f31782558
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+
+// icons
+import { ChevronRight } from "lucide-react";
+// components
+import { Tooltip } from "../tooltip";
+
+type BreadcrumbsProps = {
+  children: any;
+};
+
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
+  <div className="flex items-center space-x-2">
+    {React.Children.map(children, (child, index) => (
+      <div key={index} className="flex items-center flex-wrap gap-2.5">
+        {child}
+        {index !== React.Children.count(children) - 1 && (
+          <ChevronRight
+            className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+type Props = {
+  type?: "text" | "component";
+  component?: React.ReactNode;
+  label?: string;
+  icon?: React.ReactNode;
+  link?: string;
+};
+const BreadcrumbItem: React.FC<Props> = (props) => {
+  const { type = "text", component, label, icon, link } = props;
+  return (
+    <>
+      {type != "text" ? (
+        <div className="flex items-center space-x-2">{component}</div>
+      ) : (
+        <Tooltip tooltipContent={label} position="bottom">
+          <li className="flex items-center space-x-2">
+            <div className="flex items-center flex-wrap gap-2.5">
+              {link ? (
+                <a
+                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+                  href={link}
+                >
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center !text-[1rem]">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </a>
+              ) : (
+                <div className="flex items-center gap-1 text-sm font-medium text-custom-text-100 cursor-default">
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </div>
+              )}
+            </div>
+          </li>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/ui/src/breadcrumbs/index.ts
new file mode 100644
index 00000000000..669f5575772
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from "./breadcrumbs";
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
new file mode 100644
index 00000000000..138e105e062
--- /dev/null
+++ b/packages/ui/src/button/button.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+
+import {
+  getIconStyling,
+  getButtonStyling,
+  TButtonVariant,
+  TButtonSizes,
+} from "./helper";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: TButtonVariant;
+  size?: TButtonSizes;
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  appendIcon?: any;
+  prependIcon?: any;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      variant = "primary",
+      size = "md",
+      className = "",
+      type = "button",
+      loading = false,
+      disabled = false,
+      prependIcon = null,
+      appendIcon = null,
+      children,
+      ...rest
+    } = props;
+
+    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+    const buttonIconStyle = getIconStyling(size);
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={`${buttonStyle} ${className}`}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {prependIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(prependIcon, { strokeWidth: 2 })}
+          </div>
+        )}
+        {children}
+        {appendIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(appendIcon, { strokeWidth: 2 })}
+          </div>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
new file mode 100644
index 00000000000..82489c3e81a
--- /dev/null
+++ b/packages/ui/src/button/helper.tsx
@@ -0,0 +1,123 @@
+export type TButtonVariant =
+  | "primary"
+  | "accent-primary"
+  | "outline-primary"
+  | "neutral-primary"
+  | "link-primary"
+  | "danger"
+  | "accent-danger"
+  | "outline-danger"
+  | "link-danger"
+  | "tertiary-danger";
+
+export type TButtonSizes = "sm" | "md" | "lg" | "xl";
+
+export interface IButtonStyling {
+  [key: string]: {
+    default: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  };
+}
+
+enum buttonSizeStyling {
+  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+}
+
+enum buttonIconStyling {
+  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+}
+
+export const buttonStyling: IButtonStyling = {
+  primary: {
+    default: `text-white bg-custom-primary-100`,
+    hover: `hover:bg-custom-primary-200`,
+    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+  },
+  "accent-primary": {
+    default: `bg-custom-primary-10 text-custom-primary-100`,
+    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
+    pressed: `focus:bg-custom-primary-20`,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+  "outline-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
+    pressed: `focus:text-custom-primary-80 focus:bg-custom-primary-10 focus:border-custom-primary-80`,
+    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+  },
+  "neutral-primary": {
+    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    hover: `hover:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    disabled: `cursor-not-allowed !text-custom-text-400`,
+  },
+  "link-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100`,
+    hover: `hover:text-custom-primary-200`,
+    pressed: `focus:text-custom-primary-80 `,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+
+  danger: {
+    default: `text-white bg-red-500`,
+    hover: ` hover:bg-red-600`,
+    pressed: `focus:text-red-200 focus:bg-red-600`,
+    disabled: `cursor-not-allowed !bg-red-300`,
+  },
+  "accent-danger": {
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-red-100`,
+    pressed: `focus:text-red-500 focus:bg-red-100`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "outline-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    hover: `hover:text-red-400 hover:border-red-400`,
+    pressed: `focus:text-red-400 focus:border-red-400`,
+    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
+  },
+  "link-danger": {
+    default: `text-red-500 bg-custom-background-100`,
+    hover: `hover:text-red-400`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "tertiary-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    hover: `hover:bg-red-50 hover:border-red-300`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+};
+
+export const getButtonStyling = (
+  variant: TButtonVariant,
+  size: TButtonSizes,
+  disabled: boolean = false
+): string => {
+  let _variant: string = ``;
+  const currentVariant = buttonStyling[variant];
+
+  _variant = `${currentVariant.default} ${
+    disabled ? currentVariant.disabled : currentVariant.hover
+  } ${currentVariant.pressed}`;
+
+  let _size: string = ``;
+  if (size) _size = buttonSizeStyling[size];
+  return `${_variant} ${_size}`;
+};
+
+export const getIconStyling = (size: TButtonSizes): string => {
+  let icon: string = ``;
+  if (size) icon = buttonIconStyling[size];
+  return icon;
+};
diff --git a/packages/ui/src/button/index.ts b/packages/ui/src/button/index.ts
new file mode 100644
index 00000000000..f1a2d03d4bd
--- /dev/null
+++ b/packages/ui/src/button/index.ts
@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./toggle-switch";
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
new file mode 100644
index 00000000000..9888dd205f9
--- /dev/null
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import { Switch } from "@headlessui/react";
+
+interface IToggleSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  className?: string;
+}
+
+const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
+  const { value, onChange, label, size = "sm", disabled, className } = props;
+
+  return (
+    <Switch
+      checked={value}
+      disabled={disabled}
+      onChange={onChange}
+      className={`relative flex-shrink-0 inline-flex ${
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
+      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-custom-primary-100" : "bg-gray-700"
+      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
+    >
+      <span className="sr-only">{label}</span>
+      <span
+        aria-hidden="true"
+        className={`self-center inline-block ${
+          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
+        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
+          value
+            ? (size === "sm"
+                ? "translate-x-3"
+                : size === "md"
+                ? "translate-x-4"
+                : "translate-x-5") + " bg-white"
+            : "translate-x-0.5 bg-custom-background-90"
+        } ${disabled ? "cursor-not-allowed" : ""}`}
+      />
+    </Switch>
+  );
+};
+
+ToggleSwitch.displayName = "plane-ui-toggle-switch";
+
+export { ToggleSwitch };
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
new file mode 100644
index 00000000000..0e8d5006425
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -0,0 +1,152 @@
+import * as React from "react";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// type
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+const CustomMenu = (props: ICustomMenuDropdownProps) => {
+  const {
+    buttonClassName = "",
+    customButtonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    verticalEllipsis = false,
+    width = "auto",
+    menuButtonOnClick,
+  } = props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={menuButtonOnClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
+                      disabled
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal
+                      className={`h-3.5 w-3.5 ${
+                        verticalEllipsis ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
+                      open
+                        ? "bg-custom-background-90 text-custom-text-100"
+                        : "text-custom-text-200"
+                    } ${
+                      noBorder
+                        ? ""
+                        : "border border-custom-border-300 shadow-sm focus:outline-none"
+                    } ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items className="fixed z-10">
+            <div
+              className={`overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${
+                width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+              } ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {children}
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, onClick, className = "" } = props;
+  return (
+    <Menu.Item as="div">
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+};
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
new file mode 100644
index 00000000000..8ba95c28cc6
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -0,0 +1,204 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { ICustomSearchSelectProps } from "./helper";
+
+export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    className = "",
+    customButton,
+    placement,
+    disabled = false,
+    footerOption,
+    input = false,
+    label,
+    maxHeight = "md",
+    multiple = false,
+    noChevron = false,
+    onChange,
+    options,
+    onOpen,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) =>
+          option.query.toLowerCase().includes(query.toLowerCase())
+        );
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      className={`relative flex-shrink-0 text-left ${className}`}
+      {...comboboxProps}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full text-xs ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </button>
+              </Combobox.Button>
+            )}
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                } ${optionsClassName}`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Type to search..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div
+                  className={`mt-2 space-y-1 ${
+                    maxHeight === "lg"
+                      ? "max-h-60"
+                      : maxHeight === "md"
+                      ? "max-h-48"
+                      : maxHeight === "rg"
+                      ? "max-h-36"
+                      : maxHeight === "sm"
+                      ? "max-h-28"
+                      : ""
+                  } overflow-y-scroll`}
+                >
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          value={option.value}
+                          className={({ active, selected }) =>
+                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                              active || selected
+                                ? "bg-custom-background-80"
+                                : ""
+                            } ${
+                              selected
+                                ? "text-custom-text-100"
+                                : "text-custom-text-200"
+                            }`
+                          }
+                        >
+                          {({ active, selected }) => (
+                            <>
+                              {option.content}
+                              {multiple ? (
+                                <div
+                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
+                                    active || selected
+                                      ? "opacity-100"
+                                      : "opacity-0"
+                                  }`}
+                                >
+                                  <Check
+                                    className={`h-3 w-3 ${
+                                      selected ? "opacity-100" : "opacity-0"
+                                    }`}
+                                  />
+                                </div>
+                              ) : (
+                                <Check
+                                  className={`h-3 w-3 ${
+                                    selected ? "opacity-100" : "opacity-0"
+                                  }`}
+                                />
+                              )}
+                            </>
+                          )}
+                        </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-center text-custom-text-200">
+                      Loading...
+                    </p>
+                  )}
+                </div>
+                {footerOption}
+              </div>
+            </Combobox.Options>
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
new file mode 100644
index 00000000000..b48d26aeeef
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown } from "lucide-react";
+// types
+import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+
+const CustomSelect = (props: ICustomSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    input = false,
+    label,
+    maxHeight = "md",
+    noChevron = false,
+    onChange,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
+    >
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full text-xs ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+              )}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            maxHeight === "lg"
+              ? "max-h-60"
+              : maxHeight === "md"
+              ? "max-h-48"
+              : maxHeight === "rg"
+              ? "max-h-36"
+              : maxHeight === "sm"
+              ? "max-h-28"
+              : ""
+          } ${
+            width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+          } ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
+
+const Option = (props: ICustomSelectItemProps) => {
+  const { children, value, className } = props;
+  return (
+    <Listbox.Option
+      value={value}
+      className={({ active, selected }) =>
+        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+          active || selected ? "bg-custom-background-80" : ""
+        } ${
+          selected ? "text-custom-text-100" : "text-custom-text-200"
+        } ${className}`
+      }
+    >
+      {({ selected }) => (
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">{children}</div>
+          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+        </div>
+      )}
+    </Listbox.Option>
+  );
+};
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
new file mode 100644
index 00000000000..eac53b6e65b
--- /dev/null
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -0,0 +1,70 @@
+// FIXME: fix this!!!
+import { Placement } from "@blueprintjs/popover2";
+
+export interface IDropdownProps {
+  customButtonClassName?: string;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: JSX.Element;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | JSX.Element;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  width?: "auto" | string;
+  placement?: Placement;
+}
+
+export interface ICustomMenuDropdownProps extends IDropdownProps {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+}
+
+export interface ICustomSelectProps extends IDropdownProps {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+}
+
+interface CustomSearchSelectProps {
+  footerOption?: JSX.Element;
+  onChange: any;
+  options:
+    | {
+        value: any;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+}
+
+interface SingleValueProps {
+  multiple?: false;
+  value: any;
+}
+
+interface MultipleValuesProps {
+  multiple?: true;
+  value: any[] | null;
+}
+
+export type ICustomSearchSelectProps = IDropdownProps &
+  CustomSearchSelectProps &
+  (SingleValueProps | MultipleValuesProps);
+
+export interface ICustomMenuItemProps {
+  children: React.ReactNode;
+  onClick?: (args?: any) => void;
+  className?: string;
+}
+
+export interface ICustomSelectItemProps {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+}
diff --git a/packages/ui/src/dropdowns/index.ts b/packages/ui/src/dropdowns/index.ts
new file mode 100644
index 00000000000..0ad9cbb227c
--- /dev/null
+++ b/packages/ui/src/dropdowns/index.ts
@@ -0,0 +1,3 @@
+export * from "./custom-menu";
+export * from "./custom-select";
+export * from "./custom-search-select";
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
new file mode 100644
index 00000000000..49f6f1552fe
--- /dev/null
+++ b/packages/ui/src/form-fields/index.ts
@@ -0,0 +1,3 @@
+export * from "./input";
+export * from "./textarea";
+export * from "./input-color-picker"
\ No newline at end of file
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
new file mode 100644
index 00000000000..0a91a883807
--- /dev/null
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { ColorResult, SketchPicker } from "react-color";
+// components
+import { Input } from "./input";
+import { usePopper } from "react-popper";
+import { Button } from "../button";
+
+export interface InputColorPickerProps {
+  hasError: boolean;
+  value: string | undefined;
+  onChange: (value: string) => void;
+  name: string;
+  className?: string;
+  style?: React.CSSProperties;
+  placeholder: string;
+}
+
+export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
+  const { value, hasError, onChange, name, className, style, placeholder } =
+    props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  const handleColorChange = (newColor: ColorResult) => {
+    const { hex } = newColor;
+    onChange(hex);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        id={name}
+        name={name}
+        type="text"
+        value={value}
+        onChange={handleInputChange}
+        hasError={hasError}
+        placeholder={placeholder}
+        className={`border-[0.5px] border-custom-border-200 ${className}`}
+        style={style}
+      />
+
+      <Popover
+        as="div"
+        className="absolute top-1/2 -translate-y-1/2 right-1 z-10"
+      >
+        {({ open }) => {
+          if (open) {
+          }
+          return (
+            <>
+              <Popover.Button as={React.Fragment}>
+                <Button
+                  ref={setReferenceElement}
+                  variant="neutral-primary"
+                  size="sm"
+                  className="border-none !bg-transparent"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    className="lucide lucide-palette"
+                  >
+                    <circle cx="13.5" cy="6.5" r=".5" />
+                    <circle cx="17.5" cy="10.5" r=".5" />
+                    <circle cx="8.5" cy="7.5" r=".5" />
+                    <circle cx="6.5" cy="12.5" r=".5" />
+                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+                  </svg>
+                </Button>
+              </Popover.Button>
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel>
+                  <div
+                    className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    <SketchPicker color={value} onChange={handleColorChange} />
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          );
+        }}
+      </Popover>
+    </div>
+  );
+};
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
new file mode 100644
index 00000000000..501af5c7d34
--- /dev/null
+++ b/packages/ui/src/form-fields/input.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "true-transparent";
+  inputSize?: "sm" | "md";
+  hasError?: boolean;
+  className?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    id,
+    type,
+    name,
+    mode = "primary",
+    inputSize = "sm",
+    hasError = false,
+    className = "",
+    ...rest
+  } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      name={name}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border-[0.5px] border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "true-transparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${hasError ? "border-red-500" : ""} ${
+        hasError && mode === "primary" ? "bg-red-500/20" : ""
+      } ${
+        inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
+      } ${className}`}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "form-input-field";
+
+export { Input };
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
new file mode 100644
index 00000000000..e53979edca2
--- /dev/null
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  mode?: "primary" | "transparent";
+  hasError?: boolean;
+  className?: string;
+}
+
+// Updates the height of a <textarea> when the value changes.
+const useAutoSizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: any
+) => {
+  React.useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      value = "",
+      rows = 1,
+      cols = 1,
+      mode = "primary",
+      hasError = false,
+      className = "",
+      ...rest
+    } = props;
+
+    const textAreaRef = React.useRef<any>(ref);
+
+    ref && useAutoSizeTextArea(textAreaRef?.current, value);
+
+    return (
+      <textarea
+        id={id}
+        name={name}
+        ref={textAreaRef}
+        value={value}
+        rows={rows}
+        cols={cols}
+        className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
+          mode === "primary"
+            ? "rounded-md border-[0.5px] border-custom-border-200"
+            : mode === "transparent"
+            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
+            : ""
+        } ${hasError ? "border-red-500" : ""} ${
+          hasError && mode === "primary" ? "bg-red-100" : ""
+        } ${className}`}
+        {...rest}
+      />
+    );
+  }
+);
+
+export { TextArea };
diff --git a/packages/ui/src/icons/admin-profile-icon.tsx b/packages/ui/src/icons/admin-profile-icon.tsx
new file mode 100644
index 00000000000..5adf3d1c54c
--- /dev/null
+++ b/packages/ui/src/icons/admin-profile-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AdminProfileIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/archive-icon.tsx b/packages/ui/src/icons/archive-icon.tsx
new file mode 100644
index 00000000000..a3ce6ebcaf0
--- /dev/null
+++ b/packages/ui/src/icons/archive-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ArchiveIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M15 18L12 21L9 18" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 21L12 12" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocked-icon.tsx b/packages/ui/src/icons/blocked-icon.tsx
new file mode 100644
index 00000000000..b3f9226a913
--- /dev/null
+++ b/packages/ui/src/icons/blocked-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockedIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+      fill="#F76659"
+    />
+    <path
+      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+      fill="#F76659"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocker-icon.tsx b/packages/ui/src/icons/blocker-icon.tsx
new file mode 100644
index 00000000000..d554f37843f
--- /dev/null
+++ b/packages/ui/src/icons/blocker-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockerIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+      fill="#F7AE59"
+    />
+    <path
+      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-after-icon.tsx b/packages/ui/src/icons/calendar-after-icon.tsx
new file mode 100644
index 00000000000..7321c10542c
--- /dev/null
+++ b/packages/ui/src/icons/calendar-after-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarAfterIcon: 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}
+  >
+    <g clipPath="url(#clip0_3309_70901)">
+      <path
+        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70901">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-before-icon.tsx b/packages/ui/src/icons/calendar-before-icon.tsx
new file mode 100644
index 00000000000..5b6b6d72c12
--- /dev/null
+++ b/packages/ui/src/icons/calendar-before-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarBeforeIcon: 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}
+  >
+    <g clipPath="url(#clip0_3309_70907)">
+      <path
+        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+      <g clipPath="url(#clip1_3309_70907)">
+        <path
+          d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
+          fill="rgb(var(--color-text-200))"
+          stroke="rgb(var(--color-text-200))"
+          strokeWidth="0.5"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70907">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_3309_70907">
+        <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/center-panel-icon.tsx b/packages/ui/src/icons/center-panel-icon.tsx
new file mode 100644
index 00000000000..321b61b887a
--- /dev/null
+++ b/packages/ui/src/icons/center-panel-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CenterPanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/copy-icon.tsx b/packages/ui/src/icons/copy-icon.tsx
new file mode 100644
index 00000000000..02f8e2ba19d
--- /dev/null
+++ b/packages/ui/src/icons/copy-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CopyIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 8H10C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
new file mode 100644
index 00000000000..d13d5ca5f53
--- /dev/null
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CreateIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
new file mode 100644
index 00000000000..53ea0590633
--- /dev/null
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 16 16"
+    className={`${className} stroke-1`}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <circle
+      cx="8.33333"
+      cy="8.33333"
+      r="5.33333"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
+    <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/contrast-icon.tsx b/packages/ui/src/icons/cycle/contrast-icon.tsx
new file mode 100644
index 00000000000..7b51fd1e746
--- /dev/null
+++ b/packages/ui/src/icons/cycle/contrast-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ContrastIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/cycle-group-icon.tsx b/packages/ui/src/icons/cycle/cycle-group-icon.tsx
new file mode 100644
index 00000000000..731d90702ae
--- /dev/null
+++ b/packages/ui/src/icons/cycle/cycle-group-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ContrastIcon } from "./contrast-icon";
+import { CircleDotFullIcon } from "./circle-dot-full-icon";
+import { CircleDotDashed, Circle } from "lucide-react";
+
+import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
+
+const iconComponents = {
+  current: ContrastIcon,
+  upcoming: CircleDotDashed,
+  completed: CircleDotFullIcon,
+  draft: Circle,
+};
+
+export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
+  className = "",
+  color,
+  cycleGroup,
+  height = "12px",
+  width = "12px",
+}) => {
+  const CycleIconComponent = iconComponents[cycleGroup] || ContrastIcon;
+
+  return (
+    <CycleIconComponent
+      height={height}
+      width={width}
+      color={color ?? CYCLE_GROUP_COLORS[cycleGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
diff --git a/packages/ui/src/icons/cycle/double-circle-icon.tsx b/packages/ui/src/icons/cycle/double-circle-icon.tsx
new file mode 100644
index 00000000000..a191b71a6b2
--- /dev/null
+++ b/packages/ui/src/icons/cycle/double-circle-icon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <circle cx="12" cy="12" r="9" />
+    <circle cx="12" cy="12" r="5.625" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/cycle/helper.tsx b/packages/ui/src/icons/cycle/helper.tsx
new file mode 100644
index 00000000000..ec91cc2c213
--- /dev/null
+++ b/packages/ui/src/icons/cycle/helper.tsx
@@ -0,0 +1,18 @@
+export interface ICycleGroupIcon {
+  className?: string;
+  color?: string;
+  cycleGroup: TCycleGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
+
+export const CYCLE_GROUP_COLORS: {
+  [key in TCycleGroups]: string;
+} = {
+  current: "#F59E0B",
+  upcoming: "#3F76FF",
+  completed: "#16A34A",
+  draft: "#525252",
+};
diff --git a/packages/ui/src/icons/cycle/index.ts b/packages/ui/src/icons/cycle/index.ts
new file mode 100644
index 00000000000..e74c8ff8c8c
--- /dev/null
+++ b/packages/ui/src/icons/cycle/index.ts
@@ -0,0 +1,5 @@
+export * from "./double-circle-icon";
+export * from "./circle-dot-full-icon";
+export * from "./contrast-icon";
+export * from "./circle-dot-full-icon";
+export * from "./cycle-group-icon";
diff --git a/packages/ui/src/icons/dice-icon.tsx b/packages/ui/src/icons/dice-icon.tsx
new file mode 100644
index 00000000000..7ab154cbead
--- /dev/null
+++ b/packages/ui/src/icons/dice-icon.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiceIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/discord-icon.tsx b/packages/ui/src/icons/discord-icon.tsx
new file mode 100644
index 00000000000..6903b46d0fc
--- /dev/null
+++ b/packages/ui/src/icons/discord-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiscordIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_229)">
+      <path
+        fill={color ? color : "rgb(var(--color-text-200))"}
+        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_229">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/external-link-icon.tsx b/packages/ui/src/icons/external-link-icon.tsx
new file mode 100644
index 00000000000..612e6af1ec6
--- /dev/null
+++ b/packages/ui/src/icons/external-link-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ExternalLinkIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-[1.5]`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M15 3H21V9" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10 14L21 3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/full-screen-panel-icon.tsx b/packages/ui/src/icons/full-screen-panel-icon.tsx
new file mode 100644
index 00000000000..da21aca1ff3
--- /dev/null
+++ b/packages/ui/src/icons/full-screen-panel-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/github-icon.tsx b/packages/ui/src/icons/github-icon.tsx
new file mode 100644
index 00000000000..b979e75b03e
--- /dev/null
+++ b/packages/ui/src/icons/github-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const GithubIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_232)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+        fill={color ? color : "rgb(var(--color-text-200))"}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_232">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
new file mode 100644
index 00000000000..4cb4e30f7d1
--- /dev/null
+++ b/packages/ui/src/icons/index.ts
@@ -0,0 +1,27 @@
+export * from "./user-group-icon";
+export * from "./dice-icon";
+export * from "./layers-icon";
+export * from "./photo-filter-icon";
+export * from "./archive-icon";
+export * from "./admin-profile-icon";
+export * from "./create-icon";
+export * from "./subscribe-icon";
+export * from "./external-link-icon";
+export * from "./copy-icon";
+export * from "./layer-stack";
+export * from "./side-panel-icon";
+export * from "./center-panel-icon";
+export * from "./full-screen-panel-icon";
+export * from "./priority-icon";
+export * from "./state";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./related-icon";
+export * from "./module";
+export * from "./cycle";
+export * from "./github-icon";
+export * from "./discord-icon";
+export * from "./transfer-icon";
+export * from "./running-icon";
+export * from "./calendar-before-icon";
+export * from "./calendar-after-icon";
diff --git a/packages/ui/src/icons/layer-stack.tsx b/packages/ui/src/icons/layer-stack.tsx
new file mode 100644
index 00000000000..eaf8a1d3e95
--- /dev/null
+++ b/packages/ui/src/icons/layer-stack.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayerStackIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/layers-icon.tsx b/packages/ui/src/icons/layers-icon.tsx
new file mode 100644
index 00000000000..d0ec6ebc1c2
--- /dev/null
+++ b/packages/ui/src/icons/layers-icon.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayersIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_7258_81938)">
+      <path
+        d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7258_81938">
+        <rect
+          width="24"
+          height="24"
+          fill="white"
+          transform="translate(24) rotate(90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/backlog.tsx b/packages/ui/src/icons/module/backlog.tsx
new file mode 100644
index 00000000000..22d87cd28b7
--- /dev/null
+++ b/packages/ui/src/icons/module/backlog.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleBacklogIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/cancelled.tsx b/packages/ui/src/icons/module/cancelled.tsx
new file mode 100644
index 00000000000..97103bb66ec
--- /dev/null
+++ b/packages/ui/src/icons/module/cancelled.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill="#ef4444"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/completed.tsx b/packages/ui/src/icons/module/completed.tsx
new file mode 100644
index 00000000000..d70e459f379
--- /dev/null
+++ b/packages/ui/src/icons/module/completed.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill="#16a34a"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/in-progress.tsx b/packages/ui/src/icons/module/in-progress.tsx
new file mode 100644
index 00000000000..2fdcdbe6942
--- /dev/null
+++ b/packages/ui/src/icons/module/in-progress.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleInProgressIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/index.ts b/packages/ui/src/icons/module/index.ts
similarity index 100%
rename from apps/app/components/icons/module/index.ts
rename to packages/ui/src/icons/module/index.ts
diff --git a/packages/ui/src/icons/module/module-status-icon.tsx b/packages/ui/src/icons/module/module-status-icon.tsx
new file mode 100644
index 00000000000..5fcb65de461
--- /dev/null
+++ b/packages/ui/src/icons/module/module-status-icon.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { ModuleBacklogIcon } from "./backlog";
+import { ModuleCancelledIcon } from "./cancelled";
+import { ModuleCompletedIcon } from "./completed";
+import { ModuleInProgressIcon } from "./in-progress";
+import { ModulePausedIcon } from "./paused";
+import { ModulePlannedIcon } from "./planned";
+
+export type TModuleStatus =
+  | "backlog"
+  | "planned"
+  | "in-progress"
+  | "paused"
+  | "completed"
+  | "cancelled";
+
+type Props = {
+  status: TModuleStatus;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const ModuleStatusIcon: React.FC<Props> = ({
+  status,
+  className,
+  height = "12px",
+  width = "12px",
+}) => {
+  if (status === "backlog")
+    return (
+      <ModuleBacklogIcon className={className} height={height} width={width} />
+    );
+  else if (status === "cancelled")
+    return (
+      <ModuleCancelledIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "completed")
+    return (
+      <ModuleCompletedIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "in-progress")
+    return (
+      <ModuleInProgressIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "paused")
+    return (
+      <ModulePausedIcon className={className} height={height} width={width} />
+    );
+  else
+    return (
+      <ModulePlannedIcon className={className} height={height} width={width} />
+    );
+};
diff --git a/packages/ui/src/icons/module/paused.tsx b/packages/ui/src/icons/module/paused.tsx
new file mode 100644
index 00000000000..eedc8ca8a21
--- /dev/null
+++ b/packages/ui/src/icons/module/paused.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePausedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100275)">
+      <path
+        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+        fill="#525252"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100275">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/planned.tsx b/packages/ui/src/icons/module/planned.tsx
new file mode 100644
index 00000000000..2ac67774bef
--- /dev/null
+++ b/packages/ui/src/icons/module/planned.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePlannedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+      fill="#3f76ff"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/photo-filter-icon.tsx b/packages/ui/src/icons/photo-filter-icon.tsx
new file mode 100644
index 00000000000..473248b8655
--- /dev/null
+++ b/packages/ui/src/icons/photo-filter-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const PhotoFilterIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
new file mode 100644
index 00000000000..36c6fa18fe1
--- /dev/null
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+// icons
+import {
+  AlertCircle,
+  Ban,
+  SignalHigh,
+  SignalLow,
+  SignalMedium,
+} from "lucide-react";
+
+// types
+import { IPriorityIcon } from "./type";
+
+export const PriorityIcon: React.FC<IPriorityIcon> = ({
+  priority,
+  className = "",
+}) => {
+  if (!className || className === "") className = "h-3.5 w-3.5";
+
+  return (
+    <>
+      {priority === "urgent" ? (
+        <AlertCircle className={`${className}`} />
+      ) : priority === "high" ? (
+        <SignalHigh className={`${className}`} />
+      ) : priority === "medium" ? (
+        <SignalMedium className={`${className}`} />
+      ) : priority === "low" ? (
+        <SignalLow className={`${className}`} />
+      ) : (
+        <Ban className={`${className}`} />
+      )}
+    </>
+  );
+};
diff --git a/packages/ui/src/icons/related-icon.tsx b/packages/ui/src/icons/related-icon.tsx
new file mode 100644
index 00000000000..2507fe1e8ad
--- /dev/null
+++ b/packages/ui/src/icons/related-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RelatedIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.125 19.25L9 16.125L12.125 13"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/running-icon.tsx b/packages/ui/src/icons/running-icon.tsx
new file mode 100644
index 00000000000..9908fc17f28
--- /dev/null
+++ b/packages/ui/src/icons/running-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RunningIcon: 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}
+  >
+    <path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/side-panel-icon.tsx b/packages/ui/src/icons/side-panel-icon.tsx
new file mode 100644
index 00000000000..8185da76833
--- /dev/null
+++ b/packages/ui/src/icons/side-panel-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SidePanelIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+      fill="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/backlog-group-icon.tsx b/packages/ui/src/icons/state/backlog-group-icon.tsx
new file mode 100644
index 00000000000..fce4f00249f
--- /dev/null
+++ b/packages/ui/src/icons/state/backlog-group-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/cancelled-group-icon.tsx b/packages/ui/src/icons/state/cancelled-group-icon.tsx
new file mode 100644
index 00000000000..c18a2570a62
--- /dev/null
+++ b/packages/ui/src/icons/state/cancelled-group-icon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CancelledGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#ef4444",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/completed-group-icon.tsx b/packages/ui/src/icons/state/completed-group-icon.tsx
new file mode 100644
index 00000000000..b53292687fc
--- /dev/null
+++ b/packages/ui/src/icons/state/completed-group-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CompletedGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#16a34a",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/helper.tsx b/packages/ui/src/icons/state/helper.tsx
new file mode 100644
index 00000000000..46964406759
--- /dev/null
+++ b/packages/ui/src/icons/state/helper.tsx
@@ -0,0 +1,24 @@
+export interface IStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TStateGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
+
+export const STATE_GROUP_COLORS: {
+  [key in TStateGroups]: string;
+} = {
+  backlog: "#d9d9d9",
+  unstarted: "#3f76ff",
+  started: "#f59e0b",
+  completed: "#16a34a",
+  cancelled: "#dc2626",
+};
diff --git a/packages/ui/src/icons/state/index.ts b/packages/ui/src/icons/state/index.ts
new file mode 100644
index 00000000000..0e5fdadd67a
--- /dev/null
+++ b/packages/ui/src/icons/state/index.ts
@@ -0,0 +1,6 @@
+export * from "./backlog-group-icon";
+export * from "./cancelled-group-icon";
+export * from "./completed-group-icon";
+export * from "./started-group-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-group-icon";
diff --git a/packages/ui/src/icons/state/started-group-icon.tsx b/packages/ui/src/icons/state/started-group-icon.tsx
new file mode 100644
index 00000000000..77f1d1609ae
--- /dev/null
+++ b/packages/ui/src/icons/state/started-group-icon.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const StartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/state-group-icon.tsx b/packages/ui/src/icons/state/state-group-icon.tsx
new file mode 100644
index 00000000000..e771fff5e9a
--- /dev/null
+++ b/packages/ui/src/icons/state/state-group-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { BacklogGroupIcon } from "./backlog-group-icon";
+import { CancelledGroupIcon } from "./cancelled-group-icon";
+import { CompletedGroupIcon } from "./completed-group-icon";
+import { StartedGroupIcon } from "./started-group-icon";
+import { UnstartedGroupIcon } from "./unstarted-group-icon";
+import { IStateGroupIcon, STATE_GROUP_COLORS } from "./helper";
+
+const iconComponents = {
+  backlog: BacklogGroupIcon,
+  cancelled: CancelledGroupIcon,
+  completed: CompletedGroupIcon,
+  started: StartedGroupIcon,
+  unstarted: UnstartedGroupIcon,
+};
+
+export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
+  className = "",
+  color,
+  stateGroup,
+  height = "12px",
+  width = "12px",
+}) => {
+  const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
+
+  return (
+    <StateIconComponent
+      height={height}
+      width={width}
+      color={color ?? STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
diff --git a/packages/ui/src/icons/state/unstarted-group-icon.tsx b/packages/ui/src/icons/state/unstarted-group-icon.tsx
new file mode 100644
index 00000000000..5c62b1f129c
--- /dev/null
+++ b/packages/ui/src/icons/state/unstarted-group-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#3a3a3a",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/subscribe-icon.tsx b/packages/ui/src/icons/subscribe-icon.tsx
new file mode 100644
index 00000000000..a4ea8713a2e
--- /dev/null
+++ b/packages/ui/src/icons/subscribe-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SubscribeIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15 5.1C15 4.54305 15.2107 4.0089 15.5858 3.61508C15.9609 3.22125 16.4696 3 17 3C17.5304 3 18.0391 3.22125 18.4142 3.61508C18.7893 4.0089 19 4.54305 19 5.1C19 7.55 20 8.25 20 8.25H14C14 8.25 15 7.55 15 5.1Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.25 11C16.3238 11 16.4324 11 16.5643 11C16.6963 11 16.8467 11 17 11C17.1533 11 17.3037 11 17.4357 11C17.5676 11 17.6762 11 17.75 11"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/transfer-icon.tsx b/packages/ui/src/icons/transfer-icon.tsx
new file mode 100644
index 00000000000..93f5b000243
--- /dev/null
+++ b/packages/ui/src/icons/transfer-icon.tsx
@@ -0,0 +1,18 @@
+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}
+  >
+    <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/type.d.ts b/packages/ui/src/icons/type.d.ts
new file mode 100644
index 00000000000..0261ab163ce
--- /dev/null
+++ b/packages/ui/src/icons/type.d.ts
@@ -0,0 +1,10 @@
+export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
+  className?: string | undefined;
+}
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export interface IPriorityIcon {
+  priority: TIssuePriorities | null;
+  className?: string;
+}
diff --git a/packages/ui/src/icons/user-group-icon.tsx b/packages/ui/src/icons/user-group-icon.tsx
new file mode 100644
index 00000000000..bc0c5453783
--- /dev/null
+++ b/packages/ui/src/icons/user-group-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const UserGroupIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 00000000000..1d75c9271f3
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,10 @@
+export * from "./avatar";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./dropdowns";
+export * from "./form-fields";
+export * from "./icons";
+export * from "./progress";
+export * from "./spinners";
+export * from "./tooltip";
+export * from "./loader";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
new file mode 100644
index 00000000000..cd12bc22f57
--- /dev/null
+++ b/packages/ui/src/loader.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Loader = ({ children, className = "" }: Props) => (
+  <div className={`${className} animate-pulse`} role="status">
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+};
+
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div
+    className="rounded-md bg-custom-background-80"
+    style={{ height: height, width: width }}
+  />
+);
+
+Loader.Item = Item;
+
+Loader.displayName = "plane-ui-loader";
+
+export { Loader };
diff --git a/packages/ui/src/progress/circular-progress-indicator.tsx b/packages/ui/src/progress/circular-progress-indicator.tsx
new file mode 100644
index 00000000000..8ef74ea52ce
--- /dev/null
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@@ -0,0 +1,102 @@
+import React, { Children } from "react";
+
+interface ICircularProgressIndicator {
+  size: number;
+  percentage: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  children?: React.ReactNode;
+}
+
+export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
+  props
+) => {
+  const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
+
+  const sqSize = size;
+  const radius = (size - strokeWidth) / 2;
+  const viewBox = `0 0 ${sqSize} ${sqSize}`;
+  const dashArray = radius * Math.PI * 2;
+  const dashOffset = dashArray - (dashArray * percentage) / 100;
+  return (
+    <div className="relative">
+      <svg width={size} height={size} viewBox={viewBox} fill="none">
+        <circle
+          className="fill-none stroke-custom-background-80"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          style={{ filter: "url(#filter0_bi_377_19141)" }}
+        />
+        <defs>
+          <filter
+            id="filter0_bi_377_19141"
+            x="-3.57544"
+            y="-3.57422"
+            width="45.2227"
+            height="45.2227"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
+            <feComposite
+              in2="SourceAlpha"
+              operator="in"
+              result="effect1_backgroundBlur_377_19141"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_backgroundBlur_377_19141"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect2_innerShadow_377_19141"
+            />
+          </filter>
+        </defs>
+        <circle
+          className="stroke-custom-primary-100 fill-none "
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          style={{
+            strokeDasharray: dashArray,
+            strokeDashoffset: dashOffset,
+          }}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <div
+        className="absolute"
+        style={{
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/progress/index.ts b/packages/ui/src/progress/index.ts
new file mode 100644
index 00000000000..56d28cee73b
--- /dev/null
+++ b/packages/ui/src/progress/index.ts
@@ -0,0 +1,4 @@
+export * from "./radial-progress";
+export * from "./progress-bar";
+export * from "./linear-progress-indicator";
+export * from "./circular-progress-indicator";
diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
new file mode 100644
index 00000000000..9fc115f9f97
--- /dev/null
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Tooltip } from "../tooltip";
+
+type Props = {
+  data: any;
+  noTooltip?: boolean;
+};
+
+export const LinearProgressIndicator: React.FC<Props> = ({
+  data,
+  noTooltip = false,
+}) => {
+  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  let progress = 0;
+
+  const bars = data.map((item: any) => {
+    const width = `${(item.value / total) * 100}%`;
+    const style = {
+      width,
+      backgroundColor: item.color,
+    };
+    progress += item.value;
+    if (noTooltip) return <div style={style} />;
+    else
+      return (
+        <Tooltip
+          key={item.id}
+          tooltipContent={`${item.name} ${Math.round(item.value)}%`}
+        >
+          <div style={style} />
+        </Tooltip>
+      );
+  });
+
+  return (
+    <div className="flex h-1 w-full items-center justify-between gap-1">
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-1">{bars}</div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/progress/progress-bar.tsx b/packages/ui/src/progress/progress-bar.tsx
new file mode 100644
index 00000000000..d241e3d5e50
--- /dev/null
+++ b/packages/ui/src/progress/progress-bar.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+type Props = {
+  maxValue?: number;
+  value?: number;
+  radius?: number;
+  strokeWidth?: number;
+  activeStrokeColor?: string;
+  inactiveStrokeColor?: string;
+};
+
+export const ProgressBar: React.FC<Props> = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd",
+}) => {
+  // PIE Calc Fn
+  const generatePie = (value: any) => {
+    const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
+    const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius;
+    const long = value <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+
+    return d;
+  };
+
+  // ----  PIE Area Calc  --------
+  const calculatePieValue = (numberOfBars: any) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+
+  // ----  PIE Render Fn --------
+  const renderPie = (i: any) => {
+    const DIRECTION = -1;
+    // Rotation Calc
+    const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
+    const rotationAngle =
+      -1 * DIRECTION * primaryRotationAngle +
+      i * DIRECTION * primaryRotationAngle;
+    const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
+    const pieValue = calculatePieValue(maxValue);
+    const dValue = generatePie(pieValue);
+    const fillColor =
+      value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
+
+    return (
+      <path
+        style={{ opacity: i === 0 ? 0 : 1 }}
+        key={i}
+        d={dValue}
+        fill={fillColor}
+        transform={rotationTransformation}
+      />
+    );
+  };
+
+  // combining the Pies
+  const renderOuterCircle = () =>
+    [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+
+  return (
+    <svg width={radius * 2} height={radius * 2}>
+      {renderOuterCircle()}
+      <circle
+        r={radius - strokeWidth}
+        cx={radius}
+        cy={radius}
+        className="progress-bar"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/progress/radial-progress.tsx b/packages/ui/src/progress/radial-progress.tsx
new file mode 100644
index 00000000000..54afa7df3e9
--- /dev/null
+++ b/packages/ui/src/progress/radial-progress.tsx
@@ -0,0 +1,45 @@
+import React, { useState, useEffect, FC } from "react";
+
+interface IRadialProgressBar {
+  progress: number;
+}
+
+export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/apps/app/components/ui/spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
similarity index 100%
rename from apps/app/components/ui/spinner.tsx
rename to packages/ui/src/spinners/circular-spinner.tsx
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
new file mode 100644
index 00000000000..76856817261
--- /dev/null
+++ b/packages/ui/src/spinners/index.ts
@@ -0,0 +1 @@
+export * from "./circular-spinner";
diff --git a/packages/ui/src/tooltip/index.ts b/packages/ui/src/tooltip/index.ts
new file mode 100644
index 00000000000..3c61782aeb5
--- /dev/null
+++ b/packages/ui/src/tooltip/index.ts
@@ -0,0 +1 @@
+export * from "./tooltip";
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
new file mode 100644
index 00000000000..96bf45aa3d0
--- /dev/null
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+// next-themes
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+export type TPosition =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "auto"
+  | "auto-end"
+  | "auto-start"
+  | "bottom-left"
+  | "bottom-right"
+  | "left-bottom"
+  | "left-top"
+  | "right-bottom"
+  | "right-top"
+  | "top-left"
+  | "top-right";
+
+interface ITooltipProps {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?: TPosition;
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+}
+
+export const Tooltip: React.FC<ITooltipProps> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => (
+  <Tooltip2
+    disabled={disabled}
+    hoverOpenDelay={openDelay}
+    hoverCloseDelay={closeDelay}
+    content={
+      <div
+        className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md bg-custom-background-100 text-custom-text-200 break-words overflow-hidden ${className}`}
+      >
+        {tooltipHeading && (
+          <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>
+        )}
+        {tooltipContent}
+      </div>
+    }
+    position={position}
+    renderTarget={({
+      isOpen: isTooltipOpen,
+      ref: eleReference,
+      ...tooltipProps
+    }) =>
+      React.cloneElement(children, {
+        ref: eleReference,
+        ...tooltipProps,
+        ...children.props,
+      })
+    }
+  />
+);
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
new file mode 100644
index 00000000000..1e1e598260f
--- /dev/null
+++ b/packages/ui/tailwind.config.js
@@ -0,0 +1 @@
+module.exports = require("tailwind-config-custom/tailwind.config");
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 8c357fac6fe..08a82e90799 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,9 +1,8 @@
 {
-  "extends": "../tsconfig/nextjs.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"],
+  "extends": "tsconfig/react-library.json",
   "compilerOptions": {
-    "jsx": "react-jsx",
-    "lib": ["DOM"]
-  }
+    "jsx": "react"
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/replace-env-vars.sh b/replace-env-vars.sh
deleted file mode 100644
index afdc1492e41..00000000000
--- a/replace-env-vars.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/sh
-FROM=$1
-TO=$2
-DIRECTORY=$3
-
-if [ "${FROM}" = "${TO}" ]; then
-    echo "Nothing to replace, the value is already set to ${TO}."
-
-    exit 0
-fi
-
-# Only perform action if $FROM and $TO are different.
-echo "Replacing all statically built instances of $FROM with this string $TO ."
-
-grep -R -la "${FROM}" apps/$DIRECTORY/.next | xargs -I{} sed -i "s|$FROM|$TO|g" "{}"
diff --git a/setup.sh b/setup.sh
index 235e1a977f7..e028cc40797 100755
--- a/setup.sh
+++ b/setup.sh
@@ -5,25 +5,9 @@ cp ./.env.example ./.env
 export LC_ALL=C
 export LC_CTYPE=C
 
-
-# Generate the NEXT_PUBLIC_API_BASE_URL with given IP
-echo -e "\nNEXT_PUBLIC_API_BASE_URL=$1"  >> ./.env
+cp ./web/.env.example ./web/.env
+cp ./space/.env.example ./space/.env
+cp ./apiserver/.env.example ./apiserver/.env
 
 # Generate the SECRET_KEY that will be used by django
-echo -e "SECRET_KEY=\"$(tr -dc 'a-z0-9' < /dev/urandom | head -c50)\""  >> ./.env
-
-# WEB_URL for email redirection and image saving
-echo -e "WEB_URL=$1" >> ./.env
-
-# Generate Prompt for taking tiptap auth key
-echo -e "\n\e[1;38m Instructions for generating TipTap Pro Extensions Auth Token \e[0m \n"
-
-echo -e "\e[1;38m 1. Head over to TipTap cloud's Pro Extensions Page, https://collab.tiptap.dev/pro-extensions \e[0m"
-echo -e "\e[1;38m 2. Copy the token given to you under the first paragraph, after 'Here it is' \e[0m \n"
-
-read -p $'\e[1;32m Please Enter Your TipTap Pro Extensions Authentication Token: \e[0m \e[1;36m' authToken
-
-
-echo "@tiptap-pro:registry=https://registry.tiptap.dev/
-//registry.tiptap.dev/:_authToken=${authToken}" > .npmrc
-
+echo -e "SECRET_KEY=\"$(tr -dc 'a-z0-9' < /dev/urandom | head -c50)\""  >> ./apiserver/.env
\ No newline at end of file
diff --git a/space/.env.example b/space/.env.example
new file mode 100644
index 00000000000..7700ec94660
--- /dev/null
+++ b/space/.env.example
@@ -0,0 +1,2 @@
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=0
\ No newline at end of file
diff --git a/space/.eslintrc.js b/space/.eslintrc.js
new file mode 100644
index 00000000000..c8df607506c
--- /dev/null
+++ b/space/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};
diff --git a/apps/space/.gitignore b/space/.gitignore
similarity index 100%
rename from apps/space/.gitignore
rename to space/.gitignore
diff --git a/apps/space/.prettierignore b/space/.prettierignore
similarity index 100%
rename from apps/space/.prettierignore
rename to space/.prettierignore
diff --git a/apps/space/.prettierrc.json b/space/.prettierrc.json
similarity index 100%
rename from apps/space/.prettierrc.json
rename to space/.prettierrc.json
diff --git a/space/Dockerfile.dev b/space/Dockerfile.dev
new file mode 100644
index 00000000000..c037729050c
--- /dev/null
+++ b/space/Dockerfile.dev
@@ -0,0 +1,22 @@
+FROM node:18-alpine
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+
+COPY . .
+RUN yarn config set registry https://registry.npm.taobao.org/
+RUN yarn config set sentrycli_cdnurl https://npmmirror.com/mirrors/sentry-cli/
+#RUN yarn --update-checksums
+RUN yarn global add turbo
+# RUN yarn add sentry-cli  --registry=https://cdn.npm.taobao.org/dist/sentry-cli
+#RUN npm set ENTRYCLI_CDNURL=https://cdn.npm.taobao.org/dist/sentry-cli
+#RUN npm set sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli
+
+#RUN yarn install --network-timeout 500000 --silent 2>&1 >/dev/null | grep "error"
+
+RUN yarn install --network-timeout 500000 --severity error
+
+EXPOSE 3000
+CMD ["yarn","dev", "--filter=space"]
diff --git a/space/Dockerfile.space b/space/Dockerfile.space
new file mode 100644
index 00000000000..12c3091349e
--- /dev/null
+++ b/space/Dockerfile.space
@@ -0,0 +1,61 @@
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+RUN yarn global add turbo
+COPY . .
+
+RUN turbo prune --scope=space --docker
+
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 500000
+
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+USER root
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL 
+ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+
+RUN yarn turbo run build --filter=space
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 plane
+RUN adduser --system --uid 1001 captain
+USER captain
+
+COPY --from=installer /app/space/next.config.js .
+COPY --from=installer /app/space/package.json .
+
+COPY --from=installer --chown=captain:plane /app/space/.next/standalone ./
+
+COPY --from=installer --chown=captain:plane /app/space/.next ./space/.next
+COPY --from=installer --chown=captain:plane /app/space/public ./space/public
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL 
+ENV NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+
+USER root
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/start.sh
+
+USER captain
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+EXPOSE 3000
diff --git a/apps/space/README.md b/space/README.md
similarity index 100%
rename from apps/space/README.md
rename to space/README.md
diff --git a/space/additional.d.ts b/space/additional.d.ts
new file mode 100644
index 00000000000..f400344c6c5
--- /dev/null
+++ b/space/additional.d.ts
@@ -0,0 +1,2 @@
+// additional.d.ts
+/// <reference types="next-images" />
diff --git a/space/components/accounts/email-code-form.tsx b/space/components/accounts/email-code-form.tsx
new file mode 100644
index 00000000000..b760ccfbb2a
--- /dev/null
+++ b/space/components/accounts/email-code-form.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState, useCallback } from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+export const EmailCodeForm = ({ handleSignIn }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = useCallback(
+    async ({ email }: EmailCodeFormValues) => {
+      setErrorResendingCode(false);
+      await authenticationService
+        .emailCode({ email })
+        .then((res) => {
+          setValue("key", res.key);
+          setCodeSent(true);
+        })
+        .catch((err) => {
+          setErrorResendingCode(true);
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: err?.error,
+          });
+        });
+    },
+    [setToastAlert, setValue]
+  );
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    setIsLoading(true);
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        setIsLoading(false);
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if (!codeSent && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit(onSubmit)().then(() => {
+          setResendCodeTimer(30);
+        });
+      }
+    };
+
+    if (!codeSent) {
+      window.addEventListener("keydown", submitForm);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [handleSubmit, codeSent, onSubmit, setResendCodeTimer]);
+
+  return (
+    <>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+            {...register("email", {
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\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(
+                  value
+                ) || "Email address is not valid",
+            })}
+          />
+          {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+        </div>
+
+        {codeSent && (
+          <>
+            <Input
+              id="token"
+              type="token"
+              {...register("token", {
+                required: "Code is required",
+              })}
+              placeholder="Enter code..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
+            <button
+              type="button"
+              className={`flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
+              ) : isCodeResending ? (
+                "Sending new code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                <span className="font-medium">Resend code</span>
+              )}
+            </button>
+          </>
+        )}
+        {codeSent ? (
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </PrimaryButton>
+        )}
+      </form>
+    </>
+  );
+};
diff --git a/space/components/accounts/email-password-form.tsx b/space/components/accounts/email-password-form.tsx
new file mode 100644
index 00000000000..b00740a15c0
--- /dev/null
+++ b/space/components/accounts/email-password-form.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// components
+import { EmailResetPasswordForm } from "./email-reset-password-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword ? "Reset your password" : isSignUpPage ? "Sign up on Plane" : "Sign in to Plane"}
+      </h1>
+      {isResettingPassword ? (
+        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+      ) : (
+        <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-1">
+            <Input
+              id="email"
+              type="email"
+              {...register("email", {
+                required: "Email address is required",
+                validate: (value) =>
+                  /^(([^<>()[\]\\.,;:\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(
+                    value
+                  ) || "Email address is not valid",
+              })}
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+          </div>
+          <div className="space-y-1">
+            <Input
+              id="password"
+              type="password"
+              {...register("password", {
+                required: "Password is required",
+              })}
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
+          </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
+          </div>
+          <div>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
+            >
+              {isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
+            </PrimaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
+                  Don{"'"}t have an account? Sign up.
+                </a>
+              </Link>
+            )}
+          </div>
+        </form>
+      )}
+    </>
+  );
+};
diff --git a/space/components/accounts/email-reset-password-form.tsx b/space/components/accounts/email-reset-password-form.tsx
new file mode 100644
index 00000000000..ee71890ecd3
--- /dev/null
+++ b/space/components/accounts/email-reset-password-form.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// services
+import userService from "services/user.service";
+// hooks
+// import useToast from "hooks/use-toast";
+// ui
+import { Input } from "components/ui";
+import { Button } from "@plane/ui";
+// types
+type Props = {
+  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
+  // const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const forgotPassword = async (formData: any) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    // await userService
+    //   .forgotPassword(payload)
+    //   .then(() =>
+    //     setToastAlert({
+    //       type: "success",
+    //       title: "Success!",
+    //       message: "Password reset link has been sent to your email address.",
+    //     })
+    //   )
+    //   .catch((err) => {
+    //     if (err.status === 400)
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Please check the Email ID entered.",
+    //       });
+    //     else
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Something went wrong. Please try again.",
+    //       });
+    //   });
+  };
+
+  return (
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(forgotPassword)}>
+      <div className="space-y-1">
+        <Input
+          id="email"
+          type="email"
+          {...register("email", {
+            required: "Email address is required",
+            validate: (value) =>
+              /^(([^<>()[\]\\.,;:\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(
+                value
+              ) || "Email address is not valid",
+          })}
+          placeholder="Enter registered email address.."
+          className="border-custom-border-300 h-[46px]"
+        />
+        {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
+          Go Back
+        </Button>
+        <Button variant="primary" className="w-full" type="submit" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/space/components/accounts/github-login-button.tsx b/space/components/accounts/github-login-button.tsx
new file mode 100644
index 00000000000..b1bd586fe76
--- /dev/null
+++ b/space/components/accounts/github-login-button.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState, FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// next-themes
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "public/logos/github-black.svg";
+import githubWhiteImage from "public/logos/github-white.svg";
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+  clientId: string;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // states
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const router = useRouter();
+
+  const { code } = router.query;
+
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
+      handleSignIn(code.toString());
+    }
+  }, [code, gitCode, handleSignIn]);
+
+  useEffect(() => {
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/` as any);
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center items-center">
+      <Link
+        className="w-full"
+        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+          <Image
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>Sign in with GitHub</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
diff --git a/space/components/accounts/google-login.tsx b/space/components/accounts/google-login.tsx
new file mode 100644
index 00000000000..4732ec8fdc7
--- /dev/null
+++ b/space/components/accounts/google-login.tsx
@@ -0,0 +1,60 @@
+import { FC, useEffect, useRef, useCallback, useState } from "react";
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  clientId: string;
+  handleSignIn: React.Dispatch<any>;
+}
+
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // refs
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  // states
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+
+    (window as any)?.google?.accounts.id.initialize({
+      client_id: clientId,
+      callback: handleSignIn,
+    });
+
+    try {
+      (window as any)?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as any // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    (window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if ((window as any)?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      (window as any)?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};
diff --git a/space/components/accounts/index.ts b/space/components/accounts/index.ts
new file mode 100644
index 00000000000..03a173766da
--- /dev/null
+++ b/space/components/accounts/index.ts
@@ -0,0 +1,8 @@
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./email-reset-password-form";
+export * from "./github-login-button";
+export * from "./google-login";
+export * from "./onboarding-form";
+export * from "./sign-in";
+export * from "./user-logged-in";
diff --git a/space/components/accounts/onboarding-form.tsx b/space/components/accounts/onboarding-form.tsx
new file mode 100644
index 00000000000..c3cb972b2cf
--- /dev/null
+++ b/space/components/accounts/onboarding-form.tsx
@@ -0,0 +1,181 @@
+import { useEffect, Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Listbox, Transition } from "@headlessui/react";
+import { Check, ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { USER_ROLES } from "constants/workspace";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import UserService from "services/user.service";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+const defaultValues = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: any;
+};
+
+export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { next_path } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: any) => {
+    const payload = {
+      ...formData,
+      onboarding_step: {
+        ...user.onboarding_step,
+        profile_complete: true,
+      },
+    };
+
+    const userService = new UserService();
+
+    await userService.updateMe(payload).then((response) => {
+      userStore.setCurrentUser(response);
+      router.push(next_path?.toString() || "/");
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Details updated successfully.",
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+      });
+    }
+  }, [user, reset]);
+
+  return (
+    <form
+      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="relative sm:text-lg">
+        <div className="text-gray-800 absolute -top-1 -left-3">{'"'}</div>
+        <h5>Hey there 👋🏻</h5>
+        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
+        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
+      </div>
+
+      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="firstName">First Name</label>
+          <Input
+            id="firstName"
+            autoComplete="off"
+            placeholder="Enter your first name..."
+            {...register("first_name", {
+              required: "First name is required",
+            })}
+          />
+          {errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="lastName">Last Name</label>
+          <Input
+            id="lastName"
+            autoComplete="off"
+            placeholder="Enter your last name..."
+            {...register("last_name", {
+              required: "Last name is required",
+            })}
+          />
+          {errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What{"'"}s your role?</span>
+          <div className="w-full">
+            <Controller
+              name="role"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
+                  <Listbox.Button
+                    type="button"
+                    className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
+                  >
+                    <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
+                  </Listbox.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"
+                  >
+                    <Listbox.Options
+                      className={`absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none w-full max-h-36 left-0 origin-top-left`}
+                    >
+                      <div className="space-y-1 p-2">
+                        {USER_ROLES.map((role) => (
+                          <Listbox.Option
+                            key={role.value}
+                            value={role.value}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <span>{role.label}</span>
+                                </div>
+                                {selected && <Check className="h-3 w-3 flex-shrink-0" strokeWidth={2} />}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </Listbox>
+              )}
+            />
+            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+          </div>
+        </div>
+      </div>
+
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        {isSubmitting ? "Updating..." : "Continue"}
+      </PrimaryButton>
+    </form>
+  );
+});
diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx
new file mode 100644
index 00000000000..0c6810198af
--- /dev/null
+++ b/space/components/accounts/sign-in.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import authenticationService from "services/authentication.service";
+import { AppConfigService } from "services/app-config.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmailPasswordForm, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+// images
+const imagePrefix = Boolean(parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) ? "/spaces" : "";
+
+const appConfig = new AppConfigService();
+
+export const SignInView = observer(() => {
+  const { user: userStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
+  // toast
+  const { setToastAlert } = useToast();
+  // fetch app config
+  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
+
+  const onSignInError = (error: any) => {
+    setToastAlert({
+      title: "Error signing in!",
+      type: "error",
+      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
+    });
+  };
+
+  const onSignInSuccess = (response: any) => {
+    userStore.setCurrentUser(response?.user);
+
+    const isOnboard = response?.user?.onboarding_step?.profile_complete || false;
+
+    if (isOnboard) {
+      if (next_path) router.push(next_path);
+      else router.push("/login");
+    } else {
+      if (next_path) router.push(`/onboarding?next_path=${next_path}`);
+      else router.push("/onboarding");
+    }
+  };
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handlePasswordSignIn = async (formData: any) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) {
+            onSignInSuccess(response);
+          }
+        } catch (err: any) {
+          onSignInError(err);
+        }
+      })
+      .catch((err) => onSignInError(err));
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) {
+        onSignInSuccess(response);
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+        <div>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Sign in to Plane</h1>
+          {data?.email_password_login && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+
+          {data?.magic_login && (
+            <div className="flex flex-col divide-y divide-custom-border-200">
+              <div className="pb-7">
+                <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+            {data?.google && <GoogleLoginButton clientId={data.google} handleSignIn={handleGoogleSignIn} />}
+          </div>
+
+          <p className="pt-16 text-custom-text-200 text-sm text-center">
+            By signing up, you agree to the{" "}
+            <a
+              href="https://plane.so/terms-and-conditions"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium underline"
+            >
+              Terms & Conditions
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/accounts/user-logged-in.tsx b/space/components/accounts/user-logged-in.tsx
new file mode 100644
index 00000000000..3f177bcc8db
--- /dev/null
+++ b/space/components/accounts/user-logged-in.tsx
@@ -0,0 +1,51 @@
+import Image from "next/image";
+
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+// assets
+import UserLoggedInImage from "public/user-logged-in.svg";
+import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+
+export const UserLoggedIn = () => {
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  if (!user) return null;
+
+  return (
+    <div className="h-screen w-screen flex flex-col">
+      <div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
+        <div>
+          <Image src={PlaneLogo} alt="User already logged in" />
+        </div>
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "U")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      </div>
+
+      <div className="h-full w-full grid place-items-center p-6">
+        <div className="text-center">
+          <div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
+            <div className="h-32 w-32">
+              <Image src={UserLoggedInImage} alt="User already logged in" />
+            </div>
+          </div>
+          <h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
+          <p className="mt-4">
+            You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/space/components/issues/board-views/block-downvotes.tsx b/space/components/issues/board-views/block-downvotes.tsx
new file mode 100644
index 00000000000..72e21f6414a
--- /dev/null
+++ b/space/components/issues/board-views/block-downvotes.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+export const IssueBlockDownVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 rotate-180 text-custom-text-300">
+      arrow_upward_alt
+    </span>
+    {number}
+  </div>
+);
diff --git a/space/components/issues/board-views/block-due-date.tsx b/space/components/issues/board-views/block-due-date.tsx
new file mode 100644
index 00000000000..f88c82d0f7a
--- /dev/null
+++ b/space/components/issues/board-views/block-due-date.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+// helpers
+import { renderFullDate } from "helpers/date-time.helper";
+
+export const dueDateIconDetails = (
+  date: string,
+  stateGroup: string
+): {
+  iconName: string;
+  className: string;
+} => {
+  let iconName = "calendar_today";
+  let className = "";
+
+  if (!date || ["completed", "cancelled"].includes(stateGroup)) {
+    iconName = "calendar_today";
+    className = "";
+  } else {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const targetDate = new Date(date);
+    targetDate.setHours(0, 0, 0, 0);
+
+    const timeDifference = targetDate.getTime() - today.getTime();
+
+    if (timeDifference < 0) {
+      iconName = "event_busy";
+      className = "text-red-500";
+    } else if (timeDifference === 0) {
+      iconName = "today";
+      className = "text-red-500";
+    } else if (timeDifference === 24 * 60 * 60 * 1000) {
+      iconName = "event";
+      className = "text-yellow-500";
+    } else {
+      iconName = "calendar_today";
+      className = "";
+    }
+  }
+
+  return {
+    iconName,
+    className,
+  };
+};
+
+export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group: string }) => {
+  const iconDetails = dueDateIconDetails(due_date, group);
+
+  return (
+    <div className="rounded flex px-2.5 py-1 items-center border-[0.5px] border-custom-border-300 gap-1 text-custom-text-100 text-xs">
+      <span className={`material-symbols-rounded text-sm -my-0.5 ${iconDetails.className}`}>
+        {iconDetails.iconName}
+      </span>
+      {renderFullDate(due_date)}
+    </div>
+  );
+};
diff --git a/space/components/issues/board-views/block-labels.tsx b/space/components/issues/board-views/block-labels.tsx
new file mode 100644
index 00000000000..31e218a7f2f
--- /dev/null
+++ b/space/components/issues/board-views/block-labels.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+export const IssueBlockLabels = ({ labels }: any) => (
+  <div className="relative flex items-center flex-wrap gap-1">
+    {labels &&
+      labels.length > 0 &&
+      labels.map((_label: any) => (
+        <div
+          key={_label?.id}
+          className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+        >
+          <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
+            <div className="text-xs">{_label?.name}</div>
+          </div>
+        </div>
+      ))}
+  </div>
+);
diff --git a/space/components/issues/board-views/block-priority.tsx b/space/components/issues/board-views/block-priority.tsx
new file mode 100644
index 00000000000..5c9ad3c08b3
--- /dev/null
+++ b/space/components/issues/board-views/block-priority.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+// types
+import { TIssuePriorityKey } from "types/issue";
+// constants
+import { issuePriorityFilter } from "constants/data";
+
+export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey | null }) => {
+  const priority_detail = priority != null ? issuePriorityFilter(priority) : null;
+
+  if (priority_detail === null) return <></>;
+
+  return (
+    <div className={`h-6 w-6 rounded grid place-items-center border-[0.5px] ${priority_detail?.className}`}>
+      <span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
+    </div>
+  );
+};
diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx
new file mode 100644
index 00000000000..2daba1226bc
--- /dev/null
+++ b/space/components/issues/board-views/block-state.tsx
@@ -0,0 +1,18 @@
+// ui
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { issueGroupFilter } from "constants/data";
+
+export const IssueBlockState = ({ state }: any) => {
+  const stateGroup = issueGroupFilter(state.group);
+
+  if (stateGroup === null) return <></>;
+  return (
+    <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
+      <div className="flex items-center w-full gap-1.5 text-custom-text-200">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        <div className="text-xs">{state?.name}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/space/components/issues/board-views/block-upvotes.tsx b/space/components/issues/board-views/block-upvotes.tsx
new file mode 100644
index 00000000000..517afeaf0dd
--- /dev/null
+++ b/space/components/issues/board-views/block-upvotes.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+export const IssueBlockUpVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 text-custom-text-300">arrow_upward_alt</span>
+    {number}
+  </div>
+);
diff --git a/apps/space/components/issues/board-views/calendar/index.tsx b/space/components/issues/board-views/calendar/index.tsx
similarity index 100%
rename from apps/space/components/issues/board-views/calendar/index.tsx
rename to space/components/issues/board-views/calendar/index.tsx
diff --git a/apps/space/components/issues/board-views/gantt/index.tsx b/space/components/issues/board-views/gantt/index.tsx
similarity index 100%
rename from apps/space/components/issues/board-views/gantt/index.tsx
rename to space/components/issues/board-views/gantt/index.tsx
diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx
new file mode 100644
index 00000000000..b2effc4adad
--- /dev/null
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+// mobx react lite
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// components
+import { IssueBlockPriority } from "components/issues/board-views/block-priority";
+import { IssueBlockState } from "components/issues/board-views/block-state";
+import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
+// interfaces
+import { IIssue } from "types/issue";
+import { RootStore } from "store/root";
+import { useRouter } from "next/router";
+
+export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.push(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  return (
+    <div className="py-2 px-3 flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border-[0.5px] border-custom-border-200 space-y-2 text-sm">
+      {/* id */}
+      <div className="text-xs text-custom-text-300 break-words">
+        {projectStore?.project?.identifier}-{issue?.sequence_id}
+      </div>
+
+      {/* name */}
+      <h6 onClick={handleBlockClick} className="text-sm font-medium break-words line-clamp-2 cursor-pointer">
+        {issue.name}
+      </h6>
+
+      <div className="relative flex-grow flex items-end gap-2 w-full overflow-x-scroll hide-horizontal-scrollbar">
+        {/* priority */}
+        {issue?.priority && (
+          <div className="flex-shrink-0">
+            <IssueBlockPriority priority={issue?.priority} />
+          </div>
+        )}
+        {/* state */}
+        {issue?.state_detail && (
+          <div className="flex-shrink-0">
+            <IssueBlockState state={issue?.state_detail} />
+          </div>
+        )}
+        {/* due date */}
+        {issue?.target_date && (
+          <div className="flex-shrink-0">
+            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx
new file mode 100644
index 00000000000..8f2f2849635
--- /dev/null
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -0,0 +1,31 @@
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// interfaces
+import { IIssueState } from "types/issue";
+// constants
+import { issueGroupFilter } from "constants/data";
+// ui
+import { StateGroupIcon } from "@plane/ui";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
+  const store: RootStore = useMobxStore();
+
+  const stateGroup = issueGroupFilter(state.group);
+
+  if (stateGroup === null) return <></>;
+
+  return (
+    <div className="pb-2 px-2 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center flex-shrink-0">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
+      </div>
+      <div className="font-semibold text-custom-text-200 capitalize mr-1 truncate">{state?.name}</div>
+      <span className="text-custom-text-300 rounded-full flex-shrink-0">
+        {store.issue.getCountOfIssuesByState(state.id)}
+      </span>
+    </div>
+  );
+});
diff --git a/space/components/issues/board-views/kanban/index.tsx b/space/components/issues/board-views/kanban/index.tsx
new file mode 100644
index 00000000000..b45b037d2db
--- /dev/null
+++ b/space/components/issues/board-views/kanban/index.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// components
+import { IssueListHeader } from "components/issues/board-views/kanban/header";
+import { IssueListBlock } from "components/issues/board-views/kanban/block";
+// ui
+import { Icon } from "components/ui";
+// interfaces
+import { IIssueState, IIssue } from "types/issue";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export const IssueKanbanView = observer(() => {
+  const store: RootStore = useMobxStore();
+
+  return (
+    <div className="relative w-full h-full overflow-hidden overflow-x-auto flex gap-3">
+      {store?.issue?.states &&
+        store?.issue?.states.length > 0 &&
+        store?.issue?.states.map((_state: IIssueState) => (
+          <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
+            <div className="flex-shrink-0">
+              <IssueListHeader state={_state} />
+            </div>
+            <div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
+              {store.issue.getFilteredIssuesByState(_state.id) &&
+              store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
+                <div className="space-y-3 pb-2 px-2">
+                  {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                    <IssueListBlock key={_issue.id} issue={_issue} />
+                  ))}
+                </div>
+              ) : (
+                <div className="flex justify-center items-center gap-2 pt-10 text-center text-sm text-custom-text-200 font-medium">
+                  <Icon iconName="stack" />
+                  No issues in this state
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+});
diff --git a/space/components/issues/board-views/list/block.tsx b/space/components/issues/board-views/list/block.tsx
new file mode 100644
index 00000000000..57011d033fb
--- /dev/null
+++ b/space/components/issues/board-views/list/block.tsx
@@ -0,0 +1,84 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueBlockPriority } from "components/issues/board-views/block-priority";
+import { IssueBlockState } from "components/issues/board-views/block-state";
+import { IssueBlockLabels } from "components/issues/board-views/block-labels";
+import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// interfaces
+import { IIssue } from "types/issue";
+// store
+import { RootStore } from "store/root";
+
+export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
+  const { issue } = props;
+  // store
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.push(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
+  };
+
+  return (
+    <div className="flex items-center p-3 relative gap-10 bg-custom-background-100">
+      <div className="relative flex items-center gap-3 w-full flex-grow overflow-hidden">
+        {/* id */}
+        <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
+          {projectStore?.project?.identifier}-{issue?.sequence_id}
+        </div>
+        {/* name */}
+        <div onClick={handleBlockClick} className="font-medium text-sm truncate flex-grow cursor-pointer">
+          {issue.name}
+        </div>
+      </div>
+
+      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs">
+        {/* priority */}
+        {issue?.priority && (
+          <div className="flex-shrink-0">
+            <IssueBlockPriority priority={issue?.priority} />
+          </div>
+        )}
+
+        {/* state */}
+        {issue?.state_detail && (
+          <div className="flex-shrink-0">
+            <IssueBlockState state={issue?.state_detail} />
+          </div>
+        )}
+
+        {/* labels */}
+        {issue?.label_details && issue?.label_details.length > 0 && (
+          <div className="flex-shrink-0">
+            <IssueBlockLabels labels={issue?.label_details} />
+          </div>
+        )}
+
+        {/* due date */}
+        {issue?.target_date && (
+          <div className="flex-shrink-0">
+            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/board-views/list/header.tsx b/space/components/issues/board-views/list/header.tsx
new file mode 100644
index 00000000000..fc7e5ef61fe
--- /dev/null
+++ b/space/components/issues/board-views/list/header.tsx
@@ -0,0 +1,29 @@
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// interfaces
+import { IIssueState } from "types/issue";
+// ui
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { issueGroupFilter } from "constants/data";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
+  const store: RootStore = useMobxStore();
+
+  const stateGroup = issueGroupFilter(state.group);
+
+  if (stateGroup === null) return <></>;
+
+  return (
+    <div className="p-3 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
+      </div>
+      <div className="font-medium capitalize mr-1">{state?.name}</div>
+      <div className="text-custom-text-200 text-sm font-medium">{store.issue.getCountOfIssuesByState(state.id)}</div>
+    </div>
+  );
+});
diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx
new file mode 100644
index 00000000000..d6b11d026d1
--- /dev/null
+++ b/space/components/issues/board-views/list/index.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react-lite";
+// components
+import { IssueListHeader } from "components/issues/board-views/list/header";
+import { IssueListBlock } from "components/issues/board-views/list/block";
+// interfaces
+import { IIssueState, IIssue } from "types/issue";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// store
+import { RootStore } from "store/root";
+
+export const IssueListView = observer(() => {
+  const { issue: issueStore }: RootStore = useMobxStore();
+
+  return (
+    <>
+      {issueStore?.states &&
+        issueStore?.states.length > 0 &&
+        issueStore?.states.map((_state: IIssueState) => (
+          <div key={_state.id} className="relative w-full">
+            <IssueListHeader state={_state} />
+            {issueStore.getFilteredIssuesByState(_state.id) &&
+            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
+              <div className="divide-y divide-custom-border-200">
+                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                  <IssueListBlock key={_issue.id} issue={_issue} />
+                ))}
+              </div>
+            ) : (
+              <div className="p-3 text-sm text-custom-text-400 bg-custom-background-100">No issues.</div>
+            )}
+          </div>
+        ))}
+    </>
+  );
+});
diff --git a/apps/space/components/issues/board-views/spreadsheet/index.tsx b/space/components/issues/board-views/spreadsheet/index.tsx
similarity index 100%
rename from apps/space/components/issues/board-views/spreadsheet/index.tsx
rename to space/components/issues/board-views/spreadsheet/index.tsx
diff --git a/space/components/issues/filters-render/index.tsx b/space/components/issues/filters-render/index.tsx
new file mode 100644
index 00000000000..d797d1506fd
--- /dev/null
+++ b/space/components/issues/filters-render/index.tsx
@@ -0,0 +1,53 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// components
+import IssueStateFilter from "./state";
+import IssueLabelFilter from "./label";
+import IssuePriorityFilter from "./priority";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const IssueFilter = observer(() => {
+  const store: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearAllFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "all",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  // if (store.issue.getIfFiltersIsEmpty()) return null;
+
+  return (
+    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
+      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
+        {/* state */}
+        {/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
+        {/* labels */}
+        {/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
+        {/* priority */}
+        {/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
+        {/* clear all filters */}
+        <div
+          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
+          onClick={clearAllFilters}
+        >
+          <div>Clear all filters</div>
+          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
+            <span className="material-symbols-rounded text-[12px]">close</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default IssueFilter;
diff --git a/space/components/issues/filters-render/label/filter-label-block.tsx b/space/components/issues/filters-render/label/filter-label-block.tsx
new file mode 100644
index 00000000000..a54fb65e434
--- /dev/null
+++ b/space/components/issues/filters-render/label/filter-label-block.tsx
@@ -0,0 +1,43 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// interfaces
+import { IIssueLabel } from "types/issue";
+
+export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
+  const store = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removeLabelFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     value: label?.id,
+    //   })
+    // );
+  };
+
+  return (
+    <div
+      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
+      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
+    >
+      <div
+        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
+        style={{ backgroundColor: `${label?.color}` }}
+      />
+
+      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
+        onClick={removeLabelFromFilter}
+      >
+        <span className="material-symbols-rounded text-xs">close</span>
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/filters-render/label/index.tsx b/space/components/issues/filters-render/label/index.tsx
new file mode 100644
index 00000000000..1d9a4f990e5
--- /dev/null
+++ b/space/components/issues/filters-render/label/index.tsx
@@ -0,0 +1,51 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// components
+import { RenderIssueLabel } from "./filter-label-block";
+// interfaces
+import { IIssueLabel } from "types/issue";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const IssueLabelFilter = observer(() => {
+  const store: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearLabelFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
+        <div className="relative flex flex-wrap items-center gap-1">
+          {/* {store?.issue?.labels &&
+            store?.issue?.labels.map(
+              (_label: IIssueLabel, _index: number) =>
+                store.issue.getUserSelectedFilter("label", _label.id) && (
+                  <RenderIssueLabel key={_label.id} label={_label} />
+                )
+            )} */}
+        </div>
+        <div
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
+          onClick={clearLabelFilters}
+        >
+          <span className="material-symbols-rounded text-[12px]">close</span>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default IssueLabelFilter;
diff --git a/space/components/issues/filters-render/priority/filter-priority-block.tsx b/space/components/issues/filters-render/priority/filter-priority-block.tsx
new file mode 100644
index 00000000000..5fd1ef1a727
--- /dev/null
+++ b/space/components/issues/filters-render/priority/filter-priority-block.tsx
@@ -0,0 +1,42 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// interfaces
+import { IIssuePriorityFilters } from "types/issue";
+
+export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
+  const store = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removePriorityFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     value: priority?.key,
+    //   })
+    // );
+  };
+
+  return (
+    <div
+      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
+        priority.className || ``
+      }`}
+    >
+      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
+        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
+      </div>
+      <div className="whitespace-nowrap">{priority?.title}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
+        onClick={removePriorityFromFilter}
+      >
+        <span className="material-symbols-rounded text-xs">close</span>
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/filters-render/priority/index.tsx b/space/components/issues/filters-render/priority/index.tsx
new file mode 100644
index 00000000000..100ba1761d2
--- /dev/null
+++ b/space/components/issues/filters-render/priority/index.tsx
@@ -0,0 +1,53 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { RenderIssuePriority } from "./filter-priority-block";
+// interfaces
+import { IIssuePriorityFilters } from "types/issue";
+// constants
+import { issuePriorityFilters } from "constants/data";
+
+const IssuePriorityFilter = observer(() => {
+  const store = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearPriorityFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
+        <div className="relative flex flex-wrap items-center gap-1">
+          {/* {issuePriorityFilters.map(
+            (_priority: IIssuePriorityFilters, _index: number) =>
+              store.issue.getUserSelectedFilter("priority", _priority.key) && (
+                <RenderIssuePriority key={_priority.key} priority={_priority} />
+              )
+          )} */}
+        </div>
+        <div
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
+          onClick={() => {
+            clearPriorityFilters();
+          }}
+        >
+          <span className="material-symbols-rounded text-[12px]">close</span>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default IssuePriorityFilter;
diff --git a/space/components/issues/filters-render/state/filter-state-block.tsx b/space/components/issues/filters-render/state/filter-state-block.tsx
new file mode 100644
index 00000000000..8445386a48a
--- /dev/null
+++ b/space/components/issues/filters-render/state/filter-state-block.tsx
@@ -0,0 +1,43 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+// interfaces
+import { IIssueState } from "types/issue";
+// constants
+import { issueGroupFilter } from "constants/data";
+
+export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
+  const store = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const stateGroup = issueGroupFilter(state.group);
+
+  const removeStateFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     value: state?.id,
+    //   })
+    // );
+  };
+
+  if (stateGroup === null) return <></>;
+  return (
+    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
+      <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
+        <stateGroup.icon />
+      </div>
+      <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
+        onClick={removeStateFromFilter}
+      >
+        <span className="material-symbols-rounded text-xs">close</span>
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/filters-render/state/index.tsx b/space/components/issues/filters-render/state/index.tsx
new file mode 100644
index 00000000000..0198c5215c9
--- /dev/null
+++ b/space/components/issues/filters-render/state/index.tsx
@@ -0,0 +1,51 @@
+import { useRouter } from "next/router";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// components
+import { RenderIssueState } from "./filter-state-block";
+// interfaces
+import { IIssueState } from "types/issue";
+// mobx hook
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const IssueStateFilter = observer(() => {
+  const store: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearStateFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">State</div>
+        <div className="relative flex flex-wrap items-center gap-1">
+          {/* {store?.issue?.states &&
+            store?.issue?.states.map(
+              (_state: IIssueState, _index: number) =>
+                store.issue.getUserSelectedFilter("state", _state.id) && (
+                  <RenderIssueState key={_state.id} state={_state} />
+                )
+            )} */}
+        </div>
+        <div
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
+          onClick={clearStateFilters}
+        >
+          <span className="material-symbols-rounded text-[12px]">close</span>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default IssueStateFilter;
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
new file mode 100644
index 00000000000..03f082f33a3
--- /dev/null
+++ b/space/components/issues/navbar/index.tsx
@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { NavbarSearch } from "./search";
+import { NavbarIssueBoardView } from "./issue-board-view";
+import { NavbarTheme } from "./theme";
+// ui
+import { PrimaryButton } from "components/ui";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// store
+import { RootStore } from "store/root";
+
+const renderEmoji = (emoji: string | { name: string; color: string }) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+const IssueNavbar = observer(() => {
+  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const user = userStore?.currentUser;
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+    }
+  }, [projectStore, workspace_slug, project_slug]);
+
+  useEffect(() => {
+    if (workspace_slug && project_slug && projectStore?.deploySettings) {
+      const viewsAcceptable: string[] = [];
+      let currentBoard: string | null = null;
+
+      if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
+      if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
+      if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
+      if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
+      if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
+
+      if (board) {
+        if (viewsAcceptable.includes(board.toString())) {
+          currentBoard = board.toString();
+        } else {
+          if (viewsAcceptable && viewsAcceptable.length > 0) {
+            currentBoard = viewsAcceptable[0];
+          }
+        }
+      } else {
+        if (viewsAcceptable && viewsAcceptable.length > 0) {
+          currentBoard = viewsAcceptable[0];
+        }
+      }
+
+      if (currentBoard) {
+        if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
+          projectStore.setActiveBoard(currentBoard);
+          router.push({
+            pathname: `/${workspace_slug}/${project_slug}`,
+            query: {
+              board: currentBoard,
+            },
+          });
+        }
+      }
+    }
+  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
+
+  return (
+    <div className="px-5 relative w-full flex items-center gap-4">
+      {/* project detail */}
+      <div className="flex-shrink-0 flex items-center gap-2">
+        <div className="w-4 h-4 flex justify-center items-center">
+          {projectStore?.project && projectStore?.project?.emoji ? (
+            renderEmoji(projectStore?.project?.emoji)
+          ) : (
+            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+          )}
+        </div>
+        <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
+          {projectStore?.project?.name || `...`}
+        </div>
+      </div>
+
+      {/* issue search bar */}
+      <div className="w-full">
+        <NavbarSearch />
+      </div>
+
+      {/* issue views */}
+      <div className="flex-shrink-0 relative flex items-center gap-1 transition-all ease-in-out delay-150">
+        <NavbarIssueBoardView />
+      </div>
+
+      {/* theming */}
+      <div className="flex-shrink-0 relative">
+        <NavbarTheme />
+      </div>
+
+      {user ? (
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "A")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/login/?next_path=${router.asPath}`}>
+            <a>
+              <PrimaryButton className="flex-shrink-0" outline>
+                Sign in
+              </PrimaryButton>
+            </a>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default IssueNavbar;
diff --git a/space/components/issues/navbar/issue-board-view.tsx b/space/components/issues/navbar/issue-board-view.tsx
new file mode 100644
index 00000000000..0ae71e8ee99
--- /dev/null
+++ b/space/components/issues/navbar/issue-board-view.tsx
@@ -0,0 +1,49 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// constants
+import { issueViews } from "constants/data";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export const NavbarIssueBoardView = observer(() => {
+  const { project: projectStore, issue: issueStore }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const handleCurrentBoardView = (boardView: string) => {
+    projectStore.setActiveBoard(boardView);
+    router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
+  };
+
+  return (
+    <>
+      {projectStore?.viewOptions &&
+        Object.keys(projectStore?.viewOptions).map((viewKey: string) => {
+          if (projectStore?.viewOptions[viewKey]) {
+            return (
+              <div
+                key={viewKey}
+                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
+                  viewKey === projectStore?.activeBoard
+                    ? `bg-custom-background-80 text-custom-text-200`
+                    : `hover:bg-custom-background-80 text-custom-text-300`
+                }`}
+                onClick={() => handleCurrentBoardView(viewKey)}
+                title={viewKey}
+              >
+                <span
+                  className={`material-symbols-rounded text-[18px] ${
+                    issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
+                  }`}
+                >
+                  {issueViews[viewKey]?.icon}
+                </span>
+              </div>
+            );
+          }
+        })}
+    </>
+  );
+});
diff --git a/space/components/issues/navbar/issue-filter.tsx b/space/components/issues/navbar/issue-filter.tsx
new file mode 100644
index 00000000000..08c9f3e2bbf
--- /dev/null
+++ b/space/components/issues/navbar/issue-filter.tsx
@@ -0,0 +1,110 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// components
+import { Dropdown } from "components/ui/dropdown";
+// constants
+import { issueGroupFilter } from "constants/data";
+
+const PRIORITIES = ["urgent", "high", "medium", "low"];
+
+export const NavbarIssueFilter = observer(() => {
+  const store: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const pathName = router.asPath;
+
+  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
+    // if (key === "states") {
+    //   store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
+    //     ? store.issue.userSelectedStates.filter((s) => s !== value)
+    //     : [...store.issue.userSelectedStates, value];
+    // } else if (key === "labels") {
+    //   store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
+    //     ? store.issue.userSelectedLabels.filter((l) => l !== value)
+    //     : [...store.issue.userSelectedLabels, value];
+    // } else if (key === "priorities") {
+    //   store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
+    //     ? store.issue.userSelectedPriorities.filter((p) => p !== value)
+    //     : [...store.issue.userSelectedPriorities, value];
+    // }
+    // const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
+    //   store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
+    // }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
+    //   store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
+    // }`;
+    // router.replace(`${pathName}?${paramsCommaSeparated}`);
+  };
+
+  return (
+    <Dropdown
+      button={
+        <>
+          <span>Filters</span>
+          <ChevronDown className="h-3 w-3" aria-hidden="true" />
+        </>
+      }
+      items={[
+        {
+          display: "Priority",
+          children: PRIORITIES.map((priority) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span className="material-symbols-rounded text-[14px]">
+                  {priority === "urgent"
+                    ? "error"
+                    : priority === "high"
+                    ? "signal_cellular_alt"
+                    : priority === "medium"
+                    ? "signal_cellular_alt_2_bar"
+                    : "signal_cellular_alt_1_bar"}
+                </span>
+                {priority}
+              </span>
+            ),
+            onClick: () => handleOnSelect("priorities", priority),
+            isSelected: store.issue.filteredPriorities.includes(priority),
+          })),
+        },
+        {
+          display: "State",
+          children: (store.issue.states || []).map((state) => {
+            const stateGroup = issueGroupFilter(state.group);
+
+            return {
+              display: (
+                <span className="capitalize flex items-center gap-x-2">
+                  {stateGroup && <stateGroup.icon />}
+                  {state.name}
+                </span>
+              ),
+              onClick: () => handleOnSelect("states", state.id),
+              isSelected: store.issue.filteredStates.includes(state.id),
+            };
+          }),
+        },
+        {
+          display: "Labels",
+          children: [...(store.issue.labels || [])].map((label) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span
+                  className="w-3 h-3 rounded-full"
+                  style={{
+                    backgroundColor: label.color || "#000",
+                  }}
+                />
+                {label.name}
+              </span>
+            ),
+            onClick: () => handleOnSelect("labels", label.id),
+            isSelected: store.issue.filteredLabels.includes(label.id),
+          })),
+        },
+      ]}
+    />
+  );
+});
diff --git a/apps/space/components/issues/navbar/issue-view.tsx b/space/components/issues/navbar/issue-view.tsx
similarity index 100%
rename from apps/space/components/issues/navbar/issue-view.tsx
rename to space/components/issues/navbar/issue-view.tsx
diff --git a/apps/space/components/issues/navbar/search.tsx b/space/components/issues/navbar/search.tsx
similarity index 100%
rename from apps/space/components/issues/navbar/search.tsx
rename to space/components/issues/navbar/search.tsx
diff --git a/space/components/issues/navbar/theme.tsx b/space/components/issues/navbar/theme.tsx
new file mode 100644
index 00000000000..7efb561a40d
--- /dev/null
+++ b/space/components/issues/navbar/theme.tsx
@@ -0,0 +1,32 @@
+// next theme
+import { useTheme } from "next-themes";
+
+// mobx react lite
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+
+export const NavbarTheme = observer(() => {
+  const [appTheme, setAppTheme] = useState("light");
+
+  const { setTheme, theme } = useTheme();
+
+  const handleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  useEffect(() => {
+    if (!theme) return;
+
+    setAppTheme(theme);
+  }, [theme]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleTheme}
+      className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
+    >
+      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
+  );
+});
diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx
new file mode 100644
index 00000000000..f70a2c5aad2
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -0,0 +1,114 @@
+import React, { useRef } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useForm, Controller } from "react-hook-form";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { Comment } from "types/issue";
+// components
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+// service
+import fileService from "services/file.service";
+
+const defaultValues: Partial<Comment> = {
+  comment_html: "",
+};
+
+type Props = {
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { disabled = false } = props;
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Comment>({ defaultValues });
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+
+  const issueId = issueDetailStore.peekId;
+
+  const editorRef = useRef<any>(null);
+
+  const { setToastAlert } = useToast();
+
+  const onSubmit = async (formData: Comment) => {
+    if (!workspace_slug || !project_slug || !issueId || isSubmitting || !formData.comment_html) return;
+
+    await issueDetailStore
+      .addIssueComment(workspace_slug, project_slug, issueId, formData)
+      .then(() => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <LiteTextEditorWithRef
+              onEnterKeyPress={(e) => {
+                userStore.requiredLogin(() => {
+                  handleSubmit(onSubmit)(e);
+                });
+              }}
+              uploadFile={fileService.getUploadFileFunction(workspace_slug as string)}
+              deleteFile={fileService.deleteImage}
+              ref={editorRef}
+              value={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              customClassName="p-2"
+              editorContentCustomClassNames="min-h-[35px]"
+              debouncedUpdatesEnabled={false}
+              onChange={(comment_json: Object, comment_html: string) => {
+                onChange(comment_html);
+              }}
+              submitButton={
+                <Button
+                  disabled={isSubmitting || disabled}
+                  variant="primary"
+                  type="submit"
+                  className="!px-2.5 !py-1.5 !text-xs"
+                  onClick={(e) => {
+                    userStore.requiredLogin(() => {
+                      handleSubmit(onSubmit)(e);
+                    });
+                  }}
+                >
+                  {isSubmitting ? "Adding..." : "Comment"}
+                </Button>
+              }
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
new file mode 100644
index 00000000000..29801c9e648
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Menu, Transition } from "@headlessui/react";
+import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { LiteReadOnlyEditorWithRef, LiteTextEditorWithRef } from "@plane/lite-text-editor";
+
+import { CommentReactions } from "components/issues/peek-overview";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { Comment } from "types/issue";
+// services
+import fileService from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+type Props = {
+  workspaceSlug: string;
+  comment: Comment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { comment, workspaceSlug } = props;
+  // store
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+
+  const mentionsConfig = useEditorSuggestions();
+
+  const editorRef = React.useRef<any>(null);
+
+  const showEditorRef = React.useRef<any>(null);
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+  } = useForm<any>({
+    defaultValues: { comment_html: comment.comment_html },
+  });
+
+  const handleDelete = () => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
+  };
+
+  const handleCommentUpdate = async (formData: Comment) => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
+    setIsEditing(false);
+
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment?.actor_detail?.first_name?.charAt(0)
+              : comment?.actor_detail?.display_name?.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <Controller
+                control={control}
+                name="comment_html"
+                render={({ field: { onChange, value } }) => (
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+                    deleteFile={fileService.deleteImage}
+                    ref={editorRef}
+                    value={value}
+                    debouncedUpdatesEnabled={false}
+                    customClassName="min-h-[50px] p-3 shadow-sm"
+                    onChange={(comment_json: Object, comment_html: string) => {
+                      onChange(comment_html);
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+              </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" strokeWidth={2} />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <LiteReadOnlyEditorWithRef
+              ref={showEditorRef}
+              value={comment.comment_html}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={mentionsConfig.mentionHighlights}
+            />
+            <CommentReactions commentId={comment.id} projectId={comment.project} />
+          </div>
+        </div>
+      </div>
+
+      {userStore?.currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
+          >
+            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+          </Menu.Button>
+
+          <Transition
+            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"
+          >
+            <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md max-h-36 border right-0 origin-top-right mt-1 overflow-auto min-w-[8rem] border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/comment/comment-reactions.tsx b/space/components/issues/peek-overview/comment/comment-reactions.tsx
new file mode 100644
index 00000000000..4045d3edf50
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { ReactionSelector, Tooltip } from "components/ui";
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+
+type Props = {
+  commentId: string;
+  projectId: string;
+};
+
+export const CommentReactions: React.FC<Props> = observer((props) => {
+  const { commentId, projectId } = props;
+
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  const { issueDetails: issueDetailsStore, user: userStore } = useMobxStore();
+
+  const peekId = issueDetailsStore.peekId;
+  const user = userStore.currentUser;
+
+  const commentReactions = peekId
+    ? issueDetailsStore.details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions
+    : [];
+  const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
+
+  const userReactions = commentReactions?.filter((r) => r.actor_detail.id === user?.id);
+
+  const handleAddReaction = (reactionHex: string) => {
+    if (!workspace_slug || !projectId || !peekId) return;
+
+    issueDetailsStore.addCommentReaction(
+      workspace_slug.toString(),
+      projectId.toString(),
+      peekId,
+      commentId,
+      reactionHex
+    );
+  };
+
+  const handleRemoveReaction = (reactionHex: string) => {
+    if (!workspace_slug || !projectId || !peekId) return;
+
+    issueDetailsStore.removeCommentReaction(
+      workspace_slug.toString(),
+      projectId.toString(),
+      peekId,
+      commentId,
+      reactionHex
+    );
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+
+    if (userReaction) handleRemoveReaction(reactionHex);
+    else handleAddReaction(reactionHex);
+  };
+
+  return (
+    <div className="flex gap-1.5 items-center mt-2">
+      <ReactionSelector
+        onSelect={(value) => {
+          userStore.requiredLogin(() => {
+            handleReactionClick(value);
+          });
+        }}
+        position="top"
+        selected={userReactions?.map((r) => r.reaction)}
+        size="md"
+      />
+
+      {Object.keys(groupedReactions || {}).map((reaction) => {
+        const reactions = groupedReactions?.[reaction] ?? [];
+        const REACTIONS_LIMIT = 1000;
+
+        if (reactions.length > 0)
+          return (
+            <Tooltip
+              key={reaction}
+              tooltipContent={
+                <div>
+                  {reactions
+                    .map((r) => r.actor_detail.display_name)
+                    .splice(0, REACTIONS_LIMIT)
+                    .join(", ")}
+                  {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                </div>
+              }
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  userStore.requiredLogin(() => {
+                    handleReactionClick(reaction);
+                  });
+                }}
+                className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                  commentReactions?.some(
+                    (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
+                  )
+                    ? "bg-custom-primary-100/10"
+                    : "bg-custom-background-80"
+                }`}
+              >
+                <span>{renderEmoji(reaction)}</span>
+                <span
+                  className={
+                    commentReactions?.some(
+                      (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
+                    )
+                      ? "text-custom-primary-100"
+                      : ""
+                  }
+                >
+                  {groupedReactions?.[reaction].length}{" "}
+                </span>
+              </button>
+            </Tooltip>
+          );
+      })}
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/comment/index.ts b/space/components/issues/peek-overview/comment/index.ts
new file mode 100644
index 00000000000..d217c0ddf86
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/index.ts
@@ -0,0 +1,3 @@
+export * from "./add-comment";
+export * from "./comment-detail-card";
+export * from "./comment-reactions";
diff --git a/space/components/issues/peek-overview/full-screen-peek-view.tsx b/space/components/issues/peek-overview/full-screen-peek-view.tsx
new file mode 100644
index 00000000000..a40e6b16a15
--- /dev/null
+++ b/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+} from "components/issues/peek-overview";
+// types
+import { Loader } from "components/ui/loader";
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueDetails } = props;
+
+  return (
+    <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+      <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+        <div className="w-full p-5">
+          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+        </div>
+        {issueDetails ? (
+          <div className="h-full w-full px-6 overflow-y-auto">
+            {/* issue title and description */}
+            <div className="w-full">
+              <PeekOverviewIssueDetails issueDetails={issueDetails} />
+            </div>
+            {/* divider */}
+            <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+            {/* issue activity/comments */}
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity issueDetails={issueDetails} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="px-6">
+            <Loader.Item height="30px" />
+            <div className="space-y-2 mt-3">
+              <Loader.Item height="20px" width="70%" />
+              <Loader.Item height="20px" width="60%" />
+              <Loader.Item height="20px" width="60%" />
+            </div>
+          </Loader>
+        )}
+      </div>
+      <div className="col-span-3 h-full w-full overflow-y-auto">
+        {/* issue properties */}
+        <div className="w-full px-6 py-5">
+          {issueDetails ? (
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          ) : (
+            <Loader className="mt-11 space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
new file mode 100644
index 00000000000..8608274f909
--- /dev/null
+++ b/space/components/issues/peek-overview/header.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Listbox, Transition } from "@headlessui/react";
+import { MoveRight } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Icon } from "components/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// store
+import { IPeekMode } from "store/issue_details";
+import { RootStore } from "store/root";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+const peekModes: {
+  key: IPeekMode;
+  icon: string;
+  label: string;
+}[] = [
+  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  {
+    key: "modal",
+    icon: "dialogs",
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: "nearby",
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
+  const { handleClose } = props;
+
+  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          {issueDetailStore.peekMode === "side" && (
+            <button type="button" onClick={handleClose}>
+              <MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={issueDetailStore.peekMode}
+            onChange={(val) => issueDetailStore.setPeekMode(val)}
+            className="relative flex-shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
+            </Listbox.Button>
+
+            <Transition
+              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 className="absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none left-0 origin-top-left min-w-[8rem] whitespace-nowrap">
+                <div className="space-y-1 p-2">
+                  {peekModes.map((mode) => (
+                    <Listbox.Option
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active || selected ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <div className="flex items-center justify-between gap-2">
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-1.5">
+                              <Icon
+                                iconName={mode.icon}
+                                className={`!text-base flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`}
+                              />
+                              {mode.label}
+                            </div>
+                          </div>
+                          {selected && <Icon iconName="done" />}
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+        {(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
+              <Icon iconName="link" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/space/components/issues/peek-overview/index.ts b/space/components/issues/peek-overview/index.ts
new file mode 100644
index 00000000000..f42253e5e79
--- /dev/null
+++ b/space/components/issues/peek-overview/index.ts
@@ -0,0 +1,11 @@
+export * from "./comment";
+export * from "./full-screen-peek-view";
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
+export * from "./side-peek-view";
+export * from "./issue-reaction";
+export * from "./issue-vote-reactions";
+export * from "./issue-emoji-reactions";
diff --git a/space/components/issues/peek-overview/issue-activity.tsx b/space/components/issues/peek-overview/issue-activity.tsx
new file mode 100644
index 00000000000..fde2fd87895
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CommentCard, AddComment } from "components/issues/peek-overview";
+// ui
+import { Icon, PrimaryButton } from "components/ui";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  const { issueDetails: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
+
+  const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
+
+  const user = userStore?.currentUser;
+
+  return (
+    <div className="pb-10">
+      <h4 className="font-medium">Activity</h4>
+      {workspace_slug && (
+        <div className="mt-4">
+          <div className="space-y-4">
+            {comments.map((comment: any) => (
+              <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
+            ))}
+          </div>
+          {user ? (
+            <>
+              {projectStore.deploySettings?.comments && (
+                <div className="mt-4">
+                  <AddComment disabled={!userStore.currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded mt-4">
+              <p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${router.asPath}`}>
+                <a>
+                  <PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
+                </a>
+              </Link>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
new file mode 100644
index 00000000000..9b8634416c2
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -0,0 +1,34 @@
+import { IssueReactions } from "components/issues/peek-overview";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+// types
+import { IIssue } from "types/issue";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
+
+  const mentionConfig = useEditorSuggestions();
+
+  return (
+    <div className="space-y-2">
+      <h6 className="font-medium text-custom-text-200">
+        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
+      {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
+        <RichReadOnlyEditor
+          value={!issueDetails.description_html ||
+            issueDetails.description_html === "" ||
+            (typeof issueDetails.description_html === "object" &&
+              Object.keys(issueDetails.description_html).length === 0)
+            ? "<p></p>"
+            : issueDetails.description_html}
+          customClassName="p-3 min-h-[50px] shadow-sm" mentionHighlights={mentionConfig.mentionHighlights} />
+      )}
+      <IssueReactions />
+    </div>
+  )
+};
diff --git a/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
new file mode 100644
index 00000000000..b0c5b036157
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -0,0 +1,109 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+// components
+import { ReactionSelector, Tooltip } from "components/ui";
+
+export const IssueEmojiReactions: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query;
+  // store
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+  const reactions = issueId ? issueDetailsStore.details[issueId]?.reactions || [] : [];
+  const groupedReactions = groupReactions(reactions, "reaction");
+
+  const userReactions = reactions?.filter((r) => r.actor_detail.id === user?.id);
+
+  const handleAddReaction = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
+  const handleRemoveReaction = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+
+    if (userReaction) handleRemoveReaction(reactionHex);
+    else handleAddReaction(reactionHex);
+  };
+
+  useEffect(() => {
+    if (user) return;
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  return (
+    <>
+      <ReactionSelector
+        onSelect={(value) => {
+          userStore.requiredLogin(() => {
+            handleReactionClick(value);
+          });
+        }}
+        selected={userReactions?.map((r) => r.reaction)}
+        size="md"
+      />
+      <div className="flex items-center gap-2 flex-wrap">
+        {Object.keys(groupedReactions || {}).map((reaction) => {
+          const reactions = groupedReactions?.[reaction] ?? [];
+          const REACTIONS_LIMIT = 1000;
+
+          if (reactions.length > 0)
+            return (
+              <Tooltip
+                key={reaction}
+                tooltipContent={
+                  <div>
+                    {reactions
+                      .map((r) => r.actor_detail.display_name)
+                      .splice(0, REACTIONS_LIMIT)
+                      .join(", ")}
+                    {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                  </div>
+                }
+              >
+                <button
+                  type="button"
+                  onClick={() => {
+                    userStore.requiredLogin(() => {
+                      handleReactionClick(reaction);
+                    });
+                  }}
+                  className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                    reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                      ? "bg-custom-primary-100/10"
+                      : "bg-custom-background-80"
+                  }`}
+                >
+                  <span>{renderEmoji(reaction)}</span>
+                  <span
+                    className={
+                      reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                        ? "text-custom-primary-100"
+                        : ""
+                    }
+                  >
+                    {groupedReactions?.[reaction].length}{" "}
+                  </span>
+                </button>
+              </Tooltip>
+            );
+        })}
+      </div>
+    </>
+  );
+});
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
new file mode 100644
index 00000000000..f7ccab18f08
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -0,0 +1,123 @@
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { Icon } from "components/ui";
+// helpers
+import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+import { renderFullDate } from "helpers/date-time.helper";
+import { dueDateIconDetails } from "../board-views/block-due-date";
+// types
+import { IIssue } from "types/issue";
+import { IPeekMode } from "store/issue_details";
+// constants
+import { issueGroupFilter, issuePriorityFilter } from "constants/data";
+
+type Props = {
+  issueDetails: IIssue;
+  mode?: IPeekMode;
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
+  const { setToastAlert } = useToast();
+
+  const state = issueDetails.state_detail;
+  const stateGroup = issueGroupFilter(state.group);
+
+  const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
+
+  const dueDateIcon = dueDateIconDetails(issueDetails.target_date, state.group);
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            {stateGroup && (
+              <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                  <stateGroup.icon />
+                  {addSpaceIfCamelCase(state?.name ?? "")}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            <div
+              className={`inline-flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+                priority?.key === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : priority?.key === "high"
+                  ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                  : priority?.key === "medium"
+                  ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                  : priority?.key === "low"
+                  ? "border-green-500/20 bg-green-500/20 text-green-500"
+                  : "bg-custom-background-80 border-custom-border-200"
+              }`}
+            >
+              {priority && (
+                <span className="grid place-items-center -my-1">
+                  <Icon iconName={priority?.icon!} />
+                </span>
+              )}
+              <span>{priority?.title ?? "None"}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          <div>
+            {issueDetails.target_date ? (
+              <div className="h-6 rounded flex items-center gap-1 px-2.5 py-1 border border-custom-border-100 text-custom-text-100 text-xs bg-custom-background-80">
+                <span className={`material-symbols-rounded text-sm -my-0.5 ${dueDateIcon.className}`}>
+                  {dueDateIcon.iconName}
+                </span>
+                {renderFullDate(issueDetails.target_date)}
+              </div>
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/space/components/issues/peek-overview/issue-reaction.tsx b/space/components/issues/peek-overview/issue-reaction.tsx
new file mode 100644
index 00000000000..643ec711944
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-reaction.tsx
@@ -0,0 +1,24 @@
+import { IssueEmojiReactions, IssueVotes } from "components/issues/peek-overview";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueReactions: React.FC = () => {
+  const { project: projectStore } = useMobxStore();
+
+  return (
+    <div className="flex gap-3 items-center mt-4">
+      {projectStore?.deploySettings?.votes && (
+        <>
+          <div className="flex gap-2 items-center">
+            <IssueVotes />
+          </div>
+          <div className="w-0.5 h-8 bg-custom-background-200" />
+        </>
+      )}
+      {projectStore?.deploySettings?.reactions && (
+        <div className="flex gap-2 items-center">
+          <IssueEmojiReactions />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/space/components/issues/peek-overview/issue-vote-reactions.tsx b/space/components/issues/peek-overview/issue-vote-reactions.tsx
new file mode 100644
index 00000000000..ac20565ea3d
--- /dev/null
+++ b/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -0,0 +1,129 @@
+import { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+import { Tooltip } from "components/ui";
+
+export const IssueVotes: React.FC = observer(() => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const router = useRouter();
+
+  const { workspace_slug, project_slug } = router.query;
+
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+
+  const votes = issueId ? issueDetailsStore.details[issueId]?.votes : [];
+
+  const allUpVotes = votes?.filter((vote) => vote.vote === 1);
+  const allDownVotes = votes?.filter((vote) => vote.vote === -1);
+
+  const isUpVotedByUser = allUpVotes?.some((vote) => vote.actor === user?.id);
+  const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
+
+  const handleVote = async (e: any, voteValue: 1 | -1) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    setIsSubmitting(true);
+
+    const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
+
+    if (actionPerformed)
+      await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
+    else
+      await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
+        vote: voteValue,
+      });
+
+    setIsSubmitting(false);
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  const VOTES_LIMIT = 1000;
+
+  return (
+    <div className="flex gap-2 items-center">
+      {/* upvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allUpVotes.length > 0 ? (
+              <>
+                {allUpVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allUpVotes.length > VOTES_LIMIT && " and " + (allUpVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No upvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, 1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_upward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
+        </button>
+      </Tooltip>
+
+      {/* downvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allDownVotes.length > 0 ? (
+              <>
+                {allDownVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allDownVotes.length > VOTES_LIMIT && " and " + (allDownVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No downvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, -1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_downward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
+        </button>
+      </Tooltip>
+    </div>
+  );
+});
diff --git a/space/components/issues/peek-overview/layout.tsx b/space/components/issues/peek-overview/layout.tsx
new file mode 100644
index 00000000000..a3d7386eb00
--- /dev/null
+++ b/space/components/issues/peek-overview/layout.tsx
@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { FullScreenPeekView, SidePeekView } from "components/issues/peek-overview";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type Props = {};
+
+export const IssuePeekOverview: React.FC<Props> = observer((props) => {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, peekId, board } = router.query;
+  // store
+  const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
+
+  const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
+
+  useEffect(() => {
+    if (workspace_slug && project_slug && peekId && issueStore.issues && issueStore.issues.length > 0) {
+      if (!issueDetails) {
+        issueDetailStore.fetchIssueDetails(workspace_slug.toString(), project_slug.toString(), peekId.toString());
+      }
+    }
+  }, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]);
+
+  const handleClose = () => {
+    issueDetailStore.setPeekId(null);
+    router.replace(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  useEffect(() => {
+    if (peekId) {
+      if (issueDetailStore.peekMode === "side") {
+        setIsSidePeekOpen(true);
+        setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
+      }
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekId, issueDetailStore.peekMode]);
+
+  return (
+    <>
+      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
+              <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
+        <Dialog as="div" 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 bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <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"
+          >
+            <Dialog.Panel>
+              <div
+                className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                }`}
+              >
+                {issueDetailStore.peekMode === "modal" && (
+                  <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+                {issueDetailStore.peekMode === "full" && (
+                  <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/space/components/issues/peek-overview/side-peek-view.tsx b/space/components/issues/peek-overview/side-peek-view.tsx
new file mode 100644
index 00000000000..bacf83420e9
--- /dev/null
+++ b/space/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react-lite";
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+} from "components/issues/peek-overview";
+
+import { Loader } from "components/ui/loader";
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const SidePeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueDetails } = props;
+
+  return (
+    <div className="h-full w-full flex flex-col overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+      </div>
+      {issueDetails ? (
+        <div className="h-full w-full px-6 overflow-y-auto">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails issueDetails={issueDetails} />
+          </div>
+          {/* issue properties */}
+          <div className="w-full mt-6">
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          </div>
+          {/* divider */}
+          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+          {/* issue activity/comments */}
+          <div className="w-full pb-5">
+            <PeekOverviewIssueActivity issueDetails={issueDetails} />
+          </div>
+        </div>
+      ) : (
+        <Loader className="px-6">
+          <Loader.Item height="30px" />
+          <div className="space-y-2 mt-3">
+            <Loader.Item height="20px" width="70%" />
+            <Loader.Item height="20px" width="60%" />
+            <Loader.Item height="20px" width="60%" />
+          </div>
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
new file mode 100644
index 00000000000..6ef6b773faf
--- /dev/null
+++ b/space/components/ui/dropdown.tsx
@@ -0,0 +1,142 @@
+import { Fragment, useState, useRef } from "react";
+import Link from "next/link";
+import { Popover, Transition } from "@headlessui/react";
+// hooks
+import useOutSideClick from "hooks/use-outside-click";
+import { Check, ChevronLeft } from "lucide-react";
+
+type ItemOptionType = {
+  display: React.ReactNode;
+  as?: "button" | "link" | "div";
+  href?: string;
+  isSelected?: boolean;
+  onClick?: () => void;
+  children?: ItemOptionType[] | null;
+};
+
+type DropdownItemProps = {
+  item: ItemOptionType;
+};
+
+type DropDownListProps = {
+  open: boolean;
+  handleClose?: () => void;
+  items: ItemOptionType[];
+};
+
+type DropdownProps = {
+  button: React.ReactNode | (() => React.ReactNode);
+  items: ItemOptionType[];
+};
+
+const DropdownList: React.FC<DropDownListProps> = (props) => {
+  const { open, items, handleClose } = props;
+
+  const ref = useRef(null);
+
+  useOutSideClick(ref, () => {
+    if (handleClose) handleClose();
+  });
+
+  return (
+    <Popover className="absolute -left-1">
+      <Transition
+        show={open}
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel
+          ref={ref}
+          className="absolute left-1/2 -translate-x-full z-10 mt-1 max-w-[9rem] origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
+        >
+          <div className="w-full text-sm rounded-md shadow-lg">
+            {items.map((item, index) => (
+              <DropdownItem key={index} item={item} />
+            ))}
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+const DropdownItem: React.FC<DropdownItemProps> = (props) => {
+  const { item } = props;
+  const { display, children, as: as_, href, onClick, isSelected } = item;
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="w-full group relative flex gap-x-6 rounded-lg p-1">
+      {(!as_ || as_ === "button" || as_ === "div") && (
+        <button
+          type="button"
+          onClick={() => {
+            if (!children) {
+              if (onClick) onClick();
+              return;
+            }
+            setOpen((prev) => !prev);
+          }}
+          className={`w-full flex items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
+            isSelected ? "bg-custom-background-80" : ""
+          }`}
+        >
+          {children && <ChevronLeft className="h-4 w-4 transition-transform transform" strokeWidth={2} />}
+          {!children && <span />}
+          <span className="truncate text-xs">{display}</span>
+          <Check className={`h-3 w-3 opacity-0 ${isSelected ? "opacity-100" : ""}`} strokeWidth={2} />
+        </button>
+      )}
+
+      {as_ === "link" && <Link href={href || "#"}>{display}</Link>}
+
+      {children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
+    </div>
+  );
+};
+
+const Dropdown: React.FC<DropdownProps> = (props) => {
+  const { button, items } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button
+            className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
+              open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+            }`}
+          >
+            {typeof button === "function" ? button() : button}
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-full -translate-x-full z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none">
+              <div className="w-full">
+                {items.map((item, index) => (
+                  <DropdownItem key={index} item={item} />
+                ))}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export { Dropdown };
diff --git a/space/components/ui/icon.tsx b/space/components/ui/icon.tsx
new file mode 100644
index 00000000000..418186291b8
--- /dev/null
+++ b/space/components/ui/icon.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
+);
diff --git a/space/components/ui/index.ts b/space/components/ui/index.ts
new file mode 100644
index 00000000000..e4409690965
--- /dev/null
+++ b/space/components/ui/index.ts
@@ -0,0 +1,8 @@
+export * from "./dropdown";
+export * from "./input";
+export * from "./loader";
+export * from "./primary-button";
+export * from "./secondary-button";
+export * from "./icon";
+export * from "./reaction-selector";
+export * from "./tooltip";
diff --git a/space/components/ui/input.tsx b/space/components/ui/input.tsx
new file mode 100644
index 00000000000..b6be82ae579
--- /dev/null
+++ b/space/components/ui/input.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, Ref } from "react";
+
+// types
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "trueTransparent";
+  error?: boolean;
+  inputSize?: "rg" | "lg";
+  fullWidth?: boolean;
+}
+
+export const Input = forwardRef((props: Props, ref: Ref<HTMLInputElement>) => {
+  const { mode = "primary", error, className = "", type, fullWidth = true, id, inputSize = "rg", ...rest } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "trueTransparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${error ? "border-red-500" : ""} ${error && mode === "primary" ? "bg-red-500/20" : ""} ${
+        fullWidth ? "w-full" : ""
+      } ${inputSize === "rg" ? "px-3 py-2" : inputSize === "lg" ? "p-3" : ""} ${className}`}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/apps/app/components/ui/loader.tsx b/space/components/ui/loader.tsx
similarity index 100%
rename from apps/app/components/ui/loader.tsx
rename to space/components/ui/loader.tsx
diff --git a/apps/app/components/ui/buttons/primary-button.tsx b/space/components/ui/primary-button.tsx
similarity index 85%
rename from apps/app/components/ui/buttons/primary-button.tsx
rename to space/components/ui/primary-button.tsx
index 8817679b42d..b3e1b82ee0a 100644
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/space/components/ui/primary-button.tsx
@@ -1,5 +1,8 @@
-// types
-import { ButtonProps } from "./type";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
 
 export const PrimaryButton: React.FC<ButtonProps> = ({
   children,
diff --git a/space/components/ui/reaction-selector.tsx b/space/components/ui/reaction-selector.tsx
new file mode 100644
index 00000000000..a7b67afa6bb
--- /dev/null
+++ b/space/components/ui/reaction-selector.tsx
@@ -0,0 +1,80 @@
+import { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+// icons
+import { Icon } from "components/ui";
+
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+interface Props {
+  onSelect: (emoji: string) => void;
+  position?: "top" | "bottom";
+  selected?: string[];
+  size?: "sm" | "md" | "lg";
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { onSelect, position, selected = [], size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex justify-center items-center rounded-md px-2 ${
+                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
+              }`}
+            >
+              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded-md p-1">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className={`grid place-items-center select-none rounded-md text-sm p-1 ${
+                        selected.includes(emoji) ? "bg-custom-primary-100/10" : "hover:bg-custom-sidebar-background-80"
+                      }`}
+                    >
+                      {renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/apps/app/components/ui/buttons/secondary-button.tsx b/space/components/ui/secondary-button.tsx
similarity index 85%
rename from apps/app/components/ui/buttons/secondary-button.tsx
rename to space/components/ui/secondary-button.tsx
index a642dd65ffc..2a9b3d528ac 100644
--- a/apps/app/components/ui/buttons/secondary-button.tsx
+++ b/space/components/ui/secondary-button.tsx
@@ -1,5 +1,8 @@
-// types
-import { ButtonProps } from "./type";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "sm" | "md" | "lg";
+  outline?: boolean;
+  loading?: boolean;
+}
 
 export const SecondaryButton: React.FC<ButtonProps> = ({
   children,
diff --git a/space/components/ui/toast-alert.tsx b/space/components/ui/toast-alert.tsx
new file mode 100644
index 00000000000..fe7a3448e25
--- /dev/null
+++ b/space/components/ui/toast-alert.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute top-1 right-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <X className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                ? "bg-[#ef476f]"
+                : alert.type === "warning"
+                ? "bg-[#e98601]"
+                : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircle className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <Info className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;
diff --git a/space/components/ui/tooltip.tsx b/space/components/ui/tooltip.tsx
new file mode 100644
index 00000000000..994c0f32a86
--- /dev/null
+++ b/space/components/ui/tooltip.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md border border-custom-border-200 ${
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      }
+    />
+  );
+};
diff --git a/space/components/views/index.ts b/space/components/views/index.ts
new file mode 100644
index 00000000000..f54d11bdd2c
--- /dev/null
+++ b/space/components/views/index.ts
@@ -0,0 +1 @@
+export * from "./login";
diff --git a/space/components/views/login.tsx b/space/components/views/login.tsx
new file mode 100644
index 00000000000..406d6be9877
--- /dev/null
+++ b/space/components/views/login.tsx
@@ -0,0 +1,19 @@
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SignInView, UserLoggedIn } from "components/accounts";
+
+export const LoginView = observer(() => {
+  const { user: userStore } = useMobxStore();
+
+  return (
+    <>
+      {userStore?.loader ? (
+        <div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
+      ) : (
+        <>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
+      )}
+    </>
+  );
+});
diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx
new file mode 100644
index 00000000000..1c9c6ddc925
--- /dev/null
+++ b/space/components/views/project-details.tsx
@@ -0,0 +1,98 @@
+import { useEffect } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { IssueListView } from "components/issues/board-views/list";
+import { IssueKanbanView } from "components/issues/board-views/kanban";
+import { IssueCalendarView } from "components/issues/board-views/calendar";
+import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
+import { IssueGanttView } from "components/issues/board-views/gantt";
+import { IssuePeekOverview } from "components/issues/peek-overview";
+// mobx store
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+// assets
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
+
+export const ProjectDetailsView = observer(() => {
+  const router = useRouter();
+  const { workspace_slug, project_slug, states, labels, priorities, board, peekId } = router.query;
+
+  const {
+    issue: issueStore,
+    project: projectStore,
+    issueDetails: issueDetailStore,
+    user: userStore,
+  }: RootStore = useMobxStore();
+
+  useEffect(() => {
+    if (!userStore.currentUser) {
+      userStore.fetchCurrentUser();
+    }
+  }, [userStore]);
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      const params = {
+        state: states || null,
+        labels: labels || null,
+        priority: priorities || null,
+      };
+      issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
+    }
+  }, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
+
+  useEffect(() => {
+    if (peekId && workspace_slug && project_slug) {
+      issueDetailStore.setPeekId(peekId.toString());
+    }
+  }, [peekId, issueDetailStore, project_slug, workspace_slug]);
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      {workspace_slug && <IssuePeekOverview />}
+
+      {issueStore?.loader && !issueStore.issues ? (
+        <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
+      ) : (
+        <>
+          {issueStore?.error ? (
+            <div className="h-full w-full grid place-items-center p-6">
+              <div className="text-center">
+                <div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
+                  <div className="h-32 w-32 grid place-items-center">
+                    <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
+                  </div>
+                </div>
+                <h1 className="text-3xl font-semibold mt-12">Oops! Something went wrong.</h1>
+                <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+              </div>
+            </div>
+          ) : (
+            projectStore?.activeBoard && (
+              <>
+                {projectStore?.activeBoard === "list" && (
+                  <div className="relative w-full h-full overflow-y-auto">
+                    <IssueListView />
+                  </div>
+                )}
+                {projectStore?.activeBoard === "kanban" && (
+                  <div className="relative w-full h-full mx-auto p-5">
+                    <IssueKanbanView />
+                  </div>
+                )}
+                {projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
+                {projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
+                {projectStore?.activeBoard === "gantt" && <IssueGanttView />}
+              </>
+            )
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/space/constants/data.ts b/space/constants/data.ts
new file mode 100644
index 00000000000..29d411342fb
--- /dev/null
+++ b/space/constants/data.ts
@@ -0,0 +1,133 @@
+// interfaces
+import {
+  IIssueBoardViews,
+  // priority
+  TIssuePriorityKey,
+  // state groups
+  TIssueGroupKey,
+  IIssuePriorityFilters,
+  IIssueGroup,
+} from "types/issue";
+// icons
+import {
+  BacklogStateIcon,
+  UnstartedStateIcon,
+  StartedStateIcon,
+  CompletedStateIcon,
+  CancelledStateIcon,
+} from "components/icons";
+
+// all issue views
+export const issueViews: any = {
+  list: {
+    title: "List View",
+    icon: "format_list_bulleted",
+    className: "",
+  },
+  kanban: {
+    title: "Board View",
+    icon: "grid_view",
+    className: "",
+  },
+};
+
+// issue priority filters
+export const issuePriorityFilters: IIssuePriorityFilters[] = [
+  {
+    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: TIssuePriorityKey): IIssuePriorityFilters | null => {
+  const currentIssuePriority: IIssuePriorityFilters | undefined | null =
+    issuePriorityFilters && issuePriorityFilters.length > 0
+      ? issuePriorityFilters.find((_priority) => _priority.key === priorityKey)
+      : null;
+
+  if (currentIssuePriority === undefined || currentIssuePriority === null) return null;
+  return { ...currentIssuePriority };
+};
+
+// issue group filters
+export const issueGroupColors: {
+  [key: string]: string;
+} = {
+  backlog: "#d9d9d9",
+  unstarted: "#3f76ff",
+  started: "#f59e0b",
+  completed: "#16a34a",
+  cancelled: "#dc2626",
+};
+
+export const issueGroups: IIssueGroup[] = [
+  {
+    key: "backlog",
+    title: "Backlog",
+    color: "#d9d9d9",
+    className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
+    icon: BacklogStateIcon,
+  },
+  {
+    key: "unstarted",
+    title: "Unstarted",
+    color: "#3f76ff",
+    className: `text-[#3f76ff] bg-[#3f76ff]/10`,
+    icon: UnstartedStateIcon,
+  },
+  {
+    key: "started",
+    title: "Started",
+    color: "#f59e0b",
+    className: `text-[#f59e0b] bg-[#f59e0b]/10`,
+    icon: StartedStateIcon,
+  },
+  {
+    key: "completed",
+    title: "Completed",
+    color: "#16a34a",
+    className: `text-[#16a34a] bg-[#16a34a]/10`,
+    icon: CompletedStateIcon,
+  },
+  {
+    key: "cancelled",
+    title: "Cancelled",
+    color: "#dc2626",
+    className: `text-[#dc2626] bg-[#dc2626]/10`,
+    icon: CancelledStateIcon,
+  },
+];
+
+export const issueGroupFilter = (issueKey: TIssueGroupKey): IIssueGroup | null => {
+  const currentIssueStateGroup: IIssueGroup | undefined | null =
+    issueGroups && issueGroups.length > 0 ? issueGroups.find((group) => group.key === issueKey) : null;
+
+  if (currentIssueStateGroup === undefined || currentIssueStateGroup === null) return null;
+  return { ...currentIssueStateGroup };
+};
diff --git a/space/constants/seo.ts b/space/constants/seo.ts
new file mode 100644
index 00000000000..b2baca612e3
--- /dev/null
+++ b/space/constants/seo.ts
@@ -0,0 +1,7 @@
+export const SITE_NAME = "Plane Deploy | Make your Plane boards and roadmaps pubic with just one-click. ";
+export const SITE_TITLE = "Plane Deploy | Make your Plane boards public with one-click";
+export const SITE_DESCRIPTION = "Plane Deploy 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/constants/workspace.ts b/space/constants/workspace.ts
new file mode 100644
index 00000000000..5ae5a7cf4f6
--- /dev/null
+++ b/space/constants/workspace.ts
@@ -0,0 +1,12 @@
+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" },
+];
diff --git a/space/contexts/toast.context.tsx b/space/contexts/toast.context.tsx
new file mode 100644
index 00000000000..a382b4fd216
--- /dev/null
+++ b/space/contexts/toast.context.tsx
@@ -0,0 +1,97 @@
+import React, { createContext, useCallback, useReducer } from "react";
+// uuid
+import { v4 as uuid } from "uuid";
+// components
+import ToastAlert from "components/ui/toast-alert";
+
+export const toastContext = createContext<ContextType>({} as ContextType);
+
+// types
+type ToastAlert = {
+  id: string;
+  title: string;
+  message?: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ReducerActionType = {
+  type: "SET_TOAST_ALERT" | "REMOVE_TOAST_ALERT";
+  payload: ToastAlert;
+};
+
+type ContextType = {
+  alerts?: ToastAlert[];
+  removeAlert: (id: string) => void;
+  setToastAlert: (data: {
+    title: string;
+    type?: "success" | "error" | "warning" | "info" | undefined;
+    message?: string | undefined;
+  }) => void;
+};
+
+type StateType = {
+  toastAlerts?: ToastAlert[];
+};
+
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  toastAlerts: [],
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: [...(state.toastAlerts ?? []), payload],
+      };
+
+    case "REMOVE_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: state.toastAlerts?.filter((toastAlert) => toastAlert.id !== payload.id),
+      };
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const removeAlert = useCallback((id: string) => {
+    dispatch({
+      type: "REMOVE_TOAST_ALERT",
+      payload: { id, title: "", message: "", type: "success" },
+    });
+  }, []);
+
+  const setToastAlert = useCallback(
+    (data: { title: string; type?: "success" | "error" | "warning" | "info"; message?: string }) => {
+      const id = uuid();
+      const { title, type, message } = data;
+      dispatch({
+        type: "SET_TOAST_ALERT",
+        payload: { id, title, message, type: type ?? "success" },
+      });
+
+      const timer = setTimeout(() => {
+        removeAlert(id);
+        clearTimeout(timer);
+      }, 3000);
+    },
+    [removeAlert]
+  );
+
+  return (
+    <toastContext.Provider value={{ setToastAlert, removeAlert, alerts: state.toastAlerts }}>
+      <ToastAlert />
+      {children}
+    </toastContext.Provider>
+  );
+};
diff --git a/space/helpers/common.helper.ts b/space/helpers/common.helper.ts
new file mode 100644
index 00000000000..758d7c3703b
--- /dev/null
+++ b/space/helpers/common.helper.ts
@@ -0,0 +1 @@
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
diff --git a/space/helpers/date-time.helper.ts b/space/helpers/date-time.helper.ts
new file mode 100644
index 00000000000..f19a5358bf1
--- /dev/null
+++ b/space/helpers/date-time.helper.ts
@@ -0,0 +1,37 @@
+export const timeAgo = (time: any) => {
+  switch (typeof time) {
+    case "number":
+      break;
+    case "string":
+      time = +new Date(time);
+      break;
+    case "object":
+      if (time.constructor === Date) time = time.getTime();
+      break;
+    default:
+      time = +new Date();
+  }
+};
+
+/**
+ * @description Returns date and month, if date is of the current year
+ * @description Returns date, month adn year, if date is of a different year than current
+ * @param {string} date
+ * @example renderFullDate("2023-01-01") // 1 Jan
+ * @example renderFullDate("2021-01-01") // 1 Jan, 2021
+ */
+
+export const renderFullDate = (date: string): string => {
+  if (!date) return "";
+
+  const months: string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  const currentDate: Date = new Date();
+  const [year, month, day]: number[] = date.split("-").map(Number);
+
+  const formattedMonth: string = months[month - 1];
+  const formattedDay: string = day < 10 ? `0${day}` : day.toString();
+
+  if (currentDate.getFullYear() === year) return `${formattedDay} ${formattedMonth}`;
+  else return `${formattedDay} ${formattedMonth}, ${year}`;
+};
diff --git a/space/helpers/emoji.helper.tsx b/space/helpers/emoji.helper.tsx
new file mode 100644
index 00000000000..7c9f3cfcb2d
--- /dev/null
+++ b/space/helpers/emoji.helper.tsx
@@ -0,0 +1,56 @@
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+export const renderEmoji = (
+  emoji:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
+  reactions: any,
+  key: string
+) => {
+  const groupedReactions = reactions.reduce(
+    (acc: any, reaction: any) => {
+      if (!acc[reaction[key]]) {
+        acc[reaction[key]] = [];
+      }
+      acc[reaction[key]].push(reaction);
+      return acc;
+    },
+    {} as { [key: string]: any[] }
+  );
+
+  return groupedReactions;
+};
diff --git a/space/helpers/string.helper.ts b/space/helpers/string.helper.ts
new file mode 100644
index 00000000000..1b676ca571b
--- /dev/null
+++ b/space/helpers/string.helper.ts
@@ -0,0 +1,31 @@
+export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+const fallbackCopyTextToClipboard = (text: string) => {
+  var 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
+    var successful = document.execCommand("copy");
+  } catch (err) {}
+
+  document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
diff --git a/space/hooks/use-editor-suggestions.tsx b/space/hooks/use-editor-suggestions.tsx
new file mode 100644
index 00000000000..0659121b7cd
--- /dev/null
+++ b/space/hooks/use-editor-suggestions.tsx
@@ -0,0 +1,13 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const useEditorSuggestions = () => {
+  const { mentionsStore }: RootStore = useMobxStore();
+
+  return {
+    // mentionSuggestions: mentionsStore.mentionSuggestions,
+    mentionHighlights: mentionsStore.mentionHighlights,
+  };
+};
+
+export default useEditorSuggestions;
diff --git a/space/hooks/use-outside-click.tsx b/space/hooks/use-outside-click.tsx
new file mode 100644
index 00000000000..f2bed415f77
--- /dev/null
+++ b/space/hooks/use-outside-click.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+
+const useOutSideClick = (ref: any, callback: any) => {
+  const handleClick = (e: any) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+export default useOutSideClick;
diff --git a/apps/app/hooks/use-timer.tsx b/space/hooks/use-timer.tsx
similarity index 100%
rename from apps/app/hooks/use-timer.tsx
rename to space/hooks/use-timer.tsx
diff --git a/apps/app/hooks/use-toast.tsx b/space/hooks/use-toast.tsx
similarity index 100%
rename from apps/app/hooks/use-toast.tsx
rename to space/hooks/use-toast.tsx
diff --git a/space/layouts/project-layout.tsx b/space/layouts/project-layout.tsx
new file mode 100644
index 00000000000..1a0b7899e77
--- /dev/null
+++ b/space/layouts/project-layout.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import Image from "next/image";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import planeLogo from "public/plane-logo.svg";
+// components
+import IssueNavbar from "components/issues/navbar";
+
+const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
+  <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
+    <div className="flex-shrink-0 h-[60px] border-b border-custom-border-300 relative flex items-center bg-custom-sidebar-background-100 select-none">
+      <IssueNavbar />
+    </div>
+    <div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
+
+    <a
+      href="https://plane.so"
+      className="fixed !z-[999999] bottom-2.5 right-5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border border-custom-border-200 py-1 px-2 flex items-center gap-1"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      <div className="w-6 h-6 relative grid place-items-center">
+        <Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
+      </div>
+      <div className="text-xs">
+        Powered by <span className="font-semibold">Plane Deploy</span>
+      </div>
+    </a>
+  </div>
+);
+
+export default observer(ProjectLayout);
diff --git a/apps/space/lib/index.ts b/space/lib/index.ts
similarity index 100%
rename from apps/space/lib/index.ts
rename to space/lib/index.ts
diff --git a/space/lib/mobx/store-init.tsx b/space/lib/mobx/store-init.tsx
new file mode 100644
index 00000000000..4fc761ad194
--- /dev/null
+++ b/space/lib/mobx/store-init.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+// next imports
+import { useRouter } from "next/router";
+// js cookie
+import Cookie from "js-cookie";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const MobxStoreInit = () => {
+  const { user: userStore }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
+
+  // useEffect(() => {
+  //   store.issue.userSelectedLabels = labels || [];
+  //   store.issue.userSelectedPriorities = priorities || [];
+  //   store.issue.userSelectedStates = states || [];
+  // }, [store.issue]);
+
+  useEffect(() => {
+    const authToken = Cookie.get("accessToken") || null;
+    if (authToken) userStore.fetchCurrentUser();
+  }, [userStore]);
+
+  return <></>;
+};
+
+export default MobxStoreInit;
diff --git a/apps/app/lib/mobx/store-provider.tsx b/space/lib/mobx/store-provider.tsx
similarity index 100%
rename from apps/app/lib/mobx/store-provider.tsx
rename to space/lib/mobx/store-provider.tsx
diff --git a/space/next.config.js b/space/next.config.js
new file mode 100644
index 00000000000..7e986578476
--- /dev/null
+++ b/space/next.config.js
@@ -0,0 +1,25 @@
+/** @type {import('next').NextConfig} */
+const path = require("path");
+const withImages = require("next-images");
+
+const nextConfig = {
+  reactStrictMode: false,
+  swcMinify: true,
+  experimental: {
+    outputFileTracingRoot: path.join(__dirname, "../"),
+  },
+  images: {
+    unoptimized: true,
+  },
+  output: "standalone",
+};
+
+if (parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) {
+  const nextConfigWithNginx = withImages({
+    basePath: "/spaces",
+    ...nextConfig,
+  });
+  module.exports = nextConfigWithNginx;
+} else {
+  module.exports = nextConfig;
+}
diff --git a/space/package.json b/space/package.json
new file mode 100644
index 00000000000..5f3f60dc9c2
--- /dev/null
+++ b/space/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "space",
+  "version": "0.13.2",
+  "private": true,
+  "scripts": {
+    "dev": "turbo run develop",
+    "develop": "next dev -p 4000",
+    "build": "next build",
+    "start": "next start -p 4000",
+    "lint": "next lint",
+    "export": "next export"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^1.7.13",
+    "@mui/material": "^5.14.1",
+    "@plane/ui": "*",
+    "@plane/lite-text-editor": "*",
+    "@plane/rich-text-editor": "*",
+    "axios": "^1.3.4",
+    "clsx": "^2.0.0",
+    "js-cookie": "^3.0.1",
+    "lowlight": "^2.9.0",
+    "lucide-react": "^0.263.1",
+    "mobx": "^6.10.0",
+    "mobx-react-lite": "^4.0.3",
+    "next": "12.3.2",
+    "next-images": "^1.8.5",
+    "next-themes": "^0.2.1",
+    "nprogress": "^0.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.38.0",
+    "swr": "^2.2.2",
+    "tailwind-merge": "^1.14.0",
+    "typescript": "4.9.5",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.3",
+    "@types/node": "18.14.1",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "eslint": "8.34.0",
+    "eslint-config-custom": "*",
+    "eslint-config-next": "13.2.1",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*"
+  }
+}
diff --git a/space/pages/404.tsx b/space/pages/404.tsx
new file mode 100644
index 00000000000..be40bd50115
--- /dev/null
+++ b/space/pages/404.tsx
@@ -0,0 +1,31 @@
+// next imports
+import Image from "next/image";
+import notFoundImage from "public/404.svg";
+
+const Custom404Error = () => (
+  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
+    <div className="max-w-[700px] space-y-5">
+      <div className="flex items-center flex-col gap-3 text-center">
+        <div className="relative w-[240px] h-[240px]">
+          <Image src={notFoundImage} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="text-xl font-medium">Oops! Something went wrong.</div>
+        <div className="text-sm text-custom-text-200">
+          Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+          temporarily unavailable.
+        </div>
+      </div>
+
+      <div className="text-center flex justify-center items-center">
+        <a
+          href={`https://app.plane.so/`}
+          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
+        >
+          Go to your Workspace
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default Custom404Error;
diff --git a/space/pages/[workspace_slug]/[project_slug]/index.tsx b/space/pages/[workspace_slug]/[project_slug]/index.tsx
new file mode 100644
index 00000000000..e50c01c18e9
--- /dev/null
+++ b/space/pages/[workspace_slug]/[project_slug]/index.tsx
@@ -0,0 +1,43 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+/// layouts
+import ProjectLayout from "layouts/project-layout";
+// components
+import { ProjectDetailsView } from "components/views/project-details";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const WorkspaceProjectPage = (props: any) => {
+  const SITE_TITLE = props?.project_settings?.project_details?.name || "Plane | Deploy";
+
+  const router = useRouter();
+  const { workspace_slug, project_slug, states, labels, priorities } = router.query;
+
+  const { project: projectStore, issue: issueStore } = useMobxStore();
+
+  useSWR("REVALIDATE_ALL", () => {
+    if (workspace_slug && project_slug) {
+      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+      const params = {
+        state: states || null,
+        labels: labels || null,
+        priority: priorities || null,
+      };
+      issueStore.fetchPublicIssues(workspace_slug.toString(), project_slug.toString(), params);
+    }
+  });
+
+  return (
+    <ProjectLayout>
+      <Head>
+        <title>{SITE_TITLE}</title>
+      </Head>
+      <ProjectDetailsView />
+    </ProjectLayout>
+  );
+};
+
+export default WorkspaceProjectPage;
diff --git a/space/pages/[workspace_slug]/index.tsx b/space/pages/[workspace_slug]/index.tsx
new file mode 100644
index 00000000000..a844c0763b5
--- /dev/null
+++ b/space/pages/[workspace_slug]/index.tsx
@@ -0,0 +1,5 @@
+const WorkspaceProjectPage = () => (
+  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Workspace Space</div>
+);
+
+export default WorkspaceProjectPage;
diff --git a/space/pages/_app.tsx b/space/pages/_app.tsx
new file mode 100644
index 00000000000..7e00f4d8cee
--- /dev/null
+++ b/space/pages/_app.tsx
@@ -0,0 +1,47 @@
+import Head from "next/head";
+import type { AppProps } from "next/app";
+import { ThemeProvider } from "next-themes";
+// styles
+import "styles/globals.css";
+import "styles/editor.css";
+import "styles/table.css";
+
+// contexts
+import { ToastContextProvider } from "contexts/toast.context";
+// mobx store provider
+import { MobxStoreProvider } from "lib/mobx/store-provider";
+import MobxStoreInit from "lib/mobx/store-init";
+// constants
+import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
+
+const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/spaces/";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <MobxStoreProvider>
+      <MobxStoreInit />
+      <Head>
+        <title>{SITE_TITLE}</title>
+        <meta property="og:site_name" content={SITE_NAME} />
+        <meta property="og:title" content={SITE_TITLE} />
+        <meta property="og:url" content={SITE_URL} />
+        <meta name="description" content={SITE_DESCRIPTION} />
+        <meta property="og:description" content={SITE_DESCRIPTION} />
+        <meta name="keywords" content={SITE_KEYWORDS} />
+        <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+        <link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${prefix}site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
+      </Head>
+      <ToastContextProvider>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </ToastContextProvider>
+    </MobxStoreProvider>
+  );
+}
+
+export default MyApp;
diff --git a/space/pages/_document.tsx b/space/pages/_document.tsx
new file mode 100644
index 00000000000..ca023f4a443
--- /dev/null
+++ b/space/pages/_document.tsx
@@ -0,0 +1,17 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className="antialiased bg-custom-background-100 w-100">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/space/pages/index.tsx b/space/pages/index.tsx
new file mode 100644
index 00000000000..1ff239253ac
--- /dev/null
+++ b/space/pages/index.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+// next
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
+
+  useEffect(() => {
+    if (next_path) router.push(`/login?next_path=${next_path}`);
+    else router.push(`/login`);
+  }, [router, next_path]);
+
+  return null;
+};
+
+export default Index;
diff --git a/space/pages/login/index.tsx b/space/pages/login/index.tsx
new file mode 100644
index 00000000000..9f20f099f4a
--- /dev/null
+++ b/space/pages/login/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+// components
+import { LoginView } from "components/views";
+
+const LoginPage = () => <LoginView />;
+
+export default LoginPage;
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
new file mode 100644
index 00000000000..12b09641bbb
--- /dev/null
+++ b/space/pages/onboarding/index.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { OnBoardingForm } from "components/accounts/onboarding-form";
+
+const imagePrefix = Boolean(parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) ? "/spaces" : "";
+
+const OnBoardingPage = () => {
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+
+  useEffect(() => {
+    const user = userStore?.currentUser;
+
+    if (!user) {
+      userStore.fetchCurrentUser();
+    }
+  }, [userStore]);
+
+  return (
+    <div className="h-screen w-full overflow-hidden bg-custom-background-100">
+      <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+        <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+          <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+          <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+            <div className="h-[30px] w-[30px]">
+              <img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane logo" />
+            </div>
+          </div>
+          <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+            {user?.email}
+          </div>
+        </div>
+        <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
+          <OnBoardingForm user={user} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default observer(OnBoardingPage);
diff --git a/space/pages/project-not-published/index.tsx b/space/pages/project-not-published/index.tsx
new file mode 100644
index 00000000000..985b7bc414a
--- /dev/null
+++ b/space/pages/project-not-published/index.tsx
@@ -0,0 +1,32 @@
+// next imports
+import Image from "next/image";
+import projectNotPublishedImage from "public/project-not-published.svg";
+
+const CustomProjectNotPublishedError = () => (
+  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
+    <div className="max-w-[700px] space-y-5">
+      <div className="flex items-center flex-col gap-3 text-center">
+        <div className="relative w-[240px] h-[240px]">
+          <Image src={projectNotPublishedImage} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="text-xl font-medium">
+          Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
+        </div>
+        <div className="text-sm text-custom-text-200">
+          If this is your project, login to your workspace to adjust its visibility settings and make it public.
+        </div>
+      </div>
+
+      <div className="text-center flex justify-center items-center">
+        <a
+          href={`https://app.plane.so/`}
+          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
+        >
+          Go to your Workspace
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default CustomProjectNotPublishedError;
diff --git a/space/postcss.config.js b/space/postcss.config.js
new file mode 100644
index 00000000000..129aa7f59ec
--- /dev/null
+++ b/space/postcss.config.js
@@ -0,0 +1 @@
+module.exports = require("tailwind-config-custom/postcss.config");
diff --git a/apps/app/public/404.svg b/space/public/404.svg
similarity index 100%
rename from apps/app/public/404.svg
rename to space/public/404.svg
diff --git a/apps/app/public/favicon/android-chrome-192x192.png b/space/public/favicon/android-chrome-192x192.png
similarity index 100%
rename from apps/app/public/favicon/android-chrome-192x192.png
rename to space/public/favicon/android-chrome-192x192.png
diff --git a/apps/app/public/favicon/android-chrome-512x512.png b/space/public/favicon/android-chrome-512x512.png
similarity index 100%
rename from apps/app/public/favicon/android-chrome-512x512.png
rename to space/public/favicon/android-chrome-512x512.png
diff --git a/apps/app/public/favicon/apple-touch-icon.png b/space/public/favicon/apple-touch-icon.png
similarity index 100%
rename from apps/app/public/favicon/apple-touch-icon.png
rename to space/public/favicon/apple-touch-icon.png
diff --git a/apps/app/public/favicon/favicon-16x16.png b/space/public/favicon/favicon-16x16.png
similarity index 100%
rename from apps/app/public/favicon/favicon-16x16.png
rename to space/public/favicon/favicon-16x16.png
diff --git a/apps/app/public/favicon/favicon-32x32.png b/space/public/favicon/favicon-32x32.png
similarity index 100%
rename from apps/app/public/favicon/favicon-32x32.png
rename to space/public/favicon/favicon-32x32.png
diff --git a/apps/app/public/favicon/favicon.ico b/space/public/favicon/favicon.ico
similarity index 100%
rename from apps/app/public/favicon/favicon.ico
rename to space/public/favicon/favicon.ico
diff --git a/apps/app/public/favicon/site.webmanifest b/space/public/favicon/site.webmanifest
similarity index 100%
rename from apps/app/public/favicon/site.webmanifest
rename to space/public/favicon/site.webmanifest
diff --git a/space/public/logos/github-black.svg b/space/public/logos/github-black.svg
new file mode 100644
index 00000000000..ad04a798e60
--- /dev/null
+++ b/space/public/logos/github-black.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2412 5049 c-452 -23 -877 -163 -1255 -412 -577 -381 -978 -976
+-1106 -1641 -109 -564 -37 -1123 209 -1621 243 -494 642 -903 1116 -1147 141
+-73 341 -154 403 -164 58 -9 109 19 133 73 18 40 18 60 12 286 l-7 243 -86
+-14 c-97 -15 -256 -9 -386 13 -105 19 -211 71 -278 139 -53 53 -67 76 -136
+229 -63 139 -135 231 -232 297 -66 46 -121 106 -117 128 6 30 48 43 121 38
+141 -10 288 -113 393 -274 72 -110 143 -179 230 -222 62 -31 79 -35 169 -38
+103 -4 207 12 291 44 41 16 43 18 58 85 19 86 56 164 106 228 l39 49 -82 11
+c-264 38 -452 102 -627 215 -229 148 -365 379 -431 731 -20 109 -23 389 -5
+492 29 167 98 319 200 445 l45 55 -20 62 c-52 168 -42 372 28 574 18 50 22 52
+103 48 118 -6 371 -108 543 -218 l71 -46 56 11 c30 6 87 18 127 27 271 58 655
+58 926 0 40 -9 97 -21 127 -27 l55 -10 95 58 c226 137 484 230 575 206 26 -7
+33 -17 53 -75 43 -125 55 -210 50 -351 -4 -95 -11 -148 -26 -195 l-21 -64 44
+-54 c89 -109 155 -244 192 -389 22 -89 25 -417 4 -544 -32 -198 -114 -406
+-210 -532 -165 -217 -464 -366 -843 -418 l-87 -12 39 -49 c47 -60 85 -137 106
+-221 14 -52 17 -137 20 -503 5 -490 5 -489 72 -521 46 -21 83 -15 229 42 738
+284 1320 932 1533 1703 55 198 90 474 90 701 0 118 -23 331 -50 473 -129 668
+-529 1262 -1107 1644 -370 244 -809 390 -1224 408 -68 3 -137 7 -154 8 -16 2
+-95 0 -173 -4z"/>
+</g>
+</svg>
diff --git a/space/public/logos/github-square.svg b/space/public/logos/github-square.svg
new file mode 100644
index 00000000000..a7836db8f48
--- /dev/null
+++ b/space/public/logos/github-square.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="70.000000pt" height="70.000000pt" viewBox="0 0 70.000000 70.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M54 689 c-51 -25 -54 -47 -54 -339 0 -294 3 -315 55 -338 18 -8 108
+-12 296 -12 293 0 314 3 337 55 16 34 17 553 1 588 -24 54 -44 57 -341 56
+-162 0 -281 -4 -294 -10z m438 -96 c59 -33 119 -105 137 -163 41 -136 -21
+-289 -143 -355 -49 -27 -66 -16 -64 42 1 26 -2 58 -6 71 -6 17 -4 22 11 22 32
+0 84 39 99 75 18 44 18 83 -1 119 -8 15 -15 46 -15 67 0 42 -9 47 -50 26 -32
+-17 -186 -15 -218 2 -35 19 -54 7 -51 -31 2 -18 -3 -43 -9 -55 -7 -12 -12 -43
+-12 -70 0 -66 27 -108 80 -124 22 -7 40 -16 40 -20 0 -48 -54 -53 -93 -9 -15
+17 -35 30 -44 30 -14 0 -14 -2 2 -20 10 -11 23 -30 29 -43 8 -14 26 -25 54
+-31 37 -9 42 -13 42 -38 0 -38 -25 -37 -86 4 -90 60 -141 164 -131 269 10 109
+97 222 196 254 72 23 168 14 233 -22z"/>
+</g>
+</svg>
diff --git a/space/public/logos/github-white.svg b/space/public/logos/github-white.svg
new file mode 100644
index 00000000000..90fe34d8be4
--- /dev/null
+++ b/space/public/logos/github-white.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+</g>
+</svg>
diff --git a/space/public/plane-logo.svg b/space/public/plane-logo.svg
new file mode 100644
index 00000000000..11179417cf8
--- /dev/null
+++ b/space/public/plane-logo.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155" xml:space="preserve">  <image id="image0" width="155" height="155" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJsAAACbCAYAAAB1YemMAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAT
+D0lEQVR42u2d244kSVKGP7OIzK4+0DszYgchodU8AvMUvMC+xl4ggQRCghtAAiHxCPsKwyV3+wYL
+4h6NhJCA3Z3pnkN3VWWGGxfuHulxykNVVoRnpf+tVlZEZpz/MDc3N/td7u7uAL4Afgn8MfAJe6Gd
+Jest7753/kNcd3nw+x5Me9vR237/+RRkh6+APwW+lru7uy+AX3OQZBGFbAUn4x3wpQL/zNFEKyh4
+ED4Bfil3d3d22nbFshU8CO/q+Y41QQo7lSyFXBeKT8qTK5gNBy2byaFfJM2bKdPNXcG147yWTQrR
+CqYxadn6Fs21y11C6ZTPFYk36fCzf/0ApcW/dJQnWDAbDvpsTrp/q/W/7/psWprSggkcbdncwY4C
+xWcr2Iv6MN88gfTE0O8Ah3y7h+6nEPxiUHy2gtlQyFYwGwrZCmZDbZN8i76a/z72Ooe+2wG+ntun
+Kj7axaJYtoLZUMhWMBumyXZy6k9BwX7sibM5Tzg5U5yt4OpRzFfBbKj35p+Vnl/BGTFt2QrRCs6M
++jCpCukKzoPisxXMhrpYroK5UCxbwWw4om608LHgPChMKpgNM1bEP284t8wQi+ox+fp5oJDtmUAS
+rh8uLF8GI2Q7UvilvcpL780+7Pyd9SxZfMA2JbRz4nkcuq/xOI2AuEA2h0iFwwv+pEVKmkHUoVi2
+h7qtNtVsHiBbNDtyoNnd87UJgdxKEz49lWpUBCxUw1n83fJE82d3ZXAHyXUc+azHBmvJd6hliH/0
+27qqtzzdFrYiZAKo4JB2txWex5XtzkRt7+5mw9WRLUWDsgGaZN2xNsCk+/Rs6mn2LdTUQx+sP4L0
+5lvbRggWzj/QlcDKYG15hRsOk+1QEuWF+XCp73KL8ou/+RW3fH7yfsz1LduE2KEdEEuMOFr8MNnE
+4MbVOIH7CtBbbuQ9r/S3/MNf/Tz8iGyeyVVbNmdwy+f8aD87edtBM8pUM3ok2Q4uD1EZOPNN6C0A
+H3CyopZ7nIuHyoNocAzZ+m/FhVmyfTABo8Y94J3LgWwIbNXYKnyo16AOldfcuxdQ7e1jLIKrtmwR
+JuOuwkDfJHnRpskGHYL1xXhaCbH+cdJzaM3S3nR8J46NGI0qRg22xrihsRUoWAMO6/SclwwCj5Ct
+/0Y9H0s2jfSaYp1stAy7ZRJSDny28Gsf0djj50r3OP2jT/1+jHSG4vAnWjmoUNb6AtlUmELTNIh0
+oyz9kY45yVcs2whSokXrtguZ+E+TcbL1aSbWtZCRNH2r2Y36a7ttazAnLJypeDtogpoiKOYEVdhK
+Q2XdbUWysmx9HLJkOXWuT4djorkcsUA5ov90RAVnjfdHxeFQT7gMkPednAPSa0KfQb2sTUjSLo2j
+9dmeN3YOuUfipx1CfLLt59i+H4P95yIH+pxmNjqyFpvT6MPN4bsVn20EJkcSLRPE843Dobni6snW
+mOGiJ25hENHJIE3H2uY2r8fZYOHUBcOCJbMwBOcQqUn7BEt2EC7fQZkV+2/XU0hUPMTC5mqV68Na
+t1MR7+eI9F4En0a6IwMaTJ71hzbjp/VW9O7fpO9l/d/v0FFpTwn9CFItEdwtlg0Y9kKTB5Fr2isE
+4mnrs7nMfc2r99nMnPd74n+T9k8IXDNpLb1l9jTNGaZG+6/jsxki0vHZlhyuKvpsT4Wn6EcMJjwZ
+N7yZvQ8tjtZnuxr0XrJDTv/e7O5zZMjG4S3OsK+FcdXN6JRlGEWx9I/G1eizLXsljzh6+jLkFeI7
+GVevzyYGvmTEtX+fZ8ecv7JJhstj5xub/tykaZ+tPtspZ72LYTnAxRkgpi1JGksTx1g+3PQZnToW
+3c8nHG4hobBFw99xOTdctc8GoyFUv87AxWTJs1iIp5nSXJMOhIRltfAeZGfZMrNcx77/J+93T0eg
+m7Ydf++S9ROks0BNOeZs+5klp96R06Dk5+JlZdk6iYyLNAWumzqR5oW1CZV6tiGjx0KT4LOGIa3O
+OIjl5bctrs8mLqRZa4jQJ2SbD8M6i9iU7hDHNrVDMO2FRA4HVA/4ZIfObYCGS0FWlg18st+saTD7
+4mdt52lPB2Ckh9j5rWm7jYqwkLJWFsiObA2GigyUL+aD279Ot/s3T3v3VgPrEhAOyIxsNU3jdSvu
+R32nHiasxMGmLHx/D6z5ZuI3E6QbaVq7a9J1NepucLxgI2tMb9g0Nw8qin4OyEafLfpu7h7+4q+/
+4n39Mz5uXyDco2yH6kMqnXNNm95YdBz32ep7yBbY+nOWLWv7gX/62z9hlZ5Hj8Cpg/0Q+yQOPm7g
+Qw1/+ff/wQ/bP+BOfuLPEx3Z57EqSJeHvF4xg6aBjX3GR/6I9/KSmnuELf1JeE16Da30L0UR0UAW
+5wlnDuQeCKTjv1kJvE4rxnt7iRSOpDs8wrD7Xk1RV1GH2tG1vkf4FLUzZWa0BdF5ha+mkBXZnPi+
+lQlJFF/9aXbGCLU3gl7RSdqKTnkbGggPRLbejxLX/U3BLMiKbDBWNJxk0aZNeNLL88vSWw7bGYFc
+sSkNB5He9gxjUueOwFcD57ON+x+3g8nz2XNfMkIW+mxq2s5BP9i3rRMJgumbKl6GcdenSHP22+20
+9389GEfc57M9BnG/wTMlXdp/f488gI2RNi/SLWrZxOkwKErPspl6fy0hjRMQU8ZHpeN2vfWWXG6r
+N3viwxD3qGY3PZqdocgz1orG+yZhXRWXQ01CLvILWemzxcKNXZGw+oh9KzO1I1sUKh7EVEdJtiOw
+RosoB5obORBvOwIupBmlL48k2buRLHub6wP5bG01q/iyVyeeZEZ+7mhedraHXUdhd6pPmV+/30d7
+/EsV9y8P7Y1OyfaKtJVVhg567rngIvTZXJKEuAtBjDejYxkcnfUy/L1MbZ/cD4kdjT0CgdPn3tt/
+YtmqieMlW3QX+5X6cUVPF87XLORFukXP5vGaGkkJ3th+2mzZM+ARL1ksMp4rAyPj6qqDp37g+8fz
+Nb053aZzeA7xt9Xghkr3TR5LjW7L1rvZtTo50O52v7e4fMDS9yyd7bFsx3US9t3/vCzXIWRztn0r
+t6/qafqk+ynaI0jIITYxBUdKxk7mx+NuVzf8cUZ0CJuvxtzF6LMNIkgTcqG7Xuf48hi6HYOp8MZI
+YBmObl416Rw8GTIlWXsPlj6BfciD5peHXB/q4sNVNmKZBn7Ok5/FMdVReUIsnQ6rFyjKLNCWzZ3t
+kyzLHtVYM5VB09WpqrIj/NaFcDH6bH0frN+ZGAxxT/luB4+UXGebHdI5k+HvMyAc+Jw+VfHKRX5F
+WNf9TQqz+cxfHnfpEXgy+bSLUATw09j2kVNFVYrFfbaxySdGo+5PiU7dwGW9f23qZG/2vW52SR7I
+Rp/N9YK5dnSzV6BYWyMq5rK1yhenzxatXH/26867EaL00h8bPabJnbxePXL9cvdLgo+289kUjX9n
+gGUNh+zvOeUsZ3sqsuxdz4xM9Nlc56/+gxF7auI9fZwthnbOfx1xGM3oZKg84bU8FNMdhJmIFiuN
+0o6BmlI5/x92D6iThJjsYxD6EOczLZzShObUxVmFZefT7IQLDk21fdIV7XYThvgbDfO4KzjdAo7K
+1SgaUqVO37fHFmSDE0cjNZtqS6O3bSF1LTVisehieSymz9apEWjz1ZRa4bW+otne4JoVt80tjbq9
+ZzFoosT5gIAkcw/ErA3bDbBXbsO9wdagUvW+jgpCRTVVkn9Cz9gJrIH//cb4oRa+/fiO7+5f0bgV
+0rzBbM2mvuvVX4wTX0QRqbwPFmJpyD2m37LVLXd6g1YOqX7kp2+NjYOXqjBjHO0QFg19qAWKmZ+v
+XQXe/Q7W8iM39o5qLbxwHzzZTmp+HBYIGgVr0gcaOxmvbMvtFlbuRVsJGD8frOCeTiQbrNmnnwmN
+wcvfW1GZ4JoNq00DtsHVzVFkMxMvO+8EF+Tn0Q+Y/oZNvUX0DVIL3/zff3Kz+h73Eao1KHK+nL5H
+YlF9NocvePGzYm5RlM9/X/nu/b/z5q3R2BtqueUh52g4XLRwnUwOba3qyu5wAh9iQocDGm8MJmN7
+J1q2RmHbwC2w3XzHeuVQfUdVrxFTVGzaZUlkuhzmCSeG+SXgFuNbNgY3zRuEmp++bfiMijcCa+eb
+71w6WnJ7f/dIO/sw/0ZCtVQs42uqe/9g9IbvP8JvfweffgaboONyamDXiffTfHOafBGTesMA9t/9
+479itvaTo5nDNYCz8WGcg75cXz7LYbrFqg3UH/nzP/s5b175VPDKhc99d7AzA3L3v8brC4S+E99M
+rQG9g08d1AZNBabbSWWoOYerFtNnM2/gfRMiUR4BcLf8ZL3m7R9651rXDxO1c+K5MTaWGvd1C2zt
+LXf2OQg0bktjzjehk2I2xxPOiaNaC6vqe17ob3hTw6c1rALZBJ9xfNS1TVRWGd4FeRlcksrBKpy/
+EchJhWXQSVjOZxPne5Gt464oDnXg5D7ITe3E9k5NOjRxOHNBG9eFmYK6N3xjr9jIKz7KZzhnNGyx
+wZM/ISwyQsSaCkfFC3vPqoGXDazMQqGLQ7UJgjdj2yfF1TL83pl3QAyoQm2tWqgXjdWPGQnrLjw2
+6pKRgDrcLB3XZjshHBEd7thEx0/p1wcAd7rmlhu21uCkwhgXIxRJHny6j/70fL1j1PoCtQbshlUD
+L7ZwYzutke2q6ZXeTRDOusd36TpLOjTq/dQGRwPUSDYD8wuSbUy/Xweypy1G032Oh45tG+osGxMa
+VwVVSKU/wGOSko3OeQyap6i72y7WONZgNWLeT/M5Z1Eq4shraq9/WAsRfdCoaZJ2CIzeFJILIht9
+NggWKe7+EftNiap7CCrAyjlW5hBnOIcnBdWOXBIfXrc53V88vTumNmGgHD9X+1ZAaUDUd2LCsMJR
+s+XFe9LRJ+lXlKXKTN6r88WOp475nh+Lpxj1MbBoKc48qqHJ7C6KYa7yvqMk1s0qEEsKpaM+bv/E
+270CSa2oeGqmrlOj3n80iWEYHcYnBteaJLOOxAyTq0p+PyHYsxAWJNv++src4P24pJsauXhs6GCh
+h57T6GhO51LwzJGFPtvlYLrgpW28jqhTfTTOlCgwN4plOwY9ob3lmvx8q92PQVb6bDlhkFPH4VSn
+Bx4p7Cg6gQ8QKIxoQyN54nJfk5kRW8VD2SezFuec8l0GuAh9tsUQM4Ql6j4r/ciMnbuU7pgaiGOe
+gRx4jgtg+TPIEtId+D5BKTJOLlswRBb6bLki9dFaoeQje5snEU6i/DKcfj97iQIZtzzPlylnQjr/
+af7Il2hwQfpsWWC09tSv2Fmy3fD6TCVDJ17Dcj54sWxPCGVfc3t9tz67gfirgNXQZu1dT8tRyGZ1
+aFqiDmlItg6yBa086VG+2+5LF/ZVCQjbuManblty2yXvQOw5cTH6bE8FdTVqa5wzn1ELiDhfzxxq
+Sfdefcj6sJ6KEPg8tpotKzZU0hCnl5ewmRhoXYGk87yPpKHbKTG2A9sviOu2bEaY1bgGa0jGCdpp
+fhQZZLp2Ym5iQ6nW+JX4hNCtOBpR2iOE5MejYnePJUomRINrJ1uAw8++7NqeZMxZU1yYqidFN947
+zIFtK7rU2NZrkBteuRs24jN165hYufSFz4xpsmUol3V2CChbKrZgDRLUP6QNZ/iM3YEoVifH3wbR
+kJ20qmG6xck9zlxX0qHNw3zm9zjBxemznROVwcr9yI19h9aBYK3GWZQ9cDS9bNyO0LTZqOK5P0BD
+I7fcff9fNLzjhYC6EJNTQBpfboj5WQafOa6yGW27PgKvqv+hZouFKnjnXJA6CMINzqjSTkC6HwFN
+iOhCbWc0YKINb99W8OJbXm++R29h9ZJg1ZqgaHQ9kNu7Zroz37Fqy1fnPAadKxFfO9DIinsXvlPv
+0Feh9iReVTIV2+j+bGT/ERVeAmHdgPwAr2tfPOzE2OoWUzcylXfv3p4c8Xf7t+9jxpZrcX22pSAi
+1GypQtjB8FbMrFfEYhaauv4Odt+3y0khsRpUsuL1quamBlclGh1RJw6HkyqLms45sJg+29zovN+d
+h1t11pnbfRlJ14xEcttOhO58vcExpUIMNg1UN9BEqSvrxjBzKSJ+alylz7avYXG9PDYYn2N9oOc2
+WnDv2o5Go76zIYYvhqY7hfc1YFF9ttwh4gX4xrU/HsYSXzsjtN0Iu577fxnefcGzwGL6bLki1dxw
+zlrr9hD47YaWK7WKGUnePjmui0kFi+IqOwjHQlVa67bvNwXHoVi23PHYeGdG8dKs9NlyxGMt12F/
+74j3/aR7rI/c/ulQLFvBbChkK5gNhWwFs6HosxXMhmLZCmZD0WcrmA3FshXMhqLPVjAbimUrmA1F
+n61gNhSmFMyGos9WMBuKZSuYDYVsBbOhkK1gNly9PlvBfCiWrWA2FLIVzIZpsmWkWFjwPHDV+mwF
+86KYr4LZsF/ro1i1grPBocC70e8K0QrODEXcvyFBnC7938JRYmwFp8P1/vMvcnu/+QL4NfDJ9Eb7
+UNy+gjF0ePMO+FLBfQ3uS3BfDdlYLFrBo/AO+BXwJbiv/x/ptJ+x8iKYoQAAACV0RVh0ZGF0ZTpj
+cmVhdGUAMjAyMy0wOC0yOFQxNzoxNzo1NyswMDowMNUDysIAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
+MjMtMDgtMjhUMTc6MTc6NTcrMDA6MDCkXnJ+AAAAAElFTkSuQmCC" />
+</svg>
diff --git a/apps/app/public/plane-logos/black-horizontal-with-blue-logo.svg b/space/public/plane-logos/black-horizontal-with-blue-logo.svg
similarity index 100%
rename from apps/app/public/plane-logos/black-horizontal-with-blue-logo.svg
rename to space/public/plane-logos/black-horizontal-with-blue-logo.svg
diff --git a/apps/app/public/plane-logos/blue-without-text.png b/space/public/plane-logos/blue-without-text.png
similarity index 100%
rename from apps/app/public/plane-logos/blue-without-text.png
rename to space/public/plane-logos/blue-without-text.png
diff --git a/apps/app/public/plane-logos/white-horizontal-with-blue-logo.svg b/space/public/plane-logos/white-horizontal-with-blue-logo.svg
similarity index 100%
rename from apps/app/public/plane-logos/white-horizontal-with-blue-logo.svg
rename to space/public/plane-logos/white-horizontal-with-blue-logo.svg
diff --git a/apps/app/public/plane-logos/white-horizontal.svg b/space/public/plane-logos/white-horizontal.svg
similarity index 100%
rename from apps/app/public/plane-logos/white-horizontal.svg
rename to space/public/plane-logos/white-horizontal.svg
diff --git a/apps/space/public/project-not-published.svg b/space/public/project-not-published.svg
similarity index 100%
rename from apps/space/public/project-not-published.svg
rename to space/public/project-not-published.svg
diff --git a/space/public/site.webmanifest.json b/space/public/site.webmanifest.json
new file mode 100644
index 00000000000..4c32ec6e385
--- /dev/null
+++ b/space/public/site.webmanifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Plane Space",
+  "short_name": "Plane Space",
+  "description": "Plane helps you plan your issues, cycles, and product modules.",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#f9fafb",
+  "theme_color": "#3f76ff",
+  "icons": [
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
diff --git a/space/public/something-went-wrong.svg b/space/public/something-went-wrong.svg
new file mode 100644
index 00000000000..bd51f7f4960
--- /dev/null
+++ b/space/public/something-went-wrong.svg
@@ -0,0 +1,3 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.4226 95.3614C46.3393 95.3614 40.6853 94.2699 35.4608 92.0871C30.2363 89.9043 25.6917 86.8805 21.827 83.0158C17.9623 79.1511 14.9385 74.6065 12.7557 69.3819C10.5728 64.1574 9.48141 58.5035 9.48141 52.4202C9.48141 47.5535 10.1971 42.9731 11.6285 38.679C13.0598 34.3849 15.0638 30.4486 17.6402 26.8702L5.93876 15.1687C5.29464 14.5246 4.99048 13.7552 5.02626 12.8606C5.06205 11.966 5.402 11.1967 6.04612 10.5525C6.69023 9.90842 7.4596 9.58636 8.3542 9.58636C9.24881 9.58636 10.0182 9.90842 10.6623 10.5525L92.6799 92.6775C93.3241 93.3217 93.6461 94.0731 93.6461 94.9319C93.6461 95.7908 93.3241 96.5422 92.6799 97.1864C92.0358 97.8305 91.2665 98.1525 90.3718 98.1525C89.4772 98.1525 88.7079 97.8305 88.0638 97.1864L77.9726 87.2025C74.3942 89.779 70.4579 91.7829 66.1638 93.2143C61.8696 94.6457 57.2893 95.3614 52.4226 95.3614ZM52.4226 88.9202C56.3589 88.9202 60.0804 88.3655 63.5873 87.2562C67.0942 86.1469 70.3505 84.5903 73.3564 82.5864L54.3549 63.5849L48.3432 69.5967C47.6991 70.2408 46.9476 70.5807 46.0888 70.6165C45.2299 70.6523 44.4785 70.3481 43.8344 69.704L30.7373 56.4996C30.0932 55.8555 29.789 55.0503 29.8248 54.0842C29.8606 53.118 30.2005 52.3128 30.8446 51.6687C31.4888 51.0246 32.2939 50.7025 33.2601 50.7025C34.2263 50.7025 35.0314 51.0246 35.6755 51.6687L46.0888 62.1893L49.5241 58.754L22.2564 31.4864C20.2525 34.4922 18.6959 37.7486 17.5866 41.2555C16.4772 44.7623 15.9226 48.4839 15.9226 52.4202C15.9226 62.7976 19.4116 71.4753 26.3895 78.4533C33.3674 85.4312 42.0451 88.9202 52.4226 88.9202ZM87.2049 77.9702L82.5888 73.354C84.5927 70.3481 86.1493 67.0918 87.2586 63.5849C88.3679 60.078 88.9226 56.3565 88.9226 52.4202C88.9226 42.0427 85.4336 33.365 78.4557 26.3871C71.4777 19.4092 62.8 15.9202 52.4226 15.9202C48.4863 15.9202 44.7647 16.4748 41.2579 17.5842C37.751 18.6935 34.4946 20.2501 31.4888 22.254L26.8726 17.6378C30.451 15.0614 34.3873 13.0574 38.6814 11.6261C42.9755 10.1947 47.5559 9.479 52.4226 9.479C58.4343 9.479 64.0525 10.5883 69.277 12.8069C74.5015 15.0256 79.0461 18.0672 82.9108 21.9319C86.7755 25.7967 89.8172 30.3413 92.0358 35.5658C94.2544 40.7903 95.3638 46.4084 95.3638 52.4202C95.3638 57.2868 94.6481 61.8672 93.2167 66.1614C91.7853 70.4555 89.7814 74.3917 87.2049 77.9702ZM63.6946 54.3525L58.7564 49.5217L69.1696 39.1084C69.8138 38.4643 70.601 38.1422 71.5314 38.1422C72.4618 38.1422 73.2848 38.4643 74.0005 39.1084C74.7162 39.8241 75.0741 40.6471 75.0741 41.5775C75.0741 42.5079 74.7162 43.331 74.0005 44.0466L63.6946 54.3525Z" fill="#B9B9B9"/>
+</svg>
diff --git a/space/public/user-logged-in.svg b/space/public/user-logged-in.svg
new file mode 100644
index 00000000000..e20b49e828b
--- /dev/null
+++ b/space/public/user-logged-in.svg
@@ -0,0 +1,3 @@
+<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5747 100.561C16.241 100.561 15.123 100.11 14.2207 99.2074C13.3184 98.3051 12.8672 97.187 12.8672 95.8533V88.9824C12.8672 86.218 13.5633 83.8025 14.9556 81.7359C16.3478 79.6694 18.1957 78.0518 20.4995 76.8832C24.9266 74.6263 29.6007 72.8 34.5217 71.4044C39.4429 70.0089 45.2455 69.3112 51.9296 69.3112C54.5337 69.3112 56.956 69.4164 59.1962 69.6267C61.4364 69.837 63.528 70.1525 65.4711 70.5732L58.5603 77.484C57.6054 77.3104 56.5721 77.2069 55.4603 77.1736C54.3485 77.1401 53.1716 77.1234 51.9296 77.1234C45.7664 77.1234 40.3661 77.8112 35.7286 79.1867C31.0912 80.5622 27.21 82.1181 24.085 83.8542C22.9032 84.4885 22.0401 85.2297 21.4958 86.0777C20.9517 86.9258 20.6796 87.8941 20.6796 88.9824V92.7484H52.23L60.0423 100.561H17.5747ZM80.3283 102.484C79.7051 102.484 79.1231 102.384 78.5822 102.183C78.0413 101.983 77.5241 101.636 77.0306 101.143L66.9135 91.0257C66.1925 90.3046 65.8235 89.3981 65.8068 88.3064C65.7901 87.2147 66.159 86.2916 66.9135 85.5371C67.6681 84.7825 68.5829 84.4052 69.6579 84.4052C70.7329 84.4052 71.6477 84.7825 72.4022 85.5371L80.335 93.4698L103.893 69.9121C104.614 69.1909 105.52 68.822 106.612 68.8053C107.704 68.7886 108.627 69.1575 109.381 69.9121C110.136 70.6666 110.513 71.5814 110.513 72.6564C110.513 73.7314 110.136 74.6461 109.381 75.4007L83.6302 101.152C83.1428 101.639 82.6264 101.983 82.0811 102.183C81.5358 102.384 80.9515 102.484 80.3283 102.484ZM51.9296 60.8974C46.9166 60.8974 42.6252 59.1125 39.0553 55.5427C35.4855 51.9728 33.7007 47.6814 33.7007 42.6685C33.7007 37.6555 35.4855 33.3641 39.0553 29.7943C42.6252 26.2244 46.9166 24.4395 51.9296 24.4395C56.9425 24.4395 61.2339 26.2244 64.8038 29.7943C68.3737 33.3641 70.1586 37.6555 70.1586 42.6685C70.1586 47.6814 68.3737 51.9728 64.8038 55.5427C61.2339 59.1125 56.9425 60.8974 51.9296 60.8974ZM51.9296 53.0852C54.7941 53.0852 57.2464 52.0652 59.2863 50.0253C61.3263 47.9853 62.3462 45.5331 62.3462 42.6685C62.3462 39.8039 61.3263 37.3517 59.2863 35.3117C57.2464 33.2718 54.7941 32.2518 51.9296 32.2518C49.065 32.2518 46.6127 33.2718 44.5728 35.3117C42.5329 37.3517 41.5129 39.8039 41.5129 42.6685C41.5129 45.5331 42.5329 47.9853 44.5728 50.0253C46.6127 52.0652 49.065 53.0852 51.9296 53.0852Z" fill="#9D9D9D"/>
+</svg>
diff --git a/space/services/api.service.ts b/space/services/api.service.ts
new file mode 100644
index 00000000000..d3ad3949bac
--- /dev/null
+++ b/space/services/api.service.ts
@@ -0,0 +1,108 @@
+// axios
+import axios from "axios";
+// js cookie
+import Cookies from "js-cookie";
+
+abstract class APIService {
+  protected baseURL: string;
+  protected headers: any = {};
+
+  constructor(_baseURL: string) {
+    this.baseURL = _baseURL;
+  }
+
+  setRefreshToken(token: string) {
+    Cookies.set("refreshToken", token);
+  }
+
+  getRefreshToken() {
+    return Cookies.get("refreshToken");
+  }
+
+  purgeRefreshToken() {
+    Cookies.remove("refreshToken", { path: "/" });
+  }
+
+  setAccessToken(token: string) {
+    Cookies.set("accessToken", token);
+  }
+
+  getAccessToken() {
+    return Cookies.get("accessToken");
+  }
+
+  purgeAccessToken() {
+    Cookies.remove("accessToken", { path: "/" });
+  }
+
+  getHeaders() {
+    return {
+      Authorization: `Bearer ${this.getAccessToken()}`,
+    };
+  }
+
+  get(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: this.baseURL + url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  post(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  put(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "put",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  patch(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "patch",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  delete(url: string, data?: any, config = {}): Promise<any> {
+    return axios({
+      method: "delete",
+      url: this.baseURL + url,
+      data: data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" } : {},
+      ...config,
+    });
+  }
+
+  request(config = {}) {
+    return axios(config);
+  }
+}
+
+export default APIService;
diff --git a/space/services/app-config.service.ts b/space/services/app-config.service.ts
new file mode 100644
index 00000000000..713cda3da1b
--- /dev/null
+++ b/space/services/app-config.service.ts
@@ -0,0 +1,30 @@
+// services
+import APIService from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface IEnvConfig {
+  github: string;
+  google: string;
+  github_app_name: string | null;
+  email_password_login: boolean;
+  magic_login: boolean;
+}
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<IEnvConfig> {
+    return this.get("/api/configs/", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/app/services/authentication.service.ts b/space/services/authentication.service.ts
similarity index 85%
rename from apps/app/services/authentication.service.ts
rename to space/services/authentication.service.ts
index e4a33bff8a0..4d861994f0f 100644
--- a/apps/app/services/authentication.service.ts
+++ b/space/services/authentication.service.ts
@@ -1,12 +1,10 @@
 // services
 import APIService from "services/api.service";
-import { ICurrentUserResponse } from "types";
-
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+import { API_BASE_URL } from "helpers/common.helper";
 
 class AuthService extends APIService {
   constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+    super(API_BASE_URL);
   }
 
   async emailLogin(data: any) {
@@ -36,7 +34,7 @@ class AuthService extends APIService {
   async socialAuth(data: any): Promise<{
     access_token: string;
     refresh_toke: string;
-    user: ICurrentUserResponse;
+    user: any;
   }> {
     return this.post("/api/social-auth/", data, { headers: {} })
       .then((response) => {
@@ -57,6 +55,14 @@ class AuthService extends APIService {
       });
   }
 
+  async forgotPassword(data: { email: string }): Promise<any> {
+    return this.post(`/api/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
   async magicSignIn(data: any) {
     const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
     if (response?.status === 200) {
@@ -82,4 +88,6 @@ class AuthService extends APIService {
   }
 }
 
-export default new AuthService();
+const authService = new AuthService();
+
+export default authService;
diff --git a/space/services/file.service.ts b/space/services/file.service.ts
new file mode 100644
index 00000000000..1ba4cd4d292
--- /dev/null
+++ b/space/services/file.service.ts
@@ -0,0 +1,99 @@
+import APIService from "services/api.service";
+import { API_BASE_URL } from "helpers/common.helper";
+
+interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+class FileService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.deleteImage = this.deleteImage.bind(this);
+  }
+
+  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
+    return async (file: File) => {
+      const formData = new FormData();
+      formData.append("asset", file);
+      formData.append("attributes", JSON.stringify({}));
+
+      const data = await this.uploadFile(workspaceSlug, formData);
+      return data.asset;
+    };
+  }
+
+  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
+    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteFile(workspaceId: string, assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async uploadUserFile(file: FormData): Promise<any> {
+    return this.mediaUpload(`/api/users/file-assets/`, file)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserFile(assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/users/file-assets/${assetId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const fileService = new FileService();
+
+export default fileService;
diff --git a/space/services/issue.service.ts b/space/services/issue.service.ts
new file mode 100644
index 00000000000..5feb1b00b92
--- /dev/null
+++ b/space/services/issue.service.ts
@@ -0,0 +1,169 @@
+// services
+import APIService from "services/api.service";
+import { API_BASE_URL } from "helpers/common.helper";
+
+class IssueService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getPublicIssues(workspace_slug: string, project_slug: string, params: any): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueVotes(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueVote(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueReaction(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reactionId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/${reactionId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueComment(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueComment(workspaceSlug: string, projectId: string, issueId: string, commentId: string): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    data: {
+      reaction: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reactionHex: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/${reactionHex}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default IssueService;
diff --git a/space/services/project.service.ts b/space/services/project.service.ts
new file mode 100644
index 00000000000..0d6eca951b4
--- /dev/null
+++ b/space/services/project.service.ts
@@ -0,0 +1,19 @@
+// services
+import APIService from "services/api.service";
+import { API_BASE_URL } from "helpers/common.helper";
+
+class ProjectService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getProjectSettings(workspace_slug: string, project_slug: string): Promise<any> {
+    return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+export default ProjectService;
diff --git a/space/services/user.service.ts b/space/services/user.service.ts
new file mode 100644
index 00000000000..21e9f941e59
--- /dev/null
+++ b/space/services/user.service.ts
@@ -0,0 +1,27 @@
+// services
+import APIService from "services/api.service";
+import { API_BASE_URL } from "helpers/common.helper";
+
+class UserService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async currentUser(): Promise<any> {
+    return this.get("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateMe(data: any): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default UserService;
diff --git a/space/store/issue.ts b/space/store/issue.ts
new file mode 100644
index 00000000000..d47336984cb
--- /dev/null
+++ b/space/store/issue.ts
@@ -0,0 +1,103 @@
+import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
+// services
+import IssueService from "services/issue.service";
+// store
+import { RootStore } from "./root";
+// types
+// import { IssueDetailType, TIssueBoardKeys } from "types/issue";
+import { IIssue, IIssueState, IIssueLabel } from "types/issue";
+
+export interface IIssueStore {
+  loader: boolean;
+  error: any;
+  // issue options
+  issues: IIssue[] | null;
+  states: IIssueState[] | null;
+  labels: IIssueLabel[] | null;
+  // filtering
+  filteredStates: string[];
+  filteredLabels: string[];
+  filteredPriorities: string[];
+  // service
+  issueService: any;
+  // actions
+  fetchPublicIssues: (workspace_slug: string, project_slug: string, params: any) => void;
+  getCountOfIssuesByState: (state: string) => number;
+  getFilteredIssuesByState: (state: string) => IIssue[];
+}
+
+class IssueStore implements IIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  states: IIssueState[] | null = [];
+  labels: IIssueLabel[] | null = [];
+
+  filteredStates: string[] = [];
+  filteredLabels: string[] = [];
+  filteredPriorities: string[] = [];
+
+  issues: IIssue[] | null = [];
+  issue_detail: any = {};
+
+  rootStore: RootStore;
+  issueService: any;
+
+  constructor(_rootStore: any) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+      // issue options
+      states: observable.ref,
+      labels: observable.ref,
+      // filtering
+      filteredStates: observable.ref,
+      filteredLabels: observable.ref,
+      filteredPriorities: observable.ref,
+      // issues
+      issues: observable.ref,
+      issue_detail: observable.ref,
+      // actions
+      fetchPublicIssues: action,
+      getFilteredIssuesByState: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  fetchPublicIssues = async (workspaceSlug: string, projectId: string, params: any) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
+
+      if (response) {
+        const _states: IIssueState[] = [...response?.states];
+        const _labels: IIssueLabel[] = [...response?.labels];
+        const _issues: IIssue[] = [...response?.issues];
+        runInAction(() => {
+          this.states = _states;
+          this.labels = _labels;
+          this.issues = _issues;
+          this.loader = false;
+        });
+      }
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  // computed
+  getCountOfIssuesByState(state_id: string): number {
+    return this.issues?.filter((issue) => issue.state == state_id).length || 0;
+  }
+
+  getFilteredIssuesByState = (state_id: string): IIssue[] | [] =>
+    this.issues?.filter((issue) => issue.state == state_id) || [];
+}
+
+export default IssueStore;
diff --git a/space/store/issue_details.ts b/space/store/issue_details.ts
new file mode 100644
index 00000000000..346206e94ee
--- /dev/null
+++ b/space/store/issue_details.ts
@@ -0,0 +1,434 @@
+import { makeObservable, observable, action, runInAction } from "mobx";
+import { v4 as uuidv4 } from "uuid";
+// store
+import { RootStore } from "./root";
+// services
+import IssueService from "services/issue.service";
+import { IIssue, IVote } from "types/issue";
+
+export type IPeekMode = "side" | "modal" | "full";
+
+export interface IIssueDetailStore {
+  loader: boolean;
+  error: any;
+  // peek info
+  peekId: string | null;
+  peekMode: IPeekMode;
+  details: {
+    [key: string]: IIssue;
+  };
+  // peek actions
+  setPeekId: (issueId: string | null) => void;
+  setPeekMode: (mode: IPeekMode) => void;
+  // issue details
+  fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
+  // issue comments
+  addIssueComment: (workspaceId: string, projectId: string, issueId: string, data: any) => Promise<void>;
+  updateIssueComment: (
+    workspaceId: string,
+    projectId: string,
+    issueId: string,
+    comment_id: string,
+    data: any
+  ) => Promise<any>;
+  deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void;
+  addCommentReaction: (
+    workspaceId: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reactionHex: string
+  ) => void;
+  removeCommentReaction: (
+    workspaceId: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reactionHex: string
+  ) => void;
+  // issue reactions
+  addIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
+  removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
+  // issue votes
+  addIssueVote: (workspaceId: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => Promise<void>;
+  removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
+}
+
+class IssueDetailStore implements IssueDetailStore {
+  loader: boolean = false;
+  error: any = null;
+  peekId: string | null = null;
+  peekMode: IPeekMode = "side";
+  details: {
+    [key: string]: IIssue;
+  } = {};
+  issueService;
+  rootStore: RootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+      // peek
+      peekId: observable.ref,
+      peekMode: observable.ref,
+      details: observable.ref,
+      // actions
+      setPeekId: action,
+      setPeekMode: action,
+      fetchIssueDetails: action,
+      addIssueComment: action,
+      updateIssueComment: action,
+      deleteIssueComment: action,
+      addCommentReaction: action,
+      removeCommentReaction: action,
+      addIssueReaction: action,
+      removeIssueReaction: action,
+      addIssueVote: action,
+      removeIssueVote: action,
+    });
+    this.issueService = new IssueService();
+    this.rootStore = _rootStore;
+  }
+
+  setPeekId = (issueId: string | null) => {
+    this.peekId = issueId;
+  };
+
+  setPeekMode = (mode: IPeekMode) => {
+    this.peekMode = mode;
+  };
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
+      const commentsResponse = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      if (issueDetails) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...(this.details[issueId] ?? issueDetails),
+              comments: commentsResponse,
+            },
+          };
+        });
+      }
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  addIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
+      const issueCommentResponse = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data);
+      if (issueDetails) {
+        runInAction(() => {
+          this.details = {
+            ...this.details,
+            [issueId]: {
+              ...issueDetails,
+              comments: [...this.details[issueId].comments, issueCommentResponse],
+            },
+          };
+        });
+      }
+      return issueCommentResponse;
+    } catch (error) {
+      console.log("Failed to add issue comment");
+      throw error;
+    }
+  };
+
+  updateIssueComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: this.details[issueId].comments.map((c) => ({
+              ...c,
+              ...(c.id === commentId ? data : {}),
+            })),
+          },
+        };
+      });
+
+      await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, commentId, data);
+    } catch (error) {
+      const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: issueComments,
+          },
+        };
+      });
+    }
+  };
+
+  deleteIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, comment_id: string) => {
+    try {
+      await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, comment_id);
+      const remainingComments = this.details[issueId].comments.filter((c) => c.id != comment_id);
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: remainingComments,
+          },
+        };
+      });
+    } catch (error) {
+      console.log("Failed to add issue vote");
+    }
+  };
+
+  addCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reactionHex: string
+  ) => {
+    const newReaction = {
+      id: uuidv4(),
+      comment: commentId,
+      reaction: reactionHex,
+      actor_detail: this.rootStore.user.currentActor,
+    };
+    const newComments = this.details[issueId].comments.map((comment) => ({
+      ...comment,
+      comment_reactions:
+        comment.id === commentId ? [...comment.comment_reactions, newReaction] : comment.comment_reactions,
+    }));
+
+    try {
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: [...newComments],
+          },
+        };
+      });
+
+      await this.issueService.createCommentReaction(workspaceSlug, projectId, commentId, {
+        reaction: reactionHex,
+      });
+    } catch (error) {
+      const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: issueComments,
+          },
+        };
+      });
+    }
+  };
+
+  removeCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reactionHex: string
+  ) => {
+    try {
+      const comment = this.details[issueId].comments.find((c) => c.id === commentId);
+      const newCommentReactions = comment?.comment_reactions.filter((r) => r.reaction !== reactionHex) ?? [];
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: this.details[issueId].comments.map((c) => ({
+              ...c,
+              comment_reactions: c.id === commentId ? newCommentReactions : c.comment_reactions,
+            })),
+          },
+        };
+      });
+
+      await this.issueService.deleteCommentReaction(workspaceSlug, projectId, commentId, reactionHex);
+    } catch (error) {
+      const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            comments: issueComments,
+          },
+        };
+      });
+    }
+  };
+
+  addIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
+    try {
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            reactions: [
+              ...this.details[issueId].reactions,
+              {
+                id: uuidv4(),
+                issue: issueId,
+                reaction: reactionHex,
+                actor_detail: this.rootStore.user.currentActor,
+              },
+            ],
+          },
+        };
+      });
+
+      await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, {
+        reaction: reactionHex,
+      });
+    } catch (error) {
+      console.log("Failed to add issue vote");
+      const issueReactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            reactions: issueReactions,
+          },
+        };
+      });
+    }
+  };
+
+  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
+    try {
+      const newReactions = this.details[issueId].reactions.filter(
+        (_r) => !(_r.reaction === reactionHex && _r.actor_detail.id === this.rootStore.user.currentUser?.id)
+      );
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            reactions: newReactions,
+          },
+        };
+      });
+
+      await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionHex);
+    } catch (error) {
+      console.log("Failed to remove issue reaction");
+      const reactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            reactions: reactions,
+          },
+        };
+      });
+    }
+  };
+
+  addIssueVote = async (workspaceSlug: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => {
+    const newVote: IVote = {
+      actor: this.rootStore.user.currentUser?.id ?? "",
+      actor_detail: this.rootStore.user.currentActor,
+      issue: issueId,
+      project: projectId,
+      workspace: workspaceSlug,
+      vote: data.vote,
+    };
+
+    const filteredVotes = this.details[issueId].votes.filter((v) => v.actor !== this.rootStore.user.currentUser?.id);
+
+    try {
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            votes: [...filteredVotes, newVote],
+          },
+        };
+      });
+
+      await this.issueService.createIssueVote(workspaceSlug, projectId, issueId, data);
+    } catch (error) {
+      console.log("Failed to add issue vote");
+      const issueVotes = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            votes: issueVotes,
+          },
+        };
+      });
+    }
+  };
+
+  removeIssueVote = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const newVotes = this.details[issueId].votes.filter((v) => v.actor !== this.rootStore.user.currentUser?.id);
+
+    try {
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            votes: newVotes,
+          },
+        };
+      });
+
+      await this.issueService.deleteIssueVote(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      console.log("Failed to remove issue vote");
+      const issueVotes = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.details = {
+          ...this.details,
+          [issueId]: {
+            ...this.details[issueId],
+            votes: issueVotes,
+          },
+        };
+      });
+    }
+  };
+}
+
+export default IssueDetailStore;
diff --git a/space/store/mentions.store.ts b/space/store/mentions.store.ts
new file mode 100644
index 00000000000..ca4a1a3c1e8
--- /dev/null
+++ b/space/store/mentions.store.ts
@@ -0,0 +1,45 @@
+import { IMentionHighlight } from "@plane/lite-text-editor";
+import { RootStore } from "./root";
+import { computed, makeObservable } from "mobx";
+
+export interface IMentionsStore {
+    // mentionSuggestions: IMentionSuggestion[];
+    mentionHighlights: IMentionHighlight[];
+}
+
+export class MentionsStore implements IMentionsStore{
+
+    // root store
+    rootStore;
+
+    constructor(_rootStore: RootStore ){
+
+        // 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.currentUser;
+        return user ? [user.id] : []
+    }
+}
\ No newline at end of file
diff --git a/space/store/project.ts b/space/store/project.ts
new file mode 100644
index 00000000000..ddd589f9a53
--- /dev/null
+++ b/space/store/project.ts
@@ -0,0 +1,88 @@
+// mobx
+import { observable, action, makeObservable, runInAction } from "mobx";
+// service
+import ProjectService from "services/project.service";
+// types
+import { IWorkspace, IProject, IProjectSettings } from "types/project";
+
+export interface IProjectStore {
+  loader: boolean;
+  error: any | null;
+  workspace: IWorkspace | null;
+  project: IProject | null;
+  deploySettings: IProjectSettings | null;
+  viewOptions: any;
+  activeBoard: string | null;
+  fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
+  setActiveBoard: (value: string) => void;
+}
+
+class ProjectStore implements IProjectStore {
+  loader: boolean = false;
+  error: any | null = null;
+  // data
+  workspace: IWorkspace | null = null;
+  project: IProject | null = null;
+  deploySettings: IProjectSettings | null = null;
+  viewOptions: any = null;
+  activeBoard: string | null = null;
+  // root store
+  rootStore;
+  // service
+  projectService;
+
+  constructor(_rootStore: any | null = null) {
+    makeObservable(this, {
+      // loaders and error observables
+      loader: observable,
+      error: observable.ref,
+      // observable
+      workspace: observable.ref,
+      project: observable.ref,
+      deploySettings: observable.ref,
+      viewOptions: observable.ref,
+      activeBoard: observable.ref,
+      // actions
+      fetchProjectSettings: action,
+      setActiveBoard: action,
+      // computed
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+  }
+
+  fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.getProjectSettings(workspace_slug, project_slug);
+
+      if (response) {
+        const _project: IProject = { ...response?.project_details };
+        const _workspace: IWorkspace = { ...response?.workspace_detail };
+        const _viewOptions = { ...response?.views };
+        const _deploySettings = { ...response };
+        runInAction(() => {
+          this.project = _project;
+          this.workspace = _workspace;
+          this.viewOptions = _viewOptions;
+          this.deploySettings = _deploySettings;
+          this.loader = false;
+        });
+      }
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  setActiveBoard = (boardValue: string) => {
+    this.activeBoard = boardValue;
+  };
+}
+
+export default ProjectStore;
diff --git a/space/store/root.ts b/space/store/root.ts
new file mode 100644
index 00000000000..22b951d2070
--- /dev/null
+++ b/space/store/root.ts
@@ -0,0 +1,26 @@
+// mobx lite
+import { enableStaticRendering } from "mobx-react-lite";
+// store imports
+import UserStore from "./user";
+import IssueStore, { IIssueStore } from "./issue";
+import ProjectStore, { IProjectStore } from "./project";
+import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
+import { IMentionsStore, MentionsStore } from "./mentions.store";
+
+enableStaticRendering(typeof window === "undefined");
+
+export class RootStore {
+  user: UserStore;
+  issue: IIssueStore;
+  issueDetails: IIssueDetailStore;
+  project: IProjectStore;
+  mentionsStore: IMentionsStore;
+
+  constructor() {
+    this.user = new UserStore(this);
+    this.issue = new IssueStore(this);
+    this.project = new ProjectStore(this);
+    this.issueDetails = new IssueDetailStore(this);
+    this.mentionsStore = new MentionsStore(this);
+  }
+}
diff --git a/space/store/user.ts b/space/store/user.ts
new file mode 100644
index 00000000000..e2b6428ef94
--- /dev/null
+++ b/space/store/user.ts
@@ -0,0 +1,100 @@
+// mobx
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// service
+import UserService from "services/user.service";
+// types
+import { IUser } from "types/user";
+
+export interface IUserStore {
+  loader: boolean;
+  error: any | null;
+  currentUser: any | null;
+  fetchCurrentUser: () => void;
+  currentActor: () => any;
+}
+
+class UserStore implements IUserStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  currentUser: IUser | null = null;
+  // root store
+  rootStore;
+  // service
+  userService;
+
+  constructor(_rootStore: any) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      currentUser: observable.ref,
+      // actions
+      setCurrentUser: action,
+      // computed
+      currentActor: computed,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+  }
+
+  setCurrentUser = (user: any) => {
+    runInAction(() => {
+      this.currentUser = { ...user };
+    });
+  };
+
+  get currentActor(): any {
+    return {
+      avatar: this.currentUser?.avatar,
+      display_name: this.currentUser?.display_name,
+      first_name: this.currentUser?.first_name,
+      id: this.currentUser?.id,
+      is_bot: false,
+      last_name: this.currentUser?.last_name,
+    };
+  }
+
+  /**
+   *
+   * @param callback
+   * @description A wrapper function to check user authentication; it redirects to the login page if not authenticated, otherwise, it executes a callback.
+   * @example this.requiredLogin(() => { // do something });
+   */
+
+  requiredLogin = (callback: () => void) => {
+    if (this.currentUser) {
+      callback();
+      return;
+    }
+
+    const currentPath = window.location.pathname + window.location.search;
+    this.fetchCurrentUser()
+      .then(() => {
+        if (!this.currentUser) window.location.href = `/?next_path=${currentPath}`;
+        else callback();
+      })
+      .catch(() => (window.location.href = `/?next_path=${currentPath}`));
+  };
+
+  fetchCurrentUser = async () => {
+    try {
+      this.loader = true;
+      this.error = null;
+      const response = await this.userService.currentUser();
+      if (response) {
+        runInAction(() => {
+          this.loader = false;
+          this.currentUser = response;
+        });
+      }
+    } catch (error) {
+      console.error("Failed to fetch current user", error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+}
+
+export default UserStore;
diff --git a/space/styles/editor.css b/space/styles/editor.css
new file mode 100644
index 00000000000..85d881eeb46
--- /dev/null
+++ b/space/styles/editor.css
@@ -0,0 +1,231 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: rgb(var(--color-background-100));
+  margin: 0;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  border: 2px solid rgb(var(--color-text-100));
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-200));
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+  position: relative;
+  width: 35%;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 45%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid rgba(var(--color-text-200));
+    border-top-color: rgba(var(--color-text-800));
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#editor-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    border: 1px solid rgb(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgb(var(--color-border-200));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+  padding: 0px 1px;
+  margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/space/styles/globals.css b/space/styles/globals.css
new file mode 100644
index 00000000000..ea04bcda602
--- /dev/null
+++ b/space/styles/globals.css
@@ -0,0 +1,234 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(var(--color-background-100));
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-80));
+}
+
+.hide-vertical-scrollbar::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.hide-horizontal-scrollbar::-webkit-scrollbar {
+  height: 0 !important;
+}
+
+.hide-both-scrollbars::-webkit-scrollbar {
+  height: 0 !important;
+  width: 0 !important;
+}
diff --git a/space/styles/table.css b/space/styles/table.css
new file mode 100644
index 00000000000..ad88fd10ec8
--- /dev/null
+++ b/space/styles/table.css
@@ -0,0 +1,194 @@
+.tableWrapper {
+  overflow-x: auto;
+  padding: 2px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tableWrapper table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+  margin-bottom: 3rem;
+  border: 1px solid rgba(var(--color-border-200));
+  width: 100%;
+}
+
+.tableWrapper table td,
+.tableWrapper table th {
+  min-width: 1em;
+  border: 1px solid rgba(var(--color-border-200));
+  padding: 10px 15px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  transition: background-color 0.3s ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.tableWrapper table td > *,
+.tableWrapper table th > * {
+  margin: 0 !important;
+  padding: 0.25rem 0 !important;
+}
+
+.tableWrapper table td.has-focus,
+.tableWrapper table th.has-focus {
+  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
+}
+
+.tableWrapper table th {
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(var(--color-primary-100));
+}
+
+.tableWrapper table th * {
+  font-weight: 600;
+}
+
+.tableWrapper table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--color-primary-300), 0.1);
+  pointer-events: none;
+}
+
+.tableWrapper table .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  z-index: 99;
+  background-color: rgba(var(--color-primary-400));
+  pointer-events: none;
+}
+
+.tableWrapper .tableControls {
+  position: absolute;
+}
+
+.tableWrapper .tableControls .columnsControl,
+.tableWrapper .tableControls .rowsControl {
+  transition: opacity ease-in 100ms;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableWrapper .tableControls .columnsControl {
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+.tableWrapper .tableControls .columnsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  width: 30px;
+  height: 15px;
+}
+
+.tableWrapper .tableControls .rowsControl {
+  width: 20px;
+  transform: translateX(-50%);
+}
+
+.tableWrapper .tableControls .rowsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  height: 30px;
+  width: 15px;
+}
+
+.tableWrapper .tableControls button {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+
+.tableWrapper .tableControls .tableToolbox,
+.tableWrapper .tableControls .tableColorPickerToolbox {
+  border: 1px solid rgba(var(--color-border-300));
+  background-color: rgba(var(--color-background-100));
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 0.25rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
+  background-color: rgba(var(--color-background-100));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
+  background-color: rgba(var(--color-background-100), 0.5);
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
+  border: 1px solid rgba(var(--color-border-300));
+  border-radius: 3px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.tableToolbox {
+  background-color: rgba(var(--color-background-100));
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
+  font-size: 0.85rem;
+  color: rgba(var(--color-text-300));
+}
+
+.resize-cursor .tableWrapper .tableControls .rowsControl,
+.tableWrapper.controls--disabled .tableControls .rowsControl,
+.resize-cursor .tableWrapper .tableControls .columnsControl,
+.tableWrapper.controls--disabled .tableControls .columnsControl {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/space/tailwind.config.js b/space/tailwind.config.js
new file mode 100644
index 00000000000..1e1e598260f
--- /dev/null
+++ b/space/tailwind.config.js
@@ -0,0 +1 @@
+module.exports = require("tailwind-config-custom/tailwind.config");
diff --git a/space/tsconfig.json b/space/tsconfig.json
new file mode 100644
index 00000000000..3047edb7c1a
--- /dev/null
+++ b/space/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve"
+  }
+}
diff --git a/space/types/issue.ts b/space/types/issue.ts
new file mode 100644
index 00000000000..206327fcdac
--- /dev/null
+++ b/space/types/issue.ts
@@ -0,0 +1,168 @@
+export type TIssueBoardKeys = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
+
+export interface IIssueBoardViews {
+  key: TIssueBoardKeys;
+  title: string;
+  icon: string;
+  className: string;
+}
+
+export type TIssuePriorityKey = "urgent" | "high" | "medium" | "low" | "none";
+export type TIssuePriorityTitle = "Urgent" | "High" | "Medium" | "Low" | "None";
+export interface IIssuePriorityFilters {
+  key: TIssuePriorityKey;
+  title: TIssuePriorityTitle;
+  className: string;
+  icon: string;
+}
+
+export type TIssueGroupKey = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+export type TIssueGroupTitle = "Backlog" | "Unstarted" | "Started" | "Completed" | "Cancelled";
+
+export interface IIssueGroup {
+  key: TIssueGroupKey;
+  title: TIssueGroupTitle;
+  color: string;
+  className: string;
+  icon: React.FC;
+}
+
+export interface IIssue {
+  id: string;
+  comments: Comment[];
+  description_html: string;
+  label_details: any;
+  name: string;
+  priority: TIssuePriorityKey | null;
+  project: string;
+  project_detail: any;
+  reactions: IIssueReaction[];
+  sequence_id: number;
+  start_date: any;
+  state: string;
+  state_detail: any;
+  target_date: any;
+  votes: IVote[];
+}
+
+export interface IIssueState {
+  id: string;
+  name: string;
+  group: TIssueGroupKey;
+  color: string;
+}
+
+export interface IIssueLabel {
+  id: string;
+  name: string;
+  color: string;
+}
+
+export interface IVote {
+  issue: string;
+  vote: -1 | 1;
+  workspace: string;
+  project: string;
+  actor: string;
+  actor_detail: 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: WorkspaceDetail;
+}
+
+export interface IIssueReaction {
+  actor_detail: ActorDetail;
+  id: string;
+  issue: string;
+  reaction: string;
+}
+
+export interface ActorDetail {
+  avatar?: string;
+  display_name?: string;
+  first_name?: string;
+  id?: string;
+  is_bot?: boolean;
+  last_name?: string;
+}
+
+export interface IssueDetail {
+  id: string;
+  name: string;
+  description: Description;
+  description_html: string;
+  priority: string;
+  start_date: null;
+  target_date: null;
+  sequence_id: number;
+  sort_order: number;
+}
+
+export interface Description {
+  type: string;
+  content: DescriptionContent[];
+}
+
+export interface DescriptionContent {
+  type: string;
+  attrs?: Attrs;
+  content: ContentContent[];
+}
+
+export interface Attrs {
+  level: number;
+}
+
+export interface ContentContent {
+  text: string;
+  type: string;
+}
+
+export interface ProjectDetail {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string;
+  icon_prop: null;
+  emoji: string;
+  description: string;
+}
+
+export interface WorkspaceDetail {
+  name: string;
+  slug: string;
+  id: string;
+}
+
+export interface IssueDetailType {
+  [issueId: string]: {
+    issue: IIssue;
+    comments: Comment[];
+    reactions: any[];
+    votes: any[];
+  };
+}
diff --git a/space/types/project.ts b/space/types/project.ts
new file mode 100644
index 00000000000..e0e1bba9ef2
--- /dev/null
+++ b/space/types/project.ts
@@ -0,0 +1,29 @@
+export interface IWorkspace {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface IProject {
+  id: string;
+  identifier: string;
+  name: string;
+  description: string;
+  icon: string;
+  cover_image: string | null;
+  icon_prop: string | null;
+  emoji: string | null;
+}
+
+export interface IProjectSettings {
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  views: {
+    list: boolean;
+    gantt: boolean;
+    kanban: boolean;
+    calendar: boolean;
+    spreadsheet: boolean;
+  };
+}
diff --git a/apps/space/store/types/theme.ts b/space/types/theme.ts
similarity index 100%
rename from apps/space/store/types/theme.ts
rename to space/types/theme.ts
diff --git a/space/types/user.ts b/space/types/user.ts
new file mode 100644
index 00000000000..8c6d5f681b3
--- /dev/null
+++ b/space/types/user.ts
@@ -0,0 +1,23 @@
+export interface IUser {
+  avatar: string;
+  cover_image: string | null;
+  created_at: Date;
+  created_location: string;
+  date_joined: Date;
+  email: string;
+  display_name: string;
+  first_name: string;
+  id: string;
+  is_email_verified: boolean;
+  is_onboarded: boolean;
+  is_tour_completed: boolean;
+  last_location: string;
+  last_login: Date;
+  last_name: string;
+  mobile_number: string;
+  role: string;
+  token: string;
+  updated_at: Date;
+  username: string;
+  user_timezone: string;
+}
diff --git a/start.sh b/start.sh
index dcb97db6d3a..2685c38265b 100644
--- a/start.sh
+++ b/start.sh
@@ -1,9 +1,5 @@
 #!/bin/sh
 set -x
 
-# Replace the statically built BUILT_NEXT_PUBLIC_API_BASE_URL with run-time NEXT_PUBLIC_API_BASE_URL
-# NOTE: if these values are the same, this will be skipped.
-/usr/local/bin/replace-env-vars.sh "$BUILT_NEXT_PUBLIC_API_BASE_URL" "$NEXT_PUBLIC_API_BASE_URL" $2
-
 echo "Starting Plane Frontend.."
 node $1
diff --git a/turbo.json b/turbo.json
index 69da3c552fd..7c3ccb81a7d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,36 +1,77 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalEnv": [
-    "NEXT_PUBLIC_GITHUB_ID",
-    "NEXT_PUBLIC_GOOGLE_CLIENTID",
     "NEXT_PUBLIC_API_BASE_URL",
     "NEXT_PUBLIC_DEPLOY_URL",
-    "API_BASE_URL",
     "NEXT_PUBLIC_SENTRY_DSN",
-    "SENTRY_AUTH_TOKEN",
     "NEXT_PUBLIC_SENTRY_ENVIRONMENT",
     "NEXT_PUBLIC_GITHUB_APP_NAME",
     "NEXT_PUBLIC_ENABLE_SENTRY",
     "NEXT_PUBLIC_ENABLE_OAUTH",
-    "NEXT_PUBLIC_UNSPLASH_ACCESS",
-    "NEXT_PUBLIC_UNSPLASH_ENABLED",
     "NEXT_PUBLIC_TRACK_EVENTS",
-    "TRACKER_ACCESS_KEY",
+    "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",
     "NEXT_PUBLIC_ENABLE_SESSION_RECORDER",
     "NEXT_PUBLIC_SESSION_RECORDER_KEY",
     "NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS",
-    "NEXT_PUBLIC_SLACK_CLIENT_ID",
-    "NEXT_PUBLIC_SLACK_CLIENT_SECRET",
-    "NEXT_PUBLIC_SUPABASE_URL",
-    "NEXT_PUBLIC_SUPABASE_ANON_KEY",
-    "NEXT_PUBLIC_PLAUSIBLE_DOMAIN"
+    "NEXT_PUBLIC_DEPLOY_WITH_NGINX",
+    "NEXT_PUBLIC_POSTHOG_KEY",
+    "NEXT_PUBLIC_POSTHOG_HOST",
+    "SLACK_OAUTH_URL",
+    "SLACK_CLIENT_ID",
+    "SLACK_CLIENT_SECRET",
+    "JITSU_TRACKER_ACCESS_KEY",
+    "JITSU_TRACKER_HOST",
+    "UNSPLASH_ACCESS_KEY",
+    "NEXT_PUBLIC_SLACK_CLIENT_ID"
   ],
   "pipeline": {
     "build": {
       "dependsOn": ["^build"],
       "outputs": [".next/**", "dist/**"]
     },
+    "web#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "space#develop": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "web#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "space#build": {
+      "cache": true,
+      "dependsOn": [
+        "@plane/lite-text-editor#build",
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
+      ]
+    },
+    "@plane/lite-text-editor#build": {
+      "cache": true,
+      "dependsOn": ["@plane/editor-core#build"]
+    },
+    "@plane/rich-text-editor#build": {
+      "cache": true,
+      "dependsOn": ["@plane/editor-core#build"]
+    },
     "test": {
       "dependsOn": ["^build"],
       "outputs": []
@@ -41,6 +82,9 @@
     "dev": {
       "cache": false
     },
+    "develop": {
+      "cache": false
+    },
     "start": {
       "cache": false
     },
diff --git a/web/.env.example b/web/.env.example
new file mode 100644
index 00000000000..3868cd83486
--- /dev/null
+++ b/web/.env.example
@@ -0,0 +1,4 @@
+# Enable/Disable OAUTH - default 0 for selfhosted instance
+NEXT_PUBLIC_ENABLE_OAUTH=0
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
\ No newline at end of file
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
new file mode 100644
index 00000000000..c8df607506c
--- /dev/null
+++ b/web/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};
diff --git a/web/.prettierrc b/web/.prettierrc
new file mode 100644
index 00000000000..87d988f1b26
--- /dev/null
+++ b/web/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/web/Dockerfile.dev b/web/Dockerfile.dev
new file mode 100644
index 00000000000..f929f74f983
--- /dev/null
+++ b/web/Dockerfile.dev
@@ -0,0 +1,12 @@
+FROM node:18-alpine
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirror.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+
+COPY . .
+RUN yarn global add turbo
+RUN yarn install
+EXPOSE 3000
+CMD ["yarn", "dev", "--filter=web"]
diff --git a/web/Dockerfile.web b/web/Dockerfile.web
new file mode 100644
index 00000000000..d9260e61d8b
--- /dev/null
+++ b/web/Dockerfile.web
@@ -0,0 +1,63 @@
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+RUN yarn global add turbo
+COPY . .
+
+RUN turbo prune --scope=web --docker
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ARG NEXT_PUBLIC_DEPLOY_URL=""
+
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 500000
+
+# Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+USER root
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ENV NEXT_PUBLIC_DEPLOY_URL=$NEXT_PUBLIC_DEPLOY_URL
+
+RUN yarn turbo run build --filter=web
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 plane
+RUN adduser --system --uid 1001 captain
+USER captain
+
+COPY --from=installer /app/web/next.config.js .
+COPY --from=installer /app/web/package.json .
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer --chown=captain:plane /app/web/.next/standalone ./
+COPY --from=installer --chown=captain:plane /app/web/.next ./web/.next
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ARG NEXT_PUBLIC_DEPLOY_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ENV NEXT_PUBLIC_DEPLOY_URL=$NEXT_PUBLIC_DEPLOY_URL
+
+USER root
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/start.sh
+
+USER captain
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+EXPOSE 3000
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
new file mode 100644
index 00000000000..05bc89abd72
--- /dev/null
+++ b/web/components/account/email-code-form.tsx
@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+const authService = new AuthService();
+
+export const EmailCodeForm = ({ handleSignIn }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    handleSubmit,
+    control,
+    setError,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = async ({ email }: EmailCodeFormValues) => {
+    setErrorResendingCode(false);
+    await authService
+      .emailCode({ email })
+      .then((res) => {
+        setValue("key", res.key);
+        setCodeSent(true);
+      })
+      .catch((err) => {
+        setErrorResendingCode(true);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
+      });
+  };
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    setIsLoading(true);
+    await authService
+      .magicSignIn(formData)
+      .then((response) => {
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if (!codeSent && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit(onSubmit)().then(() => {
+          setResendCodeTimer(30);
+        });
+      }
+    };
+
+    if (!codeSent) {
+      window.addEventListener("keydown", submitForm);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleSubmit, codeSent]);
+
+  return (
+    <>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\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(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+
+        {codeSent && (
+          <>
+            <Controller
+              control={control}
+              name="token"
+              rules={{
+                required: "Code is required",
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="token"
+                  name="token"
+                  type="token"
+                  value={value ?? ""}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.token)}
+                  placeholder="Enter code..."
+                  className="border-custom-border-300 h-[46px] w-full"
+                />
+              )}
+            />
+            <button
+              type="button"
+              className={`flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
+              ) : isCodeResending ? (
+                "Sending new code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                <span className="font-medium">Resend code</span>
+              )}
+            </button>
+          </>
+        )}
+        {codeSent ? (
+          <Button
+            variant="primary"
+            type="submit"
+            className="w-full"
+            size="xl"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </Button>
+        ) : (
+          <Button
+            variant="primary"
+            className="w-full"
+            size="xl"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </Button>
+        )}
+      </form>
+    </>
+  );
+};
diff --git a/web/components/account/email-forgot-password-form.tsx b/web/components/account/email-forgot-password-form.tsx
new file mode 100644
index 00000000000..a78efec5dab
--- /dev/null
+++ b/web/components/account/email-forgot-password-form.tsx
@@ -0,0 +1,69 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { useForm, Controller } from "react-hook-form";
+// ui
+import { Input, Button } from "@plane/ui";
+
+export interface EmailForgotPasswordFormValues {
+  email: string;
+}
+
+export interface IEmailForgotPasswordForm {
+  onSubmit: (formValues: any) => Promise<void>;
+}
+
+export const EmailForgotPasswordForm: FC<IEmailForgotPasswordForm> = (props) => {
+  const { onSubmit } = props;
+  // router
+  const router = useRouter();
+  // form data
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<EmailForgotPasswordFormValues>({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-1">
+        <Controller
+          control={control}
+          name="email"
+          rules={{
+            required: "Email address is required",
+            validate: (value) =>
+              /^(([^<>()[\]\\.,;:\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(
+                value
+              ) || "Email address is not valid",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Input
+              id="email"
+              type="email"
+              name="email"
+              value={value}
+              onChange={onChange}
+              hasError={Boolean(errors.email)}
+              placeholder="Enter registered email address.."
+              className="border-custom-border-300 h-[46px] w-full"
+            />
+          )}
+        />
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <Button className="w-full text-center h-[46px]" onClick={() => router.push("/")}>
+          Go Back
+        </Button>
+        <Button type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
new file mode 100644
index 00000000000..fe8d2d51cd9
--- /dev/null
+++ b/web/components/account/email-password-form.tsx
@@ -0,0 +1,118 @@
+import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { useRouter } from "next/router";
+// ui
+import { Input, Button } from "@plane/ui";
+
+export interface EmailPasswordFormValues {
+  email: string;
+  password?: string;
+  medium?: string;
+}
+
+export interface IEmailPasswordForm {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+}
+
+export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
+  const { onSubmit } = props;
+  // router
+  const router = useRouter();
+  // form info
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\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(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <Input
+                id="email"
+                type="email"
+                name="email"
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="password"
+            rules={{
+              required: "Password is required",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="text-right text-xs">
+          <button
+            type="button"
+            onClick={() => router.push("/accounts/forgot-password")}
+            className="text-custom-text-200 hover:text-custom-primary-100"
+          >
+            Forgot your password?
+          </button>
+        </div>
+        <div>
+          <Button
+            variant="primary"
+            type="submit"
+            className="w-full"
+            size="xl"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </Button>
+        </div>
+        <div className="text-xs">
+          <button
+            type="button"
+            onClick={() => router.push("/accounts/sign-up")}
+            className="text-custom-text-200 hover:text-custom-primary-100"
+          >
+            {"Don't have an account? Sign Up"}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
new file mode 100644
index 00000000000..a60a8323023
--- /dev/null
+++ b/web/components/account/email-signup-form.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  confirm_password: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailSignUpForm: React.FC<Props> = (props) => {
+  const { onSubmit } = props;
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      confirm_password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\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(
+                  value
+                ) || "Email address is not valid",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="password"
+            rules={{
+              required: "Password is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="confirm_password"
+            rules={{
+              required: "Password is required",
+              validate: (val: string) => {
+                if (watch("password") != val) {
+                  return "Your passwords do no match";
+                }
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="confirm_password"
+                name="confirm_password"
+                type="password"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.confirm_password)}
+                placeholder="Confirm your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="text-right text-xs">
+          <Link href="/">
+            <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
+          </Link>
+        </div>
+        <div>
+          <Button
+            variant="primary"
+            type="submit"
+            className="w-full"
+            size="xl"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing up..." : "Sign up"}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/web/components/account/github-login-button.tsx b/web/components/account/github-login-button.tsx
new file mode 100644
index 00000000000..960606b0c7f
--- /dev/null
+++ b/web/components/account/github-login-button.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState, FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+  clientId: string;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // states
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+  // router
+  const {
+    query: { code },
+  } = useRouter();
+  // theme
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
+      handleSignIn(code.toString());
+    }
+  }, [code, gitCode, handleSignIn]);
+
+  useEffect(() => {
+    const origin =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/` as any);
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center items-center">
+      <Link
+        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+          <Image
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>使用 GitHub 登录</span>
+        </button>
+      </Link>
+    </div>
+  );
+};
diff --git a/web/components/account/google-login.tsx b/web/components/account/google-login.tsx
new file mode 100644
index 00000000000..768dcd6d531
--- /dev/null
+++ b/web/components/account/google-login.tsx
@@ -0,0 +1,60 @@
+import { FC, useEffect, useRef, useCallback, useState } from "react";
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  handleSignIn: React.Dispatch<any>;
+  clientId: string;
+}
+
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // refs
+  const googleSignInButton = useRef<HTMLDivElement>(null);
+  // states
+  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
+
+  const loadScript = useCallback(() => {
+    if (!googleSignInButton.current || gsiScriptLoaded) return;
+
+    window?.google?.accounts.id.initialize({
+      client_id: clientId,
+      callback: handleSignIn,
+    });
+
+    try {
+      window?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as GsiButtonConfiguration // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded, clientId]);
+
+  useEffect(() => {
+    if (window?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      window?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
new file mode 100644
index 00000000000..36a204c6203
--- /dev/null
+++ b/web/components/account/index.ts
@@ -0,0 +1,6 @@
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./email-forgot-password-form";
+export * from "./github-login-button";
+export * from "./google-login";
+export * from "./email-signup-form";
diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
new file mode 100644
index 00000000000..210d2c34914
--- /dev/null
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -0,0 +1,76 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// services
+import { AnalyticsService } from "services/analytics.service";
+// components
+import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics";
+// types
+import { IAnalyticsParams } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  additionalParams?: Partial<IAnalyticsParams>;
+  fullScreen: boolean;
+};
+
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
+const analyticsService = new AnalyticsService();
+
+export const CustomAnalytics: React.FC<Props> = observer((props) => {
+  const { additionalParams, fullScreen } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { control, watch, setValue } = useForm({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: projectId ? [projectId.toString()] : watch("project"),
+    ...additionalParams,
+  };
+
+  const { data: analytics, error: analyticsError } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
+  const isProjectLevel = projectId ? true : false;
+
+  return (
+    <div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
+      <div className="col-span-3 flex flex-col h-full overflow-hidden">
+        <CustomAnalyticsSelectBar
+          control={control}
+          setValue={setValue}
+          params={params}
+          fullScreen={fullScreen}
+          isProjectLevel={isProjectLevel}
+        />
+        <CustomAnalyticsMainContent
+          analytics={analytics}
+          error={analyticsError}
+          fullScreen={fullScreen}
+          params={params}
+        />
+      </div>
+      <CustomAnalyticsSidebar
+        analytics={analytics}
+        params={params}
+        fullScreen={fullScreen}
+        isProjectLevel={isProjectLevel}
+      />
+    </div>
+  );
+});
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
similarity index 100%
rename from apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
rename to web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
new file mode 100644
index 00000000000..181eec8bd9d
--- /dev/null
+++ b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -0,0 +1,129 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// components
+import { CustomTooltip } from "./custom-tooltip";
+// ui
+import { BarGraph, Tooltip } from "components/ui";
+// helpers
+import { findStringWithMostCharacters } from "helpers/array.helper";
+import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+
+type Props = {
+  analytics: IAnalyticsResponse;
+  barGraphData: {
+    data: BarDatum[];
+    xAxisKeys: string[];
+  };
+  params: IAnalyticsParams;
+  yAxisKey: "count" | "estimate";
+  fullScreen: boolean;
+};
+
+export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey, fullScreen }) => {
+  const generateYAxisTickValues = () => {
+    if (!analytics) return [];
+
+    let data: number[] = [];
+
+    if (params.segment)
+      // find the total no of issues in each segment
+      data = Object.keys(analytics.distribution).map((segment) => {
+        let totalSegmentIssues = 0;
+
+        analytics.distribution[segment].map((s) => {
+          totalSegmentIssues += s[yAxisKey] as number;
+        });
+
+        return totalSegmentIssues;
+      });
+    else data = barGraphData.data.map((d) => d[yAxisKey] as number);
+
+    return data;
+  };
+
+  const longestXAxisLabel = findStringWithMostCharacters(barGraphData.data.map((d) => `${d.name}`));
+
+  return (
+    <BarGraph
+      data={barGraphData.data}
+      indexBy="name"
+      keys={barGraphData.xAxisKeys}
+      colors={(datum) =>
+        generateBarColor(
+          params.segment ? `${datum.id}` : `${datum.indexValue}`,
+          analytics,
+          params,
+          params.segment ? "segment" : "x_axis"
+        )
+      }
+      customYAxisTickValues={generateYAxisTickValues()}
+      tooltip={(datum) => <CustomTooltip datum={datum} analytics={analytics} params={params} />}
+      height={fullScreen ? "400px" : "300px"}
+      margin={{
+        right: 20,
+        bottom: params.x_axis === "assignees__id" ? 50 : longestXAxisLabel.length * 5 + 20,
+      }}
+      axisBottom={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickRotation: barGraphData.data.length > 7 ? -45 : 0,
+        renderTick:
+          params.x_axis === "assignees__id"
+            ? (datum) => {
+                const assignee = analytics.extras.assignee_details?.find((a) => a?.assignees__id === datum?.value);
+
+                if (assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
+                  return (
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <image
+                          x={-8}
+                          y={10}
+                          width={16}
+                          height={16}
+                          xlinkHref={assignee?.assignees__avatar}
+                          style={{ clipPath: "circle(50%)" }}
+                        />
+                      </g>
+                    </Tooltip>
+                  );
+                else
+                  return (
+                    <Tooltip tooltipContent={assignee?.assignees__display_name}>
+                      <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">
+                          {params.x_axis === "assignees__id"
+                            ? datum.value && datum.value !== "None"
+                              ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
+                              : "?"
+                            : datum.value && datum.value !== "None"
+                            ? `${datum.value}`.toUpperCase()[0]
+                            : "?"}
+                        </text>
+                      </g>
+                    </Tooltip>
+                  );
+              }
+            : (datum) => (
+                <g transform={`translate(${datum.x},${datum.y + 10})`}>
+                  <text
+                    x={0}
+                    y={datum.y}
+                    textAnchor="end"
+                    fontSize={10}
+                    className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`}
+                  >
+                    {generateDisplayName(datum.value, analytics, params, "x_axis")}
+                  </text>
+                </g>
+              ),
+      }}
+      theme={{
+        axis: {},
+      }}
+    />
+  );
+};
diff --git a/web/components/analytics/custom-analytics/index.ts b/web/components/analytics/custom-analytics/index.ts
new file mode 100644
index 00000000000..9cb0ddd5b07
--- /dev/null
+++ b/web/components/analytics/custom-analytics/index.ts
@@ -0,0 +1,7 @@
+export * from "./graph";
+export * from "./select";
+export * from "./custom-analytics";
+export * from "./main-content";
+export * from "./select-bar";
+export * from "./sidebar";
+export * from "./table";
diff --git a/web/components/analytics/custom-analytics/main-content.tsx b/web/components/analytics/custom-analytics/main-content.tsx
new file mode 100644
index 00000000000..5cfd1548298
--- /dev/null
+++ b/web/components/analytics/custom-analytics/main-content.tsx
@@ -0,0 +1,85 @@
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+
+// components
+import { AnalyticsGraph, AnalyticsTable } from "components/analytics";
+// ui
+import { Button, Loader } from "@plane/ui";
+// helpers
+import { convertResponseToBarGraphData } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  analytics: IAnalyticsResponse | undefined;
+  error: any;
+  fullScreen: boolean;
+  params: IAnalyticsParams;
+};
+
+export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
+  const { analytics, error, fullScreen, params } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
+  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
+
+  return (
+    <>
+      {!error ? (
+        analytics ? (
+          analytics.total > 0 ? (
+            <div className="h-full overflow-y-auto">
+              <AnalyticsGraph
+                analytics={analytics}
+                barGraphData={barGraphData}
+                params={params}
+                yAxisKey={yAxisKey}
+                fullScreen={fullScreen}
+              />
+              <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
+            </div>
+          ) : (
+            <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>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="space-y-6 p-5">
+            <Loader.Item height="300px" />
+            <Loader className="space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          </Loader>
+        )
+      ) : (
+        <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>
+            <div className="flex items-center justify-center gap-2">
+              <Button
+                variant="primary"
+                onClick={() => {
+                  if (!workspaceSlug) return;
+
+                  mutate(ANALYTICS(workspaceSlug.toString(), params));
+                }}
+              >
+                Refresh
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx
new file mode 100644
index 00000000000..195aa2e56bf
--- /dev/null
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -0,0 +1,86 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Control, Controller, UseFormSetValue } from "react-hook-form";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
+// types
+import { IAnalyticsParams } from "types";
+
+type Props = {
+  control: Control<IAnalyticsParams, any>;
+  setValue: UseFormSetValue<IAnalyticsParams>;
+  params: IAnalyticsParams;
+  fullScreen: boolean;
+  isProjectLevel: boolean;
+};
+
+export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
+  const { control, setValue, params, fullScreen, isProjectLevel } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  return (
+    <div
+      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
+        fullScreen ? "lg:grid-cols-4 md:py-5" : ""
+      }`}
+    >
+      {!isProjectLevel && (
+        <div>
+          <h6 className="text-xs text-custom-text-200">Project</h6>
+          <Controller
+            name="project"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <SelectProject value={value ?? undefined} onChange={onChange} projects={projectsList ?? undefined} />
+            )}
+          />
+        </div>
+      )}
+      <div>
+        <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
+        <Controller
+          name="y_axis"
+          control={control}
+          render={({ field: { value, onChange } }) => <SelectYAxis value={value} onChange={onChange} />}
+        />
+      </div>
+      <div>
+        <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+        <Controller
+          name="x_axis"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <SelectXAxis
+              value={value}
+              onChange={(val: string) => {
+                if (params.segment === val) setValue("segment", null);
+
+                onChange(val);
+              }}
+              params={params}
+            />
+          )}
+        />
+      </div>
+      <div>
+        <h6 className="text-xs text-custom-text-200">Group</h6>
+        <Controller
+          name="segment"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <SelectSegment value={value} onChange={onChange} params={params} />
+          )}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/app/components/analytics/select/index.ts b/web/components/analytics/custom-analytics/select/index.ts
similarity index 100%
rename from apps/app/components/analytics/select/index.ts
rename to web/components/analytics/custom-analytics/select/index.ts
diff --git a/web/components/analytics/custom-analytics/select/project.tsx b/web/components/analytics/custom-analytics/select/project.tsx
new file mode 100644
index 00000000000..c57e5670974
--- /dev/null
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -0,0 +1,41 @@
+// ui
+import { CustomSearchSelect } from "@plane/ui";
+// types
+import { IProject } from "types";
+
+type Props = {
+  value: string[] | undefined;
+  onChange: (val: string[] | null) => void;
+  projects: IProject[] | undefined;
+};
+
+export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) => {
+  const options = projects?.map((project) => ({
+    value: project.id,
+    query: project.name + project.identifier,
+    content: (
+      <div className="flex items-center gap-2">
+        <span className="text-custom-text-200 text-[0.65rem]">{project.identifier}</span>
+        {project.name}
+      </div>
+    ),
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value ?? []}
+      onChange={(val: string[]) => onChange(val)}
+      options={options}
+      label={
+        value && value.length > 0
+          ? projects
+              ?.filter((p) => value.includes(p.id))
+              .map((p) => p.identifier)
+              .join(", ")
+          : "All projects"
+      }
+      optionsClassName="min-w-full"
+      multiple
+    />
+  );
+};
diff --git a/apps/app/components/analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx
similarity index 85%
rename from apps/app/components/analytics/select/segment.tsx
rename to web/components/analytics/custom-analytics/select/segment.tsx
index 2939e3758a3..332215c3ce2 100644
--- a/apps/app/components/analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { IAnalyticsParams, TXAxisValues } from "types";
 // constants
@@ -34,8 +34,8 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       <CustomSelect.Option value={null}>无数值</CustomSelect.Option>
       {ANALYTICS_X_AXIS_VALUES.map((item) => {
         if (params.x_axis === item.value) return null;
-        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
-        if (moduleId && item.value === "issue_module__module__name") return null;
+        if (cycleId && item.value === "issue_cycle__cycle_id") return null;
+        if (moduleId && item.value === "issue_module__module_id") return null;
 
         return (
           <CustomSelect.Option key={item.value} value={item.value}>
diff --git a/web/components/analytics/custom-analytics/select/x-axis.tsx b/web/components/analytics/custom-analytics/select/x-axis.tsx
new file mode 100644
index 00000000000..66582a1e97b
--- /dev/null
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@@ -0,0 +1,43 @@
+import { useRouter } from "next/router";
+
+// ui
+import { CustomSelect } from "@plane/ui";
+// types
+import { IAnalyticsParams, TXAxisValues } from "types";
+// constants
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  value: TXAxisValues;
+  onChange: (val: string) => void;
+  params: IAnalyticsParams;
+};
+
+export const SelectXAxis: React.FC<Props> = (props) => {
+  const { value, onChange, params } = props;
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  return (
+    <CustomSelect
+      value={value}
+      label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
+      onChange={onChange}
+      width="w-full"
+      maxHeight="lg"
+    >
+      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+        if (params.segment === item.value) return null;
+        if (cycleId && item.value === "issue_cycle__cycle_id") return null;
+        if (moduleId && item.value === "issue_module__module_id") return null;
+
+        return (
+          <CustomSelect.Option key={item.value} value={item.value}>
+            {item.label}
+          </CustomSelect.Option>
+        );
+      })}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/analytics/select/y-axis.tsx b/web/components/analytics/custom-analytics/select/y-axis.tsx
similarity index 93%
rename from apps/app/components/analytics/select/y-axis.tsx
rename to web/components/analytics/custom-analytics/select/y-axis.tsx
index ef22332bd15..3f7348cce79 100644
--- a/apps/app/components/analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@@ -1,5 +1,5 @@
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TYAxisValues } from "types";
 // constants
diff --git a/web/components/analytics/custom-analytics/sidebar/index.ts b/web/components/analytics/custom-analytics/sidebar/index.ts
new file mode 100644
index 00000000000..db9adae856f
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from "./projects-list";
+export * from "./sidebar-header";
+export * from "./sidebar";
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
new file mode 100644
index 00000000000..21c7a2e1187
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -0,0 +1,65 @@
+// icons
+import { Contrast, LayoutGrid, Users } from "lucide-react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  projects: IProject[];
+};
+
+export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
+  const { projects } = props;
+
+  return (
+    <div className="hidden h-full overflow-hidden md:flex md:flex-col">
+      <h4 className="font-medium">Selected Projects</h4>
+      <div className="space-y-6 mt-4 h-full overflow-y-auto">
+        {projects.map((project) => (
+          <div key={project.id} className="w-full">
+            <div className="text-sm flex items-center gap-1">
+              {project.emoji ? (
+                <span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
+              ) : project.icon_prop ? (
+                <div className="h-6 w-6 grid place-items-center flex-shrink-0">{renderEmoji(project.icon_prop)}</div>
+              ) : (
+                <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {project?.name.charAt(0)}
+                </span>
+              )}
+              <h5 className="flex items-center gap-1">
+                <p className="break-words">{truncateText(project.name, 20)}</p>
+                <span className="text-custom-text-200 text-xs ml-1">({project.identifier})</span>
+              </h5>
+            </div>
+            <div className="mt-4 space-y-3 pl-2 w-full">
+              <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>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
new file mode 100644
index 00000000000..6821731fd9b
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -0,0 +1,107 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { renderShortDate } from "helpers/date-time.helper";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+
+export const CustomAnalyticsSidebarHeader = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { cycle: cycleStore, module: moduleStore, project: projectStore } = useMobxStore();
+
+  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <>
+      {projectId ? (
+        cycleDetails ? (
+          <div className="hidden md:block h-full overflow-y-auto">
+            <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Lead</h6>
+                <span>{cycleDetails.owned_by?.display_name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Start Date</h6>
+                <span>
+                  {cycleDetails.start_date && cycleDetails.start_date !== ""
+                    ? renderShortDate(cycleDetails.start_date)
+                    : "No start date"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Target Date</h6>
+                <span>
+                  {cycleDetails.end_date && cycleDetails.end_date !== ""
+                    ? renderShortDate(cycleDetails.end_date)
+                    : "No end date"}
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : moduleDetails ? (
+          <div className="hidden md:block h-full overflow-y-auto">
+            <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Lead</h6>
+                <span>{moduleDetails.lead_detail?.display_name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Start Date</h6>
+                <span>
+                  {moduleDetails.start_date && moduleDetails.start_date !== ""
+                    ? renderShortDate(moduleDetails.start_date)
+                    : "No start date"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Target Date</h6>
+                <span>
+                  {moduleDetails.target_date && moduleDetails.target_date !== ""
+                    ? renderShortDate(moduleDetails.target_date)
+                    : "No end date"}
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="hidden md:flex md:flex-col h-full overflow-y-auto">
+            <div className="flex items-center gap-1">
+              {projectDetails?.emoji ? (
+                <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>
+              ) : projectDetails?.icon_prop ? (
+                <div className="h-6 w-6 grid place-items-center flex-shrink-0">
+                  {renderEmoji(projectDetails.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {projectDetails?.name.charAt(0)}
+                </span>
+              )}
+              <h4 className="font-medium break-words">{projectDetails?.name}</h4>
+            </div>
+            <div className="space-y-4 mt-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>
+              </div>
+            </div>
+          </div>
+        )
+      ) : null}
+    </>
+  );
+});
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
new file mode 100644
index 00000000000..c99a7cece32
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -0,0 +1,214 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+// services
+import { AnalyticsService } from "services/analytics.service";
+import { TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
+// ui
+import { Button, LayersIcon } from "@plane/ui";
+// icons
+import { CalendarDays, Download, RefreshCw } from "lucide-react";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  analytics: IAnalyticsResponse | undefined;
+  params: IAnalyticsParams;
+  fullScreen: boolean;
+  isProjectLevel: boolean;
+};
+
+const analyticsService = new AnalyticsService();
+const trackEventService = new TrackEventService();
+
+export const CustomAnalyticsSidebar: React.FC<Props> = observer(
+  ({ analytics, params, fullScreen, isProjectLevel = false }) => {
+    const router = useRouter();
+    const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+    const { setToastAlert } = useToast();
+
+    const { user: userStore, project: projectStore, cycle: cycleStore, module: moduleStore } = useMobxStore();
+
+    const user = userStore.currentUser;
+
+    const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+    const projectDetails =
+      workspaceSlug && projectId
+        ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) ?? undefined
+        : undefined;
+
+    const trackExportAnalytics = () => {
+      if (!user) return;
+
+      const eventPayload: any = {
+        workspaceSlug: workspaceSlug?.toString(),
+        params: {
+          x_axis: params.x_axis,
+          y_axis: params.y_axis,
+          group: params.segment,
+          project: params.project,
+        },
+      };
+
+      if (projectDetails) {
+        const workspaceDetails = projectDetails.workspace as IWorkspace;
+
+        eventPayload.workspaceId = workspaceDetails.id;
+        eventPayload.workspaceName = workspaceDetails.name;
+        eventPayload.projectId = projectDetails.id;
+        eventPayload.projectIdentifier = projectDetails.identifier;
+        eventPayload.projectName = projectDetails.name;
+      }
+
+      if (cycleDetails || moduleDetails) {
+        const details = cycleDetails || moduleDetails;
+
+        eventPayload.workspaceId = details?.workspace_detail?.id;
+        eventPayload.workspaceName = details?.workspace_detail?.name;
+        eventPayload.projectId = details?.project_detail.id;
+        eventPayload.projectIdentifier = details?.project_detail.identifier;
+        eventPayload.projectName = details?.project_detail.name;
+      }
+
+      if (cycleDetails) {
+        eventPayload.cycleId = cycleDetails.id;
+        eventPayload.cycleName = cycleDetails.name;
+      }
+
+      if (moduleDetails) {
+        eventPayload.moduleId = moduleDetails.id;
+        eventPayload.moduleName = moduleDetails.name;
+      }
+
+      trackEventService.trackAnalyticsEvent(
+        eventPayload,
+        cycleId
+          ? "CYCLE_ANALYTICS_EXPORT"
+          : moduleId
+          ? "MODULE_ANALYTICS_EXPORT"
+          : projectId
+          ? "PROJECT_ANALYTICS_EXPORT"
+          : "WORKSPACE_ANALYTICS_EXPORT",
+        user
+      );
+    };
+
+    const exportAnalytics = () => {
+      if (!workspaceSlug) return;
+
+      const data: IExportAnalyticsFormData = {
+        x_axis: params.x_axis,
+        y_axis: params.y_axis,
+      };
+
+      if (params.segment) data.segment = params.segment;
+      if (params.project) data.project = params.project;
+
+      analyticsService
+        .exportAnalytics(workspaceSlug.toString(), data)
+        .then((res) => {
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: res.message,
+          });
+
+          trackExportAnalytics();
+        })
+        .catch(() =>
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "There was some error in exporting the analytics. Please try again.",
+          })
+        );
+    };
+
+    const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+    const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+
+    // fetch cycle details
+    useEffect(() => {
+      if (!workspaceSlug || !projectId || !cycleId || cycleDetails) return;
+
+      cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+    }, [cycleId, cycleDetails, cycleStore, projectId, workspaceSlug]);
+
+    // fetch module details
+    useEffect(() => {
+      if (!workspaceSlug || !projectId || !moduleId || moduleDetails) return;
+
+      moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+    }, [moduleId, moduleDetails, moduleStore, projectId, workspaceSlug]);
+
+    const selectedProjects = params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
+
+    return (
+      <div
+        className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
+          fullScreen
+            ? "border-l border-custom-border-200 md:h-full md:border-l md:border-custom-border-200 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+            : ""
+        }`}
+      >
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
+            <LayersIcon height={14} width={14} />
+            {analytics ? analytics.total : "..."} Issues
+          </div>
+          {isProjectLevel && (
+            <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
+              <CalendarDays className="h-3.5 w-3.5" />
+              {renderShortDate(
+                (cycleId
+                  ? cycleDetails?.created_at
+                  : moduleId
+                  ? moduleDetails?.created_at
+                  : projectDetails?.created_at) ?? ""
+              )}
+            </div>
+          )}
+        </div>
+        <div className="h-full w-full overflow-hidden">
+          {fullScreen ? (
+            <>
+              {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
+                <CustomAnalyticsSidebarProjectsList
+                  projects={projects?.filter((p) => selectedProjects.includes(p.id)) ?? []}
+                />
+              )}
+              <CustomAnalyticsSidebarHeader />
+            </>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-2 flex-wrap justify-self-end">
+          <Button
+            variant="neutral-primary"
+            prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
+            onClick={() => {
+              if (!workspaceSlug) return;
+
+              mutate(ANALYTICS(workspaceSlug.toString(), params));
+            }}
+          >
+            Refresh
+          </Button>
+          <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
+            Export as CSV
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
new file mode 100644
index 00000000000..5c7bb114625
--- /dev/null
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -0,0 +1,100 @@
+import { BarDatum } from "@nivo/bar";
+
+// icons
+import { PriorityIcon } from "@plane/ui";
+// helpers
+import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
+// constants
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+
+type Props = {
+  analytics: IAnalyticsResponse;
+  barGraphData: {
+    data: BarDatum[];
+    xAxisKeys: string[];
+  };
+  params: IAnalyticsParams;
+  yAxisKey: "count" | "estimate";
+};
+
+export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
+  <div className="flow-root">
+    <div className="overflow-x-auto">
+      <div className="inline-block min-w-full align-middle">
+        <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
+          <thead className="bg-custom-background-80">
+            <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
+              <th scope="col" className="py-3 px-2.5 text-left font-medium">
+                {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+              </th>
+              {params.segment ? (
+                barGraphData.xAxisKeys.map((key) => (
+                  <th
+                    key={`segment-${key}`}
+                    scope="col"
+                    className={`px-2.5 py-3 text-left font-medium ${
+                      params.segment === "priority" || params.segment === "state__group" ? "capitalize" : ""
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      {params.segment === "priority" ? (
+                        <PriorityIcon priority={key as TIssuePriorities} />
+                      ) : (
+                        <span
+                          className="h-3 w-3 flex-shrink-0 rounded"
+                          style={{
+                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                          }}
+                        />
+                      )}
+                      {generateDisplayName(key, analytics, params, "segment")}
+                    </div>
+                  </th>
+                ))
+              ) : (
+                <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                  {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-custom-border-200">
+            {barGraphData.data.map((item, index) => (
+              <tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
+                <td
+                  className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
+                    params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : ""
+                  }`}
+                >
+                  {params.x_axis === "priority" ? (
+                    // TODO: incorrect priority icon being rendered
+                    <PriorityIcon priority={item.name as TIssuePriorities} />
+                  ) : (
+                    <span
+                      className="h-3 w-3 rounded"
+                      style={{
+                        backgroundColor: generateBarColor(`${item.name}`, analytics, params, "x_axis"),
+                      }}
+                    />
+                  )}
+                  {generateDisplayName(`${item.name}`, analytics, params, "x_axis")}
+                </td>
+                {params.segment ? (
+                  barGraphData.xAxisKeys.map((key, index) => (
+                    <td key={`segment-value-${index}`} className="whitespace-nowrap py-2 px-2.5 sm:pr-0">
+                      {item[key] ?? 0}
+                    </td>
+                  ))
+                ) : (
+                  <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/components/analytics/index.ts b/web/components/analytics/index.ts
new file mode 100644
index 00000000000..c5f76989085
--- /dev/null
+++ b/web/components/analytics/index.ts
@@ -0,0 +1,3 @@
+export * from "./custom-analytics";
+export * from "./scope-and-demand";
+export * from "./project-modal";
diff --git a/web/components/analytics/project-modal/header.tsx b/web/components/analytics/project-modal/header.tsx
new file mode 100644
index 00000000000..2cdd0a10956
--- /dev/null
+++ b/web/components/analytics/project-modal/header.tsx
@@ -0,0 +1,37 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { Expand, Shrink, X } from "lucide-react";
+
+type Props = {
+  fullScreen: boolean;
+  handleClose: () => void;
+  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+  title: string;
+};
+
+export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) => {
+  const { fullScreen, handleClose, setFullScreen, title } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
+      <h3 className="break-words">Analytics for {title}</h3>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          onClick={() => setFullScreen((prevData) => !prevData)}
+        >
+          {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
+        </button>
+        <button
+          type="button"
+          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleClose}
+        >
+          <X size={14} strokeWidth={2} />
+        </button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/analytics/project-modal/index.ts b/web/components/analytics/project-modal/index.ts
new file mode 100644
index 00000000000..70ca0260a4f
--- /dev/null
+++ b/web/components/analytics/project-modal/index.ts
@@ -0,0 +1,3 @@
+export * from "./header";
+export * from "./main-content";
+export * from "./modal";
diff --git a/web/components/analytics/project-modal/main-content.tsx b/web/components/analytics/project-modal/main-content.tsx
new file mode 100644
index 00000000000..bdab5739257
--- /dev/null
+++ b/web/components/analytics/project-modal/main-content.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Tab } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { TrackEventService } from "services/track_event.service";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// types
+import { ICycle, IModule, IProject, IWorkspace } from "types";
+// constants
+import { ANALYTICS_TABS } from "constants/analytics";
+
+type Props = {
+  fullScreen: boolean;
+  cycleDetails: ICycle | undefined;
+  moduleDetails: IModule | undefined;
+  projectDetails: IProject | undefined;
+};
+
+const trackEventService = new TrackEventService();
+
+export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props) => {
+  const { fullScreen, cycleDetails, moduleDetails, projectDetails } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const trackAnalyticsEvent = (tab: string) => {
+    if (!workspaceSlug || !user) return;
+
+    const eventPayload: any = {
+      workspaceSlug: workspaceSlug.toString(),
+    };
+
+    if (projectDetails) {
+      const workspaceDetails = projectDetails.workspace as IWorkspace;
+
+      eventPayload.workspaceId = workspaceDetails.id;
+      eventPayload.workspaceName = workspaceDetails.name;
+      eventPayload.projectId = projectDetails.id;
+      eventPayload.projectIdentifier = projectDetails.identifier;
+      eventPayload.projectName = projectDetails.name;
+    }
+
+    if (cycleDetails || moduleDetails) {
+      const details = cycleDetails || moduleDetails;
+
+      eventPayload.workspaceId = details?.workspace_detail?.id;
+      eventPayload.workspaceName = details?.workspace_detail?.name;
+      eventPayload.projectId = details?.project_detail.id;
+      eventPayload.projectIdentifier = details?.project_detail.identifier;
+      eventPayload.projectName = details?.project_detail.name;
+    }
+
+    if (cycleDetails) {
+      eventPayload.cycleId = cycleDetails.id;
+      eventPayload.cycleName = cycleDetails.name;
+    }
+
+    if (moduleDetails) {
+      eventPayload.moduleId = moduleDetails.id;
+      eventPayload.moduleName = moduleDetails.name;
+    }
+
+    const eventType = tab === "scope_and_demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS";
+
+    trackEventService.trackAnalyticsEvent(
+      eventPayload,
+      cycleDetails ? `CYCLE_${eventType}` : moduleDetails ? `MODULE_${eventType}` : `PROJECT_${eventType}`,
+      user
+    );
+  };
+
+  return (
+    <Tab.Group as={React.Fragment}>
+      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+        {ANALYTICS_TABS.map((tab) => (
+          <Tab
+            key={tab.key}
+            className={({ selected }) =>
+              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                selected ? "bg-custom-background-80" : ""
+              }`
+            }
+            onClick={() => trackAnalyticsEvent(tab.key)}
+          >
+            {tab.title}
+          </Tab>
+        ))}
+      </Tab.List>
+      <Tab.Panels as={React.Fragment}>
+        <Tab.Panel as={React.Fragment}>
+          <ScopeAndDemand fullScreen={fullScreen} />
+        </Tab.Panel>
+        <Tab.Panel as={React.Fragment}>
+          <CustomAnalytics
+            additionalParams={{
+              cycle: cycleDetails?.id,
+              module: moduleDetails?.id,
+            }}
+            fullScreen={fullScreen}
+          />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+});
diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
new file mode 100644
index 00000000000..d2086131974
--- /dev/null
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+
+// components
+import { ProjectAnalyticsModalHeader, ProjectAnalyticsModalMainContent } from "components/analytics";
+// types
+import { ICycle, IModule, IProject } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  cycleDetails?: ICycle | undefined;
+  moduleDetails?: IModule | undefined;
+  projectDetails?: IProject | undefined;
+};
+
+export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, cycleDetails, moduleDetails, projectDetails } = props;
+
+  const [fullScreen, setFullScreen] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Transition.Root appear show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+          <Transition.Child
+            as={React.Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            {/* TODO: fix full screen mode */}
+            <Dialog.Panel
+              className={`fixed z-20 bg-custom-background-100 top-0 right-0 h-full shadow-custom-shadow-md ${
+                fullScreen ? "w-full p-2" : "w-1/2"
+              }`}
+            >
+              <div
+                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                  fullScreen ? "rounded-lg border" : "border-l"
+                }`}
+              >
+                <ProjectAnalyticsModalHeader
+                  fullScreen={fullScreen}
+                  handleClose={handleClose}
+                  setFullScreen={setFullScreen}
+                  title={cycleDetails?.name ?? moduleDetails?.name ?? projectDetails?.name ?? ""}
+                />
+                <ProjectAnalyticsModalMainContent
+                  fullScreen={fullScreen}
+                  cycleDetails={cycleDetails}
+                  moduleDetails={moduleDetails}
+                  projectDetails={projectDetails}
+                />
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
new file mode 100644
index 00000000000..0ff82c7afd7
--- /dev/null
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -0,0 +1,63 @@
+// icons
+import { Triangle } from "lucide-react";
+// types
+import { IDefaultAnalyticsResponse, TStateGroups } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+  defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
+  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
+    <h5 className="text-xs text-red-500">DEMAND</h5>
+    <div>
+      <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
+      <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
+    </div>
+    <div className="space-y-6">
+      {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_GROUP_COLORS[group.state_group as TStateGroups],
+                  }}
+                />
+                <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 top-0 left-0 h-1 rounded duration-300"
+                style={{
+                  width: `${percentage}%`,
+                  backgroundColor: STATE_GROUP_COLORS[group.state_group as TStateGroups],
+                }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+      <p className="flex items-center gap-1 text-custom-text-200">
+        <Triangle className="h-4 w-4" />
+        <span>Estimate Demand:</span>
+      </p>
+      <p className="font-medium">
+        {defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum}
+      </p>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/analytics/scope-and-demand/index.ts b/web/components/analytics/scope-and-demand/index.ts
similarity index 100%
rename from apps/app/components/analytics/scope-and-demand/index.ts
rename to web/components/analytics/scope-and-demand/index.ts
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
similarity index 94%
rename from apps/app/components/analytics/scope-and-demand/leaderboard.tsx
rename to web/components/analytics/scope-and-demand/leaderboard.tsx
index dabd12e4e4a..d2dd6e067a8 100644
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -17,12 +17,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const AnalyticsLeaderboard: React.FC<Props> = ({
-  users,
-  title,
-  emptyStateMessage,
-  workspaceSlug,
-}) => (
+export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
   <div className="p-3 border border-custom-border-200 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
similarity index 75%
rename from apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
rename to web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 11daaf13d31..0f9e2c712d8 100644
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -3,16 +3,11 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import analyticsService from "services/analytics.service";
+import { AnalyticsService } from "services/analytics.service";
 // components
-import {
-  AnalyticsDemand,
-  AnalyticsLeaderboard,
-  AnalyticsScope,
-  AnalyticsYearWiseIssues,
-} from "components/analytics";
+import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
@@ -20,7 +15,12 @@ type Props = {
   fullScreen?: boolean;
 };
 
-export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
+// services
+const analyticsService = new AnalyticsService();
+
+export const ScopeAndDemand: React.FC<Props> = (props) => {
+  const { fullScreen = true } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
@@ -40,9 +40,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
     mutate: mutateDefaultAnalytics,
   } = useSWR(
     workspaceSlug ? DEFAULT_ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug
-      ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params)
-      : null
+    workspaceSlug ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params) : null
   );
 
   return (
@@ -53,7 +51,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
             <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope defaultAnalytics={defaultAnalytics} />
-              <AnalyticsLeaderboard
+              <AnalyticsLeaderBoard
                 users={defaultAnalytics.most_issue_created_user?.map((user) => ({
                   avatar: user?.created_by__avatar,
                   firstName: user?.created_by__first_name,
@@ -62,11 +60,11 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
                   count: user?.count,
                   id: user?.created_by__id,
                 }))}
-                title="创建任务最多"
-                emptyStateMessage="Co-workers and the number issues created by them appears here."
+                title="Most issues created"
+                emptyStateMessage="Co-workers and the number of issues created by them appears here."
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
-              <AnalyticsLeaderboard
+              <AnalyticsLeaderBoard
                 users={defaultAnalytics.most_issue_closed_user?.map((user) => ({
                   avatar: user?.assignees__avatar,
                   firstName: user?.assignees__first_name,
@@ -75,8 +73,8 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
                   count: user?.count,
                   id: user?.assignees__id,
                 }))}
-                title="完成任务最多"
-                emptyStateMessage="这里显示的是同事和由他们解决的任务数量"
+                title="Most issues closed"
+                emptyStateMessage="Co-workers and the number of issues closed by them appears here."
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
               <div className={fullScreen ? "md:col-span-2" : ""}>
@@ -97,7 +95,9 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
           <div className="space-y-4 text-custom-text-200">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
-              <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
+              <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>
+                Refresh
+              </Button>
             </div>
           </div>
         </div>
diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
new file mode 100644
index 00000000000..9231947bd35
--- /dev/null
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -0,0 +1,87 @@
+// ui
+import { BarGraph, ProfileEmptyState } from "components/ui";
+// image
+import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+
+type Props = {
+  defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
+  <div className="rounded-[10px] border border-custom-border-200">
+    <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
+    <div className="divide-y divide-custom-border-200">
+      <div>
+        <h6 className="px-3 text-base font-medium">Pending issues</h6>
+        {defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
+          <BarGraph
+            data={defaultAnalytics.pending_issue_user}
+            indexBy="assignees__id"
+            keys={["count"]}
+            height="250px"
+            colors={() => `#f97316`}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) =>
+              d.count > 0 ? d.count : 50
+            )}
+            tooltip={(datum) => {
+              const assignee = defaultAnalytics.pending_issue_user.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 = defaultAnalytics.pending_issue_user[datum.tickIndex] ?? "";
+
+                if (assignee && assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <image
+                        x={-8}
+                        y={10}
+                        width={16}
+                        height={16}
+                        xlinkHref={assignee?.assignees__avatar}
+                        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>
+  </div>
+);
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
similarity index 88%
rename from apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
rename to web/components/analytics/scope-and-demand/year-wise-issues.tsx
index 751403fc7bd..35270680253 100644
--- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -20,18 +20,15 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           {
             id: "issues_closed",
             color: "rgb(var(--color-primary-100))",
-            data: MONTHS_LIST.map((month) => ({
-              x: month.label.substring(0, 3),
+            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+              x: month.shortTitle,
               y:
-                defaultAnalytics.issue_completed_month_wise.find(
-                  (data) => data.month === month.value
-                )?.count || 0,
+                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
+                0,
             })),
           },
         ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map(
-          (data) => data.count
-        )}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
         height="300px"
         colors={(datum) => datum.color}
         curve="monotoneX"
diff --git a/apps/app/components/auth-screens/index.ts b/web/components/auth-screens/index.ts
similarity index 100%
rename from apps/app/components/auth-screens/index.ts
rename to web/components/auth-screens/index.ts
diff --git a/apps/app/components/auth-screens/not-authorized-view.tsx b/web/components/auth-screens/not-authorized-view.tsx
similarity index 100%
rename from apps/app/components/auth-screens/not-authorized-view.tsx
rename to web/components/auth-screens/not-authorized-view.tsx
diff --git a/apps/app/components/auth-screens/project/index.ts b/web/components/auth-screens/project/index.ts
similarity index 100%
rename from apps/app/components/auth-screens/project/index.ts
rename to web/components/auth-screens/project/index.ts
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
new file mode 100644
index 00000000000..5713e2ad85e
--- /dev/null
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ClipboardList } from "lucide-react";
+// images
+import JoinProjectImg from "public/auth/project-not-authorized.svg";
+
+export const JoinProject: React.FC = () => {
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleJoin = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsJoiningProject(true);
+
+    projectStore.joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
+      setIsJoiningProject(false);
+    });
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+      <div className="h-44 w-72">
+        <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
+      </div>
+      <h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
+
+      <div className="w-full max-w-md text-base text-custom-text-200">
+        <p className="mx-auto w-full text-sm md:w-3/4">
+          You are not a member of this project, but you can join this project by clicking the button below.
+        </p>
+      </div>
+      <div>
+        <Button
+          variant="primary"
+          prependIcon={<ClipboardList color="white" />}
+          loading={isJoiningProject}
+          onClick={handleJoin}
+        >
+          {isJoiningProject ? "Joining..." : "Click to join"}
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/auth-screens/workspace/index.ts b/web/components/auth-screens/workspace/index.ts
similarity index 100%
rename from apps/app/components/auth-screens/workspace/index.ts
rename to web/components/auth-screens/workspace/index.ts
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
new file mode 100644
index 00000000000..6737115a0f7
--- /dev/null
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Button } from "@plane/ui";
+
+export const NotAWorkspaceMember = () => (
+  <DefaultLayout>
+    <div className="grid h-full place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Not Authorized!</h3>
+          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
+            your pending invitations.
+          </p>
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <Link href="/invitations">
+            <a>
+              <Button variant="neutral-primary">Check pending invites</Button>
+            </a>
+          </Link>
+          <Link href="/create-workspace">
+            <a>
+              <Button variant="primary">Create new workspace</Button>
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  </DefaultLayout>
+);
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
new file mode 100644
index 00000000000..3e664bef4a4
--- /dev/null
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+
+// component
+import { CustomSelect, ToggleSwitch } from "@plane/ui";
+import { SelectMonthModal } from "components/automation";
+// icon
+import { ArchiveRestore } from "lucide-react";
+// constants
+import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+// types
+import { IProject } from "types";
+
+type Props = {
+  projectDetails: IProject | undefined;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
+};
+
+export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
+  const [monthModal, setmonthModal] = useState(false);
+
+  const initialValues: Partial<IProject> = { archive_in: 1 };
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-archive"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
+              <ArchiveRestore className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">
+                Plane will auto archive issues that have been completed or cancelled.
+              </p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={projectDetails?.archive_in !== 0}
+            onChange={() =>
+              projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
+            }
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+
+        {projectDetails?.archive_in !== 0 && (
+          <div className="ml-12">
+            <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
+              <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
+              <div className="w-1/2">
+                <CustomSelect
+                  value={projectDetails?.archive_in}
+                  label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`}
+                  onChange={(val: number) => {
+                    handleChange({ archive_in: val });
+                  }}
+                  input
+                  width="w-full"
+                  disabled={disabled}
+                >
+                  <>
+                    {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                      <CustomSelect.Option key={month.label} value={month.value}>
+                        <span className="text-sm">{month.label}</span>
+                      </CustomSelect.Option>
+                    ))}
+
+                    <button
+                      type="button"
+                      className="flex w-full text-sm select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => setmonthModal(true)}
+                    >
+                      Customise Time Range
+                    </button>
+                  </>
+                </CustomSelect>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
new file mode 100644
index 00000000000..7da250295aa
--- /dev/null
+++ b/web/components/automation/auto-close-automation.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// component
+import { SelectMonthModal } from "components/automation";
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
+// icons
+import { ArchiveX } from "lucide-react";
+// services
+import { ProjectStateService } from "services/project";
+// constants
+import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { STATES_LIST } from "constants/fetch-keys";
+// types
+import { IProject } from "types";
+// helper
+import { getStatesList } from "helpers/state.helper";
+
+type Props = {
+  projectDetails: IProject | undefined;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
+};
+
+const projectStateService = new ProjectStateService();
+
+export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
+  const [monthModal, setmonthModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const options = states
+    ?.filter((state) => state.group === "cancelled")
+    .map((state) => ({
+      value: state.id,
+      query: state.name,
+      content: (
+        <div className="flex items-center gap-2">
+          <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+          {state.name}
+        </div>
+      ),
+    }));
+
+  const multipleOptions = (options ?? []).length > 1;
+
+  const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
+
+  const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
+  const currentDefaultState = states?.find((s) => s.id === defaultState);
+
+  const initialValues: Partial<IProject> = {
+    close_in: 1,
+    default_state: defaultState,
+  };
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-close"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+
+      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
+              <ArchiveX className="h-4 w-4 text-red-500 flex-shrink-0" />
+            </div>
+            <div className="">
+              <h4 className="text-sm font-medium">Auto-close issues</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">
+                Plane will automatically close issue that haven’t been completed or cancelled.
+              </p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={projectDetails?.close_in !== 0}
+            onChange={() =>
+              projectDetails?.close_in === 0
+                ? handleChange({ close_in: 1, default_state: defaultState })
+                : handleChange({ close_in: 0, default_state: null })
+            }
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+
+        {projectDetails?.close_in !== 0 && (
+          <div className="ml-12">
+            <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
+              <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
+                <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
+                <div className="w-1/2">
+                  <CustomSelect
+                    value={projectDetails?.close_in}
+                    label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`}
+                    onChange={(val: number) => {
+                      handleChange({ close_in: val });
+                    }}
+                    input
+                    width="w-full"
+                    disabled={disabled}
+                  >
+                    <>
+                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                        <CustomSelect.Option key={month.label} value={month.value}>
+                          {month.label}
+                        </CustomSelect.Option>
+                      ))}
+                      <button
+                        type="button"
+                        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)}
+                      >
+                        Customise Time Range
+                      </button>
+                    </>
+                  </CustomSelect>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
+                <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
+                <div className="w-1/2 ">
+                  <CustomSearchSelect
+                    value={projectDetails?.default_state ? projectDetails?.default_state : defaultState}
+                    label={
+                      <div className="flex items-center gap-2">
+                        {selectedOption ? (
+                          <StateGroupIcon
+                            stateGroup={selectedOption.group}
+                            color={selectedOption.color}
+                            height="16px"
+                            width="16px"
+                          />
+                        ) : currentDefaultState ? (
+                          <StateGroupIcon
+                            stateGroup={currentDefaultState.group}
+                            color={currentDefaultState.color}
+                            height="16px"
+                            width="16px"
+                          />
+                        ) : (
+                          <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                        )}
+                        {selectedOption?.name
+                          ? selectedOption.name
+                          : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+                      </div>
+                    }
+                    onChange={(val: string) => {
+                      handleChange({ default_state: val });
+                    }}
+                    options={options}
+                    disabled={!multipleOptions}
+                    width="w-full"
+                    input
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/automation/index.ts b/web/components/automation/index.ts
similarity index 100%
rename from apps/app/components/automation/index.ts
rename to web/components/automation/index.ts
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
new file mode 100644
index 00000000000..88095b251c1
--- /dev/null
+++ b/web/components/automation/select-month-modal.tsx
@@ -0,0 +1,162 @@
+import React from "react";
+import { useRouter } from "next/router";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import type { IProject } from "types";
+
+// types
+type Props = {
+  isOpen: boolean;
+  type: "auto-close" | "auto-archive";
+  initialValues: Partial<IProject>;
+  handleClose: () => void;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen, handleClose, handleChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IProject>({
+    defaultValues: initialValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(initialValues);
+  };
+
+  const onSubmit = (formData: Partial<IProject>) => {
+    if (!workspaceSlug && !projectId) return;
+    handleChange(formData);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <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-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-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 rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      Customise Time Range
+                    </Dialog.Title>
+                    <div className="mt-8 flex items-center gap-2">
+                      <div className="flex w-full flex-col gap-1 justify-center">
+                        {type === "auto-close" ? (
+                          <>
+                            <Controller
+                              control={control}
+                              name="close_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="close_in"
+                                    name="close_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.close_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
+
+                            {errors.close_in && (
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            <Controller
+                              control={control}
+                              name="archive_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="archive_in"
+                                    name="archive_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.archive_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
+                            {errors.archive_in && (
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Submitting..." : "Submit"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
new file mode 100644
index 00000000000..2702b8e68a2
--- /dev/null
+++ b/web/components/breadcrumbs/index.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// icons
+import { MoveLeft } from "lucide-react";
+
+type BreadcrumbsProps = {
+  children: any;
+};
+
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
+        <button
+          type="button"
+          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
+          onClick={() => router.back()}
+        >
+          <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
+        </button>
+        {children}
+      </div>
+    </>
+  );
+};
+
+type BreadcrumbItemProps = {
+  title: string;
+  link?: string;
+  icon?: any;
+  linkTruncate?: boolean;
+  unshrinkTitle?: boolean;
+};
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  linkTruncate = false,
+  unshrinkTitle = false,
+}) => (
+  <>
+    {link ? (
+      <Link href={link}>
+        <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${linkTruncate ? "truncate" : ""}`}>
+          <p className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}>
+            {icon ?? null}
+            {title}
+          </p>
+        </a>
+      </Link>
+    ) : (
+      <div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
+          {icon}
+          <span className="break-words">{title}</span>
+        </p>
+      </div>
+    )}
+  </>
+);
+
+Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
+
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/web/components/command-palette/change-interface-theme.tsx b/web/components/command-palette/change-interface-theme.tsx
new file mode 100644
index 00000000000..0b899f8115f
--- /dev/null
+++ b/web/components/command-palette/change-interface-theme.tsx
@@ -0,0 +1,62 @@
+import React, { FC, Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Command } from "cmdk";
+import { useTheme } from "next-themes";
+import { Settings } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { THEME_OPTIONS } from "constants/themes";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ChangeInterfaceTheme: FC<Props> = observer((props) => {
+  const { setIsPaletteOpen } = props;
+  // store
+  const { user: userStore } = useMobxStore();
+  // states
+  const [mounted, setMounted] = useState(false);
+  // hooks
+  const { setTheme } = useTheme();
+  const { setToastAlert } = useToast();
+
+  const updateUserTheme = (newTheme: string) => {
+    setTheme(newTheme);
+    return userStore.updateCurrentUserTheme(newTheme).catch(() => {
+      setToastAlert({
+        title: "Failed to save user theme settings!",
+        type: "error",
+      });
+    });
+  };
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      {THEME_OPTIONS.filter((t) => t.value !== "custom").map((theme) => (
+        <Command.Item
+          key={theme.value}
+          onSelect={() => {
+            updateUserTheme(theme.value);
+            setIsPaletteOpen(false);
+          }}
+          className="focus:outline-none"
+        >
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <Settings className="h-4 w-4 text-custom-text-200" />
+            {theme.label}
+          </div>
+        </Command.Item>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
new file mode 100644
index 00000000000..2d65bd58ad4
--- /dev/null
+++ b/web/components/command-palette/command-modal.tsx
@@ -0,0 +1,765 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { Command } from "cmdk";
+import { Dialog, Transition } from "@headlessui/react";
+import {
+  FileText,
+  FolderPlus,
+  LinkIcon,
+  MessageSquare,
+  Rocket,
+  Search,
+  Settings,
+  Signal,
+  Trash2,
+  UserMinus2,
+  UserPlus2,
+} from "lucide-react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { IssueService } from "services/issue";
+// hooks
+import useDebounce from "hooks/use-debounce";
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// components
+import {
+  ChangeInterfaceTheme,
+  ChangeIssueAssignee,
+  ChangeIssuePriority,
+  ChangeIssueState,
+  commandGroups,
+} from "components/command-palette";
+import {
+  ContrastIcon,
+  DiceIcon,
+  DoubleCircleIcon,
+  LayersIcon,
+  Loader,
+  PhotoFilterIcon,
+  ToggleSwitch,
+  Tooltip,
+  UserGroupIcon,
+} from "@plane/ui";
+// icons
+import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IWorkspaceSearchResults } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  deleteIssue: () => void;
+  isPaletteOpen: boolean;
+  closePalette: () => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const issueService = new IssueService();
+
+export const CommandModal: React.FC<Props> = (props) => {
+  const { deleteIssue, isPaletteOpen, closePalette } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+  // states
+  const [placeholder, setPlaceholder] = useState("Type a command or search...");
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [results, setResults] = useState<IWorkspaceSearchResults>({
+    results: {
+      workspace: [],
+      project: [],
+      issue: [],
+      cycle: [],
+      module: [],
+      issue_view: [],
+      page: [],
+    },
+  });
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+  const [pages, setPages] = useState<string[]>([]);
+
+  const page = pages[pages.length - 1];
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+
+  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)
+      : null
+  );
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+
+        (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+          mutate(ISSUE_DETAILS(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, user]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    if (!issueDetails) return;
+
+    closePalette();
+    const updatedAssignees = issueDetails.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+    updateIssue({ assignees: updatedAssignees });
+  };
+
+  const redirect = (path: string) => {
+    closePalette();
+    router.push(path);
+  };
+
+  const createNewWorkspace = () => {
+    closePalette();
+    router.push("/create-workspace");
+  };
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!router.query.issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  }, [router, setToastAlert]);
+
+  useEffect(
+    () => {
+      if (!workspaceSlug) return;
+
+      setIsLoading(true);
+
+      if (debouncedSearchTerm) {
+        setIsSearching(true);
+        workspaceService
+          .searchWorkspace(workspaceSlug as string, {
+            ...(projectId ? { project_id: projectId.toString() } : {}),
+            search: debouncedSearchTerm,
+            workspace_search: !projectId ? true : isWorkspaceLevel,
+          })
+          .then((results) => {
+            setResults(results);
+            const count = Object.keys(results.results).reduce(
+              (accumulator, key) => (results.results as any)[key].length + accumulator,
+              0
+            );
+            setResultsCount(count);
+          })
+          .finally(() => {
+            setIsLoading(false);
+            setIsSearching(false);
+          });
+      } else {
+        setResults({
+          results: {
+            workspace: [],
+            project: [],
+            issue: [],
+            cycle: [],
+            module: [],
+            issue_view: [],
+            page: [],
+          },
+        });
+        setIsLoading(false);
+        setIsSearching(false);
+      }
+    },
+    [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
+  );
+
+  if (!user) return null;
+
+  return (
+    <Transition.Root
+      show={isPaletteOpen}
+      afterLeave={() => {
+        setSearchTerm("");
+      }}
+      as={React.Fragment}
+    >
+      <Dialog as="div" className="relative z-30" onClose={() => closePalette()}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <Dialog.Panel className="relative flex items-center justify-center w-full ">
+              <div className="w-full max-w-2xl transform   divide-y divide-custom-border-200 divide-opacity-10 rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+                <Command
+                  filter={(value, search) => {
+                    if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                    return 0;
+                  }}
+                  onKeyDown={(e) => {
+                    // when search is empty and page is undefined
+                    // when user tries to close the modal with esc
+                    if (e.key === "Escape" && !page && !searchTerm) {
+                      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));
+                      setPlaceholder("Type a command or search...");
+                    }
+                  }}
+                >
+                  <div
+                    className={`flex sm:items-center gap-4 p-3 pb-0 ${
+                      issueDetails ? "flex-col sm:flex-row justify-between" : "justify-end"
+                    }`}
+                  >
+                    {issueDetails && (
+                      <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
+                        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id} {issueDetails.name}
+                      </div>
+                    )}
+                    {projectId && (
+                      <Tooltip tooltipContent="Toggle workspace level search">
+                        <div className="flex-shrink-0 self-end sm:self-center flex items-center gap-1 text-xs cursor-pointer">
+                          <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 top-1/2 -translate-y-1/2 left-4 h-4 w-4 text-custom-text-200"
+                      aria-hidden="true"
+                      strokeWidth={2}
+                    />
+                    <Command.Input
+                      className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
+                      placeholder={placeholder}
+                      value={searchTerm}
+                      onValueChange={(e) => {
+                        setSearchTerm(e);
+                      }}
+                      autoFocus
+                      tabIndex={1}
+                    />
+                  </div>
+
+                  <Command.List className="max-h-96 overflow-scroll p-2">
+                    {searchTerm !== "" && (
+                      <h5 className="text-xs text-custom-text-100 mx-[3px] my-4">
+                        Search results for{" "}
+                        <span className="font-medium">
+                          {'"'}
+                          {searchTerm}
+                          {'"'}
+                        </span>{" "}
+                        in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
+                      </h5>
+                    )}
+
+                    {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
+                    )}
+
+                    {(isLoading || isSearching) && (
+                      <Command.Loading>
+                        <Loader className="space-y-3">
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                          <Loader.Item height="40px" />
+                        </Loader>
+                      </Command.Loading>
+                    )}
+
+                    {debouncedSearchTerm !== "" &&
+                      Object.keys(results.results).map((key) => {
+                        const section = (results.results as any)[key];
+                        const currentSection = commandGroups[key];
+
+                        if (section.length > 0) {
+                          return (
+                            <Command.Group key={key} heading={currentSection.title}>
+                              {section.map((item: any) => (
+                                <Command.Item
+                                  key={item.id}
+                                  onSelect={() => {
+                                    closePalette();
+                                    router.push(currentSection.path(item));
+                                  }}
+                                  value={`${key}-${item?.name}`}
+                                  className="focus:outline-none"
+                                >
+                                  <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                                    {currentSection.icon}
+                                    <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
+                                  </div>
+                                </Command.Item>
+                              ))}
+                            </Command.Group>
+                          );
+                        }
+                      })}
+
+                    {!page && (
+                      <>
+                        {issueId && (
+                          <Command.Group heading="Issue actions">
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                setPlaceholder("Change state...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-state"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <DoubleCircleIcon className="h-3.5 w-3.5" />
+                                Change state...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change priority...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-priority"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Signal className="h-3.5 w-3.5" />
+                                Change priority...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Assign to...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-issue-assignee"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <UserGroupIcon className="h-3.5 w-3.5" />
+                                Assign to...
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                handleIssueAssignees(user.id);
+                                setSearchTerm("");
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                {issueDetails?.assignees.includes(user.id) ? (
+                                  <>
+                                    <UserMinus2 className="h-3.5 w-3.5" />
+                                    Un-assign from me
+                                  </>
+                                ) : (
+                                  <>
+                                    <UserPlus2 className="h-3.5 w-3.5" />
+                                    Assign to me
+                                  </>
+                                )}
+                              </div>
+                            </Command.Item>
+                            <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
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                copyIssueUrlToClipboard();
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <LinkIcon className="h-3.5 w-3.5" />
+                                Copy issue URL
+                              </div>
+                            </Command.Item>
+                          </Command.Group>
+                        )}
+                        <Command.Group heading="Issue">
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              const e = new KeyboardEvent("keydown", {
+                                key: "c",
+                              });
+                              document.dispatchEvent(e);
+                            }}
+                            className="focus:bg-custom-background-80"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <LayersIcon className="h-3.5 w-3.5" />
+                              Create new issue
+                            </div>
+                            <kbd>C</kbd>
+                          </Command.Item>
+                        </Command.Group>
+
+                        {workspaceSlug && (
+                          <Command.Group heading="Project">
+                            <Command.Item
+                              onSelect={() => {
+                                closePalette();
+                                const e = new KeyboardEvent("keydown", {
+                                  key: "p",
+                                });
+                                document.dispatchEvent(e);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <FolderPlus className="h-3.5 w-3.5" />
+                                Create new project
+                              </div>
+                              <kbd>P</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                        )}
+
+                        {projectId && (
+                          <>
+                            <Command.Group heading="Cycle">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  const e = new KeyboardEvent("keydown", {
+                                    key: "q",
+                                  });
+                                  document.dispatchEvent(e);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <ContrastIcon className="h-3.5 w-3.5" />
+                                  Create new cycle
+                                </div>
+                                <kbd>Q</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="Module">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  const e = new KeyboardEvent("keydown", {
+                                    key: "m",
+                                  });
+                                  document.dispatchEvent(e);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <DiceIcon className="h-3.5 w-3.5" />
+                                  Create new module
+                                </div>
+                                <kbd>M</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="View">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  const e = new KeyboardEvent("keydown", {
+                                    key: "v",
+                                  });
+                                  document.dispatchEvent(e);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <PhotoFilterIcon className="h-3.5 w-3.5" />
+                                  Create new view
+                                </div>
+                                <kbd>V</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                            <Command.Group heading="Page">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  const e = new KeyboardEvent("keydown", {
+                                    key: "d",
+                                  });
+                                  document.dispatchEvent(e);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <FileText className="h-3.5 w-3.5" />
+                                  Create new page
+                                </div>
+                                <kbd>D</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                          </>
+                        )}
+
+                        <Command.Group heading="Workspace Settings">
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Search workspace settings...");
+                              setSearchTerm("");
+                              setPages([...pages, "settings"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Settings className="h-3.5 w-3.5" />
+                              Search settings...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Account">
+                          <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FolderPlus className="h-3.5 w-3.5" />
+                              Create new workspace
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change interface theme...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-interface-theme"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Settings className="h-3.5 w-3.5" />
+                              Change interface theme...
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                        <Command.Group heading="Help">
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              const e = new KeyboardEvent("keydown", {
+                                key: "h",
+                              });
+                              document.dispatchEvent(e);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Rocket className="h-3.5 w-3.5" />
+                              Open keyboard shortcuts
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://docs.plane.so/", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <FileText className="h-3.5 w-3.5" />
+                              Open Plane documentation
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://discord.com/invite/A92xrEGCge", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                              Join our Discord
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                              Report a bug
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              closePalette();
+                              (window as any).$crisp.push(["do", "chat:open"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <MessageSquare className="h-3.5 w-3.5" />
+                              Chat with us
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                      </>
+                    )}
+
+                    {page === "settings" && workspaceSlug && (
+                      <>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            General
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Members
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Billing and Plans
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Integrations
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/imports`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Import
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => redirect(`/${workspaceSlug}/settings/exports`)}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                            Export
+                          </div>
+                        </Command.Item>
+                      </>
+                    )}
+                    {page === "change-issue-state" && issueDetails && (
+                      <ChangeIssueState issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-issue-priority" && issueDetails && (
+                      <ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-issue-assignee" && issueDetails && (
+                      <ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
+                    )}
+                    {page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={closePalette} />}
+                  </Command.List>
+                </Command>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
new file mode 100644
index 00000000000..33c958b6c69
--- /dev/null
+++ b/web/components/command-palette/command-pallette.tsx
@@ -0,0 +1,245 @@
+import React, { useCallback, useEffect, FC } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// 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 { CreateProjectModal } from "components/project";
+import { CreateUpdateProjectViewModal } from "components/views";
+import { CreateUpdatePageModal } from "components/pages";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// services
+import { IssueService } from "services/issue";
+// fetch keys
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+const issueService = new IssueService();
+
+export const CommandPalette: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
+  // store
+  const { commandPalette, theme: themeStore } = useMobxStore();
+  const {
+    isCommandPaletteOpen,
+    toggleCommandPaletteModal,
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isCreateCycleModalOpen,
+    toggleCreateCycleModal,
+    isCreatePageModalOpen,
+    toggleCreatePageModal,
+    isCreateProjectModalOpen,
+    toggleCreateProjectModal,
+    isCreateModuleModalOpen,
+    toggleCreateModuleModal,
+    isCreateViewModalOpen,
+    toggleCreateViewModal,
+    isShortcutModalOpen,
+    toggleShortcutModal,
+    isBulkDeleteIssueModalOpen,
+    toggleBulkDeleteIssueModal,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
+  } = commandPalette;
+  const { toggleSidebar } = themeStore;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  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)
+      : null
+  );
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  }, [setToastAlert, issueId]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const { key, ctrlKey, metaKey, altKey } = e;
+      if (!key) return;
+
+      const keyPressed = key.toLowerCase();
+      const cmdClicked = ctrlKey || metaKey;
+      // if on input, textarea or editor, don't do anything
+      if (
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLInputElement ||
+        (e.target as Element).classList?.contains("ProseMirror")
+      )
+        return;
+
+      if (cmdClicked) {
+        if (keyPressed === "k") {
+          e.preventDefault();
+          toggleCommandPaletteModal(true);
+        } else if (keyPressed === "c" && altKey) {
+          e.preventDefault();
+          copyIssueUrlToClipboard();
+        } else if (keyPressed === "b") {
+          e.preventDefault();
+          toggleSidebar();
+        }
+      } else {
+        if (keyPressed === "c") {
+          toggleCreateIssueModal(true);
+        } else if (keyPressed === "p") {
+          toggleCreateProjectModal(true);
+        } else if (keyPressed === "h") {
+          toggleShortcutModal(true);
+        } else if (keyPressed === "v" && workspaceSlug && projectId) {
+          toggleCreateViewModal(true);
+        } else if (keyPressed === "d" && workspaceSlug && projectId) {
+          toggleCreatePageModal(true);
+        } else if (keyPressed === "q" && workspaceSlug && projectId) {
+          toggleCreateCycleModal(true);
+        } else if (keyPressed === "m" && workspaceSlug && projectId) {
+          toggleCreateModuleModal(true);
+        } else if (keyPressed === "backspace" || keyPressed === "delete") {
+          e.preventDefault();
+          toggleBulkDeleteIssueModal(true);
+        }
+      }
+    },
+    [
+      copyIssueUrlToClipboard,
+      toggleCreateProjectModal,
+      toggleCreateViewModal,
+      toggleCreatePageModal,
+      toggleShortcutModal,
+      toggleCreateCycleModal,
+      toggleCreateModuleModal,
+      toggleBulkDeleteIssueModal,
+      toggleCommandPaletteModal,
+      toggleSidebar,
+      toggleCreateIssueModal,
+      projectId,
+      workspaceSlug,
+    ]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (!user) return null;
+
+  const deleteIssue = () => {
+    toggleCommandPaletteModal(false);
+    toggleDeleteIssueModal(true);
+  };
+
+  return (
+    <>
+      <ShortcutsModal
+        isOpen={isShortcutModalOpen}
+        onClose={() => {
+          toggleShortcutModal(false);
+        }}
+      />
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isCreateProjectModalOpen}
+          onClose={() => {
+            toggleCreateProjectModal(false);
+          }}
+          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()}
+          />
+          <CreateUpdatePageModal
+            isOpen={isCreatePageModalOpen}
+            handleClose={() => toggleCreatePageModal(false)}
+            user={user}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+          />
+        </>
+      )}
+
+      <CreateUpdateIssueModal
+        isOpen={isCreateIssueModalOpen}
+        handleClose={() => toggleCreateIssueModal(false)}
+        prePopulateData={
+          cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
+        }
+      />
+
+      {issueId && issueDetails && (
+        <DeleteIssueModal
+          handleClose={() => toggleDeleteIssueModal(false)}
+          isOpen={isDeleteIssueModalOpen}
+          data={issueDetails}
+        />
+      )}
+
+      <BulkDeleteIssuesModal
+        isOpen={isBulkDeleteIssueModalOpen}
+        onClose={() => {
+          toggleBulkDeleteIssueModal(false);
+        }}
+        user={user}
+      />
+      <CommandModal
+        deleteIssue={deleteIssue}
+        isPaletteOpen={isCommandPaletteOpen}
+        closePalette={() => {
+          toggleCommandPaletteModal(false);
+        }}
+      />
+    </>
+  );
+});
diff --git a/apps/app/components/command-palette/helpers.tsx b/web/components/command-palette/helpers.tsx
similarity index 80%
rename from apps/app/components/command-palette/helpers.tsx
rename to web/components/command-palette/helpers.tsx
index 0b232b7dc82..90511f90767 100644
--- a/apps/app/components/command-palette/helpers.tsx
+++ b/web/components/command-palette/helpers.tsx
@@ -1,4 +1,6 @@
 // types
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { Briefcase, FileText, LayoutGrid } from "lucide-react";
 import {
   IWorkspaceDefaultSearchResult,
   IWorkspaceIssueSearchResult,
@@ -8,14 +10,14 @@ import {
 
 export const commandGroups: {
   [key: string]: {
-    icon: string;
+    icon: JSX.Element;
     itemName: (item: any) => React.ReactNode;
     path: (item: any) => string;
     title: string;
   };
 } = {
   cycle: {
-    icon: "contrast",
+    icon: <ContrastIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span>
@@ -28,7 +30,7 @@ export const commandGroups: {
     title: "Cycles",
   },
   issue: {
-    icon: "stack",
+    icon: <LayersIcon className="h-3 w-3" />,
     itemName: (issue: IWorkspaceIssueSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{issue.project__identifier}</span>
@@ -41,7 +43,7 @@ export const commandGroups: {
     title: "Issues",
   },
   issue_view: {
-    icon: "photo_filter",
+    icon: <PhotoFilterIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{view.project__identifier}</span>
@@ -54,7 +56,7 @@ export const commandGroups: {
     title: "Views",
   },
   module: {
-    icon: "dataset",
+    icon: <DiceIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{module.project__identifier}</span>
@@ -67,7 +69,7 @@ export const commandGroups: {
     title: "Modules",
   },
   page: {
-    icon: "article",
+    icon: <FileText className="h-3 w-3" />,
     itemName: (page: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{page.project__identifier}</span>
@@ -80,14 +82,13 @@ export const commandGroups: {
     title: "Pages",
   },
   project: {
-    icon: "work",
+    icon: <Briefcase className="h-3 w-3" />,
     itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
-    path: (project: IWorkspaceProjectSearchResult) =>
-      `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
     title: "Projects",
   },
   workspace: {
-    icon: "grid_view",
+    icon: <LayoutGrid className="h-3 w-3" />,
     itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
     path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
     title: "Workspaces",
diff --git a/web/components/command-palette/index.ts b/web/components/command-palette/index.ts
new file mode 100644
index 00000000000..a1230ca3210
--- /dev/null
+++ b/web/components/command-palette/index.ts
@@ -0,0 +1,6 @@
+export * from "./issue";
+export * from "./change-interface-theme";
+export * from "./command-modal";
+export * from "./command-pallette";
+export * from "./helpers";
+export * from "./shortcuts-modal";
diff --git a/web/components/command-palette/issue/change-issue-assignee.tsx b/web/components/command-palette/issue/change-issue-assignee.tsx
new file mode 100644
index 00000000000..2d655571c83
--- /dev/null
+++ b/web/components/command-palette/issue/change-issue-assignee.tsx
@@ -0,0 +1,110 @@
+import { Dispatch, SetStateAction, useCallback, FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { Command } from "cmdk";
+import { Check } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueService } from "services/issue";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { IUser, IIssue } from "types";
+// constants
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+  user: IUser | undefined;
+};
+
+// services
+const issueService = new IssueService();
+
+export const ChangeIssueAssignee: FC<Props> = observer((props) => {
+  const { setIsPaletteOpen, issue, user } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+  const members = projectId ? projectStore.members?.[projectId.toString()] : undefined;
+
+  const options =
+    members?.map(({ member }) => ({
+      value: member.id,
+      query: member.display_name,
+      content: (
+        <>
+          <div className="flex items-center gap-2">
+            <Avatar name={member.display_name} src={member.avatar} showTooltip={false} />
+            {member.display_name}
+          </div>
+          {issue.assignees.includes(member.id) && (
+            <div>
+              <Check className="h-3 w-3" />
+            </div>
+          )}
+        </>
+      ),
+    })) ?? [];
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+        async (prevData) => {
+          if (!prevData) return prevData;
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, user]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    const updatedAssignees = issue.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+
+    updateIssue({ assignees: updatedAssignees });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {options.map((option: any) => (
+        <Command.Item
+          key={option.value}
+          onSelect={() => handleIssueAssignees(option.value)}
+          className="focus:outline-none"
+        >
+          {option.content}
+        </Command.Item>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
new file mode 100644
index 00000000000..5551a8a3aa7
--- /dev/null
+++ b/web/components/command-palette/issue/change-issue-priority.tsx
@@ -0,0 +1,81 @@
+import React, { Dispatch, SetStateAction, useCallback } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// services
+import { IssueService } from "services/issue";
+// types
+import { IIssue, IUser, TIssuePriorities } from "types";
+// constants
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { PRIORITIES } from "constants/project";
+// icons
+import { PriorityIcon } from "@plane/ui";
+import { Check } from "lucide-react";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+  user: IUser;
+};
+
+// services
+const issueService = new IssueService();
+
+export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+        async (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, user]
+  );
+
+  const handleIssueState = (priority: TIssuePriorities) => {
+    submitChanges({ priority });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {PRIORITIES.map((priority) => (
+        <Command.Item key={priority} onSelect={() => handleIssueState(priority)} className="focus:outline-none">
+          <div className="flex items-center space-x-3">
+            <PriorityIcon priority={priority} />
+            <span className="capitalize">{priority ?? "None"}</span>
+          </div>
+          <div>{priority === issue.priority && <Check className="h-3 w-3" />}</div>
+        </Command.Item>
+      ))}
+    </>
+  );
+};
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
new file mode 100644
index 00000000000..03f495603ba
--- /dev/null
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -0,0 +1,99 @@
+import React, { Dispatch, SetStateAction, useCallback } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// services
+import { IssueService } from "services/issue";
+import { ProjectStateService } from "services/project";
+// ui
+import { Spinner, StateGroupIcon } from "@plane/ui";
+// icons
+import { Check } from "lucide-react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IUser, IIssue } from "types";
+// fetch keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
+  issue: IIssue;
+  user: IUser | undefined;
+};
+
+// services
+const issueService = new IssueService();
+const stateService = new ProjectStateService();
+
+export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+        async (prevData) => {
+          if (!prevData) return prevData;
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutateIssueDetails();
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
+  );
+
+  const handleIssueState = (stateId: string) => {
+    submitChanges({ state: stateId });
+    setIsPaletteOpen(false);
+  };
+
+  return (
+    <>
+      {states ? (
+        states.length > 0 ? (
+          states.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 && <Check className="h-3 w-3" />}</div>
+            </Command.Item>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/command-palette/issue/index.ts b/web/components/command-palette/issue/index.ts
similarity index 100%
rename from apps/app/components/command-palette/issue/index.ts
rename to web/components/command-palette/issue/index.ts
diff --git a/web/components/command-palette/shortcuts-modal.tsx b/web/components/command-palette/shortcuts-modal.tsx
new file mode 100644
index 00000000000..85d2b4fe4ca
--- /dev/null
+++ b/web/components/command-palette/shortcuts-modal.tsx
@@ -0,0 +1,201 @@
+import { FC, useEffect, useState, Dispatch, SetStateAction, Fragment } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { Command, Search, X } from "lucide-react";
+// ui
+import { Input } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const shortcuts = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: "Ctrl,K", description: "To open navigator" },
+      { keys: "↑", description: "Move up" },
+      { keys: "↓", description: "Move down" },
+      { keys: "←", description: "Move left" },
+      { keys: "→", description: "Move right" },
+    ],
+  },
+  {
+    title: "Common",
+    shortcuts: [
+      { keys: "P", description: "To create project" },
+      { keys: "C", description: "To create issue" },
+      { keys: "Q", description: "To create cycle" },
+      { keys: "M", description: "To create module" },
+      { keys: "V", description: "To create view" },
+      { keys: "D", description: "To create page" },
+      { keys: "Delete", description: "To bulk delete issues" },
+      { keys: "H", description: "To open shortcuts guide" },
+      {
+        keys: "Ctrl,Alt,C",
+        description: "To copy issue url when on issue detail page",
+      },
+    ],
+  },
+];
+
+const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
+
+export const ShortcutsModal: FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  // states
+  const [query, setQuery] = useState("");
+  // computed
+  const filteredShortcuts = allShortcuts.filter((shortcut) =>
+    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === "" ? true : false
+  );
+
+  useEffect(() => {
+    if (!isOpen) setQuery("");
+  }, [isOpen]);
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 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={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-80 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-custom-background-80 p-5">
+                  <div className="sm:flex sm:items-start">
+                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
+                      >
+                        <span>Keyboard Shortcuts</span>
+                        <span>
+                          <button type="button" onClick={onClose}>
+                            <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                          </button>
+                        </span>
+                      </Dialog.Title>
+                      <div>
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
+                          <Search className="h-3.5 w-3.5 text-custom-text-200" />
+                          <Input
+                            id="search"
+                            name="search"
+                            type="text"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder="Search for shortcuts"
+                            className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
+                          />
+                        </div>
+                      </div>
+                      <div className="flex w-full flex-col gap-y-3">
+                        {query.trim().length > 0 ? (
+                          filteredShortcuts.length > 0 ? (
+                            filteredShortcuts.map((shortcut) => (
+                              <div key={shortcut.keys} className="flex w-full flex-col">
+                                <div className="flex flex-col gap-y-3">
+                                  <div className="flex items-center justify-between">
+                                    <p className="text-sm text-custom-text-200">{shortcut.description}</p>
+                                    <div className="flex items-center gap-x-2.5">
+                                      {shortcut.keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          {key === "Ctrl" ? (
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
+                                              <Command className="h-4 w-4 text-custom-text-200" />
+                                            </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <Command className="h-4 w-4 text-custom-text-200" />
+                                            </kbd>
+                                          ) : (
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                              {key}
+                                            </kbd>
+                                          )}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            ))
+                          ) : (
+                            <div className="flex flex-col gap-y-3">
+                              <p className="text-sm text-custom-text-200">
+                                No shortcuts found for{" "}
+                                <span className="font-semibold italic">
+                                  {`"`}
+                                  {query}
+                                  {`"`}
+                                </span>
+                              </p>
+                            </div>
+                          )
+                        ) : (
+                          shortcuts.map(({ title, shortcuts }) => (
+                            <div key={title} className="flex w-full flex-col">
+                              <p className="mb-4 font-medium">{title}</p>
+                              <div className="flex flex-col gap-y-3">
+                                {shortcuts.map(({ keys, description }, index) => (
+                                  <div key={index} className="flex items-center justify-between">
+                                    <p className="text-sm text-custom-text-200">{description}</p>
+                                    <div className="flex items-center gap-x-2.5">
+                                      {keys.split(",").map((key, index) => (
+                                        <span key={index} className="flex items-center gap-1">
+                                          {key === "Ctrl" ? (
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
+                                              <Command className="h-4 w-4 text-custom-text-200" />
+                                            </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                              <Command className="h-4 w-4 text-custom-text-200" />
+                                            </kbd>
+                                          ) : (
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                              {key}
+                                            </kbd>
+                                          )}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/common/empty-state.tsx b/web/components/common/empty-state.tsx
new file mode 100644
index 00000000000..e749600aeef
--- /dev/null
+++ b/web/components/common/empty-state.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+import Image from "next/image";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex items-center justify-center h-full w-full`}>
+    <div className="text-center flex flex-col items-center w-full">
+      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
+      <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
+      {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/components/common/index.ts b/web/components/common/index.ts
new file mode 100644
index 00000000000..57f8b6cca19
--- /dev/null
+++ b/web/components/common/index.ts
@@ -0,0 +1,2 @@
+export * from "./product-updates-modal";
+export * from "./empty-state";
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
new file mode 100644
index 00000000000..aa4618d3ac1
--- /dev/null
+++ b/web/components/common/product-updates-modal.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+
+import useSWR from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { renderLongDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
+            <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 overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
+                  <Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
+                              </span>
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
new file mode 100644
index 00000000000..1712dd53e2d
--- /dev/null
+++ b/web/components/core/activity.tsx
@@ -0,0 +1,688 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useEstimateOption from "hooks/use-estimate-option";
+// services
+import { IssueLabelService } from "services/issue";
+// icons
+import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
+import {
+  TagIcon,
+  CopyPlus,
+  Calendar,
+  Link2Icon,
+  RocketIcon,
+  Users2Icon,
+  ArchiveIcon,
+  PaperclipIcon,
+  ContrastIcon,
+  TriangleIcon,
+  LayoutGridIcon,
+  SignalMediumIcon,
+  MessageSquareIcon,
+  UsersIcon,
+} from "lucide-react";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// types
+import { IIssueActivity } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
+
+// services
+const issueLabelService = new IssueLabelService();
+
+const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
+      <a
+        href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+      >
+        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
+        <RocketIcon size={12} color="#6b7280" />
+      </a>
+    </Tooltip>
+  );
+};
+
+const UserLink = ({ activity }: { activity: IIssueActivity }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <a
+      href={`/${workspaceSlug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
+    >
+      {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
+    </a>
+  );
+};
+
+const LabelPill = ({ labelId }: { labelId: string }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: labels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <span
+      className="h-1.5 w-1.5 rounded-full"
+      style={{
+        backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
+const EstimatePoint = ({ point }: { point: string }) => {
+  const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
+  const currentPoint = Number(point) + 1;
+
+  return (
+    <span className="font-medium text-custom-text-100">
+      {isEstimateActive ? estimateValue : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
+    </span>
+  );
+};
+
+const activityDetails: {
+  [key: string]: {
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
+    icon: React.ReactNode;
+  };
+} = {
+  assignees: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new assignee <UserLink activity={activity} />
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            removed the assignee <UserLink activity={activity} />
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Users2Icon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  archived_at: {
+    message: (activity) => {
+      if (activity.new_value === "restore") return "restored the issue.";
+      else return "archived the issue.";
+    },
+    icon: <ArchiveIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  attachment: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            uploaded a new{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              attachment
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed an attachment
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <PaperclipIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  blocking: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is blocking issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
+  },
+  blocked_by: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is being blocked by{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed this issue being blocked by issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
+  duplicate: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue as duplicate of{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed this issue as a duplicate of{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <CopyPlus size={12} color="#6b7280" />,
+  },
+  relates_to: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked that this issue relates to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <RelatedIcon height="12" width="12" color="#6b7280" />,
+  },
+  cycles: {
+    message: (activity, showIssue, workspaceSlug) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the cycle{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the cycle to{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the cycle{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.old_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+    },
+    icon: <ContrastIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  description: {
+    message: (activity, showIssue) => (
+      <>
+        updated the description
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  estimate_point: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the estimate point
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the estimate point to <EstimatePoint point={activity.new_value} />
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <TriangleIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  issue: {
+    message: (activity) => {
+      if (activity.verb === "created") return "created the issue.";
+      else return "deleted an issue.";
+    },
+    icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
+  },
+  labels: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new label{" "}
+            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <LabelPill labelId={activity.new_identifier ?? ""} />
+              <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed the label{" "}
+            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <LabelPill labelId={activity.old_identifier ?? ""} />
+              <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <TagIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  link: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            updated the{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            removed this{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Link2Icon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  modules: {
+    message: (activity, showIssue, workspaceSlug) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the module{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the module to{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.new_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the module{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              {activity.old_value}
+              <RocketIcon size={12} color="#6b7280" />
+            </a>
+          </>
+        );
+    },
+    icon: <DiceIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
+  },
+  name: {
+    message: (activity, showIssue) => (
+      <>
+        set the name to {activity.new_value}
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  parent: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <UsersIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
+  },
+  priority: {
+    message: (activity, showIssue) => (
+      <>
+        set the priority to{" "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  start_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the start date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the start date to{" "}
+            <span className="font-medium text-custom-text-100">
+              {renderShortDateWithYearFormat(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  state: {
+    message: (activity, showIssue) => (
+      <>
+        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
+  },
+  target_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the due date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the due date to{" "}
+            <span className="font-medium text-custom-text-100">
+              {renderShortDateWithYearFormat(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+  },
+};
+
+export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
+  <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
+);
+
+export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <>
+      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        workspaceSlug?.toString() ?? ""
+      )}
+    </>
+  );
+};
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
new file mode 100644
index 00000000000..66c4f4771b6
--- /dev/null
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -0,0 +1,145 @@
+import { Fragment } from "react";
+import { Controller, useForm } from "react-hook-form";
+import DatePicker from "react-datepicker";
+import { Dialog, Transition } from "@headlessui/react";
+
+// components
+import { DateFilterSelect } from "./date-filter-select";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+
+type Props = {
+  title: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSelect: (val: string[]) => void;
+};
+
+type TFormValues = {
+  filterType: "before" | "after" | "range";
+  date1: Date;
+  date2: Date;
+};
+
+const defaultValues: TFormValues = {
+  filterType: "range",
+  date1: new Date(),
+  date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
+};
+
+export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
+  const { handleSubmit, watch, control } = useForm<TFormValues>({
+    defaultValues,
+  });
+
+  const handleFormSubmit = (formData: TFormValues) => {
+    const { filterType, date1, date2 } = formData;
+
+    if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]);
+    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
+
+    handleClose();
+  };
+
+  const isInvalid = watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+
+  const nextDay = new Date(watch("date1"));
+  nextDay.setDate(nextDay.getDate() + 1);
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
+                  <div className="flex w-full justify-between">
+                    <Controller
+                      control={control}
+                      name="filterType"
+                      render={({ field: { value, onChange } }) => (
+                        <DateFilterSelect title={title} value={value} onChange={onChange} />
+                      )}
+                    />
+                    <X className="h-4 w-4 cursor-pointer" onClick={handleClose} />
+                  </div>
+                  <div className="flex w-full justify-between gap-4">
+                    <Controller
+                      control={control}
+                      name="date1"
+                      render={({ field: { value, onChange } }) => (
+                        <DatePicker
+                          selected={value}
+                          onChange={(val) => onChange(val)}
+                          dateFormat="dd-MM-yyyy"
+                          calendarClassName="h-full"
+                          inline
+                        />
+                      )}
+                    />
+                    {watch("filterType") === "range" && (
+                      <Controller
+                        control={control}
+                        name="date2"
+                        render={({ field: { value, onChange } }) => (
+                          <DatePicker
+                            selected={value}
+                            onChange={onChange}
+                            dateFormat="dd-MM-yyyy"
+                            calendarClassName="h-full"
+                            minDate={nextDay}
+                            inline
+                          />
+                        )}
+                      />
+                    )}
+                  </div>
+                  {watch("filterType") === "range" && (
+                    <h6 className="text-xs flex items-center gap-1">
+                      <span className="text-custom-text-200">After:</span>
+                      <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
+                      <span className="text-custom-text-200 ml-1">Before:</span>
+                      {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
+                    </h6>
+                  )}
+                  <div className="flex justify-end gap-4">
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" disabled={isInvalid}>
+                      Apply
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
similarity index 85%
rename from apps/app/components/core/filters/date-filter-select.tsx
rename to web/components/core/filters/date-filter-select.tsx
index b35b585ce47..2585e2f9575 100644
--- a/apps/app/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 // icons
-import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "components/icons";
+import { CalendarDays } from "lucide-react";
 // fetch-keys
 
 type Props = {
@@ -32,7 +32,7 @@ const dueDateRange: DueDate[] = [
   {
     name: "range",
     value: "range",
-    icon: <CalendarMonthIcon className="h-4 w-4 " />,
+    icon: <CalendarDays className="h-4 w-4 " />,
   },
 ];
 
diff --git a/web/components/core/filters/index.ts b/web/components/core/filters/index.ts
new file mode 100644
index 00000000000..28e36d3e67c
--- /dev/null
+++ b/web/components/core/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./date-filter-modal";
+export * from "./date-filter-select";
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
new file mode 100644
index 00000000000..123eee6d2d1
--- /dev/null
+++ b/web/components/core/image-picker-popover.tsx
@@ -0,0 +1,352 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useDropzone } from "react-dropzone";
+import { Tab, Transition, Popover } from "@headlessui/react";
+import { Control, Controller } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { Button, Input, Loader } from "@plane/ui";
+
+const tabOptions = [
+  {
+    key: "unsplash",
+    title: "Unsplash",
+  },
+  {
+    key: "images",
+    title: "Images",
+  },
+  {
+    key: "upload",
+    title: "Upload",
+  },
+];
+
+type Props = {
+  label: string | React.ReactNode;
+  value: string | null;
+  control: Control<any>;
+  onChange: (data: string) => void;
+  disabled?: boolean;
+};
+
+// services
+const fileService = new FileService();
+
+export const ImagePickerPopover: React.FC<Props> = observer((props) => {
+  const { label, value, control, onChange, disabled = false } = props;
+
+  const [image, setImage] = useState<File | null>(null);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchParams, setSearchParams] = useState("");
+  const [formData, setFormData] = useState({
+    search: "",
+  });
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
+
+  const { data: unsplashImages, error: unsplashError } = useSWR(
+    `UNSPLASH_IMAGES_${searchParams}`,
+    () => fileService.getUnsplashImages(searchParams),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const { data: projectCoverImages } = useSWR(`PROJECT_COVER_IMAGES`, () => fileService.getProjectCoverImages(), {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
+
+  const imagePickerRef = useRef<HTMLDivElement>(null);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImage(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
+  });
+
+  const handleSubmit = async () => {
+    setIsImageUploading(true);
+
+    if (!image || !workspaceSlug) return;
+
+    const formData = new FormData();
+    formData.append("asset", image);
+    formData.append("attributes", JSON.stringify({}));
+
+    fileService
+      .uploadFile(workspaceSlug.toString(), formData)
+      .then((res) => {
+        const oldValue = value;
+        const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
+
+        const imageUrl = res.asset;
+        onChange(imageUrl);
+        setIsImageUploading(false);
+        setImage(null);
+        setIsOpen(false);
+
+        if (isUnsplashImage) return;
+
+        if (oldValue && workspaceDetails) fileService.deleteFile(workspaceDetails.id, oldValue);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    if (!unsplashImages || value !== null) return;
+
+    onChange(unsplashImages[0].urls.regular);
+  }, [value, onChange, unsplashImages]);
+
+  useOutsideClickDetector(imagePickerRef, () => setIsOpen(false));
+
+  return (
+    <Popover className="relative z-[2]" ref={ref}>
+      <Popover.Button
+        className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        onClick={() => setIsOpen((prev) => !prev)}
+        disabled={disabled}
+      >
+        {label}
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm">
+          <div
+            ref={imagePickerRef}
+            className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl"
+          >
+            <Tab.Group>
+              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
+                {tabOptions.map((tab) => {
+                  if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
+                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
+
+                  return (
+                    <Tab
+                      key={tab.key}
+                      className={({ selected }) =>
+                        `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
+                          selected ? "bg-custom-primary text-white" : "text-custom-text-100"
+                        }`
+                      }
+                    >
+                      {tab.title}
+                    </Tab>
+                  );
+                })}
+              </Tab.List>
+              <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
+                {(unsplashImages || !unsplashError) && (
+                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
+                    <div className="flex gap-x-2">
+                      <Controller
+                        control={control}
+                        name="search"
+                        render={({ field: { value, ref } }) => (
+                          <Input
+                            id="search"
+                            name="search"
+                            type="text"
+                            value={value}
+                            onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                            ref={ref}
+                            placeholder="Search for images"
+                            className="text-sm w-full"
+                          />
+                        )}
+                      />
+                      <Button variant="primary" onClick={() => setSearchParams(formData.search)} size="sm">
+                        Search
+                      </Button>
+                    </div>
+                    {unsplashImages ? (
+                      unsplashImages.length > 0 ? (
+                        <div className="grid grid-cols-4 gap-4">
+                          {unsplashImages.map((image) => (
+                            <div
+                              key={image.id}
+                              className="relative col-span-2 aspect-video md:col-span-1"
+                              onClick={() => {
+                                setIsOpen(false);
+                                onChange(image.urls.regular);
+                              }}
+                            >
+                              <img
+                                src={image.urls.small}
+                                alt={image.alt_description}
+                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
+                      )
+                    ) : (
+                      <Loader className="grid grid-cols-4 gap-4">
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                      </Loader>
+                    )}
+                  </Tab.Panel>
+                )}
+                {(!projectCoverImages || projectCoverImages.length !== 0) && (
+                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
+                    {projectCoverImages ? (
+                      projectCoverImages.length > 0 ? (
+                        <div className="grid grid-cols-4 gap-4">
+                          {projectCoverImages.map((image, index) => (
+                            <div
+                              key={image}
+                              className="relative col-span-2 aspect-video md:col-span-1"
+                              onClick={() => {
+                                setIsOpen(false);
+                                onChange(image);
+                              }}
+                            >
+                              <img
+                                src={image}
+                                alt={`Default project cover image- ${index}`}
+                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
+                      )
+                    ) : (
+                      <Loader className="grid grid-cols-4 gap-4 pt-4">
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                      </Loader>
+                    )}
+                  </Tab.Panel>
+                )}
+                <Tab.Panel className="h-full w-full mt-4">
+                  <div className="w-full h-full flex flex-col gap-y-2">
+                    <div className="flex items-center gap-3 w-full flex-1">
+                      <div
+                        {...getRootProps()}
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                          (image === null && isDragActive) || !value
+                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            : ""
+                        }`}
+                      >
+                        <button
+                          type="button"
+                          className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                        >
+                          Edit
+                        </button>
+                        {image !== null || (value && value !== "") ? (
+                          <>
+                            <Image
+                              layout="fill"
+                              objectFit="cover"
+                              src={image ? URL.createObjectURL(image) : value ? value : ""}
+                              alt="image"
+                              className="rounded-lg"
+                            />
+                          </>
+                        ) : (
+                          <div>
+                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                            </span>
+                          </div>
+                        )}
+
+                        <input {...getInputProps()} type="text" />
+                      </div>
+                    </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
+
+                    <p className="text-custom-text-200 text-sm">
+                      File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                    </p>
+
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        variant="neutral-primary"
+                        onClick={() => {
+                          setIsOpen(false);
+                          setImage(null);
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        className="w-full"
+                        onClick={handleSubmit}
+                        disabled={!image}
+                        loading={isImageUploading}
+                      >
+                        {isImageUploading ? "Uploading..." : "Upload & Save"}
+                      </Button>
+                    </div>
+                  </div>
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+});
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
new file mode 100644
index 00000000000..ff0fabc4e37
--- /dev/null
+++ b/web/components/core/index.ts
@@ -0,0 +1,7 @@
+export * from "./filters";
+export * from "./modals";
+export * from "./sidebar";
+export * from "./theme";
+export * from "./activity";
+export * from "./reaction-selector";
+export * from "./image-picker-popover";
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
new file mode 100644
index 00000000000..c2bc466d57e
--- /dev/null
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -0,0 +1,230 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// react hook form
+import { SubmitHandler, useForm } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// services
+import { IssueService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, LayersIcon } from "@plane/ui";
+// icons
+import { Search } from "lucide-react";
+// types
+import { IUser, IIssue } from "types";
+// fetch keys
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type FormInput = {
+  delete_issue_ids: string[];
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  user: IUser | undefined;
+};
+
+const issueService = new IssueService();
+
+export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, user } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [query, setQuery] = useState("");
+  // fetching project issues.
+  const { data: issues } = useSWR(
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
+  );
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { isSubmitting },
+  } = useForm<FormInput>({
+    defaultValues: {
+      delete_issue_ids: [],
+    },
+  });
+
+  const handleClose = () => {
+    setQuery("");
+    reset();
+    onClose();
+  };
+
+  const handleDelete: SubmitHandler<FormInput> = async (data) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+      return;
+    }
+
+    if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
+
+    await issueService
+      .bulkDeleteIssues(
+        workspaceSlug as string,
+        projectId as string,
+        {
+          issue_ids: data.delete_issue_ids,
+        },
+        user
+      )
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issues deleted successfully!",
+        });
+
+        handleClose();
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues ?? []
+      : issues?.filter(
+          (issue) =>
+            issue.name.toLowerCase().includes(query.toLowerCase()) ||
+            `${issue.project_detail.identifier}-${issue.sequence_id}`.toLowerCase().includes(query.toLowerCase())
+        ) ?? [];
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="relative flex items-center justify-center w-full ">
+              <div className="w-full max-w-2xl transform   divide-y divide-custom-border-200 divide-opacity-10 rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+                <form>
+                  <Combobox
+                    onChange={(val: string) => {
+                      const selectedIssues = watch("delete_issue_ids");
+                      if (selectedIssues.includes(val))
+                        setValue(
+                          "delete_issue_ids",
+                          selectedIssues.filter((i) => i !== val)
+                        );
+                      else setValue("delete_issue_ids", [...selectedIssues, val]);
+                    }}
+                  >
+                    <div className="relative m-1">
+                      <Search
+                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <input
+                        type="text"
+                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                        placeholder="Search..."
+                        onChange={(event) => setQuery(event.target.value)}
+                      />
+                    </div>
+
+                    <Combobox.Options
+                      static
+                      className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
+                    >
+                      {filteredIssues.length > 0 ? (
+                        <li className="p-2">
+                          {query === "" && (
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
+                              Select issues to delete
+                            </h2>
+                          )}
+                          <ul className="text-sm text-custom-text-200">
+                            {filteredIssues.map((issue) => (
+                              <Combobox.Option
+                                key={issue.id}
+                                as="div"
+                                value={issue.id}
+                                className={({ active }) =>
+                                  `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
+                                    active ? "bg-custom-background-80 text-custom-text-100" : ""
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-2">
+                                  <input
+                                    type="checkbox"
+                                    checked={watch("delete_issue_ids").includes(issue.id)}
+                                    readOnly
+                                  />
+                                  <span
+                                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                    style={{
+                                      backgroundColor: issue.state_detail.color,
+                                    }}
+                                  />
+                                  <span className="flex-shrink-0 text-xs">
+                                    {issue.project_detail.identifier}-{issue.sequence_id}
+                                  </span>
+                                  <span>{issue.name}</span>
+                                </div>
+                              </Combobox.Option>
+                            ))}
+                          </ul>
+                        </li>
+                      ) : (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayersIcon height="56" width="56" />
+                          <h3 className="text-custom-text-200">
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
+                          </h3>
+                        </div>
+                      )}
+                    </Combobox.Options>
+                  </Combobox>
+
+                  {filteredIssues.length > 0 && (
+                    <div className="flex items-center justify-end gap-2 p-3">
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="danger" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+                        {isSubmitting ? "Deleting..." : "Delete selected issues"}
+                      </Button>
+                    </div>
+                  )}
+                </form>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
similarity index 76%
rename from apps/app/components/core/modals/existing-issues-list-modal.tsx
rename to web/components/core/modals/existing-issues-list-modal.tsx
index 0fd2e2500a5..663dbfc831b 100644
--- a/apps/app/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -1,32 +1,16 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Rocket, Search, X } from "lucide-react";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
-import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch, Tooltip } from "components/ui";
-// icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
-// fetch-keys
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-} from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -36,6 +20,8 @@ type Props = {
   workspaceLevelToggle?: boolean;
 };
 
+const projectService = new ProjectService();
+
 export const ExistingIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -53,12 +39,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { params } = useIssuesView();
-
   const handleClose = () => {
     onClose();
     setSearchTerm("");
@@ -81,16 +65,6 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
     await handleOnSubmit(selectedIssues).finally(() => setIsSubmitting(false));
 
-    if (cycleId) {
-      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-      mutate(CYCLE_DETAILS(cycleId as string));
-    }
-
-    if (moduleId) {
-      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-      mutate(MODULE_DETAILS(moduleId as string));
-    }
-
     handleClose();
 
     setToastAlert({
@@ -117,12 +91,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -156,13 +125,13 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 text-sm placeholder:text-custom-text-400"
-                      placeholder="键入搜索..."
+                      placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
@@ -180,13 +149,9 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             <button
                               type="button"
                               className="group p-1"
-                              onClick={() =>
-                                setSelectedIssues((prevData) =>
-                                  prevData.filter((i) => i.id !== issue.id)
-                                )
-                              }
+                              onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
-                              <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
+                              <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
@@ -197,7 +162,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       </div>
                     )}
                     {workspaceLevelToggle && (
-                      <Tooltip tooltipContent="切换工作区级搜索">
+                      <Tooltip tooltipContent="Toggle workspace level search">
                         <div
                           className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
                             isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
@@ -212,7 +177,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
                             className="flex-shrink-0"
                           >
-                            工作区级
+                            Workspace Level
                           </button>
                         </div>
                       </Tooltip>
@@ -222,30 +187,25 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                     {searchTerm !== "" && (
                       <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
-                        项目中{" "}
+                        Search results for{" "}
                         <span className="text-custom-text-100">
                           {'"'}
                           {searchTerm}
                           {'"'}
-                        </span>{" "}的搜索结果:
+                        </span>{" "}
+                        in project:
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayersIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
@@ -255,9 +215,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul
-                        className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}
-                      >
+                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -293,11 +251,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                 rel="noopener noreferrer"
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                <LaunchOutlined
-                                  sx={{
-                                    fontSize: 16,
-                                  }}
-                                />
+                                <Rocket className="h-4 w-4" />
                               </a>
                             </Combobox.Option>
                           );
@@ -308,10 +262,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 </Combobox>
                 {selectedIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={onSubmit} loading={isSubmitting}>
                       {isSubmitting ? "Adding..." : "Add selected issues"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 )}
               </Dialog.Panel>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
new file mode 100644
index 00000000000..672fc9a05cf
--- /dev/null
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// services
+import { AIService } from "services/ai.service";
+import { TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useUserAuth from "hooks/use-user-auth";
+// ui
+import { Button, Input } from "@plane/ui";
+// components
+import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+// types
+import { IIssue, IPageBlock } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  inset?: string;
+  content: string;
+  htmlContent?: string;
+  onResponse: (response: string) => void;
+  projectId: string;
+  block?: IPageBlock;
+  issue?: IIssue;
+};
+
+type FormData = {
+  prompt: string;
+  task: string;
+};
+
+// services
+const aiService = new AIService();
+const trackEventService = new TrackEventService();
+
+export const GptAssistantModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  inset = "top-0 left-0",
+  content,
+  htmlContent,
+  onResponse,
+  projectId,
+  block,
+  issue,
+}) => {
+  const [response, setResponse] = useState("");
+  const [invalidResponse, setInvalidResponse] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUserAuth();
+
+  const editorRef = useRef<any>(null);
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setFocus,
+    formState: { isSubmitting },
+  } = useForm({
+    defaultValues: {
+      prompt: content,
+      task: "",
+    },
+  });
+
+  const onClose = () => {
+    handleClose();
+    setResponse("");
+    setInvalidResponse(false);
+    reset();
+  };
+
+  const handleResponse = async (formData: FormData) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (formData.task === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please enter some task to get AI assistance.",
+      });
+      return;
+    }
+
+    await aiService
+      .createGptTask(
+        workspaceSlug as string,
+        projectId as string,
+        {
+          prompt: content && content !== "" ? content : htmlContent ?? "",
+          task: formData.task,
+        },
+        user
+      )
+      .then((res) => {
+        setResponse(res.response_html);
+        setFocus("task");
+
+        if (res.response === "") setInvalidResponse(true);
+        else setInvalidResponse(false);
+      })
+      .catch((err) => {
+        const error = err?.data?.error;
+
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "Some error occurred. Please try again.",
+          });
+      });
+  };
+
+  useEffect(() => {
+    if (isOpen) setFocus("task");
+  }, [isOpen, setFocus]);
+
+  useEffect(() => {
+    editorRef.current?.setEditorValue(htmlContent ?? `<p>${content}</p>`);
+  }, [htmlContent, editorRef, content]);
+
+  return (
+    <div
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
+        isOpen ? "block" : "hidden"
+      }`}
+    >
+      {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
+        <div className="text-sm">
+          Content:
+          <RichReadOnlyEditorWithRef
+            value={htmlContent ?? `<p>${content}</p>`}
+            customClassName="-m-3"
+            noBorder
+            borderOnFocus={false}
+            ref={editorRef}
+          />
+        </div>
+      )}
+      {response !== "" && (
+        <div className="page-block-section text-sm">
+          Response:
+          <RichReadOnlyEditor
+            value={`<p>${response}</p>`}
+            customClassName="-mx-3 -my-3"
+            noBorder
+            borderOnFocus={false}
+          />
+        </div>
+      )}
+      {invalidResponse && (
+        <div className="text-sm text-red-500">
+          No response could be generated. This may be due to insufficient content or task information. Please try again.
+        </div>
+      )}
+      <Controller
+        control={control}
+        name="task"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="task"
+            name="task"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            placeholder={`${
+              content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
+            }`}
+            className="w-full"
+          />
+        )}
+      />
+      <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
+        {response !== "" && (
+          <Button
+            variant="primary"
+            onClick={() => {
+              onResponse(response);
+              onClose();
+              if (block && user)
+                trackEventService.trackUseGPTResponseEvent(block, "USE_GPT_RESPONSE_IN_PAGE_BLOCK", user);
+              else if (issue && user)
+                trackEventService.trackUseGPTResponseEvent(issue, "USE_GPT_RESPONSE_IN_ISSUE", user);
+            }}
+          >
+            Use this response
+          </Button>
+        )}
+        <div className="flex items-center gap-2">
+          <Button variant="neutral-primary" onClick={onClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
+            {isSubmitting ? "Generating response..." : response === "" ? "Generate response" : "Generate again"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
new file mode 100644
index 00000000000..e4cdb16d660
--- /dev/null
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -0,0 +1,198 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useDropzone } from "react-dropzone";
+import { Transition, Dialog } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { UserCircle2 } from "lucide-react";
+
+type Props = {
+  value?: string | null;
+  onClose: () => void;
+  isOpen: boolean;
+  onSuccess: (url: string) => void;
+  isRemoving: boolean;
+  handleDelete: () => void;
+  userImage?: boolean;
+};
+
+// services
+const fileService = new FileService();
+
+export const ImageUploadModal: React.FC<Props> = observer((props) => {
+  const { value, onSuccess, isOpen, onClose, isRemoving, handleDelete, userImage } = props;
+
+  const [image, setImage] = useState<File | null>(null);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspace: workspaceDetails } = workspaceStore;
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImage(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
+  });
+
+  const handleSubmit = async () => {
+    setIsImageUploading(true);
+
+    if (!image || !workspaceSlug) return;
+
+    const formData = new FormData();
+    formData.append("asset", image);
+    formData.append("attributes", JSON.stringify({}));
+
+    if (userImage) {
+      fileService
+        .uploadUserFile(formData)
+        .then((res) => {
+          const imageUrl = res.asset;
+
+          onSuccess(imageUrl);
+          setIsImageUploading(false);
+          setImage(null);
+
+          if (value) fileService.deleteUserFile(value);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else
+      fileService
+        .uploadFile(workspaceSlug as string, formData)
+        .then((res) => {
+          const imageUrl = res.asset;
+          onSuccess(imageUrl);
+          setIsImageUploading(false);
+          setImage(null);
+
+          if (value && workspaceDetails) fileService.deleteFile(workspaceDetails.id, value);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+  };
+
+  const handleClose = () => {
+    setImage(null);
+    onClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" 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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-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 border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+                <div className="space-y-5">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    Upload Image
+                  </Dialog.Title>
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-center gap-3">
+                      <div
+                        {...getRootProps()}
+                        className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                          (image === null && isDragActive) || !value
+                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            : ""
+                        }`}
+                      >
+                        {image !== null || (value && value !== "") ? (
+                          <>
+                            <button
+                              type="button"
+                              className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                            >
+                              Edit
+                            </button>
+                            <img
+                              src={image ? URL.createObjectURL(image) : value ? value : ""}
+                              alt="image"
+                              className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
+                            />
+                          </>
+                        ) : (
+                          <div>
+                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                            </span>
+                          </div>
+                        )}
+
+                        <input {...getInputProps()} type="text" />
+                      </div>
+                    </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <p className="my-4 text-custom-text-200 text-sm">
+                  File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                </p>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <Button variant="danger" onClick={handleDelete} disabled={!value}>
+                      {isRemoving ? "Removing..." : "Remove"}
+                    </Button>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+                      {isImageUploading ? "Uploading..." : "Upload & Save"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/apps/app/components/core/modals/index.ts b/web/components/core/modals/index.ts
similarity index 100%
rename from apps/app/components/core/modals/index.ts
rename to web/components/core/modals/index.ts
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
new file mode 100644
index 00000000000..e2833f61f23
--- /dev/null
+++ b/web/components/core/modals/link-modal.tsx
@@ -0,0 +1,173 @@
+import { FC, useEffect, Fragment } from "react";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import type { IIssueLink, linkDetails, ModuleLink } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: linkDetails | null;
+  status: boolean;
+  createIssueLink: (formData: IIssueLink | ModuleLink) => Promise<void>;
+  updateIssueLink: (formData: IIssueLink | ModuleLink, linkId: string) => Promise<void>;
+};
+
+const defaultValues: IIssueLink | ModuleLink = {
+  title: "",
+  url: "",
+};
+
+export const LinkModal: FC<Props> = (props) => {
+  const { isOpen, handleClose, createIssueLink, updateIssueLink, status, data } = props;
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<ModuleLink>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  const handleFormSubmit = async (formData: IIssueLink | ModuleLink) => {
+    if (!data) await createIssueLink({ title: formData.title, url: formData.url });
+    else await updateIssueLink({ title: formData.title, url: formData.url }, data.id);
+    onClose();
+  };
+
+  const handleCreateUpdatePage = async (formData: IIssueLink | ModuleLink) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
+                  <div>
+                    <div className="space-y-5">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        {status ? "Update Link" : "Add Link"}
+                      </Dialog.Title>
+                      <div className="mt-2 space-y-3">
+                        <div>
+                          <label htmlFor="url" className="text-custom-text-200 mb-2">
+                            URL
+                          </label>
+                          <Controller
+                            control={control}
+                            name="url"
+                            rules={{
+                              required: "URL is required",
+                            }}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="url"
+                                name="url"
+                                type="url"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.url)}
+                                placeholder="https://..."
+                                className="w-full"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div>
+                          <label htmlFor="title" className="text-custom-text-200 mb-2">
+                            {`Title (optional)`}
+                          </label>
+                          <Controller
+                            control={control}
+                            name="title"
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="title"
+                                name="title"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.title)}
+                                placeholder="Enter title"
+                                className="w-full"
+                              />
+                            )}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
+                      {status
+                        ? isSubmitting
+                          ? "Updating Link..."
+                          : "Update Link"
+                        : isSubmitting
+                        ? "Adding Link..."
+                        : "Add Link"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/core/reaction-selector.tsx b/web/components/core/reaction-selector.tsx
new file mode 100644
index 00000000000..d988b9539b4
--- /dev/null
+++ b/web/components/core/reaction-selector.tsx
@@ -0,0 +1,74 @@
+import { Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// icons
+import { SmilePlus } from "lucide-react";
+
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
+
+interface Props {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  value?: string | string[] | null;
+  onSelect: (emoji: string) => void;
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { onSelect, position, size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex justify-center items-center rounded-md px-2 ${
+                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
+              }`}
+            >
+              <SmilePlus className="text-custom-text-100 h-3.5 w-3.5" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded-md p-1">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
+                    >
+                      {renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/apps/app/components/core/sidebar/index.ts b/web/components/core/sidebar/index.ts
similarity index 100%
rename from apps/app/components/core/sidebar/index.ts
rename to web/components/core/sidebar/index.ts
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
new file mode 100644
index 00000000000..2437b31a37a
--- /dev/null
+++ b/web/components/core/sidebar/links-list.tsx
@@ -0,0 +1,80 @@
+// icons
+import { ExternalLinkIcon } from "@plane/ui";
+import { Pencil, Trash2, LinkIcon } from "lucide-react";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { linkDetails, UserAuth } from "types";
+
+type Props = {
+  links: linkDetails[];
+  handleDeleteLink: (linkId: string) => void;
+  handleEditLink: (link: linkDetails) => void;
+  userAuth: UserAuth;
+};
+
+export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <>
+      {links.map((link) => (
+        <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+          <div className="flex items-start justify-between gap-2 w-full">
+            <div className="flex items-start gap-2">
+              <span className="py-1">
+                <LinkIcon className="h-3 w-3 flex-shrink-0" />
+              </span>
+              <span className="text-xs break-all">{link.title && link.title !== "" ? link.title : link.url}</span>
+            </div>
+
+            {!isNotAllowed && (
+              <div className="flex items-center gap-2 flex-shrink-0 z-[1]">
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleEditLink(link);
+                  }}
+                >
+                  <Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </button>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                >
+                  <ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </a>
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDeleteLink(link.id);
+                  }}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="px-5">
+            <p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
+              Added {timeAgo(link.created_at)}
+              <br />
+              by{" "}
+              {link.created_by_detail.is_bot
+                ? link.created_by_detail.first_name + " Bot"
+                : link.created_by_detail.display_name}
+            </p>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
similarity index 100%
rename from apps/app/components/core/sidebar/progress-chart.tsx
rename to web/components/core/sidebar/progress-chart.tsx
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
new file mode 100644
index 00000000000..66a84120572
--- /dev/null
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -0,0 +1,243 @@
+import React from "react";
+
+import Image from "next/image";
+// headless ui
+import { Tab } from "@headlessui/react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// images
+import emptyLabel from "public/empty-state/empty_label.svg";
+import emptyMembers from "public/empty-state/empty_members.svg";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { Avatar, StateGroupIcon } from "@plane/ui";
+// types
+import {
+  IModule,
+  TAssigneesDistribution,
+  TCompletionChartDistribution,
+  TLabelsDistribution,
+  TStateGroups,
+} from "types";
+
+type Props = {
+  distribution: {
+    assignees: TAssigneesDistribution[];
+    completion_chart: TCompletionChartDistribution;
+    labels: TLabelsDistribution[];
+  };
+  groupedIssues: {
+    [key: string]: number;
+  };
+  totalIssues: number;
+  module?: IModule;
+  roundedTab?: boolean;
+  noBackground?: boolean;
+  isPeekView?: boolean;
+};
+
+export const SidebarProgressStats: React.FC<Props> = ({
+  distribution,
+  groupedIssues,
+  totalIssues,
+  module,
+  roundedTab,
+  noBackground,
+  isPeekView = false,
+}) => {
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
+
+  const currentValue = (tab: string | null) => {
+    switch (tab) {
+      case "Assignees":
+        return 0;
+      case "Labels":
+        return 1;
+      case "States":
+        return 2;
+      default:
+        return 0;
+    }
+  };
+
+  return (
+    <Tab.Group
+      defaultIndex={currentValue(tab)}
+      onChange={(i) => {
+        switch (i) {
+          case 0:
+            return setTab("Assignees");
+          case 1:
+            return setTab("Labels");
+          case 2:
+            return setTab("States");
+          default:
+            return setTab("Assignees");
+        }
+      }}
+    >
+      <Tab.List
+        as="div"
+        className={`flex w-full items-center gap-2 justify-between rounded-md ${
+          noBackground ? "" : "bg-custom-background-90"
+        } p-0.5
+        ${module ? "text-xs" : "text-sm"}`}
+      >
+        <Tab
+          className={({ selected }) =>
+            `w-full  ${
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
+            }`
+          }
+        >
+          Assignees
+        </Tab>
+        <Tab
+          className={({ selected }) =>
+            `w-full ${
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+            } px-3 py-1 text-custom-text-100 ${
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
+            }`
+          }
+        >
+          Labels
+        </Tab>
+        <Tab
+          className={({ selected }) =>
+            `w-full ${
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
+            } px-3 py-1  text-custom-text-100 ${
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
+            }`
+          }
+        >
+          States
+        </Tab>
+      </Tab.List>
+      <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.assignees.length > 0 ? (
+            distribution.assignees.map((assignee, index) => {
+              if (assignee.assignee_id)
+                return (
+                  <SingleProgressStats
+                    key={assignee.assignee_id}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <Avatar name={assignee.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+                        <span>{assignee.display_name}</span>
+                      </div>
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                    {...(!isPeekView && {
+                      onClick: () => {
+                        // TODO: set filters here
+                        // if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
+                        //   setFilters({
+                        //     assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
+                        //   });
+                        // else
+                        //   setFilters({
+                        //     assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
+                        //   });
+                      },
+                      // selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
+                    })}
+                  />
+                );
+              else
+                return (
+                  <SingleProgressStats
+                    key={`unassigned-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded-full border-2 border-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>
+                      </div>
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                  />
+                );
+            })
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+            </div>
+          )}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.labels.length > 0 ? (
+            distribution.labels.map((label, index) => (
+              <SingleProgressStats
+                key={label.label_id ?? `no-label-${index}`}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="block h-3 w-3 rounded-full"
+                      style={{
+                        backgroundColor: label.color ?? "transparent",
+                      }}
+                    />
+                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                  </div>
+                }
+                completed={label.completed_issues}
+                total={label.total_issues}
+                {...(!isPeekView && {
+                  // TODO: set filters here
+                  onClick: () => {
+                    // if (filters.labels?.includes(label.label_id ?? ""))
+                    //   setFilters({
+                    //     labels: filters?.labels?.filter((l) => l !== label.label_id),
+                    //   });
+                    // else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
+                  },
+                  // selected: filters?.labels?.includes(label.label_id ?? ""),
+                })}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No labels yet</h6>
+            </div>
+          )}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {Object.keys(groupedIssues).map((group, index) => (
+            <SingleProgressStats
+              key={index}
+              title={
+                <div className="flex items-center gap-2">
+                  <StateGroupIcon stateGroup={group as TStateGroups} />
+                  <span className="text-xs capitalize">{group}</span>
+                </div>
+              }
+              completed={groupedIssues[group]}
+              total={totalIssues}
+            />
+          ))}
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};
diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/web/components/core/sidebar/single-progress-stats.tsx
similarity index 77%
rename from apps/app/components/core/sidebar/single-progress-stats.tsx
rename to web/components/core/sidebar/single-progress-stats.tsx
index 1498c9badb9..ba6675c9a46 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/web/components/core/sidebar/single-progress-stats.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ProgressBar } from "components/ui";
+import { CircularProgressIndicator } from "@plane/ui";
 
 type TSingleProgressStatsProps = {
   title: any;
@@ -27,13 +27,10 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     <div className="flex w-1/2 items-center justify-end gap-1 px-2">
       <div className="flex h-5 items-center justify-center gap-1">
         <span className="h-4 w-4">
-          <ProgressBar value={completed} maxValue={total} />
+          <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
         </span>
         <span className="w-8 text-right">
-          {isNaN(Math.floor((completed / total) * 100))
-            ? "0"
-            : Math.floor((completed / total) * 100)}
-          %
+          {isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
         </span>
       </div>
       <span>of {total}</span>
diff --git a/apps/app/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
similarity index 75%
rename from apps/app/components/core/theme/color-picker-input.tsx
rename to web/components/core/theme/color-picker-input.tsx
index 73d71e46bd2..f47c1349f24 100644
--- a/apps/app/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-
+import { FC, Fragment } from "react";
 // react-form
 import {
+  Control,
+  Controller,
   FieldError,
   FieldErrorsImpl,
   Merge,
@@ -13,35 +14,31 @@ import {
 import { ColorResult, SketchPicker } from "react-color";
 // component
 import { Popover, Transition } from "@headlessui/react";
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
-import { ColorPickerIcon } from "components/icons";
+import { Palette } from "lucide-react";
 // types
-import { ICustomTheme } from "types";
+import { IUserTheme } from "types";
 
 type Props = {
-  name: keyof ICustomTheme;
+  name: keyof IUserTheme;
   position?: "left" | "right";
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
+  control: Control<IUserTheme, any>;
   error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
   register: UseFormRegister<any>;
 };
 
-export const ColorPickerInput: React.FC<Props> = ({
-  name,
-  position = "left",
-  watch,
-  setValue,
-  error,
-  register,
-}) => {
+export const ColorPickerInput: FC<Props> = (props) => {
+  const { name, position = "left", watch, setValue, error, control } = props;
+
   const handleColorChange = (newColor: ColorResult) => {
     const { hex } = newColor;
     setValue(name, hex);
   };
 
-  const getColorText = (colorName: keyof ICustomTheme) => {
+  const getColorText = (colorName: keyof IUserTheme) => {
     switch (colorName) {
       case "background":
         return "Background";
@@ -60,22 +57,28 @@ export const ColorPickerInput: React.FC<Props> = ({
 
   return (
     <div className="relative">
-      <Input
-        id={name}
+      <Controller
+        control={control}
         name={name}
-        type="name"
-        placeholder="#FFFFFF"
-        autoComplete="off"
-        error={error}
-        value={watch(name)}
-        register={register}
-        validations={{
+        rules={{
           required: `${getColorText(name)} color is required`,
           pattern: {
             value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
             message: `${getColorText(name)} color should be hex format`,
           },
         }}
+        render={({ field: { onChange, ref } }) => (
+          <Input
+            id={name}
+            name={name}
+            type="text"
+            value={watch("name")}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(error)}
+            placeholder="#FFFFFF"
+          />
+        )}
       />
       <div className="absolute right-4 top-2.5">
         <Popover className="relative grid place-items-center">
@@ -95,16 +98,12 @@ export const ColorPickerInput: React.FC<Props> = ({
                     }}
                   />
                 ) : (
-                  <ColorPickerIcon
-                    height={14}
-                    width={14}
-                    className="fill-current text-custom-text-100"
-                  />
+                  <Palette className="h-3.5 w-3.5 text-custom-text-100" />
                 )}
               </Popover.Button>
 
               <Transition
-                as={React.Fragment}
+                as={Fragment}
                 enter="transition ease-out duration-200"
                 enterFrom="opacity-0 translate-y-1"
                 enterTo="opacity-100 translate-y-0"
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
new file mode 100644
index 00000000000..4ed495c5bd5
--- /dev/null
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -0,0 +1,223 @@
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button, InputColorPicker } from "@plane/ui";
+// types
+import { IUserTheme } from "types";
+
+const inputRules = {
+  required: "Background color is required",
+  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",
+  },
+};
+
+export const CustomThemeSelector: React.FC = observer(() => {
+  const { user: userStore } = useMobxStore();
+  const userTheme = userStore?.currentUser?.theme;
+  // hooks
+  const { setTheme } = useTheme();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+  } = useForm<IUserTheme>({
+    defaultValues: {
+      background: userTheme?.background !== "" ? userTheme?.background : "#0d101b",
+      text: userTheme?.text !== "" ? userTheme?.text : "#c5c5c5",
+      primary: userTheme?.primary !== "" ? userTheme?.primary : "#3f76ff",
+      sidebarBackground: userTheme?.sidebarBackground !== "" ? userTheme?.sidebarBackground : "#0d101b",
+      sidebarText: userTheme?.sidebarText !== "" ? userTheme?.sidebarText : "#c5c5c5",
+      darkPalette: userTheme?.darkPalette || false,
+      palette: userTheme?.palette !== "" ? userTheme?.palette : "",
+    },
+  });
+
+  const handleUpdateTheme = async (formData: any) => {
+    const payload: IUserTheme = {
+      background: formData.background,
+      text: formData.text,
+      primary: formData.primary,
+      sidebarBackground: formData.sidebarBackground,
+      sidebarText: formData.sidebarText,
+      darkPalette: false,
+      palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
+      theme: "custom",
+    };
+
+    setTheme("custom");
+
+    return userStore.updateCurrentUser({ theme: payload });
+  };
+
+  const handleValueChange = (val: string | undefined, onChange: any) => {
+    let hex = val;
+
+    // prepend a hashtag if it doesn't exist
+    if (val && val[0] !== "#") hex = `#${val}`;
+
+    onChange(hex);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleUpdateTheme)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-semibold text-custom-text-100">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>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="background"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="background"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#0d101b"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("text"),
+                      }}
+                      hasError={Boolean(errors?.background)}
+                    />
+                  )}
+                />
+                {errors.background && <p className="text-xs text-red-500 mt-1">{errors.background.message}</p>}
+              </div>
+            </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>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="text"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="text"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#c5c5c5"
+                      className="w-full"
+                      style={{
+                        backgroundColor: watch("background"),
+                        color: value,
+                      }}
+                      hasError={Boolean(errors?.text)}
+                    />
+                  )}
+                />
+                {errors.text && <p className="text-xs text-red-500 mt-1">{errors.text.message}</p>}
+              </div>
+            </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>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="primary"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="primary"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#3f76ff"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("text"),
+                      }}
+                      hasError={Boolean(errors?.primary)}
+                    />
+                  )}
+                />
+                {errors.primary && <p className="text-xs text-red-500 mt-1">{errors.primary.message}</p>}
+              </div>
+            </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>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="sidebarBackground"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="sidebarBackground"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#0d101b"
+                      className="w-full"
+                      style={{
+                        backgroundColor: value,
+                        color: watch("sidebarText"),
+                      }}
+                      hasError={Boolean(errors?.sidebarBackground)}
+                    />
+                  )}
+                />
+                {errors.sidebarBackground && (
+                  <p className="text-xs text-red-500 mt-1">{errors.sidebarBackground.message}</p>
+                )}
+              </div>
+            </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>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="sidebarText"
+                  rules={inputRules}
+                  render={({ field: { value, onChange } }) => (
+                    <InputColorPicker
+                      name="sidebarText"
+                      value={value}
+                      onChange={(val) => handleValueChange(val, onChange)}
+                      placeholder="#c5c5c5"
+                      className="w-full"
+                      style={{
+                        backgroundColor: watch("sidebarBackground"),
+                        color: value,
+                      }}
+                      hasError={Boolean(errors?.sidebarText)}
+                    />
+                  )}
+                />
+                {errors.sidebarText && <p className="text-xs text-red-500 mt-1">{errors.sidebarText.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {isSubmitting ? "Creating Theme..." : "Set Theme"}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/app/components/core/theme/index.ts b/web/components/core/theme/index.ts
similarity index 100%
rename from apps/app/components/core/theme/index.ts
rename to web/components/core/theme/index.ts
diff --git a/web/components/core/theme/theme-switch.tsx b/web/components/core/theme/theme-switch.tsx
new file mode 100644
index 00000000000..78364562fcd
--- /dev/null
+++ b/web/components/core/theme/theme-switch.tsx
@@ -0,0 +1,80 @@
+import { FC } from "react";
+// constants
+import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
+// ui
+import { CustomSelect } from "@plane/ui";
+
+type Props = {
+  value: I_THEME_OPTION | null;
+  onChange: (value: I_THEME_OPTION) => void;
+};
+
+export const ThemeSwitch: FC<Props> = (props) => {
+  const { value, onChange } = props;
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        value ? (
+          <div className="flex items-center gap-2">
+            <div
+              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              style={{
+                borderColor: value.icon.border,
+              }}
+            >
+              <div
+                className="h-full w-1/2 rounded-l-full"
+                style={{
+                  background: value.icon.color1,
+                }}
+              />
+              <div
+                className="h-full w-1/2 rounded-r-full border-l"
+                style={{
+                  borderLeftColor: value.icon.border,
+                  background: value.icon.color2,
+                }}
+              />
+            </div>
+            {value.label}
+          </div>
+        ) : (
+          "Select your theme"
+        )
+      }
+      onChange={onChange}
+      input
+      width="w-full"
+    >
+      {THEME_OPTIONS.map((themeOption) => (
+        <CustomSelect.Option key={themeOption.value} value={themeOption}>
+          <div className="flex items-center gap-2">
+            <div
+              className="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border"
+              style={{
+                borderColor: themeOption.icon.border,
+              }}
+            >
+              <div
+                className="h-full w-1/2 rounded-l-full"
+                style={{
+                  background: themeOption.icon.color1,
+                }}
+              />
+              <div
+                className="h-full w-1/2 rounded-r-full border-l"
+                style={{
+                  borderLeftColor: themeOption.icon.border,
+                  background: themeOption.icon.color2,
+                }}
+              />
+            </div>
+            {themeOption.label}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
new file mode 100644
index 00000000000..fc89ac3fbe8
--- /dev/null
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -0,0 +1,488 @@
+import { MouseEvent } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { SingleProgressStats } from "components/core";
+import {
+  AvatarGroup,
+  Loader,
+  Tooltip,
+  LinearProgressIndicator,
+  ContrastIcon,
+  RunningIcon,
+  LayersIcon,
+  StateGroupIcon,
+  PriorityIcon,
+  Avatar,
+} from "@plane/ui";
+// components
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { ActiveCycleProgressStats } from "components/cycles";
+import { ViewIssueLabel } from "components/issues";
+// icons
+import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
+
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
+  const router = useRouter();
+
+  const { workspaceSlug, projectId } = props;
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId ? `ACTIVE_CYCLE_ISSUE_${projectId}_CURRENT` : null,
+    workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
+  );
+
+  const activeCycle = cycleStore.cycles?.[projectId] || null;
+  const cycle = activeCycle ? activeCycle[0] : null;
+  const issues = (cycleStore?.active_cycle_issues as any) || null;
+
+  // const { data: issues } = useSWR(
+  //   workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
+  //   workspaceSlug && projectId && cycle?.id
+  //     ? () =>
+  //         cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+  //           priority: "urgent,high",
+  //         })
+  //     : null
+  // ) as { data: IIssue[] | undefined };
+
+  if (isLoading)
+    return (
+      <Loader>
+        <Loader.Item height="250px" />
+      </Loader>
+    );
+
+  if (!cycle)
+    return (
+      <div className="h-full grid place-items-center text-center">
+        <div className="space-y-2">
+          <div className="mx-auto flex justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+              <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+              <path
+                d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                fill="rgb(var(--color-text-400))"
+              />
+            </svg>
+          </div>
+          <h4 className="text-sm text-custom-text-200">No active cycle</h4>
+          <button
+            type="button"
+            className="text-custom-primary-100 text-sm outline-none"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "q",
+              });
+              document.dispatchEvent(e);
+            }}
+          >
+            Create a new cycle
+          </button>
+        </div>
+      </div>
+    );
+
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  return (
+    <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-custom-background-100 border border-custom-border-200">
+      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-3">
+        <div className="flex flex-col text-xs">
+          <div className="h-full w-full">
+            <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "rgb(var(--color-text-200))"
+                          : ""
+                      }`}
+                    />
+                  </span>
+                  <Tooltip tooltipContent={cycle.name} position="top-left">
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 70)}</h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <RunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <AlarmClock className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <AlertTriangle className="h-3.5 w-3.5" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        handleRemoveFromFavorites(e);
+                      }}
+                    >
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        handleAddToFavorites(e);
+                      }}
+                    >
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-start gap-5 text-custom-text-200">
+                <div className="flex items-start gap-1">
+                  <CalendarDays className="h-4 w-4" />
+                  <span>{renderShortDateWithYearFormat(startDate)}</span>
+                </div>
+                <ArrowRight className="h-4 w-4 text-custom-text-200" />
+                <div className="flex items-start gap-1">
+                  <Target className="h-4 w-4" />
+                  <span>{renderShortDateWithYearFormat(endDate)}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2.5 text-custom-text-200">
+                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                    <img
+                      src={cycle.owned_by.avatar}
+                      height={16}
+                      width={16}
+                      className="rounded-full"
+                      alt={cycle.owned_by.display_name}
+                    />
+                  ) : (
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
+                      {cycle.owned_by.display_name.charAt(0)}
+                    </span>
+                  )}
+                  <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
+                </div>
+
+                {cycle.assignees.length > 0 && (
+                  <div className="flex items-center gap-1 text-custom-text-200">
+                    <AvatarGroup>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4 text-custom-text-200">
+                <div className="flex gap-2">
+                  <LayersIcon className="h-4 w-4 flex-shrink-0" />
+                  {cycle.total_issues} issues
+                </div>
+                <div className="flex items-center gap-2">
+                  <StateGroupIcon stateGroup="completed" height="14px" width="14px" />
+                  {cycle.completed_issues} issues
+                </div>
+              </div>
+
+              <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+                <a className="bg-custom-primary text-white px-4 rounded-md py-2 text-center text-sm font-medium w-full hover:bg-custom-primary/90">
+                  View Cycle
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="grid col-span-2 grid-cols-1 divide-y border-custom-border-200 md:divide-y-0 md:divide-x md:grid-cols-2">
+          <div className="flex h-60 flex-col border-custom-border-200">
+            <div className="flex h-full w-full flex-col text-custom-text-200 p-4">
+              <div className="flex w-full items-center gap-2 py-1">
+                <span>Progress</span>
+                <LinearProgressIndicator data={progressIndicatorData} />
+              </div>
+              <div className="flex flex-col mt-2 gap-1 items-center">
+                {Object.keys(groupedIssues).map((group, index) => (
+                  <SingleProgressStats
+                    key={index}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="block h-3 w-3 rounded-full "
+                          style={{
+                            backgroundColor: stateGroups[index].color,
+                          }}
+                        />
+                        <span className="text-xs capitalize">{group}</span>
+                      </div>
+                    }
+                    completed={groupedIssues[group]}
+                    total={cycle.total_issues}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="border-custom-border-200 h-60 overflow-y-scroll">
+            <ActiveCycleProgressStats cycle={cycle} />
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:divide-y-0 lg:divide-x lg:grid-cols-2">
+        <div className="flex flex-col justify-between p-4">
+          <div>
+            <div className="text-custom-primary">High Priority Issues</div>
+            <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
+              {issues ? (
+                issues.length > 0 ? (
+                  issues.map((issue: any) => (
+                    <div
+                      key={issue.id}
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
+                      className="flex flex-wrap cursor-pointer rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
+                    >
+                      <div className="flex flex-col gap-1">
+                        <div>
+                          <Tooltip
+                            tooltipHeading="Issue ID"
+                            tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+                          >
+                            <span className="flex-shrink-0 text-xs text-custom-text-200">
+                              {issue.project_detail?.identifier}-{issue.sequence_id}
+                            </span>
+                          </Tooltip>
+                        </div>
+                        <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                          <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
+                        </Tooltip>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <div
+                          className={`grid h-6 w-6 place-items-center items-center rounded border shadow-sm flex-shrink-0 ${
+                            issue.priority === "urgent"
+                              ? "border-red-500/20 bg-red-500/20 text-red-500"
+                              : "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                          }`}
+                        >
+                          <PriorityIcon priority={issue.priority} className="text-sm" />
+                        </div>
+                        <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
+                        <div className={`flex items-center gap-2 text-custom-text-200`}>
+                          {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
+                            <div className="-my-0.5 flex items-center justify-center gap-2">
+                              <AvatarGroup showTooltip={false}>
+                                {issue.assignee_details.map((assignee: any) => (
+                                  <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                                ))}
+                              </AvatarGroup>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="grid place-items-center text-custom-text-200 text-sm text-center">
+                    No issues present in the cycle.
+                  </div>
+                )
+              ) : (
+                <Loader className="space-y-3">
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+
+          {issues && issues.length > 0 && (
+            <div className="flex items-center justify-between gap-2">
+              <div className="h-1 w-full rounded-full bg-custom-background-80">
+                <div
+                  className="h-1 rounded-full bg-green-600"
+                  style={{
+                    width:
+                      issues &&
+                      `${
+                        (issues.filter((issue: any) => issue?.state_detail?.group === "completed")?.length /
+                          issues.length) *
+                          100 ?? 0
+                      }%`,
+                  }}
+                />
+              </div>
+              <div className="w-16 text-end text-xs text-custom-text-200">
+                {issues?.filter((issue: any) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col justify-between border-custom-border-200 p-4">
+          <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
+            <div className="flex items-center gap-3 text-custom-text-100">
+              <div className="flex items-center justify-center gap-1">
+                <span className="h-2.5 w-2.5 rounded-full bg-[#a9bbd0]" />
+                <span>Ideal</span>
+              </div>
+              <div className="flex items-center justify-center gap-1">
+                <span className="h-2.5 w-2.5 rounded-full bg-[#4c8fff]" />
+                <span>Current</span>
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              <span>
+                <LayersIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
+              </span>
+              <span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span>
+            </div>
+          </div>
+          <div className="relative h-64">
+            <ProgressChart
+              distribution={cycle.distribution?.completion_chart ?? {}}
+              startDate={cycle.start_date ?? ""}
+              endDate={cycle.end_date ?? ""}
+              totalIssues={cycle.total_issues}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/web/components/cycles/active-cycle-stats.tsx
similarity index 75%
rename from apps/app/components/cycles/active-cycle-stats.tsx
rename to web/components/cycles/active-cycle-stats.tsx
index e26b4480361..1367d74e0dc 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/web/components/cycles/active-cycle-stats.tsx
@@ -1,16 +1,14 @@
 import React, { Fragment } from "react";
-
-// headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "components/ui";
+import { Avatar } from "@plane/ui";
 // types
 import { ICycle } from "types";
-// types
+
 type Props = {
   cycle: ICycle;
 };
@@ -69,28 +67,18 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
           Labels
         </Tab>
       </Tab.List>
-      {cycle.total_issues > 0 ? (
+      {cycle && cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
-            {cycle.distribution.assignees.map((assignee, index) => {
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+            {cycle.distribution?.assignees?.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
                   <SingleProgressStats
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar
-                          user={{
-                            id: assignee.assignee_id,
-                            avatar: assignee.avatar ?? "",
-                            first_name: assignee.first_name ?? "",
-                            last_name: assignee.last_name ?? "",
-                            display_name: assignee.display_name ?? "",
-                          }}
-                        />
+                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+
                         <span>{assignee.display_name}</span>
                       </div>
                     }
@@ -105,13 +93,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     title={
                       <div className="flex items-center gap-2">
                         <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"
-                          />
+                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                         </div>
                         <span>No assignee</span>
                       </div>
@@ -122,11 +104,8 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel
-            as="div"
-            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
-          >
-            {cycle.distribution.labels.map((label, index) => (
+          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+            {cycle.distribution?.labels?.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}
                 title={
diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx
new file mode 100644
index 00000000000..fb30150ca25
--- /dev/null
+++ b/web/components/cycles/cycle-peek-overview.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CycleDetailsSidebar } from "./sidebar";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+  const router = useRouter();
+  const { peekCycle } = router.query;
+
+  const ref = React.useRef(null);
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const { fetchCycleWithId } = cycleStore;
+
+  const handleClose = () => {
+    delete router.query.peekCycle;
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  };
+
+  useEffect(() => {
+    if (!peekCycle) return;
+    fetchCycleWithId(workspaceSlug, projectId, peekCycle.toString());
+  }, [fetchCycleWithId, peekCycle, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekCycle && (
+        <div
+          ref={ref}
+          className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <CycleDetailsSidebar cycleId={peekCycle?.toString() ?? ""} handleClose={handleClose} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
new file mode 100644
index 00000000000..b480680a6a2
--- /dev/null
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -0,0 +1,273 @@
+import { FC, MouseEvent, useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
+import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
+// icons
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
+// helpers
+import {
+  getDateRangeStatus,
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+export interface ICyclesBoardCard {
+  workspaceSlug: string;
+  projectId: string;
+  cycle: ICycle;
+}
+
+export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // computed
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const router = useRouter();
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const cycleTotalIssues =
+    cycle.backlog_issues +
+    cycle.unstarted_issues +
+    cycle.started_issues +
+    cycle.completed_issues +
+    cycle.cancelled_issues;
+
+  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
+
+  const issueCount = cycle
+    ? cycleTotalIssues === 0
+      ? "0 Issue"
+      : cycleTotalIssues === cycle.completed_issues
+      ? cycleTotalIssues > 1
+        ? `${cycleTotalIssues} Issues`
+        : `${cycleTotalIssues} Issue`
+      : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
+    : "0 Issue";
+
+  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+    const { query } = router;
+    e.preventDefault();
+    e.stopPropagation();
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekCycle: cycle.id },
+    });
+  };
+
+  return (
+    <div>
+      <CycleCreateUpdateModal
+        data={cycle}
+        isOpen={updateModal}
+        handleClose={() => setUpdateModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+
+      <CycleDeleteModal
+        cycle={cycle}
+        isOpen={deleteModal}
+        handleClose={() => setDeleteModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-3">
+                <span className="flex-shrink-0">
+                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+                </span>
+                <Tooltip tooltipContent={cycle.name} position="top">
+                  <span className="text-base font-medium truncate">{cycle.name}</span>
+                </Tooltip>
+              </div>
+              <div className="flex items-center gap-2">
+                {currentCycle && (
+                  <span
+                    className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                    style={{
+                      color: currentCycle.color,
+                      backgroundColor: `${currentCycle.color}20`,
+                    }}
+                  >
+                    {currentCycle.value === "current"
+                      ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                      : `${currentCycle.label}`}
+                  </span>
+                )}
+                <button onClick={openCycleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount}</span>
+              </div>
+              {cycle.assignees.length > 0 && (
+                <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
+                  <div className="flex items-center gap-1 cursor-default">
+                    <AvatarGroup showTooltip={false}>
+                      {cycle.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+
+            <Tooltip
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex items-center w-full">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+              <div className="flex items-center gap-1.5 z-10">
+                {cycle.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                )}
+                <CustomMenu width="auto" ellipsis className="z-10">
+                  {!isCompleted && (
+                    <>
+                      <CustomMenu.MenuItem onClick={handleEditCycle}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Pencil className="h-3 w-3" />
+                          <span>Edit cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                        <span className="flex items-center justify-start gap-2">
+                          <Trash2 className="h-3 w-3" />
+                          <span>Delete module</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3 w-3" />
+                      <span>Copy cycle link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-board.tsx b/web/components/cycles/cycles-board.tsx
new file mode 100644
index 00000000000..105d161289d
--- /dev/null
+++ b/web/components/cycles/cycles-board.tsx
@@ -0,0 +1,70 @@
+import { FC } from "react";
+// types
+import { ICycle } from "types";
+// components
+import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
+
+export interface ICyclesBoard {
+  cycles: ICycle[];
+  filter: string;
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string;
+}
+
+export const CyclesBoard: FC<ICyclesBoard> = (props) => {
+  const { cycles, filter, workspaceSlug, projectId, peekCycle } = props;
+
+  return (
+    <>
+      {cycles.length > 0 ? (
+        <div className="h-full w-full">
+          <div className="flex justify-between h-full w-full">
+            <div
+              className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
+                peekCycle
+                  ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                  : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+              } auto-rows-max transition-all `}
+            >
+              {cycles.map((cycle) => (
+                <CyclesBoardCard key={cycle.id} workspaceSlug={workspaceSlug} projectId={projectId} cycle={cycle} />
+              ))}
+            </div>
+            <CyclePeekOverview
+              projectId={projectId?.toString() ?? ""}
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="h-full grid place-items-center text-center">
+          <div className="space-y-2">
+            <div className="mx-auto flex justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+                <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+                <path
+                  d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                  fill="rgb(var(--color-text-400))"
+                />
+              </svg>
+            </div>
+            <h4 className="text-sm text-custom-text-200">{filter === "all" ? "No cycles" : `No ${filter} cycles`}</h4>
+            <button
+              type="button"
+              className="text-custom-primary-100 text-sm outline-none"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "q",
+                });
+                document.dispatchEvent(e);
+              }}
+            >
+              Create a new cycle
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-gantt.tsx b/web/components/cycles/cycles-gantt.tsx
new file mode 100644
index 00000000000..7b370ba3074
--- /dev/null
+++ b/web/components/cycles/cycles-gantt.tsx
@@ -0,0 +1 @@
+export const CycleGantt = () => <></>;
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
new file mode 100644
index 00000000000..c294a5119ef
--- /dev/null
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -0,0 +1,261 @@
+import { FC, MouseEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// stores
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
+import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui";
+// icons
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+// helpers
+import {
+  getDateRangeStatus,
+  findHowManyDaysLeft,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+// constants
+import { CYCLE_STATUS } from "constants/cycle";
+
+type TCyclesListItem = {
+  cycle: ICycle;
+  handleEditCycle?: () => void;
+  handleDeleteCycle?: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const CyclesListItem: FC<TCyclesListItem> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // computed
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const router = useRouter();
+
+  const cycleTotalIssues =
+    cycle.backlog_issues +
+    cycle.unstarted_issues +
+    cycle.started_issues +
+    cycle.completed_issues +
+    cycle.cancelled_issues;
+
+  const renderDate = cycle.start_date || cycle.end_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setUpdateModal(true);
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+    const { query } = router;
+    e.preventDefault();
+    e.stopPropagation();
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekCycle: cycle.id },
+    });
+  };
+
+  return (
+    <>
+      <CycleCreateUpdateModal
+        data={cycle}
+        isOpen={updateModal}
+        handleClose={() => setUpdateModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+      <CycleDeleteModal
+        cycle={cycle}
+        isOpen={deleteModal}
+        handleClose={() => setDeleteModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+      />
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {isCompleted ? (
+                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                  ) : progress === 100 ? (
+                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+
+              <div className="flex items-center gap-2.5">
+                <span className="flex-shrink-0">
+                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+                </span>
+                <Tooltip tooltipContent={cycle.name} position="top">
+                  <span className="text-base font-medium truncate">{cycle.name}</span>
+                </Tooltip>
+              </div>
+            </div>
+            <button onClick={openCycleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {cycle.assignees.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {cycle.assignees.map((assignee) => (
+                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                    ))}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {cycle.is_favorite ? (
+              <button type="button" onClick={handleRemoveFromFavorites}>
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button type="button" onClick={handleAddToFavorites}>
+                <Star className="h-3.5 w-3.5 text-custom-text-200" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" ellipsis className="z-10">
+              {!isCompleted && (
+                <>
+                  <CustomMenu.MenuItem onClick={handleEditCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              )}
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy cycle link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
new file mode 100644
index 00000000000..03698f1d81b
--- /dev/null
+++ b/web/components/cycles/cycles-list.tsx
@@ -0,0 +1,78 @@
+import { FC } from "react";
+// components
+import { CyclePeekOverview, CyclesListItem } from "components/cycles";
+
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { ICycle } from "types";
+
+export interface ICyclesList {
+  cycles: ICycle[];
+  filter: string;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CyclesList: FC<ICyclesList> = (props) => {
+  const { cycles, filter, workspaceSlug, projectId } = props;
+
+  return (
+    <>
+      {cycles ? (
+        <>
+          {cycles.length > 0 ? (
+            <div className="h-full overflow-y-auto">
+              <div className="flex justify-between h-full w-full">
+                <div className="flex flex-col h-full w-full overflow-y-auto">
+                  {cycles.map((cycle) => (
+                    <CyclesListItem cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+                  ))}
+                </div>
+                <CyclePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="h-full grid place-items-center text-center">
+              <div className="space-y-2">
+                <div className="mx-auto flex justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+                    <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+                    <path
+                      d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                      fill="rgb(var(--color-text-400))"
+                    />
+                  </svg>
+                </div>
+                <h4 className="text-sm text-custom-text-200">
+                  {filter === "all" ? "No cycles" : `No ${filter} cycles`}
+                </h4>
+                <button
+                  type="button"
+                  className="text-custom-primary-100 text-sm outline-none"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "q",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  Create a new cycle
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <Loader className="space-y-4">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx
new file mode 100644
index 00000000000..4eea43e6d0a
--- /dev/null
+++ b/web/components/cycles/cycles-view.tsx
@@ -0,0 +1,86 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
+// ui components
+import { Loader } from "@plane/ui";
+// types
+import { TCycleLayout } from "types";
+
+export interface ICyclesView {
+  filter: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete";
+  layout: TCycleLayout;
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string;
+}
+
+export const CyclesView: FC<ICyclesView> = observer((props) => {
+  const { filter, layout, workspaceSlug, projectId, peekCycle } = props;
+
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+
+  // api call to fetch cycles list
+  useSWR(
+    workspaceSlug && projectId && filter ? `CYCLES_LIST_${projectId}_${filter}` : null,
+    workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
+  );
+
+  const cyclesList = cycleStore.cycles?.[projectId];
+
+  return (
+    <>
+      {layout === "list" && (
+        <>
+          {cyclesList ? (
+            <CyclesList cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
+          ) : (
+            <Loader className="space-y-4 p-8">
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+            </Loader>
+          )}
+        </>
+      )}
+
+      {layout === "board" && (
+        <>
+          {cyclesList ? (
+            <CyclesBoard
+              cycles={cyclesList}
+              filter={filter}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              peekCycle={peekCycle}
+            />
+          ) : (
+            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+            </Loader>
+          )}
+        </>
+      )}
+
+      {layout === "gantt" && (
+        <>
+          {cyclesList ? (
+            <CyclesListGanttChartView cycles={cyclesList} workspaceSlug={workspaceSlug} />
+          ) : (
+            <Loader className="space-y-4">
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+            </Loader>
+          )}
+        </>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
new file mode 100644
index 00000000000..b7f25028def
--- /dev/null
+++ b/web/components/cycles/delete-modal.tsx
@@ -0,0 +1,122 @@
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { AlertTriangle } from "lucide-react";
+// components
+import { Button } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { ICycle } from "types";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+interface ICycleDelete {
+  cycle: ICycle;
+  isOpen: boolean;
+  handleClose: () => void;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
+  const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const formSubmit = async () => {
+    setLoader(true);
+    if (cycle?.id)
+      try {
+        await cycleStore.removeCycle(workspaceSlug, projectId, cycle?.id);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle deleted successfully.",
+        });
+        handleClose();
+      } catch (error) {
+        setToastAlert({
+          type: "error",
+          title: "Warning!",
+          message: "Something went wrong please try again later.",
+        });
+      }
+    else
+      setToastAlert({
+        type: "error",
+        title: "Warning!",
+        message: "Something went wrong please try again later.",
+      });
+
+    setLoader(false);
+  };
+
+  return (
+    <div>
+      <div>
+        <Transition.Root show={isOpen} as={Fragment}>
+          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-10 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={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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                    <div className="flex flex-col gap-6 p-6">
+                      <div className="flex w-full items-center justify-start gap-4">
+                        <div className="flex-shrink-0 flex justify-center items-center rounded-full bg-red-500/20 w-12 h-12">
+                          <AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
+                        </div>
+                        <div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
+                      </div>
+                      <span>
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete cycle{' "'}
+                          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+                          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be
+                          undone.
+                        </p>
+                      </span>
+                      <div className="flex justify-end gap-2">
+                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                          Cancel
+                        </Button>
+
+                        <Button variant="danger" size="sm" onClick={formSubmit}>
+                          {loader ? "Deleting..." : "Delete Cycle"}
+                        </Button>
+                      </div>
+                    </div>
+                  </Dialog.Panel>
+                </Transition.Child>
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
new file mode 100644
index 00000000000..b262edb1519
--- /dev/null
+++ b/web/components/cycles/form.tsx
@@ -0,0 +1,154 @@
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input, TextArea } from "@plane/ui";
+import { DateSelect } from "components/ui";
+import { IssueProjectSelect } from "components/issues/select";
+// types
+import { ICycle } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleClose: () => void;
+  projectId: string;
+  setActiveProject: (projectId: string) => void;
+  data?: ICycle | null;
+};
+
+export const CycleForm: React.FC<Props> = (props) => {
+  const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
+  // form data
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    watch,
+  } = useForm<ICycle>({
+    defaultValues: {
+      project: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      start_date: data?.start_date || null,
+      end_date: data?.end_date || null,
+    },
+  });
+
+  const startDate = watch("start_date");
+  const endDate = watch("end_date");
+
+  const minDate = startDate ? new Date(startDate) : new Date();
+  minDate.setDate(minDate.getDate() + 1);
+
+  const maxDate = endDate ? new Date(endDate) : null;
+  maxDate?.setDate(maxDate.getDate() - 1);
+
+  return (
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <div className="space-y-5">
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+        </div>
+        <div className="space-y-3">
+          <div className="mt-2 space-y-3">
+            <div>
+              <Controller
+                name="name"
+                control={control}
+                rules={{
+                  required: "Name is required",
+                  maxLength: {
+                    value: 255,
+                    message: "Name should be less than 255 characters",
+                  },
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="cycle_name"
+                    name="name"
+                    type="text"
+                    placeholder="Cycle Title"
+                    className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
+                    value={value}
+                    inputSize="md"
+                    onChange={onChange}
+                    hasError={Boolean(errors?.name)}
+                  />
+                )}
+              />
+            </div>
+            <div>
+              <Controller
+                name="description"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <TextArea
+                    id="cycle_description"
+                    name="description"
+                    placeholder="Description..."
+                    className="h-24 w-full resize-none text-sm"
+                    hasError={Boolean(errors?.description)}
+                    value={value}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div>
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect
+                      label="Start date"
+                      value={value}
+                      onChange={(val) => onChange(val)}
+                      minDate={new Date()}
+                      maxDate={maxDate ?? undefined}
+                    />
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="end_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? "Updating Cycle..."
+              : "Update Cycle"
+            : isSubmitting
+            ? "Creating Cycle..."
+            : "Create Cycle"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
new file mode 100644
index 00000000000..99a1d25e5cb
--- /dev/null
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -0,0 +1,79 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip, ContrastIcon } from "@plane/ui";
+// helpers
+import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
+// types
+import { ICycle } from "types";
+
+export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
+
+  return (
+    <div
+      className="flex items-center relative h-full w-full rounded"
+      style={{
+        backgroundColor:
+          cycleStatus === "current"
+            ? "#09a953"
+            : cycleStatus === "upcoming"
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : "",
+      }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+    >
+      <ContrastIcon
+        className="h-5 w-5 flex-shrink-0"
+        color={`${
+          cycleStatus === "current"
+            ? "#09a953"
+            : cycleStatus === "upcoming"
+            ? "#f7ae59"
+            : cycleStatus === "completed"
+            ? "#3f76ff"
+            : cycleStatus === "draft"
+            ? "rgb(var(--color-text-200))"
+            : ""
+        }`}
+      />
+      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
+    </div>
+  );
+};
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
new file mode 100644
index 00000000000..9526de59c89
--- /dev/null
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -0,0 +1,97 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+import { KeyedMutator } from "swr";
+
+// services
+import { CycleService } from "services/cycle.service";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
+// types
+import { ICycle } from "types";
+
+type Props = {
+  workspaceSlug: string;
+  cycles: ICycle[];
+  mutateCycles?: KeyedMutator<ICycle[]>;
+};
+
+// services
+const cycleService = new CycleService();
+
+export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !user) return;
+    mutateCycles &&
+      mutateCycles((prevData: any) => {
+        if (!prevData) return prevData;
+
+        const newList = prevData.map((p: any) => ({
+          ...p,
+          ...(p.id === cycle.id
+            ? {
+                start_date: payload.start_date ? payload.start_date : p.start_date,
+                target_date: payload.target_date ? payload.target_date : p.end_date,
+                sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
+              }
+            : {}),
+        }));
+
+        if (payload.sort_order) {
+          const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
+          newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
+        }
+
+        return newList;
+      }, false);
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    cycleService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload, user);
+  };
+
+  const blockFormat = (blocks: ICycle[]) =>
+    blocks && blocks.length > 0
+      ? blocks
+          .filter((b) => b.start_date && b.end_date && new Date(b.start_date) <= new Date(b.end_date))
+          .map((block) => ({
+            data: block,
+            id: block.id,
+            sort_order: block.sort_order,
+            start_date: new Date(block.start_date ?? ""),
+            target_date: new Date(block.end_date ?? ""),
+          }))
+      : [];
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <div className="w-full h-full overflow-y-auto">
+      <GanttChartRoot
+        title="Cycles"
+        loaderTitle="Cycles"
+        blocks={cycles ? blockFormat(cycles) : null}
+        blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
+        blockToRender={(data: ICycle) => <CycleGanttBlock data={data} />}
+        sidebarBlockToRender={(data: ICycle) => <CycleGanttSidebarBlock data={data} />}
+        enableBlockLeftResize={false}
+        enableBlockRightResize={false}
+        enableBlockMove={false}
+        enableReorder={isAllowed}
+      />
+    </div>
+  );
+};
diff --git a/web/components/cycles/gantt-chart/index.ts b/web/components/cycles/gantt-chart/index.ts
new file mode 100644
index 00000000000..a0a16086b2a
--- /dev/null
+++ b/web/components/cycles/gantt-chart/index.ts
@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./cycles-list-layout";
diff --git a/web/components/cycles/index.ts b/web/components/cycles/index.ts
new file mode 100644
index 00000000000..ea956847875
--- /dev/null
+++ b/web/components/cycles/index.ts
@@ -0,0 +1,19 @@
+export * from "./cycles-view";
+export * from "./active-cycle-details";
+export * from "./active-cycle-stats";
+export * from "./gantt-chart";
+export * from "./cycles-view";
+export * from "./form";
+export * from "./modal";
+export * from "./select";
+export * from "./sidebar";
+export * from "./transfer-issues-modal";
+export * from "./transfer-issues";
+export * from "./cycles-list";
+export * from "./cycles-list-item";
+export * from "./cycles-board";
+export * from "./cycles-board-card";
+export * from "./cycles-gantt";
+export * from "./delete-modal";
+export * from "./cycle-peek-overview";
+export * from "./cycles-list-item";
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
new file mode 100644
index 00000000000..bb266e9eb25
--- /dev/null
+++ b/web/components/cycles/modal.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { CycleService } from "services/cycle.service";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CycleForm } from "components/cycles";
+// types
+import type { CycleDateCheckData, ICycle } from "types";
+
+type CycleModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: ICycle | null;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+// services
+const cycleService = new CycleService();
+
+export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
+  const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // states
+  const [activeProject, setActiveProject] = useState<string>(projectId);
+  // toast
+  const { setToastAlert } = useToast();
+
+  const createCycle = async (payload: Partial<ICycle>) =>
+    cycleStore
+      .createCycle(workspaceSlug, projectId, payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error in creating cycle. Please try again.",
+        });
+      });
+
+  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) =>
+    cycleStore
+      .updateCycle(workspaceSlug, projectId, cycleId, payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error in updating cycle. Please try again.",
+        });
+      });
+
+  const dateChecker = async (payload: CycleDateCheckData) => {
+    let status = false;
+
+    await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload).then((res) => {
+      status = res.status;
+    });
+
+    return status;
+  };
+
+  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<ICycle> = {
+      ...formData,
+    };
+
+    let isDateValid: boolean = true;
+
+    if (payload.start_date && payload.end_date) {
+      if (data?.start_date && data?.end_date)
+        isDateValid = await dateChecker({
+          start_date: payload.start_date,
+          end_date: payload.end_date,
+          cycle_id: data.id,
+        });
+      else
+        isDateValid = await dateChecker({
+          start_date: payload.start_date,
+          end_date: payload.end_date,
+        });
+    }
+
+    if (isDateValid) {
+      if (data) await updateCycle(data.id, payload);
+      else await createCycle(payload);
+      handleClose();
+    } else
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
+      });
+  };
+
+  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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={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 rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <CycleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  projectId={activeProject}
+                  setActiveProject={setActiveProject}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/cycles/select.tsx b/web/components/cycles/select.tsx
similarity index 76%
rename from apps/app/components/cycles/select.tsx
rename to web/components/cycles/select.tsx
index 9241c8a4dbf..9944a39b2aa 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/web/components/cycles/select.tsx
@@ -1,19 +1,14 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-import useUserAuth from "hooks/use-user-auth";
-// headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CyclesIcon } from "components/icons";
+import { ContrastIcon } from "@plane/ui";
+import { Plus } from "lucide-react";
 // services
-import cycleServices from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // components
-import { CreateUpdateCycleModal } from "components/cycles";
+import { CycleCreateUpdateModal } from "components/cycles";
 // fetch-keys
 import { CYCLES_LIST } from "constants/fetch-keys";
 
@@ -24,24 +19,19 @@ export type IssueCycleSelectProps = {
   multiple?: boolean;
 };
 
-export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
-  projectId,
-  value,
-  onChange,
-  multiple = false,
-}) => {
+const cycleService = new CycleService();
+
+export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value, onChange, multiple = false }) => {
   // states
   const [isCycleModalActive, setCycleModalActive] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { user } = useUserAuth();
-
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLES_LIST(projectId) : null,
     workspaceSlug && projectId
-      ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
       : null
   );
 
@@ -57,18 +47,21 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
 
   return (
     <>
-      <CreateUpdateCycleModal
-        isOpen={isCycleModalActive}
-        handleClose={closeCycleModal}
-        user={user}
-      />
+      {workspaceSlug && projectId && (
+        <CycleCreateUpdateModal
+          isOpen={isCycleModalActive}
+          handleClose={closeCycleModal}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
       <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
         {({ open }) => (
           <>
             <Listbox.Button
               className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <CyclesIcon className="h-3 w-3 text-custom-text-200" />
+              <ContrastIcon className="h-3 w-3 text-custom-text-200" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>
@@ -92,10 +85,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                           key={option.value}
                           className={({ selected, active }) =>
                             `${
-                              selected ||
-                              (Array.isArray(value)
-                                ? value.includes(option.value)
-                                : value === option.value)
+                              selected || (Array.isArray(value) ? value.includes(option.value) : value === option.value)
                                 ? "bg-indigo-50 font-medium"
                                 : ""
                             } ${
@@ -104,9 +94,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                           }
                           value={option.value}
                         >
-                          <span className={` flex items-center gap-2 truncate`}>
-                            {option.display}
-                          </span>
+                          <span className={` flex items-center gap-2 truncate`}>{option.display}</span>
                         </Listbox.Option>
                       ))
                     ) : (
@@ -120,7 +108,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                     className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
                     onClick={openCycleModal}
                   >
-                    <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                    <Plus className="h-4 w-4 text-gray-400" aria-hidden="true" />
                     <span>Create cycle</span>
                   </button>
                 </div>
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
new file mode 100644
index 00000000000..ea154d48b09
--- /dev/null
+++ b/web/components/cycles/sidebar.tsx
@@ -0,0 +1,555 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { useForm } from "react-hook-form";
+import { Disclosure, Popover, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { CycleService } from "services/cycle.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { SidebarProgressStats } from "components/core";
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { CycleDeleteModal } from "components/cycles/delete-modal";
+// ui
+import { CustomRangeDatePicker } from "components/ui";
+import { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
+// icons
+import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import {
+  findHowManyDaysLeft,
+  getDateRangeStatus,
+  isDateGreaterThanToday,
+  renderDateFormat,
+  renderShortDate,
+  renderShortMonthDate,
+} from "helpers/date-time.helper";
+// types
+import { ICycle } from "types";
+// fetch-keys
+import { CYCLE_DETAILS } from "constants/fetch-keys";
+import { CYCLE_STATUS } from "constants/cycle";
+
+type Props = {
+  cycleId: string;
+  handleClose: () => void;
+};
+
+// services
+const cycleService = new CycleService();
+
+// TODO: refactor the whole component
+export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { cycleId, handleClose } = props;
+
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekCycle } = router.query;
+
+  const { user: userStore, cycle: cycleDetailsStore } = useMobxStore();
+
+  const user = userStore.currentUser ?? undefined;
+  const cycleDetails = cycleDetailsStore.cycle_details[cycleId] ?? undefined;
+
+  const { setToastAlert } = useToast();
+
+  const defaultValues: Partial<ICycle> = {
+    start_date: new Date().toString(),
+    end_date: new Date().toString(),
+  };
+
+  const { setValue, reset, watch } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = (data: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    mutate<ICycle>(CYCLE_DETAILS(cycleId as string), (prevData) => ({ ...(prevData as ICycle), ...data }), false);
+
+    cycleService
+      .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data, user)
+      .then(() => mutate(CYCLE_DETAILS(cycleId as string)))
+      .catch((e) => console.log(e));
+  };
+
+  const handleCopyText = () => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Cycle link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (cycleDetails)
+      reset({
+        ...cycleDetails,
+      });
+  }, [cycleDetails, reset]);
+
+  const dateChecker = async (payload: any) => {
+    try {
+      const res = await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload);
+      return res.status;
+    } catch (err) {
+      return false;
+    }
+  };
+
+  const handleStartDateChange = async (date: string) => {
+    setValue("start_date", date);
+    if (
+      watch("start_date") &&
+      watch("end_date") &&
+      watch("start_date") !== "" &&
+      watch("end_date") &&
+      watch("start_date") !== ""
+    ) {
+      if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Unable to create cycle in past date. Please enter a valid date.",
+        });
+        return;
+      }
+
+      if (cycleDetails?.start_date && cycleDetails?.end_date) {
+        const isDateValidForExistingCycle = await dateChecker({
+          start_date: `${watch("start_date")}`,
+          end_date: `${watch("end_date")}`,
+          cycle_id: cycleDetails.id,
+        });
+
+        if (isDateValidForExistingCycle) {
+          submitChanges({
+            start_date: renderDateFormat(`${watch("start_date")}`),
+            end_date: renderDateFormat(`${watch("end_date")}`),
+          });
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle updated successfully.",
+          });
+          return;
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+          return;
+        }
+      }
+
+      const isDateValid = await dateChecker({
+        start_date: `${watch("start_date")}`,
+        end_date: `${watch("end_date")}`,
+      });
+
+      if (isDateValid) {
+        submitChanges({
+          start_date: renderDateFormat(`${watch("start_date")}`),
+          end_date: renderDateFormat(`${watch("end_date")}`),
+        });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+        });
+      }
+    }
+  };
+
+  const handleEndDateChange = async (date: string) => {
+    setValue("end_date", date);
+
+    if (
+      watch("start_date") &&
+      watch("end_date") &&
+      watch("start_date") !== "" &&
+      watch("end_date") &&
+      watch("start_date") !== ""
+    ) {
+      if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Unable to create cycle in past date. Please enter a valid date.",
+        });
+        return;
+      }
+
+      if (cycleDetails?.start_date && cycleDetails?.end_date) {
+        const isDateValidForExistingCycle = await dateChecker({
+          start_date: `${watch("start_date")}`,
+          end_date: `${watch("end_date")}`,
+          cycle_id: cycleDetails.id,
+        });
+
+        if (isDateValidForExistingCycle) {
+          submitChanges({
+            start_date: renderDateFormat(`${watch("start_date")}`),
+            end_date: renderDateFormat(`${watch("end_date")}`),
+          });
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Cycle updated successfully.",
+          });
+          return;
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+          return;
+        }
+      }
+
+      const isDateValid = await dateChecker({
+        start_date: `${watch("start_date")}`,
+        end_date: `${watch("end_date")}`,
+      });
+
+      if (isDateValid) {
+        submitChanges({
+          start_date: renderDateFormat(`${watch("start_date")}`),
+          end_date: renderDateFormat(`${watch("end_date")}`),
+        });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+        });
+      }
+    }
+  };
+
+  const cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+  const isCompleted = cycleStatus === "completed";
+
+  const isStartValid = new Date(`${cycleDetails?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${cycleDetails?.end_date}`) >= new Date(`${cycleDetails?.start_date}`);
+
+  const progressPercentage = cycleDetails
+    ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
+    : null;
+
+  if (!cycleDetails) return null;
+
+  const endDate = new Date(cycleDetails.end_date ?? "");
+  const startDate = new Date(cycleDetails.start_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const issueCount =
+    cycleDetails.total_issues === 0
+      ? "0 Issue"
+      : cycleDetails.total_issues === cycleDetails.completed_issues
+      ? cycleDetails.total_issues > 1
+        ? `${cycleDetails.total_issues}`
+        : `${cycleDetails.total_issues}`
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+
+  return (
+    <>
+      {cycleDetails && workspaceSlug && projectId && (
+        <CycleDeleteModal
+          cycle={cycleDetails}
+          isOpen={cycleDeleteModal}
+          handleClose={() => setCycleDeleteModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
+
+      {cycleDetails ? (
+        <>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
+              >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3.5">
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+              {!isCompleted && (
+                <CustomMenu width="lg" ellipsis>
+                  <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-4 w-4" />
+                      <span>Delete</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
+            <div className="flex items-center gap-5">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
+                </span>
+              )}
+              <div className="relative flex h-full w-52 items-center gap-2.5">
+                <Popover className="flex h-full items-center justify-center rounded-lg">
+                  <Popover.Button
+                    disabled={isCompleted ?? false}
+                    className="text-sm text-custom-text-300 font-medium cursor-default"
+                  >
+                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                      <CustomRangeDatePicker
+                        value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                        onChange={(val) => {
+                          if (val) {
+                            handleStartDateChange(val);
+                          }
+                        }}
+                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                        endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                        maxDate={new Date(`${watch("end_date")}`)}
+                        selectsStart
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </Popover>
+                <MoveRight className="h-4 w-4 text-custom-text-300" />
+                <Popover className="flex h-full items-center justify-center rounded-lg">
+                  <>
+                    <Popover.Button
+                      disabled={isCompleted ?? false}
+                      className="text-sm text-custom-text-300 font-medium cursor-default"
+                    >
+                      {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                    </Popover.Button>
+
+                    <Transition
+                      as={React.Fragment}
+                      enter="transition ease-out duration-200"
+                      enterFrom="opacity-0 translate-y-1"
+                      enterTo="opacity-100 translate-y-0"
+                      leave="transition ease-in duration-150"
+                      leaveFrom="opacity-100 translate-y-0"
+                      leaveTo="opacity-0 translate-y-1"
+                    >
+                      <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
+                        <CustomRangeDatePicker
+                          value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
+                          onChange={(val) => {
+                            if (val) {
+                              handleEndDateChange(val);
+                            }
+                          }}
+                          startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                          endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                          minDate={new Date(`${watch("start_date")}`)}
+                          selectsEnd
+                        />
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                </Popover>
+              </div>
+            </div>
+          </div>
+
+          {cycleDetails.description && (
+            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+              {cycleDetails.description}
+            </span>
+          )}
+
+          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <UserCircle2 className="h-4 w-4" />
+                <span className="text-base">Lead</span>
+              </div>
+              <div className="flex items-center w-1/2 rounded-sm">
+                <div className="flex items-center gap-2.5">
+                  <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
+                  <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <LayersIcon className="h-4 w-4" />
+                <span className="text-base">Issues</span>
+              </div>
+              <div className="flex items-center w-1/2">
+                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Progress</span>
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        {progressPercentage ? (
+                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
+                            {progressPercentage ? `${progressPercentage}%` : ""}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                        {isStartValid && isEndValid ? (
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        ) : (
+                          <div className="flex items-center gap-1">
+                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                            <span className="text-xs italic text-custom-text-200">
+                              Invalid date. Please enter valid date.
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </Disclosure.Button>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        <div className="flex flex-col gap-3">
+                          {isStartValid && isEndValid ? (
+                            <div className="h-full w-full pt-4">
+                              <div className="flex  items-start  gap-4 py-2 text-xs">
+                                <div className="flex items-center gap-3 text-custom-text-100">
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <span>Ideal</span>
+                                  </div>
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                    <span>Current</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="relative h-40 w-80">
+                                <ProgressChart
+                                  distribution={cycleDetails.distribution.completion_chart}
+                                  startDate={cycleDetails.start_date ?? ""}
+                                  endDate={cycleDetails.end_date ?? ""}
+                                  totalIssues={cycleDetails.total_issues}
+                                />
+                              </div>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                          {cycleDetails.total_issues > 0 && (
+                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
+                              <SidebarProgressStats
+                                distribution={cycleDetails.distribution}
+                                groupedIssues={{
+                                  backlog: cycleDetails.backlog_issues,
+                                  unstarted: cycleDetails.unstarted_issues,
+                                  started: cycleDetails.started_issues,
+                                  completed: cycleDetails.completed_issues,
+                                  cancelled: cycleDetails.cancelled_issues,
+                                }}
+                                totalIssues={cycleDetails.total_issues}
+                                isPeekView={Boolean(peekCycle)}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5">
+          <div className="space-y-2">
+            <Loader.Item height="15px" width="50%" />
+            <Loader.Item height="15px" width="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
similarity index 77%
rename from apps/app/components/cycles/transfer-issues-modal.tsx
rename to web/components/cycles/transfer-issues-modal.tsx
index 0bc19ab9b3d..bf7a6f5b1f9 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -1,21 +1,16 @@
-import React, { useState, useEffect } from "react";
-
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// component
+import useSWR from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cyclesService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
-import useIssuesView from "hooks/use-issues-view";
 //icons
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ContrastIcon, ExclamationIcon, TransferIcon } from "components/icons";
+import { ContrastIcon, TransferIcon } from "@plane/ui";
+import { AlertCircle, Search, X } from "lucide-react";
 // fetch-key
-import { CYCLE_ISSUES_WITH_PARAMS, INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
+import { INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
 // types
 import { ICycle } from "types";
 //helper
@@ -26,28 +21,27 @@ type Props = {
   handleClose: () => void;
 };
 
+const cycleService = new CycleService();
+
 export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) => {
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { params } = useIssuesView();
-
   const { setToastAlert } = useToast();
 
   const transferIssue = async (payload: any) => {
-    await cyclesService
+    await cycleService
       .transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload)
-      .then((res) => {
-        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+      .then(() => {
         setToastAlert({
           type: "success",
           title: "成功移交任务",
           message: "已成功转移任务",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "错误!",
@@ -59,29 +53,23 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
   const { data: incompleteCycles } = useSWR(
     workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            "incomplete"
-          )
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
       : null
   );
 
   const filteredOptions =
     query === ""
       ? incompleteCycles
-      : incompleteCycles?.filter((option) =>
-          option.name.toLowerCase().includes(query.toLowerCase())
-        );
+      : incompleteCycles?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
+
+  // useEffect(() => {
+  //   const handleKeyDown = (e: KeyboardEvent) => {
+  //     if (e.key === "Escape") {
+  //       handleClose();
+  //     }
+  //   };
+  // }, [handleClose]);
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    };
-  }, [handleClose]);
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -112,15 +100,15 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                 <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-5" color="#495057" />
+                      <TransferIcon className="h-4 w-4" color="#495057" />
                       <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
-                      <XMarkIcon className="h-4 w-4" />
+                      <X className="h-4 w-4" />
                     </button>
                   </div>
                   <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
+                    <Search className="h-4 w-4 text-custom-text-200" />
                     <input
                       className="bg-custom-background-90 outline-none"
                       placeholder="Search for a cycle..."
@@ -153,14 +141,9 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         ))
                       ) : (
                         <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <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 issues.
                           </span>
                         </div>
                       )
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
new file mode 100644
index 00000000000..5ec23cd70e4
--- /dev/null
+++ b/web/components/cycles/transfer-issues.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// component
+import { Button, TransferIcon } from "@plane/ui";
+// icon
+import { AlertCircle } from "lucide-react";
+// services
+import { CycleService } from "services/cycle.service";
+// fetch-key
+import { CYCLE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  handleClick: () => void;
+};
+
+const cycleService = new CycleService();
+
+export const TransferIssues: React.FC<Props> = (props) => {
+  const { handleClick } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () => cycleService.getCycleDetails(workspaceSlug as string, projectId as string, cycleId as string)
+      : null
+  );
+
+  const transferableIssuesCount = cycleDetails
+    ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
+    : 0;
+
+  return (
+    <div className="-mt-2 mb-4 flex items-center justify-between px-4 pt-6">
+      <div className="flex items-center gap-2 text-sm text-custom-text-200">
+        <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
+        <span>Completed cycles are not editable.</span>
+      </div>
+
+      {transferableIssuesCount > 0 && (
+        <div>
+          <Button variant="primary" prependIcon={<TransferIcon color="white" />} onClick={handleClick}>
+            Transfer Issues
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/dnd/StrictModeDroppable.tsx b/web/components/dnd/StrictModeDroppable.tsx
similarity index 88%
rename from apps/app/components/dnd/StrictModeDroppable.tsx
rename to web/components/dnd/StrictModeDroppable.tsx
index 9ed01d3bf7a..9feba79b215 100644
--- a/apps/app/components/dnd/StrictModeDroppable.tsx
+++ b/web/components/dnd/StrictModeDroppable.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 // react beautiful dnd
-import { Droppable, DroppableProps } from "react-beautiful-dnd";
+import { Droppable, DroppableProps } from "@hello-pangea/dnd";
 
 const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
   const [enabled, setEnabled] = useState(false);
diff --git a/apps/app/components/emoji-icon-picker/emojis.json b/web/components/emoji-icon-picker/emojis.json
similarity index 100%
rename from apps/app/components/emoji-icon-picker/emojis.json
rename to web/components/emoji-icon-picker/emojis.json
diff --git a/apps/app/components/emoji-icon-picker/helpers.ts b/web/components/emoji-icon-picker/helpers.ts
similarity index 100%
rename from apps/app/components/emoji-icon-picker/helpers.ts
rename to web/components/emoji-icon-picker/helpers.ts
diff --git a/apps/app/components/emoji-icon-picker/icons.json b/web/components/emoji-icon-picker/icons.json
similarity index 100%
rename from apps/app/components/emoji-icon-picker/icons.json
rename to web/components/emoji-icon-picker/icons.json
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
new file mode 100644
index 00000000000..7ac77dcf04d
--- /dev/null
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -0,0 +1,204 @@
+import React, { useEffect, useState, useRef } from "react";
+// headless ui
+import { Tab, Transition, Popover } from "@headlessui/react";
+// react colors
+import { TwitterPicker } from "react-color";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// types
+import { Props } from "./types";
+// emojis
+import emojis from "./emojis.json";
+import icons from "./icons.json";
+// helpers
+import { getRecentEmojis, saveRecentEmoji } from "./helpers";
+import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
+
+const tabOptions = [
+  {
+    key: "emoji",
+    title: "Emoji",
+  },
+  {
+    key: "icon",
+    title: "Icon",
+  },
+];
+
+const EmojiIconPicker: React.FC<Props> = (props) => {
+  const { label, value, onChange, onIconColorChange, disabled = false } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [openColorPicker, setOpenColorPicker] = useState(false);
+  const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
+  const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const emojiPickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setRecentEmojis(getRecentEmojis());
+  }, []);
+
+  useEffect(() => {
+    if (!value || value?.length === 0) onChange(getRandomEmoji());
+  }, [value, onChange]);
+
+  useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, emojiPickerRef);
+
+  return (
+    <Popover className="relative z-[1]">
+      <Popover.Button
+        ref={buttonRef}
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="outline-none"
+        disabled={disabled}
+      >
+        {label}
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        static
+        as={React.Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Popover.Panel
+          ref={emojiPickerRef}
+          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
+        >
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
+            <Tab.Group as="div" className="flex h-full w-full flex-col">
+              <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
+                {tabOptions.map((tab) => (
+                  <Tab key={tab.key} as={React.Fragment}>
+                    {({ selected }) => (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setOpenColorPicker(false);
+                        }}
+                        className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
+                          selected ? "" : "border-transparent text-custom-text-200"
+                        }`}
+                      >
+                        {tab.title}
+                      </button>
+                    )}
+                  </Tab>
+                ))}
+              </Tab.List>
+              <Tab.Panels className="flex-1 overflow-y-auto">
+                <Tab.Panel>
+                  {recentEmojis.length > 0 && (
+                    <div className="py-2">
+                      <h3 className="mb-2 text-xs text-custom-text-200">最近</h3>
+                      <div className="grid grid-cols-8 gap-2">
+                        {recentEmojis.map((emoji) => (
+                          <button
+                            key={emoji}
+                            type="button"
+                            className="flex h-4 w-4 select-none items-center justify-between text-sm"
+                            onClick={() => {
+                              onChange(emoji);
+                              setIsOpen(false);
+                            }}
+                          >
+                            {renderEmoji(emoji)}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  <hr className="mb-2 h-[1px] w-full border-custom-border-200" />
+                  <div>
+                    <div className="grid grid-cols-8 gap-x-2 gap-y-3">
+                      {emojis.map((emoji) => (
+                        <button
+                          type="button"
+                          className="mb-1 flex h-4 w-4 select-none items-center text-sm"
+                          key={emoji}
+                          onClick={() => {
+                            onChange(emoji);
+                            saveRecentEmoji(emoji);
+                            setIsOpen(false);
+                          }}
+                        >
+                          {renderEmoji(emoji)}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </Tab.Panel>
+                <div className="py-2">
+                  <Tab.Panel className="flex h-full w-full flex-col justify-center">
+                    <div className="relative">
+                      <div className="flex items-center justify-between px-1 pb-2">
+                        {["#FF6B00", "#8CC1FF", "#FCBE1D", "#18904F", "#ADF672", "#05C3FF", "#000000"].map((curCol) => (
+                          <span
+                            key={curCol}
+                            className="h-4 w-4 cursor-pointer rounded-full"
+                            style={{ backgroundColor: curCol }}
+                            onClick={() => setActiveColor(curCol)}
+                          />
+                        ))}
+                        <button
+                          type="button"
+                          onClick={() => setOpenColorPicker((prev) => !prev)}
+                          className="flex items-center gap-1"
+                        >
+                          <span
+                            className="conical-gradient h-4 w-4 rounded-full"
+                            style={{ backgroundColor: activeColor }}
+                          />
+                        </button>
+                      </div>
+                      <div>
+                        <TwitterPicker
+                          className={`!absolute top-4 left-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
+                          color={activeColor}
+                          onChange={(color) => {
+                            setActiveColor(color.hex);
+                            if (onIconColorChange) onIconColorChange(color.hex);
+                          }}
+                          triangle="hide"
+                          width="205px"
+                        />
+                      </div>
+                    </div>
+                    <hr className="mb-1 h-[1px] w-full border-custom-border-200" />
+                    <div className="mt-1 ml-1 grid grid-cols-8 gap-x-2 gap-y-3">
+                      {icons.material_rounded.map((icon, index) => (
+                        <button
+                          key={`${icon.name}-${index}`}
+                          type="button"
+                          className="mb-1 flex h-4 w-4 select-none items-center text-lg"
+                          onClick={() => {
+                            onChange({ name: icon.name, color: activeColor });
+                            setIsOpen(false);
+                          }}
+                        >
+                          <span style={{ color: activeColor }} className="material-symbols-rounded text-lg">
+                            {icon.name}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </Tab.Panel>
+                </div>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};
+
+export default EmojiIconPicker;
diff --git a/web/components/emoji-icon-picker/types.d.ts b/web/components/emoji-icon-picker/types.d.ts
new file mode 100644
index 00000000000..01220ed4468
--- /dev/null
+++ b/web/components/emoji-icon-picker/types.d.ts
@@ -0,0 +1,14 @@
+export type Props = {
+  label: React.ReactNode;
+  value: any;
+  onChange: (
+    data:
+      | string
+      | {
+          name: string;
+          color: string;
+        }
+  ) => void;
+  onIconColorChange?: (data: any) => void;
+  disabled?: boolean;
+};
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
new file mode 100644
index 00000000000..6c331f950bd
--- /dev/null
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -0,0 +1,317 @@
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Input, TextArea } from "@plane/ui";
+// helpers
+import { checkDuplicates } from "helpers/array.helper";
+// types
+import { IEstimate, IEstimateFormData } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IEstimate;
+};
+
+const defaultValues = {
+  name: "",
+  description: "",
+  value1: "",
+  value2: "",
+  value3: "",
+  value4: "",
+  value5: "",
+  value6: "",
+};
+
+type FormValues = typeof defaultValues;
+
+export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
+  const { handleClose, data, isOpen } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<FormValues>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset();
+  };
+
+  const { setToastAlert } = useToast();
+
+  const createEstimate = async (payload: IEstimateFormData) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await projectEstimatesStore
+      .createEstimate(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
+        onClose();
+      })
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message:
+            errorString ?? err.status === 400
+              ? "Estimate with that name already exists. Please try again with another name."
+              : "Estimate could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateEstimate = async (payload: IEstimateFormData) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    await projectEstimatesStore
+      .updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorString ?? "Estimate could not be updated. Please try again.",
+        });
+      });
+
+    onClose();
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!formData.name || formData.name === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate title cannot be empty.",
+      });
+      return;
+    }
+
+    if (
+      formData.value1 === "" ||
+      formData.value2 === "" ||
+      formData.value3 === "" ||
+      formData.value4 === "" ||
+      formData.value5 === "" ||
+      formData.value6 === ""
+    ) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate point cannot be empty.",
+      });
+      return;
+    }
+
+    if (
+      checkDuplicates([
+        formData.value1,
+        formData.value2,
+        formData.value3,
+        formData.value4,
+        formData.value5,
+        formData.value6,
+      ])
+    ) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate points cannot have duplicate values.",
+      });
+      return;
+    }
+
+    const payload: IEstimateFormData = {
+      estimate: {
+        name: formData.name,
+        description: formData.description,
+      },
+      estimate_points: [],
+    };
+
+    for (let i = 0; i < 6; i++) {
+      const point = {
+        key: i,
+        value: formData[`value${i + 1}` as keyof FormValues],
+      };
+
+      if (data)
+        payload.estimate_points.push({
+          id: data.points[i].id,
+          ...point,
+        });
+      else payload.estimate_points.push({ ...point });
+    }
+
+    if (data) await updateEstimate(payload);
+    else await createEstimate(payload);
+  };
+
+  useEffect(() => {
+    if (data)
+      reset({
+        ...defaultValues,
+        ...data,
+        value1: data.points[0]?.value,
+        value2: data.points[1]?.value,
+        value3: data.points[2]?.value,
+        value4: data.points[3]?.value,
+        value5: data.points[4]?.value,
+        value6: data.points[5]?.value,
+      });
+    else reset({ ...defaultValues });
+  }, [data, reset]);
+
+  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 bg-opacity-50 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 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 rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                  <form onSubmit={handleSubmit(onSubmit)}>
+                    <div className="space-y-3">
+                      <div className="text-lg font-medium leading-6">{data ? "Update" : "Create"} Estimate</div>
+                      <div>
+                        <Controller
+                          control={control}
+                          name="name"
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="name"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <Controller
+                          name="description"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Description"
+                              onChange={onChange}
+                              className="mt-3 h-32 resize-none text-sm"
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
+                        />
+                      </div>
+
+                      {/* list of all the points */}
+                      {/* since they are all the same, we can use a loop to render them */}
+                      <div className="grid grid-cols-3 gap-3">
+                        {Array(6)
+                          .fill(0)
+                          .map((_, i) => (
+                            <div className="flex items-center">
+                              <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                                <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
+                                <span className="rounded-r-lg bg-custom-background-100">
+                                  <Controller
+                                    control={control}
+                                    name={`value${i + 1}` as keyof FormValues}
+                                    render={({ field: { value, onChange, ref } }) => (
+                                      <Input
+                                        ref={ref}
+                                        type="text"
+                                        value={value}
+                                        onChange={onChange}
+                                        id={`value${i + 1}`}
+                                        name={`value${i + 1}`}
+                                        placeholder={`Point ${i + 1}`}
+                                        className="rounded-l-none w-full"
+                                        hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
+                                      />
+                                    )}
+                                  />
+                                </span>
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    </div>
+                    <div className="mt-5 flex justify-end gap-2">
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
+                        {data
+                          ? isSubmitting
+                            ? "Updating Estimate..."
+                            : "Update Estimate"
+                          : isSubmitting
+                          ? "Creating Estimate..."
+                          : "Create Estimate"}
+                      </Button>
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
new file mode 100644
index 00000000000..0a96eda3d5d
--- /dev/null
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IEstimate } from "types";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  data: IEstimate | null;
+  handleClose: () => void;
+};
+
+export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, data } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleEstimateDelete = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const estimateId = data?.id!;
+
+    projectEstimatesStore.deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be deleted. Please try again",
+      });
+    });
+  };
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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 Estimate</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="break-words text-sm leading-7 text-custom-text-200">
+                      Are you sure you want to delete estimate-{" "}
+                      <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
+                      {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
+                      undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
+                      onClick={() => {
+                        setIsDeleteLoading(true);
+                        handleEstimateDelete();
+                      }}
+                      loading={isDeleteLoading}
+                    >
+                      {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
new file mode 100644
index 00000000000..becf16ff4e1
--- /dev/null
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, CustomMenu } from "@plane/ui";
+//icons
+import { Pencil, Trash2 } from "lucide-react";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IEstimate } from "types";
+
+type Props = {
+  estimate: IEstimate;
+  editEstimate: (estimate: IEstimate) => void;
+  deleteEstimate: (estimateId: string) => void;
+};
+
+export const EstimateListItem: React.FC<Props> = observer((props) => {
+  const { estimate, editEstimate, deleteEstimate } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleUseEstimate = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
+        estimate: estimate.id,
+      })
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorString ?? "Estimate points could not be used. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <div className="gap-2 p-4 border-b border-custom-border-200">
+        <div className="flex items-center justify-between">
+          <div>
+            <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
+              {estimate.name}
+              {currentProjectDetails?.estimate && currentProjectDetails?.estimate === estimate.id && (
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">In use</span>
+              )}
+            </h6>
+            <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
+              {estimate.description}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {currentProjectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
+              <Button variant="neutral-primary" onClick={handleUseEstimate}>
+                Use
+              </Button>
+            )}
+            <CustomMenu ellipsis>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  editEstimate(estimate);
+                }}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <Pencil className="h-3.5 w-3.5" />
+                  <span>Edit estimate</span>
+                </div>
+              </CustomMenu.MenuItem>
+              {currentProjectDetails?.estimate !== estimate.id && (
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    deleteEstimate(estimate.id);
+                  }}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-3.5 w-3.5" />
+                    <span>Delete estimate</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
+          </div>
+        </div>
+        {estimate?.points?.length > 0 ? (
+          <div className="flex text-xs text-custom-text-200">
+            Estimate points (
+            <span className="flex gap-1">
+              {orderArrayBy(estimate.points, "key").map((point, index) => (
+                <h6 key={point.id} className="text-custom-text-200">
+                  {point.value}
+                  {index !== estimate.points.length - 1 && ","}{" "}
+                </h6>
+              ))}
+            </span>
+            )
+          </div>
+        ) : (
+          <div>
+            <p className="text-xs text-custom-text-200">No estimate points</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/estimates/estimate-list.tsx b/web/components/estimates/estimate-list.tsx
new file mode 100644
index 00000000000..4895450987b
--- /dev/null
+++ b/web/components/estimates/estimate-list.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
+//hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// icons
+import { Plus } from "lucide-react";
+// images
+import emptyEstimate from "public/empty-state/estimate.svg";
+// types
+import { IEstimate } from "types";
+
+export const EstimatesList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // states
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
+  // hooks
+  const { setToastAlert } = useToast();
+  // derived values
+  const estimatesList = projectStore.projectEstimates;
+
+  const editEstimate = (estimate: IEstimate) => {
+    setEstimateFormOpen(true);
+    setEstimateToUpdate(estimate);
+  };
+
+  const disableEstimates = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be disabled. Please try again",
+      });
+    });
+  };
+
+  return (
+    <>
+      <CreateUpdateEstimateModal
+        isOpen={estimateFormOpen}
+        data={estimateToUpdate}
+        handleClose={() => {
+          setEstimateFormOpen(false);
+          setEstimateToUpdate(undefined);
+        }}
+      />
+
+      <DeleteEstimateModal
+        isOpen={!!estimateToDelete}
+        handleClose={() => setEstimateToDelete(null)}
+        data={projectStore.getProjectEstimateById(estimateToDelete!)}
+      />
+
+      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Estimates</h3>
+        <div className="col-span-12 space-y-5 sm:col-span-7">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              onClick={() => {
+                setEstimateFormOpen(true);
+                setEstimateToUpdate(undefined);
+              }}
+            >
+              Add Estimate
+            </Button>
+            {currentProjectDetails?.estimate && (
+              <Button variant="neutral-primary" onClick={disableEstimates}>
+                Disable Estimates
+              </Button>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {estimatesList ? (
+        estimatesList.length > 0 ? (
+          <section className="h-full bg-custom-background-100 overflow-y-auto">
+            {estimatesList.map((estimate) => (
+              <EstimateListItem
+                key={estimate.id}
+                estimate={estimate}
+                editEstimate={(estimate) => editEstimate(estimate)}
+                deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
+              />
+            ))}
+          </section>
+        ) : (
+          <div className="h-full w-full overflow-y-auto">
+            <EmptyState
+              title="No estimates yet"
+              description="Estimates help you communicate the complexity of an issue."
+              image={emptyEstimate}
+              primaryButton={{
+                icon: <Plus className="h-4 w-4" />,
+                text: "Add Estimate",
+                onClick: () => {
+                  setEstimateFormOpen(true);
+                  setEstimateToUpdate(undefined);
+                },
+              }}
+            />
+          </div>
+        )
+      ) : (
+        <Loader className="mt-5 space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/web/components/estimates/estimate-select.tsx b/web/components/estimates/estimate-select.tsx
new file mode 100644
index 00000000000..e02cfaf89a1
--- /dev/null
+++ b/web/components/estimates/estimate-select.tsx
@@ -0,0 +1,160 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+// types
+import { Tooltip } from "@plane/ui";
+import { Placement } from "@popperjs/core";
+// constants
+import { IEstimatePoint } from "types";
+
+type Props = {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  estimatePoints: IEstimatePoint[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const EstimateSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    estimatePoints,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options: { value: number | null; query: string; content: any }[] | undefined = estimatePoints?.map(
+    (estimate) => ({
+      value: estimate.key,
+      query: estimate.value,
+      content: (
+        <div className="flex items-center gap-2">
+          <Triangle className="h-3 w-3" strokeWidth={2} />
+          {estimate.value}
+        </div>
+      ),
+    })
+  );
+  options?.unshift({
+    value: null,
+    query: "none",
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        None
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = estimatePoints?.find((e) => e.key === value);
+  const label = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        <span className="truncate">{selectedEstimate?.value ?? "None"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={(val) => onChange(val as number | null)}
+      disabled={disabled}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/estimates/index.ts b/web/components/estimates/index.ts
new file mode 100644
index 00000000000..e9a22a53d8d
--- /dev/null
+++ b/web/components/estimates/index.ts
@@ -0,0 +1,4 @@
+export * from "./create-update-estimate-modal";
+export * from "./delete-estimate-modal";
+export * from "./estimate-select";
+export * from "./estimate-list-item";
diff --git a/apps/app/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
similarity index 76%
rename from apps/app/components/exporter/export-modal.tsx
rename to web/components/exporter/export-modal.tsx
index df4729265a9..825b64cd48d 100644
--- a/apps/app/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -1,39 +1,41 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import CSVIntegrationService from "services/integration/csv.services";
+import { ProjectExportService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, PrimaryButton, CustomSearchSelect } from "components/ui";
+import { Button, CustomSearchSelect } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IImporterService } from "types";
-// fetch-keys
-import useProjects from "hooks/use-projects";
+import { IUser, IImporterService } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   provider: string | string[];
   mutateServices: () => void;
 };
 
-export const Exporter: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  user,
-  provider,
-  mutateServices,
-}) => {
+const projectExportService = new ProjectExportService();
+
+export const Exporter: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, user, provider, mutateServices } = props;
+
   const [exportLoading, setExportLoading] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  const { projects } = useProjects();
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { setToastAlert } = useToast();
 
   const options = projects?.map((project) => ({
@@ -60,7 +62,8 @@ export const Exporter: React.FC<Props> = ({
         project: value,
         multiple: multiple,
       };
-      await CSVIntegrationService.exportCSVService(workspaceSlug as string, payload, user)
+      await projectExportService
+        .csvExport(workspaceSlug as string, payload, user)
         .then(() => {
           mutateServices();
           router.push(`/${workspaceSlug}/settings/exports`);
@@ -69,13 +72,7 @@ export const Exporter: React.FC<Props> = ({
             type: "success",
             title: "Export Successful",
             message: `You will be able to download the exported ${
-              provider === "csv"
-                ? "CSV"
-                : provider === "xlsx"
-                ? "Excel"
-                : provider === "json"
-                ? "JSON"
-                : ""
+              provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""
             } from the previous export.`,
           });
         })
@@ -122,13 +119,7 @@ export const Exporter: React.FC<Props> = ({
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">
                         Export to{" "}
-                        {provider === "csv"
-                          ? "CSV"
-                          : provider === "xlsx"
-                          ? "Excel"
-                          : provider === "json"
-                          ? "JSON"
-                          : ""}
+                        {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
                       </h3>
                     </span>
                   </div>
@@ -137,7 +128,7 @@ export const Exporter: React.FC<Props> = ({
                       value={value ?? []}
                       onChange={(val: string[]) => onChange(val)}
                       options={options}
-                      input={true}
+                      input
                       label={
                         value && value.length > 0
                           ? projects &&
@@ -155,24 +146,21 @@ export const Exporter: React.FC<Props> = ({
                     onClick={() => setMultiple(!multiple)}
                     className="flex items-center gap-2 max-w-min cursor-pointer"
                   >
-                    <input
-                      type="checkbox"
-                      checked={multiple}
-                      onChange={() => setMultiple(!multiple)}
-                    />
-                    <div className="text-sm whitespace-nowrap">
-                      Export the data into separate files
-                    </div>
+                    <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
+                    <div className="text-sm whitespace-nowrap">Export the data into separate files</div>
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
                       onClick={ExportCSVToMail}
                       disabled={exportLoading}
                       loading={exportLoading}
                     >
                       {exportLoading ? "Exporting..." : "Export"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
@@ -182,4 +170,4 @@ export const Exporter: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
new file mode 100644
index 00000000000..bb64e6170a1
--- /dev/null
+++ b/web/components/exporter/guide.tsx
@@ -0,0 +1,166 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// services
+import { IntegrationService } from "services/integrations";
+// components
+import { Exporter, SingleExport } from "components/exporter";
+// ui
+import { Button, Loader } from "@plane/ui";
+// icons
+import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
+// fetch-keys
+import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
+// constants
+import { EXPORTERS_LIST } from "constants/workspace";
+
+// services
+const integrationService = new IntegrationService();
+
+const IntegrationGuide = () => {
+  const [refreshing, setRefreshing] = useState(false);
+  const per_page = 10;
+  const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { user } = useUserAuth();
+
+  const { data: exporterServices } = useSWR(
+    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
+    workspaceSlug && cursor
+      ? () => integrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
+      : null
+  );
+
+  const handleCsvClose = () => {
+    router.replace(`/${workspaceSlug?.toString()}/settings/exports`);
+  };
+
+  return (
+    <>
+      <div className="h-full w-full">
+        <>
+          <div>
+            {EXPORTERS_LIST.map((service) => (
+              <div
+                key={service.provider}
+                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+              >
+                <div className="flex items-start justify-between gap-4 w-full">
+                  <div className="flex item-center 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`} />
+                    </div>
+                    <div>
+                      <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
+                      <p className="text-sm text-custom-text-200 tracking-tight">{service.description}</p>
+                    </div>
+                  </div>
+                  <div className="flex-shrink-0">
+                    <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
+                      <a>
+                        <Button variant="primary" className="capitalize">
+                          {service.type}
+                        </Button>
+                      </a>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div>
+            <div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-200">
+              <div className="flex gap-2 items-center">
+                <h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
+
+                <button
+                  type="button"
+                  className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
+                  onClick={() => {
+                    setRefreshing(true);
+                    mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)).then(() =>
+                      setRefreshing(false)
+                    );
+                  }}
+                >
+                  <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                  {refreshing ? "Refreshing..." : "Refresh status"}
+                </button>
+              </div>
+              <div className="flex gap-2 items-center text-xs">
+                <button
+                  disabled={!exporterServices?.prev_page_results}
+                  onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
+                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
+                    exporterServices?.prev_page_results
+                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                      : "cursor-not-allowed opacity-75"
+                  }`}
+                >
+                  <MoveLeft className="h-4 w-4" />
+                  <div className="pr-1">Prev</div>
+                </button>
+                <button
+                  disabled={!exporterServices?.next_page_results}
+                  onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
+                  className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
+                    exporterServices?.next_page_results
+                      ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
+                      : "cursor-not-allowed opacity-75"
+                  }`}
+                >
+                  <div className="pl-1">Next</div>
+                  <MoveRight className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+            <div className="flex flex-col">
+              {exporterServices && exporterServices?.results ? (
+                exporterServices?.results?.length > 0 ? (
+                  <div>
+                    <div className="divide-y divide-custom-border-200">
+                      {exporterServices?.results.map((service) => (
+                        <SingleExport key={service.id} service={service} refreshing={refreshing} />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-sm text-custom-text-200 px-4 py-6">No previous export available.</p>
+                )
+              ) : (
+                <Loader className="mt-6 grid grid-cols-1 gap-3">
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                  <Loader.Item height="40px" width="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        </>
+        {provider && (
+          <Exporter
+            isOpen
+            handleClose={() => handleCsvClose()}
+            data={null}
+            user={user}
+            provider={provider}
+            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default IntegrationGuide;
diff --git a/apps/app/components/exporter/index.tsx b/web/components/exporter/index.tsx
similarity index 100%
rename from apps/app/components/exporter/index.tsx
rename to web/components/exporter/index.tsx
diff --git a/apps/app/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
similarity index 77%
rename from apps/app/components/exporter/single-export.tsx
rename to web/components/exporter/single-export.tsx
index c8ef2dc1a07..d8e05ac26d5 100644
--- a/apps/app/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { useState, FC } from "react";
 // ui
-import { PrimaryButton } from "components/ui"; // icons
+import { Button } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -11,9 +11,10 @@ type Props = {
   refreshing: boolean;
 };
 
-export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
+export const SingleExport: FC<Props> = ({ service, refreshing }) => {
   const provider = service.provider;
-  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isLoading, setIsLoading] = useState(false);
 
   const checkExpiry = (inputDateString: string) => {
     const currentDate = new Date();
@@ -23,19 +24,13 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
   };
 
   return (
-    <div className="flex items-center justify-between gap-2 py-3">
+    <div className="flex items-center justify-between gap-2 px-4 py-3">
       <div>
         <h4 className="flex items-center gap-2 text-sm">
           <span>
             Export to{" "}
             <span className="font-medium">
-              {provider === "csv"
-                ? "CSV"
-                : provider === "xlsx"
-                ? "Excel"
-                : provider === "json"
-                ? "JSON"
-                : ""}
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
             </span>{" "}
           </span>
           <span
@@ -64,9 +59,9 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <PrimaryButton className="w-full text-center">
+                <Button variant="primary" className="w-full">
                   {isLoading ? "Downloading..." : "Download"}
-                </PrimaryButton>
+                </Button>
               </a>
             </div>
           )}
diff --git a/apps/app/components/gantt-chart/blocks/blocks-display.tsx b/web/components/gantt-chart/blocks/blocks-display.tsx
similarity index 89%
rename from apps/app/components/gantt-chart/blocks/blocks-display.tsx
rename to web/components/gantt-chart/blocks/blocks-display.tsx
index f0e7279be65..586b0d5ccef 100644
--- a/apps/app/components/gantt-chart/blocks/blocks-display.tsx
+++ b/web/components/gantt-chart/blocks/blocks-display.tsx
@@ -11,7 +11,7 @@ import { IBlockUpdateData, IGanttBlock } from "../types";
 export const GanttChartBlocks: FC<{
   itemsContainerWidth: number;
   blocks: IGanttBlock[] | null;
-  BlockRender: React.FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
@@ -19,7 +19,7 @@ export const GanttChartBlocks: FC<{
 }> = ({
   itemsContainerWidth,
   blocks,
-  BlockRender,
+  blockToRender,
   blockUpdateHandler,
   enableBlockLeftResize,
   enableBlockRightResize,
@@ -49,11 +49,9 @@ export const GanttChartBlocks: FC<{
     const updatedTargetDate = new Date(originalTargetDate);
 
     // update the start date on left resize
-    if (dragDirection === "left")
-      updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
+    if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
     // update the target date on right resize
-    else if (dragDirection === "right")
-      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+    else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
     // update both the dates on x-axis move
     else if (dragDirection === "move") {
       updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
@@ -86,7 +84,7 @@ export const GanttChartBlocks: FC<{
               >
                 <ChartDraggable
                   block={block}
-                  BlockRender={BlockRender}
+                  blockToRender={blockToRender}
                   handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
                   enableBlockLeftResize={enableBlockLeftResize}
                   enableBlockRightResize={enableBlockRightResize}
diff --git a/apps/app/components/gantt-chart/blocks/index.ts b/web/components/gantt-chart/blocks/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/blocks/index.ts
rename to web/components/gantt-chart/blocks/index.ts
diff --git a/apps/app/components/gantt-chart/chart/bi-week.tsx b/web/components/gantt-chart/chart/bi-week.tsx
similarity index 88%
rename from apps/app/components/gantt-chart/chart/bi-week.tsx
rename to web/components/gantt-chart/chart/bi-week.tsx
index 3637f88ea25..f70f34ec300 100644
--- a/apps/app/components/gantt-chart/chart/bi-week.tsx
+++ b/web/components/gantt-chart/chart/bi-week.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const BiWeekChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const BiWeekChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-80`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/apps/app/components/gantt-chart/chart/day.tsx b/web/components/gantt-chart/chart/day.tsx
similarity index 88%
rename from apps/app/components/gantt-chart/chart/day.tsx
rename to web/components/gantt-chart/chart/day.tsx
index cfc7cad2f77..f9edd895b7e 100644
--- a/apps/app/components/gantt-chart/chart/day.tsx
+++ b/web/components/gantt-chart/chart/day.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const DayChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const DayChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-gray-100`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/apps/app/components/gantt-chart/chart/hours.tsx b/web/components/gantt-chart/chart/hours.tsx
similarity index 88%
rename from apps/app/components/gantt-chart/chart/hours.tsx
rename to web/components/gantt-chart/chart/hours.tsx
index 32f73342da1..afd8b1ddfde 100644
--- a/apps/app/components/gantt-chart/chart/hours.tsx
+++ b/web/components/gantt-chart/chart/hours.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const HourChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const HourChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-gray-100`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
new file mode 100644
index 00000000000..b6011113932
--- /dev/null
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -0,0 +1,333 @@
+import { FC, useEffect, useState } from "react";
+// icons
+// components
+import { GanttChartBlocks } from "components/gantt-chart";
+import { GanttSidebar } from "../sidebar";
+// import { HourChartView } from "./hours";
+// import { DayChartView } from "./day";
+// import { WeekChartView } from "./week";
+// import { BiWeekChartView } from "./bi-week";
+import { MonthChartView } from "./month";
+// import { QuarterChartView } from "./quarter";
+// import { YearChartView } from "./year";
+// icons
+import { Expand, Shrink } from "lucide-react";
+// views
+import {
+  // generateHourChart,
+  // generateDayChart,
+  // generateWeekChart,
+  // generateBiWeekChart,
+  generateMonthChart,
+  // generateQuarterChart,
+  // generateYearChart,
+  getNumberOfDaysBetweenTwoDatesInMonth,
+  // getNumberOfDaysBetweenTwoDatesInQuarter,
+  // getNumberOfDaysBetweenTwoDatesInYear,
+  getMonthChartItemPositionWidthInMonth,
+} from "../views";
+// types
+import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
+// data
+import { currentViewDataWithView } from "../data";
+// context
+import { useChart } from "../hooks";
+
+type ChartViewRootProps = {
+  border: boolean;
+  title: string;
+  loaderTitle: string;
+  blocks: IGanttBlock[] | null;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
+  enableReorder: boolean;
+  bottomSpacing: boolean;
+};
+
+export const ChartViewRoot: FC<ChartViewRootProps> = ({
+  border,
+  title,
+  blocks = null,
+  loaderTitle,
+  blockUpdateHandler,
+  sidebarBlockToRender,
+  blockToRender,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
+  enableReorder,
+  bottomSpacing,
+}) => {
+  // states
+  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
+  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
+  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null); // blocks state management starts
+  // hooks
+  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = useChart();
+
+  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
+    blocks && blocks.length > 0
+      ? blocks.map((block: any) => ({
+          ...block,
+          position: getMonthChartItemPositionWidthInMonth(view, block),
+        }))
+      : [];
+
+  useEffect(() => {
+    if (currentViewData && blocks) setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
+  }, [currentViewData, blocks]);
+
+  // blocks state management ends
+
+  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
+
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
+    const selectedCurrentView: TGanttViews = view;
+    const selectedCurrentViewData: ChartDataType | undefined =
+      selectedCurrentView && selectedCurrentView === currentViewData?.key
+        ? currentViewData
+        : currentViewDataWithView(view);
+
+    if (selectedCurrentViewData === undefined) return;
+
+    let currentRender: any;
+
+    // if (view === "hours") currentRender = generateHourChart(selectedCurrentViewData, side);
+    // if (view === "day") currentRender = generateDayChart(selectedCurrentViewData, side);
+    // if (view === "week") currentRender = generateWeekChart(selectedCurrentViewData, side);
+    // if (view === "bi_week") currentRender = generateBiWeekChart(selectedCurrentViewData, side);
+    if (selectedCurrentView === "month") currentRender = generateMonthChart(selectedCurrentViewData, side);
+    // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
+    // if (selectedCurrentView === "year")
+    //   currentRender = generateYearChart(selectedCurrentViewData, side);
+
+    // updating the prevData, currentData and nextData
+    if (currentRender.payload.length > 0) {
+      if (side === "left") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: selectedCurrentView,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload, ...renderView],
+          },
+        });
+        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else if (side === "right") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...renderView, ...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(currentRender.scrollWidth);
+        setTimeout(() => {
+          handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
+        }, 50);
+      }
+    }
+  };
+
+  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
+
+  // handling the scroll positioning from left and right
+  useEffect(() => {
+    handleToday();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updatingCurrentLeftScrollPosition = (width: number) => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    if (!scrollContainer) return;
+
+    scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
+    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
+  };
+
+  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    if (!scrollContainer) return;
+
+    const clientVisibleWidth: number = scrollContainer?.clientWidth;
+    let scrollWidth: number = 0;
+    let daysDifference: number = 0;
+
+    // if (currentView === "hours")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "day")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "bi_week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    if (currentView === "month")
+      daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "quarter")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
+    // if (currentView === "year")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
+
+    scrollWidth = daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
+
+    scrollContainer.scrollLeft = scrollWidth;
+  };
+
+  // handling scroll functionality
+  const onScroll = () => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    if (!scrollContainer) return;
+
+    const scrollWidth: number = scrollContainer?.scrollWidth;
+    const clientVisibleWidth: number = scrollContainer?.clientWidth;
+    const currentScrollPosition: number = scrollContainer?.scrollLeft;
+
+    updateScrollLeft(currentScrollPosition);
+
+    const approxRangeLeft: number = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
+    const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
+
+    if (currentScrollPosition >= approxRangeRight) updateCurrentViewRenderPayload("right", currentView);
+    if (currentScrollPosition <= approxRangeLeft) updateCurrentViewRenderPayload("left", currentView);
+  };
+
+  return (
+    <div
+      className={`${
+        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100` : `relative`
+      } ${
+        border ? `border border-custom-border-200` : ``
+      } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
+    >
+      {/* chart header */}
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>
+              {/*{title}*/}
+
+              {title === "Issues" && <span> 任务</span>}
+            </div>
+            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
+              Gantt View Beta
+            </div> */}
+          </div>
+        )}
+
+        <div className="ml-auto">
+          {blocks === null ? (
+            <div className="text-sm font-medium ml-auto">正在加载...</div>
+          ) : (
+            <div className="text-sm font-medium ml-auto">
+              {blocks.length}
+              {/*{loaderTitle}*/}
+              {loaderTitle === "Issues" && <span> 任务</span>}
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          {allViews &&
+            allViews.length > 0 &&
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            allViews.map((_chatView: any, _idx: any) => (
+              <div
+                key={_chatView?.key}
+                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
+                  currentView === _chatView?.key ? `bg-custom-background-80` : `hover:bg-custom-background-90`
+                }`}
+                onClick={() => handleChartView(_chatView?.key)}
+              >
+                {/*{_chatView?.title}*/}
+
+                {_chatView?.title === "Month" && <span>月</span>}
+              </div>
+            ))}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <div
+            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
+            onClick={handleToday}
+          >
+            今日
+          </div>
+        </div>
+
+        <div
+          className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
+          onClick={() => setFullScreenMode((prevData) => !prevData)}
+        >
+          {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
+        </div>
+      </div>
+
+      {/* content */}
+      <div
+        id="gantt-container"
+        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
+          bottomSpacing ? "mb-8" : ""
+        }`}
+      >
+        <div id="gantt-sidebar" className="h-full w-1/4 flex flex-col border-r border-custom-border-200">
+          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0 flex items-end justify-between gap-2 text-sm text-custom-text-300 font-medium pb-2 pl-10 pr-4">
+            <h6>{title}</h6>
+            <h6>Duration</h6>
+          </div>
+          <GanttSidebar
+            title={title}
+            blockUpdateHandler={blockUpdateHandler}
+            blocks={chartBlocks}
+            sidebarBlockToRender={sidebarBlockToRender}
+            enableReorder={enableReorder}
+          />
+        </div>
+        <div
+          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
+          id="scroll-container"
+          onScroll={onScroll}
+        >
+          {/* {currentView && currentView === "hours" && <HourChartView />} */}
+          {/* {currentView && currentView === "day" && <DayChartView />} */}
+          {/* {currentView && currentView === "week" && <WeekChartView />} */}
+          {/* {currentView && currentView === "bi_week" && <BiWeekChartView />} */}
+          {currentView && currentView === "month" && <MonthChartView />}
+          {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
+          {/* {currentView && currentView === "year" && <YearChartView />} */}
+
+          {/* blocks */}
+          {currentView && currentViewData && (
+            <GanttChartBlocks
+              itemsContainerWidth={itemsContainerWidth}
+              blocks={chartBlocks}
+              blockToRender={blockToRender}
+              blockUpdateHandler={blockUpdateHandler}
+              enableBlockLeftResize={enableBlockLeftResize}
+              enableBlockRightResize={enableBlockRightResize}
+              enableBlockMove={enableBlockMove}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/gantt-chart/chart/month.tsx b/web/components/gantt-chart/chart/month.tsx
similarity index 100%
rename from apps/app/components/gantt-chart/chart/month.tsx
rename to web/components/gantt-chart/chart/month.tsx
diff --git a/apps/app/components/gantt-chart/chart/quarter.tsx b/web/components/gantt-chart/chart/quarter.tsx
similarity index 91%
rename from apps/app/components/gantt-chart/chart/quarter.tsx
rename to web/components/gantt-chart/chart/quarter.tsx
index abe56c83e1d..63d22983195 100644
--- a/apps/app/components/gantt-chart/chart/quarter.tsx
+++ b/web/components/gantt-chart/chart/quarter.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const QuarterChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -35,9 +36,7 @@ export const QuarterChartView: FC<any> = () => {
                         <div>{_item.title}</div>
                       </div>
                       <div className={`relative h-full w-full flex-1 flex justify-center`}>
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/apps/app/components/gantt-chart/chart/week.tsx b/web/components/gantt-chart/chart/week.tsx
similarity index 88%
rename from apps/app/components/gantt-chart/chart/week.tsx
rename to web/components/gantt-chart/chart/week.tsx
index 91466a3ac66..e231b74602c 100644
--- a/apps/app/components/gantt-chart/chart/week.tsx
+++ b/web/components/gantt-chart/chart/week.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const WeekChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const WeekChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-80`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/apps/app/components/gantt-chart/chart/year.tsx b/web/components/gantt-chart/chart/year.tsx
similarity index 91%
rename from apps/app/components/gantt-chart/chart/year.tsx
rename to web/components/gantt-chart/chart/year.tsx
index a3f72b9dc7c..a8b3b57a5fc 100644
--- a/apps/app/components/gantt-chart/chart/year.tsx
+++ b/web/components/gantt-chart/chart/year.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const YearChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -35,9 +36,7 @@ export const YearChartView: FC<any> = () => {
                         <div>{_item.title}</div>
                       </div>
                       <div className={`relative h-full w-full flex-1 flex justify-center`}>
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/contexts/index.tsx b/web/components/gantt-chart/contexts/index.tsx
new file mode 100644
index 00000000000..137cc2607c2
--- /dev/null
+++ b/web/components/gantt-chart/contexts/index.tsx
@@ -0,0 +1,54 @@
+import React, { createContext, useState } from "react";
+// types
+import { ChartContextData, ChartContextActionPayload, ChartContextReducer } from "../types";
+// data
+import { allViewsWithData, currentViewDataWithView } from "../data";
+
+export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);
+
+const chartReducer = (state: ChartContextData, action: ChartContextActionPayload): ChartContextData => {
+  switch (action.type) {
+    case "CURRENT_VIEW":
+      return { ...state, currentView: action.payload };
+    case "CURRENT_VIEW_DATA":
+      return { ...state, currentViewData: action.payload };
+    case "RENDER_VIEW":
+      return { ...state, currentViewData: action.payload };
+    case "PARTIAL_UPDATE":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+
+const initialView = "month";
+
+export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useState<ChartContextData>({
+    currentView: initialView,
+    currentViewData: currentViewDataWithView(initialView),
+    renderView: [],
+    allViews: allViewsWithData,
+    activeBlock: null,
+  });
+
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
+    const newState = chartReducer(state, action);
+
+    dispatch(() => newState);
+
+    return newState;
+  };
+
+  const updateScrollLeft = (scrollLeft: number) => {
+    setScrollLeft(scrollLeft);
+  };
+
+  return (
+    <ChartContext.Provider value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}>
+      {children}
+    </ChartContext.Provider>
+  );
+};
diff --git a/web/components/gantt-chart/cycle-sidebar.tsx b/web/components/gantt-chart/cycle-sidebar.tsx
new file mode 100644
index 00000000000..5ecc1f3ba0d
--- /dev/null
+++ b/web/components/gantt-chart/cycle-sidebar.tsx
@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/apps/app/components/gantt-chart/data/index.ts b/web/components/gantt-chart/data/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/data/index.ts
rename to web/components/gantt-chart/data/index.ts
diff --git a/web/components/gantt-chart/helpers/block-structure.tsx b/web/components/gantt-chart/helpers/block-structure.tsx
new file mode 100644
index 00000000000..ea51c3b1282
--- /dev/null
+++ b/web/components/gantt-chart/helpers/block-structure.tsx
@@ -0,0 +1,16 @@
+// types
+import { IIssue } from "types";
+import { IGanttBlock } from "components/gantt-chart";
+
+export const renderIssueBlocksStructure = (blocks: IIssue[]): IGanttBlock[] =>
+  blocks && blocks.length > 0
+    ? blocks
+        .filter((b) => new Date(b?.start_date ?? "") <= new Date(b?.target_date ?? ""))
+        .map((block) => ({
+          data: block,
+          id: block.id,
+          sort_order: block.sort_order,
+          start_date: new Date(block.start_date ?? ""),
+          target_date: new Date(block.target_date ?? ""),
+        }))
+    : [];
diff --git a/apps/app/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
similarity index 88%
rename from apps/app/components/gantt-chart/helpers/draggable.tsx
rename to web/components/gantt-chart/helpers/draggable.tsx
index 20423ff5905..33483a84792 100644
--- a/apps/app/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 // icons
-import { Icon } from "components/ui";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 // hooks
 import { useChart } from "../hooks";
 // types
@@ -9,7 +9,7 @@ import { IGanttBlock } from "../types";
 
 type Props = {
   block: IGanttBlock;
-  BlockRender: React.FC<any>;
+  blockToRender: (data: any) => React.ReactNode;
   handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
@@ -18,7 +18,7 @@ type Props = {
 
 export const ChartDraggable: React.FC<Props> = ({
   block,
-  BlockRender,
+  blockToRender,
   handleBlock,
   enableBlockLeftResize,
   enableBlockRightResize,
@@ -48,10 +48,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (
-      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
-      SCROLL_THRESHOLD
-    ) {
+    if (posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= SCROLL_THRESHOLD) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -73,15 +70,16 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the left end
-  const handleBlockLeftResize = () => {
+  const handleBlockLeftResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
     let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
@@ -114,9 +112,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "left");
     };
@@ -126,15 +122,16 @@ export const ChartDraggable: React.FC<Props> = ({
   };
 
   // handle block resize from the right end
-  const handleBlockRightResize = () => {
+  const handleBlockRightResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!currentViewData || !resizableRef.current || !block.position) return;
 
+    if (e.button !== 0) return;
+
     const resizableDiv = resizableRef.current;
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
@@ -158,9 +155,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "right");
     };
@@ -173,10 +168,7 @@ export const ChartDraggable: React.FC<Props> = ({
   const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
 
-    e.preventDefault();
-    e.stopPropagation();
-
-    setIsMoving(true);
+    if (e.button !== 0) return;
 
     const resizableDiv = resizableRef.current;
 
@@ -187,6 +179,8 @@ export const ChartDraggable: React.FC<Props> = ({
     let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
 
     const handleMouseMove = (e: MouseEvent) => {
+      setIsMoving(true);
+
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -251,7 +245,7 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_back" />
+          <ArrowLeft className="h-3.5 w-3.5" />
         </div>
       )}
       {/* move to right side hidden block button */}
@@ -260,13 +254,13 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_forward" />
+          <ArrowRight className="h-3.5 w-3.5" />
         </div>
       )}
       <div
         id={`block-${block.id}`}
         ref={resizableRef}
-        className="relative group cursor-pointer font-medium rounded shadow-sm h-full inline-flex items-center transition-all"
+        className="relative group cursor-pointer font-medium h-full inline-flex items-center transition-all"
         style={{
           marginLeft: `${block.position?.marginLeft}px`,
           width: `${block.position?.width}px`,
@@ -289,10 +283,10 @@ export const ChartDraggable: React.FC<Props> = ({
           </>
         )}
         <div
-          className="relative z-[2] rounded h-8 w-full flex items-center"
+          className={`relative z-[2] rounded h-8 w-full flex items-center ${isMoving ? "pointer-events-none" : ""}`}
           onMouseDown={handleBlockMove}
         >
-          <BlockRender data={block.data} />
+          {blockToRender(block.data)}
         </div>
         {/* right resize drag handle */}
         {enableBlockRightResize && (
diff --git a/apps/app/components/gantt-chart/helpers/index.ts b/web/components/gantt-chart/helpers/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/helpers/index.ts
rename to web/components/gantt-chart/helpers/index.ts
diff --git a/apps/app/components/gantt-chart/hooks/index.tsx b/web/components/gantt-chart/hooks/index.tsx
similarity index 100%
rename from apps/app/components/gantt-chart/hooks/index.tsx
rename to web/components/gantt-chart/hooks/index.tsx
diff --git a/apps/app/components/gantt-chart/index.ts b/web/components/gantt-chart/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/index.ts
rename to web/components/gantt-chart/index.ts
diff --git a/web/components/gantt-chart/module-sidebar.tsx b/web/components/gantt-chart/module-sidebar.tsx
new file mode 100644
index 00000000000..5ecc1f3ba0d
--- /dev/null
+++ b/web/components/gantt-chart/module-sidebar.tsx
@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
new file mode 100644
index 00000000000..7c1f243d6ff
--- /dev/null
+++ b/web/components/gantt-chart/root.tsx
@@ -0,0 +1,54 @@
+import { FC } from "react";
+// components
+import { ChartViewRoot } from "./chart";
+// context
+import { ChartContextProvider } from "./contexts";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type GanttChartRootProps = {
+  border?: boolean;
+  title: string;
+  loaderTitle: string;
+  blocks: IGanttBlock[] | null;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
+  enableBlockLeftResize?: boolean;
+  enableBlockRightResize?: boolean;
+  enableBlockMove?: boolean;
+  enableReorder?: boolean;
+  bottomSpacing?: boolean;
+};
+
+export const GanttChartRoot: FC<GanttChartRootProps> = ({
+  border = true,
+  title,
+  blocks,
+  loaderTitle = "blocks",
+  blockUpdateHandler,
+  sidebarBlockToRender,
+  blockToRender,
+  enableBlockLeftResize = true,
+  enableBlockRightResize = true,
+  enableBlockMove = true,
+  enableReorder = true,
+  bottomSpacing = false,
+}) => (
+  <ChartContextProvider>
+    <ChartViewRoot
+      border={border}
+      title={title}
+      blocks={blocks}
+      loaderTitle={loaderTitle}
+      blockUpdateHandler={blockUpdateHandler}
+      sidebarBlockToRender={sidebarBlockToRender}
+      blockToRender={blockToRender}
+      enableBlockLeftResize={enableBlockLeftResize}
+      enableBlockRightResize={enableBlockRightResize}
+      enableBlockMove={enableBlockMove}
+      enableReorder={enableReorder}
+      bottomSpacing={bottomSpacing}
+    />
+  </ChartContextProvider>
+);
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
new file mode 100644
index 00000000000..f6c32e0998e
--- /dev/null
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -0,0 +1,160 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { GanttInlineCreateIssueForm } from "components/issues";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
+  enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder, enableQuickIssueCreate } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+            <GanttInlineCreateIssueForm />
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/apps/app/components/gantt-chart/types/index.ts b/web/components/gantt-chart/types/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/types/index.ts
rename to web/components/gantt-chart/types/index.ts
diff --git a/apps/app/components/gantt-chart/views/bi-week-view.ts b/web/components/gantt-chart/views/bi-week-view.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/bi-week-view.ts
rename to web/components/gantt-chart/views/bi-week-view.ts
diff --git a/apps/app/components/gantt-chart/views/day-view.ts b/web/components/gantt-chart/views/day-view.ts
similarity index 93%
rename from apps/app/components/gantt-chart/views/day-view.ts
rename to web/components/gantt-chart/views/day-view.ts
index 4feca894456..b3f4d8f8ab4 100644
--- a/apps/app/components/gantt-chart/views/day-view.ts
+++ b/web/components/gantt-chart/views/day-view.ts
@@ -72,7 +72,12 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       dayData: weeks[date.getDay()],
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
-      today: currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === (_day + 1) ? true : false,
+      today:
+        currentDate.getFullYear() === year &&
+        currentDate.getMonth() === month &&
+        currentDate.getDate() === _day + 1
+          ? true
+          : false,
     });
   });
 
@@ -180,7 +185,10 @@ export const generateMonthDataByYear = (
       renderPayload.push(generateMonthDataByMonth(currentMonth, currentYear));
     }
 
-  const scrollWidth = ((renderPayload.map((monthData: any) => monthData.children.length)).reduce((partialSum: number, a: number) => partialSum + a, 0)) * monthPayload.data.width;
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * monthPayload.data.width;
 
   return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
-};
\ No newline at end of file
+};
diff --git a/apps/app/components/gantt-chart/views/helpers.ts b/web/components/gantt-chart/views/helpers.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/helpers.ts
rename to web/components/gantt-chart/views/helpers.ts
diff --git a/apps/app/components/gantt-chart/views/hours-view.ts b/web/components/gantt-chart/views/hours-view.ts
similarity index 93%
rename from apps/app/components/gantt-chart/views/hours-view.ts
rename to web/components/gantt-chart/views/hours-view.ts
index 4feca894456..b3f4d8f8ab4 100644
--- a/apps/app/components/gantt-chart/views/hours-view.ts
+++ b/web/components/gantt-chart/views/hours-view.ts
@@ -72,7 +72,12 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       dayData: weeks[date.getDay()],
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
-      today: currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === (_day + 1) ? true : false,
+      today:
+        currentDate.getFullYear() === year &&
+        currentDate.getMonth() === month &&
+        currentDate.getDate() === _day + 1
+          ? true
+          : false,
     });
   });
 
@@ -180,7 +185,10 @@ export const generateMonthDataByYear = (
       renderPayload.push(generateMonthDataByMonth(currentMonth, currentYear));
     }
 
-  const scrollWidth = ((renderPayload.map((monthData: any) => monthData.children.length)).reduce((partialSum: number, a: number) => partialSum + a, 0)) * monthPayload.data.width;
+  const scrollWidth =
+    renderPayload
+      .map((monthData: any) => monthData.children.length)
+      .reduce((partialSum: number, a: number) => partialSum + a, 0) * monthPayload.data.width;
 
   return { state: renderState, payload: renderPayload, scrollWidth: scrollWidth };
-};
\ No newline at end of file
+};
diff --git a/apps/app/components/gantt-chart/views/index.ts b/web/components/gantt-chart/views/index.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/index.ts
rename to web/components/gantt-chart/views/index.ts
diff --git a/apps/app/components/gantt-chart/views/month-view.ts b/web/components/gantt-chart/views/month-view.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/month-view.ts
rename to web/components/gantt-chart/views/month-view.ts
diff --git a/apps/app/components/gantt-chart/views/quater-view.ts b/web/components/gantt-chart/views/quater-view.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/quater-view.ts
rename to web/components/gantt-chart/views/quater-view.ts
diff --git a/apps/app/components/gantt-chart/views/week-view.ts b/web/components/gantt-chart/views/week-view.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/week-view.ts
rename to web/components/gantt-chart/views/week-view.ts
diff --git a/apps/app/components/gantt-chart/views/year-view.ts b/web/components/gantt-chart/views/year-view.ts
similarity index 100%
rename from apps/app/components/gantt-chart/views/year-view.ts
rename to web/components/gantt-chart/views/year-view.ts
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
new file mode 100644
index 00000000000..4106f443b2e
--- /dev/null
+++ b/web/components/headers/cycle-issues.tsx
@@ -0,0 +1,220 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+// icons
+import { ArrowRight, Plus } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const CycleIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycle: cycleStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+    project: projectStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
+
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+
+      const newValues = cycleIssueFilterStore.cycleFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (cycleIssueFilterStore.cycleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [cycleId, cycleIssueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const cyclesList = projectId ? cycleStore.cycles[projectId.toString()] : undefined;
+  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
+              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="component"
+              component={
+                <CustomMenu
+                  placement="bottom-start"
+                  label={
+                    <>
+                      <ContrastIcon className="h-3 w-3" />
+                      {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                    </>
+                  }
+                  className="ml-1.5 flex-shrink-0"
+                  width="auto"
+                >
+                  {cyclesList?.map((cycle) => (
+                    <CustomMenu.MenuItem
+                      key={cycle.id}
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
+                    >
+                      {truncateText(cycle.name, 40)}
+                    </CustomMenu.MenuItem>
+                  ))}
+                </CustomMenu>
+              }
+            />
+          </Breadcrumbs>
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={cycleIssueFilterStore.cycleFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <DisplayFiltersSelection
+              displayFilters={issueFilterStore.userDisplayFilters}
+              displayProperties={issueFilterStore.userDisplayProperties}
+              handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+              handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+            />
+          </FiltersDropdown>
+          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+            Analytics
+          </Button>
+          <Button
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
+            Add Issue
+          </Button>
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            onClick={toggleSidebar}
+          >
+            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
new file mode 100644
index 00000000000..636a4434793
--- /dev/null
+++ b/web/components/headers/cycles.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { Plus } from "lucide-react";
+// ui
+import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface ICyclesHeader {}
+
+export const CyclesHeader: FC<ICyclesHeader> = (props) => {
+  const {} = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant="primary"
+          prependIcon={<Plus />}
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "q" });
+            document.dispatchEvent(e);
+          }}
+        >
+          Add Cycle
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
new file mode 100644
index 00000000000..7c41ba327d2
--- /dev/null
+++ b/web/components/headers/global-issues.tsx
@@ -0,0 +1,172 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// ui
+import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
+// icons
+import { List, PlusIcon, Sheet } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+const GLOBAL_VIEW_LAYOUTS = [
+  { key: "list", title: "List", link: "/workspace-views", icon: List },
+  { key: "spreadsheet", title: "Spreadsheet", link: "/workspace-views/all-issues", icon: Sheet },
+];
+
+type Props = {
+  activeLayout: "list" | "spreadsheet";
+};
+
+const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
+
+export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
+  const { activeLayout } = props;
+
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+    workspace: workspaceStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !globalViewId) return;
+
+      const newValues = storedFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [globalViewId, globalViewFiltersStore, storedFilters, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_properties: property,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  useSWR(
+    workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
+    workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                activeLayout === "spreadsheet" ? (
+                  <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                ) : (
+                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                )
+              }
+              label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
+            />
+          </Breadcrumbs>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+            {GLOBAL_VIEW_LAYOUTS.map((layout) => (
+              <Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
+                <a>
+                  <Tooltip tooltipContent={layout.title}>
+                    <div
+                      className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                        activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                      }`}
+                    >
+                      <layout.icon
+                        size={14}
+                        strokeWidth={2}
+                        className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+                      />
+                    </div>
+                  </Tooltip>
+                </a>
+              </Link>
+            ))}
+          </div>
+          {activeLayout === "spreadsheet" && (
+            <>
+              {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
+                <FiltersDropdown title="Filters" placement="bottom-end">
+                  <FilterSelection
+                    filters={storedFilters ?? {}}
+                    handleFiltersUpdate={handleFiltersUpdate}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
+
+              <FiltersDropdown title="Display" placement="bottom-end">
+                <DisplayFiltersSelection
+                  displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+                  displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+                  handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+                  handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                />
+              </FiltersDropdown>
+            </>
+          )}
+          <Button variant="primary" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
+            New View
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts
new file mode 100644
index 00000000000..1a52dd4de4d
--- /dev/null
+++ b/web/components/headers/index.ts
@@ -0,0 +1,21 @@
+export * from "./cycle-issues";
+export * from "./global-issues";
+export * from "./module-issues";
+export * from "./project-inbox";
+export * from "./project-issues";
+export * from "./project-view-issues";
+export * from "./project-views";
+export * from "./workspace-analytics";
+export * from "./workspace-dashboard";
+export * from "./projects";
+export * from "./profile-preferences";
+export * from "./cycles";
+export * from "./modules-list";
+export * from "./project-settings";
+export * from "./workspace-settings";
+export * from "./pages";
+export * from "./project-draft-issues";
+export * from "./project-archived-issue-details";
+export * from "./project-archived-issues";
+export * from "./project-issue-details";
+export * from "./user-profile";
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
new file mode 100644
index 00000000000..42c01d5319b
--- /dev/null
+++ b/web/components/headers/module-issues.tsx
@@ -0,0 +1,218 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
+// icons
+import { ArrowRight, ContrastIcon, Plus } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ModuleIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    module: moduleStore,
+    moduleFilter: moduleFilterStore,
+    project: projectStore,
+  } = useMobxStore();
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+  const { currentProjectDetails } = projectStore;
+
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId || !moduleId) return;
+
+      const newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (moduleFilterStore.moduleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [moduleId, moduleFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
+  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+      />
+      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex items-center gap-2">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
+              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="component"
+              component={
+                <CustomMenu
+                  label={
+                    <>
+                      <ContrastIcon className="h-3 w-3" />
+                      {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+                    </>
+                  }
+                  className="ml-1.5 flex-shrink-0"
+                  width="auto"
+                >
+                  {modulesList?.map((module) => (
+                    <CustomMenu.MenuItem
+                      key={module.id}
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
+                    >
+                      {truncateText(module.name, 40)}
+                    </CustomMenu.MenuItem>
+                  ))}
+                </CustomMenu>
+              }
+            />
+          </Breadcrumbs>
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={moduleFilterStore.moduleFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <DisplayFiltersSelection
+              displayFilters={issueFilterStore.userDisplayFilters}
+              displayProperties={issueFilterStore.userDisplayProperties}
+              handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+              handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+            />
+          </FiltersDropdown>
+          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+            Analytics
+          </Button>
+          <Button
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
+            Add Issue
+          </Button>
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            onClick={toggleSidebar}
+          >
+            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
new file mode 100644
index 00000000000..4eb2430fd1d
--- /dev/null
+++ b/web/components/headers/modules-list.tsx
@@ -0,0 +1,90 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// ui
+import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// constants
+import { MODULE_VIEW_LAYOUTS } from "constants/module";
+
+export const ModulesListHeader: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
+
+  return (
+    <div
+      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+          {MODULE_VIEW_LAYOUTS.map((layout) => (
+            <Tooltip key={layout.key} tooltipContent={layout.title}>
+              <button
+                type="button"
+                className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                  modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                }`}
+                onClick={() => setModulesView(layout.key)}
+              >
+                <layout.icon
+                  strokeWidth={2}
+                  className={`h-3.5 w-3.5 ${
+                    modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                  }`}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+        <Button
+          variant="primary"
+          prependIcon={<Plus />}
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "m" });
+            document.dispatchEvent(e);
+          }}
+        >
+          Add Module
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
new file mode 100644
index 00000000000..8b9fa433d80
--- /dev/null
+++ b/web/components/headers/page-details.tsx
@@ -0,0 +1,92 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { FileText, Plus } from "lucide-react";
+// services
+import { PageService } from "services/page.service";
+
+// constants
+import { PAGE_DETAILS } from "constants/fetch-keys";
+
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+import useSWR from "swr";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+const pageService = new PageService();
+
+export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
+  const { showButton = false } = props;
+  const router = useRouter();
+  const { workspaceSlug, pageId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const { data: pageDetails } = useSWR(
+    workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null,
+    workspaceSlug && currentProjectDetails?.id
+      ? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string)
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label={pageDetails?.name ?? "Page"}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      {showButton && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "d" });
+              document.dispatchEvent(e);
+            }}
+          >
+            Create Page
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
new file mode 100644
index 00000000000..634dd0c385f
--- /dev/null
+++ b/web/components/headers/pages.tsx
@@ -0,0 +1,70 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { FileText, Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IPagesHeaderProps {
+  showButton?: boolean;
+}
+
+export const PagesHeader: FC<IPagesHeaderProps> = observer((props) => {
+  const { showButton = false } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      {showButton && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "d" });
+              document.dispatchEvent(e);
+            }}
+          >
+            Create Page
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
new file mode 100644
index 00000000000..cde226fd7f5
--- /dev/null
+++ b/web/components/headers/profile-preferences.tsx
@@ -0,0 +1,16 @@
+// components
+import { Breadcrumbs } from "@plane/ui";
+
+export const ProfilePreferencesHeader = () => (
+  <div
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+  >
+    <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+      <div>
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
+        </Breadcrumbs>
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
new file mode 100644
index 00000000000..be8b5cebe54
--- /dev/null
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -0,0 +1,78 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// services
+import { IssueArchiveService } from "services/issue";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+const issueArchiveService = new IssueArchiveService();
+
+export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  const { data: issueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () =>
+          issueArchiveService.retrieveArchivedIssue(
+            workspaceSlug as string,
+            projectId as string,
+            archivedIssueId as string
+          )
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
new file mode 100644
index 00000000000..e68f4ce8411
--- /dev/null
+++ b/web/components/headers/project-archived-issues.tsx
@@ -0,0 +1,138 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+// helper
+import { truncateText } from "helpers/string.helper";
+// ui
+import { Breadcrumbs, BreadcrumbItem, LayersIcon } from "@plane/ui";
+// icons
+import { ArrowLeft } from "lucide-react";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+// types
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "types";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectArchivedIssuesHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { project: projectStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  // for archived issues list layout is the only option
+  const activeLayout = "list";
+
+  const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string | string[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+
+    if (Array.isArray(value)) {
+      value.forEach((val) => {
+        if (!newValues.includes(val)) newValues.push(val);
+      });
+    } else {
+      if (archivedIssueFiltersStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+      else newValues.push(value);
+    }
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        ...archivedIssueFiltersStore.userDisplayFilters,
+        ...updatedDisplayFilter,
+      },
+    });
+  };
+
+  const handleDisplayPropertiesUpdate = (property: Partial<IIssueDisplayProperties>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    archivedIssueFiltersStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+  };
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div className="block md:hidden">
+          <button
+            type="button"
+            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+            onClick={() => router.back()}
+          >
+            <ArrowLeft fontSize={14} strokeWidth={2} />
+          </button>
+        </div>
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+
+      {/* filter options */}
+      <div className="flex items-center gap-2">
+        <FiltersDropdown title="Filters" placement="bottom-end">
+          <FilterSelection
+            filters={archivedIssueFiltersStore.userFilters}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="Display" placement="bottom-end">
+          <DisplayFiltersSelection
+            displayFilters={archivedIssueFiltersStore.userDisplayFilters}
+            displayProperties={archivedIssueFiltersStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
new file mode 100644
index 00000000000..0ab1603be7b
--- /dev/null
+++ b/web/components/headers/project-draft-issues.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectDraftIssueHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Draft Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
new file mode 100644
index 00000000000..5098c69b9f3
--- /dev/null
+++ b/web/components/headers/project-inbox.tsx
@@ -0,0 +1,62 @@
+import { FC, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+// components
+import { CreateInboxIssueModal } from "components/inbox";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectInboxHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Inbox Issues"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
+        <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => setCreateIssueModal(true)}>
+          Add Issue
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
new file mode 100644
index 00000000000..9fce635757b
--- /dev/null
+++ b/web/components/headers/project-issue-details.tsx
@@ -0,0 +1,72 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// ui
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// services
+import { IssueService } from "services/issue";
+// constants
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+const issueService = new IssueService();
+
+export const ProjectIssueDetailsHeader: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  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)
+      : null
+  );
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/issues`}
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
new file mode 100644
index 00000000000..f9bf6ec5897
--- /dev/null
+++ b/web/components/headers/project-issues.tsx
@@ -0,0 +1,217 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore();
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const newValues = issueFilterStore.userFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: newValues,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+  const { currentProjectDetails } = projectStore;
+
+  const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
+
+  const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={currentProjectDetails ?? undefined}
+      />
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+          <div className="block md:hidden">
+            <button
+              type="button"
+              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              onClick={() => router.back()}
+            >
+              <ArrowLeft fontSize={14} strokeWidth={2} />
+            </button>
+          </div>
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
+                }
+                label={currentProjectDetails?.name ?? "Project"}
+                link={`/${workspaceSlug}/projects`}
+              />
+
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Issues"
+              />
+            </Breadcrumbs>
+          </div>
+          {currentProjectDetails?.is_deployed && deployUrl && (
+            <a
+              href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
+              className="group bg-custom-primary-100/10 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+              Public
+              <ExternalLink className="h-3 w-3 hidden group-hover:block" strokeWidth={2} />
+            </a>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <LayoutSelection
+            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+            onChange={(layout) => handleLayoutChange(layout)}
+            selectedLayout={activeLayout}
+          />
+          <FiltersDropdown title="Filters" placement="bottom-end">
+            <FilterSelection
+              filters={issueFilterStore.userFilters}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            />
+          </FiltersDropdown>
+          <FiltersDropdown title="Display" placement="bottom-end">
+            <DisplayFiltersSelection
+              displayFilters={issueFilterStore.userDisplayFilters}
+              displayProperties={issueFilterStore.userDisplayProperties}
+              handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+              handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+            />
+          </FiltersDropdown>
+          {projectId && inboxStore.isInboxEnabled && inboxDetails && (
+            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
+              <a>
+                <Button variant="neutral-primary" size="sm" className="relative">
+                  Inbox
+                  {inboxDetails.pending_issue_count > 0 && (
+                    <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
+                      {inboxDetails.pending_issue_count}
+                    </span>
+                  )}
+                </Button>
+              </a>
+            </Link>
+          )}
+          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+            Analytics
+          </Button>
+          <Button
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
+            Add Issue
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
new file mode 100644
index 00000000000..6c20c32df00
--- /dev/null
+++ b/web/components/headers/project-settings.tsx
@@ -0,0 +1,53 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+export interface IProjectSettingHeader {
+  title: string;
+}
+
+export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
+              }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
new file mode 100644
index 00000000000..50d97505c95
--- /dev/null
+++ b/web/components/headers/project-view-issues.tsx
@@ -0,0 +1,183 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+// ui
+import { Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProjectViewIssuesHeader: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViewFilters: projectViewFiltersStore,
+    project: projectStore,
+    projectViews: projectViewsStore,
+  } = useMobxStore();
+
+  const { currentProjectDetails } = projectStore;
+
+  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !viewId) return;
+
+      const newValues = storedFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [projectViewFiltersStore, storedFilters, viewId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
+  const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
+
+  return (
+    <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex items-center gap-2">
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            label={currentProjectDetails?.name ?? "Project"}
+            icon={
+              currentProjectDetails?.emoji ? (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                  {renderEmoji(currentProjectDetails.emoji)}
+                </span>
+              ) : currentProjectDetails?.icon_prop ? (
+                <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                  {renderEmoji(currentProjectDetails.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {currentProjectDetails?.name.charAt(0)}
+                </span>
+              )
+            }
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+            label="Views"
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="component"
+            component={
+              <CustomMenu
+                label={
+                  <>
+                    <PhotoFilterIcon height={12} width={12} />
+                    {viewDetails?.name && truncateText(viewDetails.name, 40)}
+                  </>
+                }
+                className="ml-1.5"
+                placement="bottom-start"
+              >
+                {viewsList?.map((view) => (
+                  <CustomMenu.MenuItem
+                    key={view.id}
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
+                  >
+                    {truncateText(view.name, 40)}
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu>
+            }
+          />
+        </Breadcrumbs>
+      </div>
+      <div className="flex items-center gap-2">
+        <LayoutSelection
+          layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+        <FiltersDropdown title="Filters" placement="bottom-end">
+          <FilterSelection
+            filters={storedFilters ?? {}}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="Display" placement="bottom-end">
+          <DisplayFiltersSelection
+            displayFilters={issueFilterStore.userDisplayFilters}
+            displayProperties={issueFilterStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
new file mode 100644
index 00000000000..550863d0d48
--- /dev/null
+++ b/web/components/headers/project-views.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateProjectViewModal } from "components/views";
+// components
+import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+export const ProjectViewsHeader: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateProjectViewModal
+          isOpen={createViewModal}
+          onClose={() => setCreateViewModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
+                }
+                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Views"
+              />
+            </Breadcrumbs>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <div>
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
+              onClick={() => setCreateViewModal(true)}
+            >
+              Create View
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
new file mode 100644
index 00000000000..3c56f239ea3
--- /dev/null
+++ b/web/components/headers/projects.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from "next/router";
+import { Search, Plus, Briefcase } from "lucide-react";
+// ui
+import { Breadcrumbs, Button } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+export const ProjectsHeader = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
+
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+              label="Projects"
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        {projectsList?.length > 0 && (
+          <div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+            <Search className="h-3.5 w-3.5" />
+            <input
+              className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+              value={projectStore.searchQuery}
+              onChange={(e) => projectStore.setSearchQuery(e.target.value)}
+              placeholder="Search"
+            />
+          </div>
+        )}
+
+        <Button
+          prependIcon={<Plus />}
+          size="md"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "p" });
+            document.dispatchEvent(e);
+          }}
+        >
+          Add Project
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
new file mode 100644
index 00000000000..70a3f40f5ec
--- /dev/null
+++ b/web/components/headers/user-profile.tsx
@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+import { UserCircle2 } from "lucide-react";
+// hooks
+import { observer } from "mobx-react-lite";
+
+export interface IUserProfileHeader {
+  title: string;
+}
+
+export const UserProfileHeader: FC<IUserProfileHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label="Profile"
+              icon={<UserCircle2 className="h-4 w-4 text-custom-text-300" />}
+              link={`/${workspaceSlug}/me/profile`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
new file mode 100644
index 00000000000..ea1cde066a1
--- /dev/null
+++ b/web/components/headers/workspace-analytics.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from "next/router";
+import { ArrowLeft, BarChart2 } from "lucide-react";
+// ui
+import { Breadcrumbs } from "@plane/ui";
+
+export const WorkspaceAnalyticsHeader = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+          <div className="block md:hidden">
+            <button
+              type="button"
+              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              onClick={() => router.back()}
+            >
+              <ArrowLeft fontSize={14} strokeWidth={2} />
+            </button>
+          </div>
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
+                label="Analytics"
+              />
+            </Breadcrumbs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
new file mode 100644
index 00000000000..73d9dacabd5
--- /dev/null
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { LayoutGrid, Zap } from "lucide-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+// components
+import { ProductUpdatesModal } from "components/common";
+
+export const WorkspaceDashboardHeader = () => {
+  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
+  // theme
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 pl-3">
+          <LayoutGrid size={14} strokeWidth={2} />
+          Dashboard
+        </div>
+        <div className="flex items-center gap-3 px-3">
+          <a
+            href="https://plane.so/changelog"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+          >
+            <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
+            {"What's New?"}
+          </a>
+          <a
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+            href="https://github.com/makeplane/plane"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src={resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage}
+              height={16}
+              width={16}
+              alt="GitHub Logo"
+            />
+            Star us on GitHub
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
new file mode 100644
index 00000000000..5dc1565529d
--- /dev/null
+++ b/web/components/headers/workspace-settings.tsx
@@ -0,0 +1,41 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// ui
+import { Breadcrumbs } from "@plane/ui";
+import { Settings } from "lucide-react";
+
+// hooks
+import { observer } from "mobx-react-lite";
+
+export interface IWorkspaceSettingHeader {
+  title: string;
+}
+
+export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
+  const { title } = props;
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              label="Settings"
+              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+              link={`/${workspaceSlug}/settings`}
+            />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/app/components/icons/alarm-clock-icon.tsx b/web/components/icons/alarm-clock-icon.tsx
similarity index 96%
rename from apps/app/components/icons/alarm-clock-icon.tsx
rename to web/components/icons/alarm-clock-icon.tsx
index 83180496a34..2f0044fcd99 100644
--- a/apps/app/components/icons/alarm-clock-icon.tsx
+++ b/web/components/icons/alarm-clock-icon.tsx
@@ -3,6 +3,7 @@ import type { Props } from "./types";
 export const AlarmClockIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color = "rgb(var(--color-text-200))",
   className,
 }) => (
diff --git a/apps/app/components/icons/archive-icon.tsx b/web/components/icons/archive-icon.tsx
similarity index 100%
rename from apps/app/components/icons/archive-icon.tsx
rename to web/components/icons/archive-icon.tsx
diff --git a/apps/app/components/icons/arrow-right.tsx b/web/components/icons/arrow-right.tsx
similarity index 100%
rename from apps/app/components/icons/arrow-right.tsx
rename to web/components/icons/arrow-right.tsx
diff --git a/apps/app/components/icons/assignment-clipboard-icon.tsx b/web/components/icons/assignment-clipboard-icon.tsx
similarity index 100%
rename from apps/app/components/icons/assignment-clipboard-icon.tsx
rename to web/components/icons/assignment-clipboard-icon.tsx
diff --git a/apps/app/components/icons/attachment-icon.tsx b/web/components/icons/attachment-icon.tsx
similarity index 100%
rename from apps/app/components/icons/attachment-icon.tsx
rename to web/components/icons/attachment-icon.tsx
diff --git a/apps/app/components/icons/audio-file-icon.tsx b/web/components/icons/audio-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/audio-file-icon.tsx
rename to web/components/icons/audio-file-icon.tsx
index 6aff5d7a487..24ea55a23c9 100644
--- a/apps/app/components/icons/audio-file-icon.tsx
+++ b/web/components/icons/audio-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import AudioFileIcon from "public/attachment/audio-icon.png";
 
-export const AudioIcon: React.FC<Props> = ({ width, height  }) => (
+export const AudioIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
 );
diff --git a/apps/app/components/icons/bell-icon.tsx b/web/components/icons/bell-icon.tsx
similarity index 100%
rename from apps/app/components/icons/bell-icon.tsx
rename to web/components/icons/bell-icon.tsx
diff --git a/web/components/icons/blocked-icon.tsx b/web/components/icons/blocked-icon.tsx
new file mode 100644
index 00000000000..b712f7698d2
--- /dev/null
+++ b/web/components/icons/blocked-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BlockedIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 23 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+      fill="#F76659"
+    />
+    <path
+      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+      fill="#F76659"
+    />
+  </svg>
+);
diff --git a/web/components/icons/blocker-icon.tsx b/web/components/icons/blocker-icon.tsx
new file mode 100644
index 00000000000..b92fadaeac4
--- /dev/null
+++ b/web/components/icons/blocker-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BlockerIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 23 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+      fill="#F7AE59"
+    />
+    <path
+      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/web/components/icons/bolt-icon.tsx b/web/components/icons/bolt-icon.tsx
new file mode 100644
index 00000000000..477d4e04e5e
--- /dev/null
+++ b/web/components/icons/bolt-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const BoltIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10.6002 21C10.4169 21 10.2752 20.9417 10.1752 20.825C10.0752 20.7083 10.0419 20.5583 10.0752 20.375L11.0002 13.95H7.3502C7.16686 13.95 7.03353 13.8667 6.9502 13.7C6.86686 13.5333 6.86686 13.375 6.9502 13.225L12.8752 3.325C12.9252 3.24167 13.0085 3.16667 13.1252 3.1C13.2419 3.03333 13.3585 3 13.4752 3C13.6585 3 13.8002 3.05833 13.9002 3.175C14.0002 3.29167 14.0335 3.44167 14.0002 3.625L13.0752 10.025H16.6752C16.8585 10.025 16.996 10.1083 17.0877 10.275C17.1794 10.4417 17.1835 10.6 17.1002 10.75L11.2002 20.675C11.1502 20.7583 11.0669 20.8333 10.9502 20.9C10.8335 20.9667 10.7169 21 10.6002 21V21Z" />
+  </svg>
+);
diff --git a/apps/app/components/icons/calendar-after-icon.tsx b/web/components/icons/calendar-after-icon.tsx
similarity index 100%
rename from apps/app/components/icons/calendar-after-icon.tsx
rename to web/components/icons/calendar-after-icon.tsx
diff --git a/apps/app/components/icons/calendar-before-icon.tsx b/web/components/icons/calendar-before-icon.tsx
similarity index 100%
rename from apps/app/components/icons/calendar-before-icon.tsx
rename to web/components/icons/calendar-before-icon.tsx
diff --git a/apps/app/components/icons/calendar-month-icon.tsx b/web/components/icons/calendar-month-icon.tsx
similarity index 100%
rename from apps/app/components/icons/calendar-month-icon.tsx
rename to web/components/icons/calendar-month-icon.tsx
diff --git a/web/components/icons/cancel-icon.tsx b/web/components/icons/cancel-icon.tsx
new file mode 100644
index 00000000000..a57425de187
--- /dev/null
+++ b/web/components/icons/cancel-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CancelIcon: React.FC<Props> = ({ width, height, className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M7.725 16.275C7.875 16.425 8.05 16.5 8.25 16.5C8.45 16.5 8.625 16.425 8.775 16.275L12 13.05L15.25 16.3C15.3833 16.4333 15.5542 16.4958 15.7625 16.4875C15.9708 16.4792 16.1417 16.4083 16.275 16.275C16.425 16.125 16.5 15.95 16.5 15.75C16.5 15.55 16.425 15.375 16.275 15.225L13.05 12L16.3 8.75C16.4333 8.61667 16.4958 8.44583 16.4875 8.2375C16.4792 8.02917 16.4083 7.85833 16.275 7.725C16.125 7.575 15.95 7.5 15.75 7.5C15.55 7.5 15.375 7.575 15.225 7.725L12 10.95L8.75 7.7C8.61667 7.56667 8.44583 7.50417 8.2375 7.5125C8.02917 7.52083 7.85833 7.59167 7.725 7.725C7.575 7.875 7.5 8.05 7.5 8.25C7.5 8.45 7.575 8.625 7.725 8.775L10.95 12L7.7 15.25C7.56667 15.3833 7.50417 15.5542 7.5125 15.7625C7.52083 15.9708 7.59167 16.1417 7.725 16.275ZM12 22C10.5833 22 9.26667 21.7458 8.05 21.2375C6.83333 20.7292 5.775 20.025 4.875 19.125C3.975 18.225 3.27083 17.1667 2.7625 15.95C2.25417 14.7333 2 13.4167 2 12C2 10.6 2.25417 9.29167 2.7625 8.075C3.27083 6.85833 3.975 5.8 4.875 4.9C5.775 4 6.83333 3.29167 8.05 2.775C9.26667 2.25833 10.5833 2 12 2C13.4 2 14.7083 2.25833 15.925 2.775C17.1417 3.29167 18.2 4 19.1 4.9C20 5.8 20.7083 6.85833 21.225 8.075C21.7417 9.29167 22 10.6 22 12C22 13.4167 21.7417 14.7333 21.225 15.95C20.7083 17.1667 20 18.225 19.1 19.125C18.2 20.025 17.1417 20.7292 15.925 21.2375C14.7083 21.7458 13.4 22 12 22ZM12 20.5C14.3333 20.5 16.3333 19.6667 18 18C19.6667 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6667 7.66667 18 6C16.3333 4.33333 14.3333 3.5 12 3.5C9.66667 3.5 7.66667 4.33333 6 6C4.33333 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.33333 16.3333 6 18C7.66667 19.6667 9.66667 20.5 12 20.5Z" />
+  </svg>
+);
diff --git a/apps/app/components/icons/check.tsx b/web/components/icons/check.tsx
similarity index 100%
rename from apps/app/components/icons/check.tsx
rename to web/components/icons/check.tsx
diff --git a/web/components/icons/clipboard-icon.tsx b/web/components/icons/clipboard-icon.tsx
new file mode 100644
index 00000000000..a3feaf7afc3
--- /dev/null
+++ b/web/components/icons/clipboard-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ClipboardIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.5 21C4.08333 21 3.72917 20.8542 3.4375 20.5625C3.14583 20.2708 3 19.9167 3 19.5V4.5C3 4.08333 3.14583 3.72917 3.4375 3.4375C3.72917 3.14583 4.08333 3 4.5 3H9.625C9.70833 2.41667 9.975 1.9375 10.425 1.5625C10.875 1.1875 11.4 1 12 1C12.6 1 13.125 1.1875 13.575 1.5625C14.025 1.9375 14.2917 2.41667 14.375 3H19.5C19.9167 3 20.2708 3.14583 20.5625 3.4375C20.8542 3.72917 21 4.08333 21 4.5V19.5C21 19.9167 20.8542 20.2708 20.5625 20.5625C20.2708 20.8542 19.9167 21 19.5 21H4.5ZM4.5 19.5H19.5V4.5H4.5V19.5ZM7 17H13.825V15.5H7V17ZM7 12.75H17V11.25H7V12.75ZM7 8.5H17V7H7V8.5ZM12 4.075C12.2333 4.075 12.4375 3.9875 12.6125 3.8125C12.7875 3.6375 12.875 3.43333 12.875 3.2C12.875 2.96667 12.7875 2.7625 12.6125 2.5875C12.4375 2.4125 12.2333 2.325 12 2.325C11.7667 2.325 11.5625 2.4125 11.3875 2.5875C11.2125 2.7625 11.125 2.96667 11.125 3.2C11.125 3.43333 11.2125 3.6375 11.3875 3.8125C11.5625 3.9875 11.7667 4.075 12 4.075ZM4.5 19.5V4.5V19.5Z"
+      fill="black"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/clock-icon.tsx b/web/components/icons/clock-icon.tsx
similarity index 100%
rename from apps/app/components/icons/clock-icon.tsx
rename to web/components/icons/clock-icon.tsx
diff --git a/apps/app/components/icons/cloud-upload.tsx b/web/components/icons/cloud-upload.tsx
similarity index 100%
rename from apps/app/components/icons/cloud-upload.tsx
rename to web/components/icons/cloud-upload.tsx
diff --git a/apps/app/components/icons/cmd-icon.tsx b/web/components/icons/cmd-icon.tsx
similarity index 100%
rename from apps/app/components/icons/cmd-icon.tsx
rename to web/components/icons/cmd-icon.tsx
diff --git a/apps/app/components/icons/cog.tsx b/web/components/icons/cog.tsx
similarity index 100%
rename from apps/app/components/icons/cog.tsx
rename to web/components/icons/cog.tsx
diff --git a/apps/app/components/icons/color-pallette-icon.tsx b/web/components/icons/color-pallette-icon.tsx
similarity index 100%
rename from apps/app/components/icons/color-pallette-icon.tsx
rename to web/components/icons/color-pallette-icon.tsx
diff --git a/apps/app/components/icons/color-picker-icon.tsx b/web/components/icons/color-picker-icon.tsx
similarity index 100%
rename from apps/app/components/icons/color-picker-icon.tsx
rename to web/components/icons/color-picker-icon.tsx
diff --git a/apps/app/components/icons/command-icon.tsx b/web/components/icons/command-icon.tsx
similarity index 95%
rename from apps/app/components/icons/command-icon.tsx
rename to web/components/icons/command-icon.tsx
index d6465b789d1..af2b027b133 100644
--- a/apps/app/components/icons/command-icon.tsx
+++ b/web/components/icons/command-icon.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import { FC } from "react";
 
 import type { Props } from "./types";
 
-export const CommandIcon: React.FC<Props> = ({
+export const CommandIcon: FC<Props> = ({
   width = "81",
   height = "80",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color = "rgb(var(--color-text-200))",
   className,
 }) => (
diff --git a/web/components/icons/comment-icon.tsx b/web/components/icons/comment-icon.tsx
new file mode 100644
index 00000000000..8619abd3403
--- /dev/null
+++ b/web/components/icons/comment-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CommentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2 16.1V3.05C2 2.81667 2.10833 2.58333 2.325 2.35C2.54167 2.11667 2.76667 2 3 2H15.975C16.225 2 16.4583 2.1125 16.675 2.3375C16.8917 2.5625 17 2.8 17 3.05V11.95C17 12.1833 16.8917 12.4167 16.675 12.65C16.4583 12.8833 16.225 13 15.975 13H6L2.65 16.35C2.53333 16.4667 2.39583 16.4958 2.2375 16.4375C2.07917 16.3792 2 16.2667 2 16.1ZM3.5 3.5V11.5V3.5ZM7.025 18C6.79167 18 6.5625 17.8833 6.3375 17.65C6.1125 17.4167 6 17.1833 6 16.95V14.5H18.5V6H21C21.2333 6 21.4583 6.11667 21.675 6.35C21.8917 6.58333 22 6.825 22 7.075V21.075C22 21.2417 21.9208 21.3542 21.7625 21.4125C21.6042 21.4708 21.4667 21.4417 21.35 21.325L18.025 18H7.025ZM15.5 3.5H3.5V11.5H15.5V3.5Z" />
+  </svg>
+);
diff --git a/web/components/icons/completed-cycle-icon.tsx b/web/components/icons/completed-cycle-icon.tsx
new file mode 100644
index 00000000000..77d30b24ba2
--- /dev/null
+++ b/web/components/icons/completed-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CompletedCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+    <path
+      d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/contrast-icon.tsx b/web/components/icons/contrast-icon.tsx
similarity index 100%
rename from apps/app/components/icons/contrast-icon.tsx
rename to web/components/icons/contrast-icon.tsx
diff --git a/apps/app/components/icons/css-file-icon.tsx b/web/components/icons/css-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/css-file-icon.tsx
rename to web/components/icons/css-file-icon.tsx
index 54b563d373c..a753ead73e9 100644
--- a/apps/app/components/icons/css-file-icon.tsx
+++ b/web/components/icons/css-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import CssFileIcon from "public/attachment/css-icon.png";
 
-export const CssIcon: React.FC<Props> = ({ width, height  }) => (
+export const CssIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={CssFileIcon} height={height} width={width} alt="CssFileIcon" />
 );
diff --git a/apps/app/components/icons/csv-file-icon.tsx b/web/components/icons/csv-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/csv-file-icon.tsx
rename to web/components/icons/csv-file-icon.tsx
index 63f01205e80..d25aca262ee 100644
--- a/apps/app/components/icons/csv-file-icon.tsx
+++ b/web/components/icons/csv-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import CSVFileIcon from "public/attachment/csv-icon.png";
 
-export const CsvIcon: React.FC<Props> = ({ width , height }) => (
+export const CsvIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={CSVFileIcon} height={height} width={width} alt="CSVFileIcon" />
 );
diff --git a/web/components/icons/current-cycle-icon.tsx b/web/components/icons/current-cycle-icon.tsx
new file mode 100644
index 00000000000..57b37678060
--- /dev/null
+++ b/web/components/icons/current-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CurrentCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+    <path
+      d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/cycle-icon.tsx b/web/components/icons/cycle-icon.tsx
similarity index 100%
rename from apps/app/components/icons/cycle-icon.tsx
rename to web/components/icons/cycle-icon.tsx
diff --git a/apps/app/components/icons/default-file-icon.tsx b/web/components/icons/default-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/default-file-icon.tsx
rename to web/components/icons/default-file-icon.tsx
index 5323d8e07bb..3bc1948e3e8 100644
--- a/apps/app/components/icons/default-file-icon.tsx
+++ b/web/components/icons/default-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import DefaultFileIcon from "public/attachment/default-icon.png";
 
-export const DefaultIcon: React.FC<Props> = ({ width, height  }) => (
+export const DefaultIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
 );
diff --git a/apps/app/components/icons/discord-icon.tsx b/web/components/icons/discord-icon.tsx
similarity index 100%
rename from apps/app/components/icons/discord-icon.tsx
rename to web/components/icons/discord-icon.tsx
diff --git a/apps/app/components/icons/doc-file-icon.tsx b/web/components/icons/doc-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/doc-file-icon.tsx
rename to web/components/icons/doc-file-icon.tsx
index 173d40df167..a4367ef7c94 100644
--- a/apps/app/components/icons/doc-file-icon.tsx
+++ b/web/components/icons/doc-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import DocFileIcon from "public/attachment/doc-icon.png";
 
-export const DocIcon: React.FC<Props> = ({ width , height }) => (
+export const DocIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={DocFileIcon} height={height} width={width} alt="DocFileIcon" />
 );
diff --git a/apps/app/components/icons/document-icon.tsx b/web/components/icons/document-icon.tsx
similarity index 82%
rename from apps/app/components/icons/document-icon.tsx
rename to web/components/icons/document-icon.tsx
index a9c599578e7..b84dd4c3916 100644
--- a/apps/app/components/icons/document-icon.tsx
+++ b/web/components/icons/document-icon.tsx
@@ -2,17 +2,23 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+export const DocumentIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       fill={color}
-      d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z" />
-    </svg>
-  );
+      d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z"
+    />
+  </svg>
+);
diff --git a/web/components/icons/edit-icon.tsx b/web/components/icons/edit-icon.tsx
new file mode 100644
index 00000000000..6b1ea278580
--- /dev/null
+++ b/web/components/icons/edit-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const EditIcon: React.FC<Props> = ({ width, height, className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
+      fill="#212529"
+    />
+  </svg>
+);
diff --git a/web/components/icons/ellipsis-horizontal-icon.tsx b/web/components/icons/ellipsis-horizontal-icon.tsx
new file mode 100644
index 00000000000..26979f9a566
--- /dev/null
+++ b/web/components/icons/ellipsis-horizontal-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const EllipsisHorizontalIcon: React.FC<Props> = ({ width, height, className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.2 13.1998C4.86667 13.1998 4.58333 13.0831 4.35 12.8498C4.11667 12.6165 4 12.3331 4 11.9998C4 11.6665 4.11667 11.3831 4.35 11.1498C4.58333 10.9165 4.86667 10.7998 5.2 10.7998C5.53333 10.7998 5.81667 10.9165 6.05 11.1498C6.28333 11.3831 6.4 11.6665 6.4 11.9998C6.4 12.3331 6.28333 12.6165 6.05 12.8498C5.81667 13.0831 5.53333 13.1998 5.2 13.1998ZM12 13.1998C11.6667 13.1998 11.3833 13.0831 11.15 12.8498C10.9167 12.6165 10.8 12.3331 10.8 11.9998C10.8 11.6665 10.9167 11.3831 11.15 11.1498C11.3833 10.9165 11.6667 10.7998 12 10.7998C12.3333 10.7998 12.6167 10.9165 12.85 11.1498C13.0833 11.3831 13.2 11.6665 13.2 11.9998C13.2 12.3331 13.0833 12.6165 12.85 12.8498C12.6167 13.0831 12.3333 13.1998 12 13.1998ZM18.8 13.1998C18.4667 13.1998 18.1833 13.0831 17.95 12.8498C17.7167 12.6165 17.6 12.3331 17.6 11.9998C17.6 11.6665 17.7167 11.3831 17.95 11.1498C18.1833 10.9165 18.4667 10.7998 18.8 10.7998C19.1333 10.7998 19.4167 10.9165 19.65 11.1498C19.8833 11.3831 20 11.6665 20 11.9998C20 12.3331 19.8833 12.6165 19.65 12.8498C19.4167 13.0831 19.1333 13.1998 18.8 13.1998Z"
+      fill="black"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/exclamation-icon.tsx b/web/components/icons/exclamation-icon.tsx
similarity index 100%
rename from apps/app/components/icons/exclamation-icon.tsx
rename to web/components/icons/exclamation-icon.tsx
diff --git a/apps/app/components/icons/external-link-icon.tsx b/web/components/icons/external-link-icon.tsx
similarity index 100%
rename from apps/app/components/icons/external-link-icon.tsx
rename to web/components/icons/external-link-icon.tsx
diff --git a/apps/app/components/icons/figma-file-icon.tsx b/web/components/icons/figma-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/figma-file-icon.tsx
rename to web/components/icons/figma-file-icon.tsx
index 7ff9f6ac071..fc7b74f7336 100644
--- a/apps/app/components/icons/figma-file-icon.tsx
+++ b/web/components/icons/figma-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import FigmaFileIcon from "public/attachment/figma-icon.png";
 
-export const FigmaIcon: React.FC<Props> = ({ width , height }) => (
+export const FigmaIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={FigmaFileIcon} height={height} width={width} alt="FigmaFileIcon" />
 );
diff --git a/apps/app/components/icons/github-icon.tsx b/web/components/icons/github-icon.tsx
similarity index 100%
rename from apps/app/components/icons/github-icon.tsx
rename to web/components/icons/github-icon.tsx
diff --git a/apps/app/components/icons/grid-view-icons.tsx b/web/components/icons/grid-view-icons.tsx
similarity index 100%
rename from apps/app/components/icons/grid-view-icons.tsx
rename to web/components/icons/grid-view-icons.tsx
diff --git a/apps/app/components/icons/heartbeat-icon.tsx b/web/components/icons/heartbeat-icon.tsx
similarity index 100%
rename from apps/app/components/icons/heartbeat-icon.tsx
rename to web/components/icons/heartbeat-icon.tsx
diff --git a/apps/app/components/icons/html-file-icon.tsx b/web/components/icons/html-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/html-file-icon.tsx
rename to web/components/icons/html-file-icon.tsx
index 9de4080b088..4eddb323b3c 100644
--- a/apps/app/components/icons/html-file-icon.tsx
+++ b/web/components/icons/html-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import HtmlFileIcon from "public/attachment/html-icon.png";
 
-export const HtmlIcon: React.FC<Props> = ({ width, height  }) => (
+export const HtmlIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={HtmlFileIcon} height={height} width={width} alt="HtmlFileIcon" />
 );
diff --git a/apps/app/components/icons/img-file-icon.tsx b/web/components/icons/img-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/img-file-icon.tsx
rename to web/components/icons/img-file-icon.tsx
index 1333957c133..0c58fa101b0 100644
--- a/apps/app/components/icons/img-file-icon.tsx
+++ b/web/components/icons/img-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import ImgFileIcon from "public/attachment/img-icon.png";
 
-export const ImgIcon: React.FC<Props> = ({ width , height }) => (
+export const ImgIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={ImgFileIcon} height={height} width={width} alt="ImgFileIcon" />
 );
diff --git a/apps/app/components/icons/import-layers.tsx b/web/components/icons/import-layers.tsx
similarity index 100%
rename from apps/app/components/icons/import-layers.tsx
rename to web/components/icons/import-layers.tsx
diff --git a/apps/app/components/icons/inbox-icon.tsx b/web/components/icons/inbox-icon.tsx
similarity index 100%
rename from apps/app/components/icons/inbox-icon.tsx
rename to web/components/icons/inbox-icon.tsx
diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts
new file mode 100644
index 00000000000..bf3e94332cb
--- /dev/null
+++ b/web/components/icons/index.ts
@@ -0,0 +1,87 @@
+export * from "./module";
+export * from "./state";
+export * from "./alarm-clock-icon";
+export * from "./attachment-icon";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./bolt-icon";
+export * from "./calendar-before-icon";
+export * from "./calendar-after-icon";
+export * from "./calendar-month-icon";
+export * from "./cancel-icon";
+export * from "./clipboard-icon";
+export * from "./color-pallette-icon";
+export * from "./comment-icon";
+export * from "./completed-cycle-icon";
+export * from "./current-cycle-icon";
+export * from "./cycle-icon";
+export * from "./discord-icon";
+export * from "./document-icon";
+export * from "./edit-icon";
+export * from "./ellipsis-horizontal-icon";
+export * from "./external-link-icon";
+export * from "./github-icon";
+export * from "./heartbeat-icon";
+export * from "./layer-diagonal-icon";
+export * from "./lock-icon";
+export * from "./menu-icon";
+export * from "./pencil-scribble-icon";
+export * from "./plus-icon";
+export * from "./person-running-icon";
+export * from "./priority-icon";
+export * from "./question-mark-circle-icon";
+export * from "./setting-icon";
+export * from "./signal-cellular-icon";
+export * from "./stacked-layers-icon";
+export * from "./tag-icon";
+export * from "./tune-icon";
+export * from "./upcoming-cycle-icon";
+export * from "./user-group-icon";
+export * from "./user-icon-circle";
+export * from "./user-icon";
+export * from "./grid-view-icons";
+export * from "./assignment-clipboard-icon";
+export * from "./tick-mark-icon";
+export * from "./target-icon";
+export * from "./contrast-icon";
+export * from "./people-group-icon";
+export * from "./cmd-icon";
+export * from "./view-list-icon";
+export * from "./exclamation-icon";
+export * from "./arrow-right";
+export * from "./cog";
+export * from "./cloud-upload";
+export * from "./users";
+export * from "./import-layers";
+export * from "./check";
+export * from "./water-drop-icon";
+export * from "./transfer-icon";
+export * from "./pdf-file-icon";
+export * from "./csv-file-icon";
+export * from "./sheet-file-icon";
+export * from "./doc-file-icon";
+export * from "./html-file-icon";
+export * from "./css-file-icon";
+export * from "./js-file-icon";
+export * from "./figma-file-icon";
+export * from "./img-file-icon";
+export * from "./png-file-icon";
+export * from "./jpg-file-icon";
+export * from "./svg-file-icon";
+export * from "./txt-file-icon";
+export * from "./triangle-exclamation-icon";
+export * from "./default-file-icon";
+export * from "./video-file-icon";
+export * from "./audio-file-icon";
+export * from "./command-icon";
+export * from "./color-picker-icon";
+export * from "./inbox-icon";
+export * from "./stacked-layers-horizontal-icon";
+export * from "./sort-icon";
+export * from "./x-mark-icon";
+export * from "./archive-icon";
+export * from "./clock-icon";
+export * from "./bell-icon";
+export * from "./single-comment-icon";
+export * from "./related-icon";
+export * from "./module-icon";
\ No newline at end of file
diff --git a/apps/app/components/icons/jpg-file-icon.tsx b/web/components/icons/jpg-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/jpg-file-icon.tsx
rename to web/components/icons/jpg-file-icon.tsx
index e88f0e47f8b..26d3af37300 100644
--- a/apps/app/components/icons/jpg-file-icon.tsx
+++ b/web/components/icons/jpg-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import JpgFileIcon from "public/attachment/jpg-icon.png";
 
-export const JpgIcon: React.FC<Props> = ({ width, height  }) => (
+export const JpgIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={JpgFileIcon} height={height} width={width} alt="JpgFileIcon" />
 );
diff --git a/apps/app/components/icons/js-file-icon.tsx b/web/components/icons/js-file-icon.tsx
similarity index 97%
rename from apps/app/components/icons/js-file-icon.tsx
rename to web/components/icons/js-file-icon.tsx
index 9f879ba6b34..67cfa05d455 100644
--- a/apps/app/components/icons/js-file-icon.tsx
+++ b/web/components/icons/js-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import JsFileIcon from "public/attachment/js-icon.png";
 
-export const JavaScriptIcon: React.FC<Props> = ({ width, height  }) => (
+export const JavaScriptIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" />
 );
diff --git a/apps/app/components/icons/layer-diagonal-icon.tsx b/web/components/icons/layer-diagonal-icon.tsx
similarity index 100%
rename from apps/app/components/icons/layer-diagonal-icon.tsx
rename to web/components/icons/layer-diagonal-icon.tsx
diff --git a/web/components/icons/lock-icon.tsx b/web/components/icons/lock-icon.tsx
new file mode 100644
index 00000000000..2892011df4f
--- /dev/null
+++ b/web/components/icons/lock-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const LockIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 25 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M6 22C5.58333 22 5.22917 21.8542 4.9375 21.5625C4.64583 21.2708 4.5 20.9167 4.5 20.5V9.65C4.5 9.23333 4.64583 8.87917 4.9375 8.5875C5.22917 8.29583 5.58333 8.15 6 8.15H7.75V5.75C7.75 4.43333 8.2125 3.3125 9.1375 2.3875C10.0625 1.4625 11.1833 1 12.5 1C13.8167 1 14.9375 1.4625 15.8625 2.3875C16.7875 3.3125 17.25 4.43333 17.25 5.75V8.15H19C19.4167 8.15 19.7708 8.29583 20.0625 8.5875C20.3542 8.87917 20.5 9.23333 20.5 9.65V20.5C20.5 20.9167 20.3542 21.2708 20.0625 21.5625C19.7708 21.8542 19.4167 22 19 22H6ZM6 20.5H19V9.65H6V20.5ZM12.5 17C13.0333 17 13.4875 16.8167 13.8625 16.45C14.2375 16.0833 14.425 15.6417 14.425 15.125C14.425 14.625 14.2375 14.1708 13.8625 13.7625C13.4875 13.3542 13.0333 13.15 12.5 13.15C11.9667 13.15 11.5125 13.3542 11.1375 13.7625C10.7625 14.1708 10.575 14.625 10.575 15.125C10.575 15.6417 10.7625 16.0833 11.1375 16.45C11.5125 16.8167 11.9667 17 12.5 17ZM9.25 8.15H15.75V5.75C15.75 4.85 15.4333 4.08333 14.8 3.45C14.1667 2.81667 13.4 2.5 12.5 2.5C11.6 2.5 10.8333 2.81667 10.2 3.45C9.56667 4.08333 9.25 4.85 9.25 5.75V8.15ZM6 20.5V9.65V20.5Z" />
+  </svg>
+);
diff --git a/web/components/icons/menu-icon.tsx b/web/components/icons/menu-icon.tsx
new file mode 100644
index 00000000000..3b5e033d880
--- /dev/null
+++ b/web/components/icons/menu-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const MenuIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.75 18C3.53333 18 3.35417 17.9292 3.2125 17.7875C3.07083 17.6458 3 17.4667 3 17.25C3 17.0333 3.07083 16.8542 3.2125 16.7125C3.35417 16.5708 3.53333 16.5 3.75 16.5H20.25C20.4667 16.5 20.6458 16.5708 20.7875 16.7125C20.9292 16.8542 21 17.0333 21 17.25C21 17.4667 20.9292 17.6458 20.7875 17.7875C20.6458 17.9292 20.4667 18 20.25 18H3.75ZM3.75 12.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H3.75ZM3.75 7.5C3.53333 7.5 3.35417 7.42917 3.2125 7.2875C3.07083 7.14583 3 6.96667 3 6.75C3 6.53333 3.07083 6.35417 3.2125 6.2125C3.35417 6.07083 3.53333 6 3.75 6H20.25C20.4667 6 20.6458 6.07083 20.7875 6.2125C20.9292 6.35417 21 6.53333 21 6.75C21 6.96667 20.9292 7.14583 20.7875 7.2875C20.6458 7.42917 20.4667 7.5 20.25 7.5H3.75Z"
+      fill="#212529"
+    />
+  </svg>
+);
diff --git a/web/components/icons/module-icon.tsx b/web/components/icons/module-icon.tsx
new file mode 100644
index 00000000000..9ac0d076ba5
--- /dev/null
+++ b/web/components/icons/module-icon.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const ModuleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "#F15B5B" }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z"
+      stroke="#F15B5B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.84925 4.66667H4.81221C4.73039 4.66667 4.66406 4.733 4.66406 4.81482V5.85185C4.66406 5.93367 4.73039 6 4.81221 6H5.84925C5.93107 6 5.9974 5.93367 5.9974 5.85185V4.81482C5.9974 4.733 5.93107 4.66667 5.84925 4.66667Z"
+      fill={color}
+      stroke="#F15B5B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.84925 10H4.81221C4.73039 10 4.66406 10.0663 4.66406 10.1481V11.1852C4.66406 11.267 4.73039 11.3333 4.81221 11.3333H5.84925C5.93107 11.3333 5.9974 11.267 5.9974 11.1852V10.1481C5.9974 10.0663 5.93107 10 5.84925 10Z"
+      fill={color}
+      stroke="#F15B5B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.1852 4.66667H10.1481C10.0663 4.66667 10 4.733 10 4.81482V5.85185C10 5.93367 10.0663 6 10.1481 6H11.1852C11.267 6 11.3333 5.93367 11.3333 5.85185V4.81482C11.3333 4.733 11.267 4.66667 11.1852 4.66667Z"
+      fill={color}
+      stroke="#F15B5B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.1852 10H10.1481C10.0663 10 10 10.0663 10 10.1481V11.1852C10 11.267 10.0663 11.3333 10.1481 11.3333H11.1852C11.267 11.3333 11.3333 11.267 11.3333 11.1852V10.1481C11.3333 10.0663 11.267 10 11.1852 10Z"
+      fill={color}
+      stroke="#F15B5B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/module/backlog.tsx b/web/components/icons/module/backlog.tsx
similarity index 100%
rename from apps/app/components/icons/module/backlog.tsx
rename to web/components/icons/module/backlog.tsx
diff --git a/web/components/icons/module/cancelled.tsx b/web/components/icons/module/cancelled.tsx
new file mode 100644
index 00000000000..6ea5fd6944d
--- /dev/null
+++ b/web/components/icons/module/cancelled.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModuleCancelledIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill="#ef4444"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/completed.tsx b/web/components/icons/module/completed.tsx
similarity index 100%
rename from apps/app/components/icons/module/completed.tsx
rename to web/components/icons/module/completed.tsx
diff --git a/apps/app/components/icons/module/in-progress.tsx b/web/components/icons/module/in-progress.tsx
similarity index 100%
rename from apps/app/components/icons/module/in-progress.tsx
rename to web/components/icons/module/in-progress.tsx
diff --git a/web/components/icons/module/index.ts b/web/components/icons/module/index.ts
new file mode 100644
index 00000000000..e82014b2fc7
--- /dev/null
+++ b/web/components/icons/module/index.ts
@@ -0,0 +1,7 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./in-progress";
+export * from "./module-status-icon";
+export * from "./paused";
+export * from "./planned";
diff --git a/apps/app/components/icons/module/module-status-icon.tsx b/web/components/icons/module/module-status-icon.tsx
similarity index 100%
rename from apps/app/components/icons/module/module-status-icon.tsx
rename to web/components/icons/module/module-status-icon.tsx
diff --git a/web/components/icons/module/paused.tsx b/web/components/icons/module/paused.tsx
new file mode 100644
index 00000000000..b216264e8ab
--- /dev/null
+++ b/web/components/icons/module/paused.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const ModulePausedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100275)">
+      <path
+        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+        fill="#525252"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100275">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/app/components/icons/module/planned.tsx b/web/components/icons/module/planned.tsx
similarity index 100%
rename from apps/app/components/icons/module/planned.tsx
rename to web/components/icons/module/planned.tsx
diff --git a/apps/app/components/icons/pdf-file-icon.tsx b/web/components/icons/pdf-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/pdf-file-icon.tsx
rename to web/components/icons/pdf-file-icon.tsx
index 5467f08120b..cb2014ee0b3 100644
--- a/apps/app/components/icons/pdf-file-icon.tsx
+++ b/web/components/icons/pdf-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import PDFFileIcon from "public/attachment/pdf-icon.png";
 
-export const PdfIcon: React.FC<Props> = ({ width , height  }) => (
+export const PdfIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={PDFFileIcon} height={height} width={width} alt="PDFFileIcon" />
 );
diff --git a/apps/app/components/icons/pencil-scribble-icon.tsx b/web/components/icons/pencil-scribble-icon.tsx
similarity index 100%
rename from apps/app/components/icons/pencil-scribble-icon.tsx
rename to web/components/icons/pencil-scribble-icon.tsx
diff --git a/apps/app/components/icons/people-group-icon.tsx b/web/components/icons/people-group-icon.tsx
similarity index 100%
rename from apps/app/components/icons/people-group-icon.tsx
rename to web/components/icons/people-group-icon.tsx
diff --git a/apps/app/components/icons/person-running-icon.tsx b/web/components/icons/person-running-icon.tsx
similarity index 100%
rename from apps/app/components/icons/person-running-icon.tsx
rename to web/components/icons/person-running-icon.tsx
diff --git a/web/components/icons/plus-icon.tsx b/web/components/icons/plus-icon.tsx
new file mode 100644
index 00000000000..25489a4fdae
--- /dev/null
+++ b/web/components/icons/plus-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const PlusIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 19C11.7833 19 11.6042 18.9292 11.4625 18.7875C11.3208 18.6458 11.25 18.4667 11.25 18.25V12.75H5.75C5.53333 12.75 5.35417 12.6792 5.2125 12.5375C5.07083 12.3958 5 12.2167 5 12C5 11.7833 5.07083 11.6042 5.2125 11.4625C5.35417 11.3208 5.53333 11.25 5.75 11.25H11.25V5.75C11.25 5.53333 11.3208 5.35417 11.4625 5.2125C11.6042 5.07083 11.7833 5 12 5C12.2167 5 12.3958 5.07083 12.5375 5.2125C12.6792 5.35417 12.75 5.53333 12.75 5.75V11.25H18.25C18.4667 11.25 18.6458 11.3208 18.7875 11.4625C18.9292 11.6042 19 11.7833 19 12C19 12.2167 18.9292 12.3958 18.7875 12.5375C18.6458 12.6792 18.4667 12.75 18.25 12.75H12.75V18.25C12.75 18.4667 12.6792 18.6458 12.5375 18.7875C12.3958 18.9292 12.2167 19 12 19Z"
+      fill="#FFFFFF"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/png-file-icon.tsx b/web/components/icons/png-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/png-file-icon.tsx
rename to web/components/icons/png-file-icon.tsx
index 21b5dc11686..fb64ed8246f 100644
--- a/apps/app/components/icons/png-file-icon.tsx
+++ b/web/components/icons/png-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import PngFileIcon from "public/attachment/png-icon.png";
 
-export const PngIcon: React.FC<Props> = ({ width, height  }) => (
+export const PngIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={PngFileIcon} height={height} width={width} alt="PngFileIcon" />
 );
diff --git a/web/components/icons/priority-icon.tsx b/web/components/icons/priority-icon.tsx
new file mode 100644
index 00000000000..8473e264b1d
--- /dev/null
+++ b/web/components/icons/priority-icon.tsx
@@ -0,0 +1,25 @@
+// types
+import { TIssuePriorities } from "types";
+
+type Props = {
+  priority: TIssuePriorities | null;
+  className?: string;
+};
+
+export const PriorityIcon: React.FC<Props> = ({ priority, className = "" }) => {
+  if (!className || className === "") className = "text-xs flex items-center";
+
+  return (
+    <span className={`material-symbols-rounded ${className}`}>
+      {priority === "urgent"
+        ? "error"
+        : priority === "high"
+        ? "signal_cellular_alt"
+        : priority === "medium"
+        ? "signal_cellular_alt_2_bar"
+        : priority === "low"
+        ? "signal_cellular_alt_1_bar"
+        : "block"}
+    </span>
+  );
+};
diff --git a/web/components/icons/question-mark-circle-icon.tsx b/web/components/icons/question-mark-circle-icon.tsx
new file mode 100644
index 00000000000..f4abd903ff2
--- /dev/null
+++ b/web/components/icons/question-mark-circle-icon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const QuestionMarkCircleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12.1 17.825C12.3667 17.825 12.5917 17.7333 12.775 17.55C12.9583 17.3667 13.05 17.1417 13.05 16.875C13.05 16.6083 12.9583 16.3833 12.775 16.2C12.5917 16.0167 12.3667 15.925 12.1 15.925C11.8333 15.925 11.6083 16.0167 11.425 16.2C11.2417 16.3833 11.15 16.6083 11.15 16.875C11.15 17.1417 11.2417 17.3667 11.425 17.55C11.6083 17.7333 11.8333 17.825 12.1 17.825ZM12.075 7.5C12.6417 7.5 13.1 7.65417 13.45 7.9625C13.8 8.27083 13.975 8.66667 13.975 9.15C13.975 9.48333 13.875 9.8125 13.675 10.1375C13.475 10.4625 13.15 10.8167 12.7 11.2C12.2667 11.5833 11.9208 11.9875 11.6625 12.4125C11.4042 12.8375 11.275 13.225 11.275 13.575C11.275 13.7583 11.3458 13.9042 11.4875 14.0125C11.6292 14.1208 11.7917 14.175 11.975 14.175C12.175 14.175 12.3417 14.1083 12.475 13.975C12.6083 13.8417 12.6917 13.675 12.725 13.475C12.775 13.1417 12.8875 12.8458 13.0625 12.5875C13.2375 12.3292 13.5083 12.05 13.875 11.75C14.375 11.3333 14.7375 10.9167 14.9625 10.5C15.1875 10.0833 15.3 9.61667 15.3 9.1C15.3 8.21667 15.0125 7.50833 14.4375 6.975C13.8625 6.44167 13.1 6.175 12.15 6.175C11.5167 6.175 10.9333 6.3 10.4 6.55C9.86667 6.8 9.425 7.16667 9.075 7.65C8.94167 7.83333 8.8875 8.02083 8.9125 8.2125C8.9375 8.40417 9.01667 8.55 9.15 8.65C9.33333 8.78333 9.52917 8.825 9.7375 8.775C9.94583 8.725 10.1167 8.60833 10.25 8.425C10.4667 8.125 10.7292 7.89583 11.0375 7.7375C11.3458 7.57917 11.6917 7.5 12.075 7.5ZM12 22C10.6 22 9.29167 21.7458 8.075 21.2375C6.85833 20.7292 5.8 20.025 4.9 19.125C4 18.225 3.29167 17.1667 2.775 15.95C2.25833 14.7333 2 13.4167 2 12C2 10.6 2.25833 9.29167 2.775 8.075C3.29167 6.85833 4 5.8 4.9 4.9C5.8 4 6.85833 3.29167 8.075 2.775C9.29167 2.25833 10.6 2 12 2C13.3833 2 14.6833 2.25833 15.9 2.775C17.1167 3.29167 18.175 4 19.075 4.9C19.975 5.8 20.6875 6.85833 21.2125 8.075C21.7375 9.29167 22 10.6 22 12C22 13.4167 21.7375 14.7333 21.2125 15.95C20.6875 17.1667 19.975 18.225 19.075 19.125C18.175 20.025 17.1167 20.7292 15.9 21.2375C14.6833 21.7458 13.3833 22 12 22ZM12 20.5C14.35 20.5 16.3542 19.6667 18.0125 18C19.6708 16.3333 20.5 14.3333 20.5 12C20.5 9.66667 19.6708 7.66667 18.0125 6C16.3542 4.33333 14.35 3.5 12 3.5C9.61667 3.5 7.60417 4.33333 5.9625 6C4.32083 7.66667 3.5 9.66667 3.5 12C3.5 14.3333 4.32083 16.3333 5.9625 18C7.60417 19.6667 9.61667 20.5 12 20.5Z" />
+  </svg>
+);
diff --git a/web/components/icons/related-icon.tsx b/web/components/icons/related-icon.tsx
new file mode 100644
index 00000000000..3abb4b1c3dc
--- /dev/null
+++ b/web/components/icons/related-icon.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const RelatedIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "rgb(var(--color-text-200))",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 13L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L4 4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6L2 20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22L11 22"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.125 19.25L9 16.125L12.125 13"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/setting-icon.tsx b/web/components/icons/setting-icon.tsx
similarity index 100%
rename from apps/app/components/icons/setting-icon.tsx
rename to web/components/icons/setting-icon.tsx
diff --git a/apps/app/components/icons/sheet-file-icon.tsx b/web/components/icons/sheet-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/sheet-file-icon.tsx
rename to web/components/icons/sheet-file-icon.tsx
index 9e57ce71c74..dd4eee8ec0f 100644
--- a/apps/app/components/icons/sheet-file-icon.tsx
+++ b/web/components/icons/sheet-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import SheetFileIcon from "public/attachment/excel-icon.png";
 
-export const SheetIcon: React.FC<Props> = ({ width, height  }) => (
+export const SheetIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={SheetFileIcon} height={height} width={width} alt="SheetFileIcon" />
 );
diff --git a/web/components/icons/signal-cellular-icon.tsx b/web/components/icons/signal-cellular-icon.tsx
new file mode 100644
index 00000000000..bb7d108fe5c
--- /dev/null
+++ b/web/components/icons/signal-cellular-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const SignalCellularIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.75 20C18.4 20 18.1042 19.8792 17.8625 19.6375C17.6208 19.3958 17.5 19.1 17.5 18.75V5.25C17.5 4.9 17.6208 4.60417 17.8625 4.3625C18.1042 4.12083 18.4 4 18.75 4C19.1 4 19.3958 4.12083 19.6375 4.3625C19.8792 4.60417 20 4.9 20 5.25V18.75C20 19.1 19.8792 19.3958 19.6375 19.6375C19.3958 19.8792 19.1 20 18.75 20ZM6.275 20C6.09167 20 5.92083 19.9667 5.7625 19.9C5.60417 19.8333 5.47083 19.7458 5.3625 19.6375C5.25417 19.5292 5.16667 19.3958 5.1 19.2375C5.03333 19.0792 5 18.9167 5 18.75V15.25C5 14.9 5.12083 14.6042 5.3625 14.3625C5.60417 14.1208 5.9 14 6.25 14C6.6 14 6.89583 14.1208 7.1375 14.3625C7.37917 14.6042 7.5 14.9 7.5 15.25V18.75C7.5 18.9167 7.46667 19.0792 7.4 19.2375C7.33333 19.3958 7.24583 19.5292 7.1375 19.6375C7.02917 19.7458 6.9 19.8333 6.75 19.9C6.6 19.9667 6.44167 20 6.275 20ZM12.5 20C12.15 20 11.8542 19.8792 11.6125 19.6375C11.3708 19.3958 11.25 19.1 11.25 18.75V10.25C11.25 9.9 11.3708 9.60417 11.6125 9.3625C11.8542 9.12083 12.15 9 12.5 9C12.85 9 13.1458 9.12083 13.3875 9.3625C13.6292 9.60417 13.75 9.9 13.75 10.25V18.75C13.75 19.1 13.6292 19.3958 13.3875 19.6375C13.1458 19.8792 12.85 20 12.5 20Z"
+      fill="#212529"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/single-comment-icon.tsx b/web/components/icons/single-comment-icon.tsx
similarity index 100%
rename from apps/app/components/icons/single-comment-icon.tsx
rename to web/components/icons/single-comment-icon.tsx
diff --git a/apps/app/components/icons/sort-icon.tsx b/web/components/icons/sort-icon.tsx
similarity index 100%
rename from apps/app/components/icons/sort-icon.tsx
rename to web/components/icons/sort-icon.tsx
diff --git a/apps/app/components/icons/stacked-layers-horizontal-icon.tsx b/web/components/icons/stacked-layers-horizontal-icon.tsx
similarity index 100%
rename from apps/app/components/icons/stacked-layers-horizontal-icon.tsx
rename to web/components/icons/stacked-layers-horizontal-icon.tsx
diff --git a/apps/app/components/icons/stacked-layers-icon.tsx b/web/components/icons/stacked-layers-icon.tsx
similarity index 100%
rename from apps/app/components/icons/stacked-layers-icon.tsx
rename to web/components/icons/stacked-layers-icon.tsx
diff --git a/web/components/icons/state/backlog.tsx b/web/components/icons/state/backlog.tsx
new file mode 100644
index 00000000000..369692c2011
--- /dev/null
+++ b/web/components/icons/state/backlog.tsx
@@ -0,0 +1,42 @@
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const StateGroupBacklogIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/web/components/icons/state/cancelled.tsx b/web/components/icons/state/cancelled.tsx
new file mode 100644
index 00000000000..4b06d80ba88
--- /dev/null
+++ b/web/components/icons/state/cancelled.tsx
@@ -0,0 +1,34 @@
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const StateGroupCancelledIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#ef4444",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/web/components/icons/state/completed.tsx b/web/components/icons/state/completed.tsx
new file mode 100644
index 00000000000..b22cc8c81c5
--- /dev/null
+++ b/web/components/icons/state/completed.tsx
@@ -0,0 +1,27 @@
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const StateGroupCompletedIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#16a34a",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/web/components/icons/state/index.ts b/web/components/icons/state/index.ts
new file mode 100644
index 00000000000..7fee13d8b60
--- /dev/null
+++ b/web/components/icons/state/index.ts
@@ -0,0 +1,6 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./started";
+export * from "./state-group-icon";
+export * from "./unstarted";
diff --git a/web/components/icons/state/started.tsx b/web/components/icons/state/started.tsx
new file mode 100644
index 00000000000..f4796548baa
--- /dev/null
+++ b/web/components/icons/state/started.tsx
@@ -0,0 +1,46 @@
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const StateGroupStartedIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/web/components/icons/state/state-group-icon.tsx b/web/components/icons/state/state-group-icon.tsx
new file mode 100644
index 00000000000..df3b57dd8a8
--- /dev/null
+++ b/web/components/icons/state/state-group-icon.tsx
@@ -0,0 +1,74 @@
+// icons
+import {
+  StateGroupBacklogIcon,
+  StateGroupCancelledIcon,
+  StateGroupCompletedIcon,
+  StateGroupStartedIcon,
+  StateGroupUnstartedIcon,
+} from "components/icons";
+// types
+import { TStateGroups } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+  className?: string;
+  color?: string;
+  height?: string;
+  stateGroup: TStateGroups;
+  width?: string;
+};
+
+export const StateGroupIcon: React.FC<Props> = ({
+  className = "",
+  color,
+  height = "12px",
+  width = "12px",
+  stateGroup,
+}) => {
+  if (stateGroup === "backlog")
+    return (
+      <StateGroupBacklogIcon
+        width={width}
+        height={height}
+        color={color ?? STATE_GROUP_COLORS["backlog"]}
+        className={`flex-shrink-0 ${className}`}
+      />
+    );
+  else if (stateGroup === "cancelled")
+    return (
+      <StateGroupCancelledIcon
+        width={width}
+        height={height}
+        color={color ?? STATE_GROUP_COLORS["cancelled"]}
+        className={`flex-shrink-0 ${className}`}
+      />
+    );
+  else if (stateGroup === "completed")
+    return (
+      <StateGroupCompletedIcon
+        width={width}
+        height={height}
+        color={color ?? STATE_GROUP_COLORS["completed"]}
+        className={`flex-shrink-0 ${className}`}
+      />
+    );
+  else if (stateGroup === "started")
+    return (
+      <StateGroupStartedIcon
+        width={width}
+        height={height}
+        color={color ?? STATE_GROUP_COLORS["started"]}
+        className={`flex-shrink-0 ${className}`}
+      />
+    );
+  else
+    return (
+      <StateGroupUnstartedIcon
+        width={width}
+        height={height}
+        color={color ?? STATE_GROUP_COLORS["unstarted"]}
+        className={`flex-shrink-0 ${className}`}
+      />
+    );
+};
diff --git a/web/components/icons/state/unstarted.tsx b/web/components/icons/state/unstarted.tsx
new file mode 100644
index 00000000000..aa0d44935e5
--- /dev/null
+++ b/web/components/icons/state/unstarted.tsx
@@ -0,0 +1,24 @@
+type Props = {
+  width?: string;
+  height?: string;
+  className?: string;
+  color?: string;
+};
+
+export const StateGroupUnstartedIcon: React.FC<Props> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#3a3a3a",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
+  </svg>
+);
diff --git a/apps/app/components/icons/svg-file-icon.tsx b/web/components/icons/svg-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/svg-file-icon.tsx
rename to web/components/icons/svg-file-icon.tsx
index d04ae3167f1..043f41aeb85 100644
--- a/apps/app/components/icons/svg-file-icon.tsx
+++ b/web/components/icons/svg-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import SvgFileIcon from "public/attachment/svg-icon.png";
 
-export const SvgIcon: React.FC<Props> = ({ width, height  }) => (
+export const SvgIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={SvgFileIcon} height={height} width={width} alt="SvgFileIcon" />
 );
diff --git a/web/components/icons/tag-icon.tsx b/web/components/icons/tag-icon.tsx
new file mode 100644
index 00000000000..d907aabce4d
--- /dev/null
+++ b/web/components/icons/tag-icon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TagIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.975 21.575C13.675 21.875 13.3125 22.025 12.8875 22.025C12.4625 22.025 12.1 21.875 11.8 21.575L2.425 12.2C2.25833 12.0333 2.14583 11.8583 2.0875 11.675C2.02917 11.4917 2 11.3 2 11.1V3.5C2 3.06667 2.14167 2.70833 2.425 2.425C2.70833 2.14167 3.06667 2 3.5 2H11.1C11.3 2 11.5 2.02917 11.7 2.0875C11.9 2.14583 12.0833 2.25833 12.25 2.425L21.575 11.75C21.8917 12.0667 22.05 12.4375 22.05 12.8625C22.05 13.2875 21.8917 13.6583 21.575 13.975L13.975 21.575ZM12.95 20.55L20.55 12.95L11.1 3.5H3.5V11.1L12.95 20.55ZM6.125 7.4C6.475 7.4 6.77917 7.27083 7.0375 7.0125C7.29583 6.75417 7.425 6.45 7.425 6.1C7.425 5.75 7.29583 5.44583 7.0375 5.1875C6.77917 4.92917 6.475 4.8 6.125 4.8C5.775 4.8 5.47083 4.92917 5.2125 5.1875C4.95417 5.44583 4.825 5.75 4.825 6.1C4.825 6.45 4.95417 6.75417 5.2125 7.0125C5.47083 7.27083 5.775 7.4 6.125 7.4Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/target-icon.tsx b/web/components/icons/target-icon.tsx
similarity index 100%
rename from apps/app/components/icons/target-icon.tsx
rename to web/components/icons/target-icon.tsx
diff --git a/apps/app/components/icons/tick-mark-icon.tsx b/web/components/icons/tick-mark-icon.tsx
similarity index 100%
rename from apps/app/components/icons/tick-mark-icon.tsx
rename to web/components/icons/tick-mark-icon.tsx
diff --git a/web/components/icons/transfer-icon.tsx b/web/components/icons/transfer-icon.tsx
new file mode 100644
index 00000000000..dfb3f8c05d7
--- /dev/null
+++ b/web/components/icons/transfer-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TransferIcon: React.FC<Props> = ({ width, height, className, color }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/triangle-exclamation-icon.tsx b/web/components/icons/triangle-exclamation-icon.tsx
similarity index 100%
rename from apps/app/components/icons/triangle-exclamation-icon.tsx
rename to web/components/icons/triangle-exclamation-icon.tsx
diff --git a/web/components/icons/tune-icon.tsx b/web/components/icons/tune-icon.tsx
new file mode 100644
index 00000000000..baa2dcd7250
--- /dev/null
+++ b/web/components/icons/tune-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const TuneIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
+      fill="#212529"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/txt-file-icon.tsx b/web/components/icons/txt-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/txt-file-icon.tsx
rename to web/components/icons/txt-file-icon.tsx
index f0150a4cda6..2fbfaee3290 100644
--- a/apps/app/components/icons/txt-file-icon.tsx
+++ b/web/components/icons/txt-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import TxtFileIcon from "public/attachment/txt-icon.png";
 
-export const TxtIcon: React.FC<Props> = ({ width, height  }) => (
+export const TxtIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={TxtFileIcon} height={height} width={width} alt="TxtFileIcon" />
 );
diff --git a/apps/app/components/icons/types.d.ts b/web/components/icons/types.d.ts
similarity index 100%
rename from apps/app/components/icons/types.d.ts
rename to web/components/icons/types.d.ts
diff --git a/web/components/icons/upcoming-cycle-icon.tsx b/web/components/icons/upcoming-cycle-icon.tsx
new file mode 100644
index 00000000000..e9bad7a4203
--- /dev/null
+++ b/web/components/icons/upcoming-cycle-icon.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UpcomingCycleIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color = "black",
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
+    <path
+      d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/user-group-icon.tsx b/web/components/icons/user-group-icon.tsx
similarity index 100%
rename from apps/app/components/icons/user-group-icon.tsx
rename to web/components/icons/user-group-icon.tsx
diff --git a/web/components/icons/user-icon-circle.tsx b/web/components/icons/user-icon-circle.tsx
new file mode 100644
index 00000000000..ffc88be3b9f
--- /dev/null
+++ b/web/components/icons/user-icon-circle.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UserCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5.55 17.625C6.6 16.8917 7.64167 16.3292 8.675 15.9375C9.70833 15.5458 10.8167 15.35 12 15.35C13.1833 15.35 14.2958 15.5458 15.3375 15.9375C16.3792 16.3292 17.425 16.8917 18.475 17.625C19.2083 16.725 19.7292 15.8167 20.0375 14.9C20.3458 13.9833 20.5 13.0167 20.5 12C20.5 9.58333 19.6875 7.5625 18.0625 5.9375C16.4375 4.3125 14.4167 3.5 12 3.5C9.58333 3.5 7.5625 4.3125 5.9375 5.9375C4.3125 7.5625 3.5 9.58333 3.5 12C3.5 13.0167 3.65833 13.9833 3.975 14.9C4.29167 15.8167 4.81667 16.725 5.55 17.625ZM12 12.75C11.0333 12.75 10.2208 12.4208 9.5625 11.7625C8.90417 11.1042 8.575 10.2917 8.575 9.325C8.575 8.35833 8.90417 7.54583 9.5625 6.8875C10.2208 6.22917 11.0333 5.9 12 5.9C12.9667 5.9 13.7792 6.22917 14.4375 6.8875C15.0958 7.54583 15.425 8.35833 15.425 9.325C15.425 10.2917 15.0958 11.1042 14.4375 11.7625C13.7792 12.4208 12.9667 12.75 12 12.75ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6792 2.2625 15.8875 2.7875C17.0958 3.3125 18.1542 4.02917 19.0625 4.9375C19.9708 5.84583 20.6875 6.90417 21.2125 8.1125C21.7375 9.32083 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22ZM12 20.5C12.9167 20.5 13.8125 20.3667 14.6875 20.1C15.5625 19.8333 16.425 19.3667 17.275 18.7C16.425 18.1 15.5583 17.6417 14.675 17.325C13.7917 17.0083 12.9 16.85 12 16.85C11.1 16.85 10.2083 17.0083 9.325 17.325C8.44167 17.6417 7.575 18.1 6.725 18.7C7.575 19.3667 8.4375 19.8333 9.3125 20.1C10.1875 20.3667 11.0833 20.5 12 20.5ZM12 11.25C12.5667 11.25 13.0292 11.0708 13.3875 10.7125C13.7458 10.3542 13.925 9.89167 13.925 9.325C13.925 8.75833 13.7458 8.29583 13.3875 7.9375C13.0292 7.57917 12.5667 7.4 12 7.4C11.4333 7.4 10.9708 7.57917 10.6125 7.9375C10.2542 8.29583 10.075 8.75833 10.075 9.325C10.075 9.89167 10.2542 10.3542 10.6125 10.7125C10.9708 11.0708 11.4333 11.25 12 11.25Z" />
+  </svg>
+);
diff --git a/web/components/icons/user-icon.tsx b/web/components/icons/user-icon.tsx
new file mode 100644
index 00000000000..dedea1bae25
--- /dev/null
+++ b/web/components/icons/user-icon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const UserIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 11.9751C10.9 11.9751 10 11.6251 9.3 10.9251C8.6 10.2251 8.25 9.3251 8.25 8.2251C8.25 7.1251 8.6 6.2251 9.3 5.5251C10 4.8251 10.9 4.4751 12 4.4751C13.1 4.4751 14 4.8251 14.7 5.5251C15.4 6.2251 15.75 7.1251 15.75 8.2251C15.75 9.3251 15.4 10.2251 14.7 10.9251C14 11.6251 13.1 11.9751 12 11.9751ZM18.5 20.0001H5.5C5.08333 20.0001 4.72917 19.8543 4.4375 19.5626C4.14583 19.2709 4 18.9168 4 18.5001V17.6501C4 17.0168 4.15833 16.4751 4.475 16.0251C4.79167 15.5751 5.2 15.2334 5.7 15.0001C6.81667 14.5001 7.8875 14.1251 8.9125 13.8751C9.9375 13.6251 10.9667 13.5001 12 13.5001C13.0333 13.5001 14.0583 13.6293 15.075 13.8876C16.0917 14.1459 17.1583 14.5168 18.275 15.0001C18.7917 15.2334 19.2083 15.5751 19.525 16.0251C19.8417 16.4751 20 17.0168 20 17.6501V18.5001C20 18.9168 19.8542 19.2709 19.5625 19.5626C19.2708 19.8543 18.9167 20.0001 18.5 20.0001ZM5.5 18.5001H18.5V17.6501C18.5 17.3834 18.4208 17.1293 18.2625 16.8876C18.1042 16.6459 17.9083 16.4668 17.675 16.3501C16.6083 15.8334 15.6333 15.4793 14.75 15.2876C13.8667 15.0959 12.95 15.0001 12 15.0001C11.05 15.0001 10.125 15.0959 9.225 15.2876C8.325 15.4793 7.35 15.8334 6.3 16.3501C6.06667 16.4668 5.875 16.6459 5.725 16.8876C5.575 17.1293 5.5 17.3834 5.5 17.6501V18.5001ZM12 10.4751C12.65 10.4751 13.1875 10.2626 13.6125 9.8376C14.0375 9.4126 14.25 8.8751 14.25 8.2251C14.25 7.5751 14.0375 7.0376 13.6125 6.6126C13.1875 6.1876 12.65 5.9751 12 5.9751C11.35 5.9751 10.8125 6.1876 10.3875 6.6126C9.9625 7.0376 9.75 7.5751 9.75 8.2251C9.75 8.8751 9.9625 9.4126 10.3875 9.8376C10.8125 10.2626 11.35 10.4751 12 10.4751Z"
+      fill="#212529"
+    />
+  </svg>
+);
diff --git a/apps/app/components/icons/users.tsx b/web/components/icons/users.tsx
similarity index 100%
rename from apps/app/components/icons/users.tsx
rename to web/components/icons/users.tsx
diff --git a/apps/app/components/icons/video-file-icon.tsx b/web/components/icons/video-file-icon.tsx
similarity index 78%
rename from apps/app/components/icons/video-file-icon.tsx
rename to web/components/icons/video-file-icon.tsx
index 8deb7a80b7c..961aba1e649 100644
--- a/apps/app/components/icons/video-file-icon.tsx
+++ b/web/components/icons/video-file-icon.tsx
@@ -4,6 +4,6 @@ import Image from "next/image";
 import type { Props } from "./types";
 import VideoFileIcon from "public/attachment/video-icon.png";
 
-export const VideoIcon: React.FC<Props> = ({ width, height  }) => (
+export const VideoIcon: React.FC<Props> = ({ width, height }) => (
   <Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
 );
diff --git a/apps/app/components/icons/view-list-icon.tsx b/web/components/icons/view-list-icon.tsx
similarity index 100%
rename from apps/app/components/icons/view-list-icon.tsx
rename to web/components/icons/view-list-icon.tsx
diff --git a/apps/app/components/icons/water-drop-icon.tsx b/web/components/icons/water-drop-icon.tsx
similarity index 100%
rename from apps/app/components/icons/water-drop-icon.tsx
rename to web/components/icons/water-drop-icon.tsx
diff --git a/apps/app/components/icons/x-mark-icon.tsx b/web/components/icons/x-mark-icon.tsx
similarity index 100%
rename from apps/app/components/icons/x-mark-icon.tsx
rename to web/components/icons/x-mark-icon.tsx
diff --git a/web/components/inbox/actions-header.tsx b/web/components/inbox/actions-header.tsx
new file mode 100644
index 00000000000..e9dbee23fe3
--- /dev/null
+++ b/web/components/inbox/actions-header.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import DatePicker from "react-datepicker";
+import { Popover } from "@headlessui/react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  AcceptIssueModal,
+  DeclineIssueModal,
+  DeleteInboxIssueModal,
+  FiltersDropdown,
+  SelectDuplicateInboxIssueModal,
+} from "components/inbox";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react";
+// types
+import type { TInboxStatus } from "types";
+
+export const InboxActionsHeader = observer(() => {
+  const [date, setDate] = useState(new Date());
+  const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
+  const [acceptIssueModal, setAcceptIssueModal] = useState(false);
+  const [declineIssueModal, setDeclineIssueModal] = useState(false);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
+
+  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const userRole = userStore.currentProjectRole;
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null;
+
+  const { setToastAlert } = useToast();
+
+  const markInboxStatus = async (data: TInboxStatus) => {
+    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return;
+
+    await inboxIssueDetailsStore
+      .updateIssueStatus(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        inboxId.toString(),
+        issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
+        data
+      )
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "在更新收件箱状态时出了问题。请重试。",
+        })
+      );
+  };
+
+  const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
+  const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
+
+  useEffect(() => {
+    if (!issue?.issue_inbox[0].snoozed_till) return;
+
+    setDate(new Date(issue.issue_inbox[0].snoozed_till));
+  }, [issue]);
+
+  const issueStatus = issue?.issue_inbox[0].status;
+  const isAllowed = userRole === 15 || userRole === 20;
+
+  const today = new Date();
+  const tomorrow = new Date(today);
+
+  tomorrow.setDate(today.getDate() + 1);
+
+  return (
+    <>
+      {issue && (
+        <>
+          <SelectDuplicateInboxIssueModal
+            isOpen={selectDuplicateIssue}
+            onClose={() => setSelectDuplicateIssue(false)}
+            value={issue?.issue_inbox[0].duplicate_to}
+            onSubmit={(dupIssueId) => {
+              markInboxStatus({
+                status: 2,
+                duplicate_to: dupIssueId,
+              }).finally(() => setSelectDuplicateIssue(false));
+            }}
+          />
+          <AcceptIssueModal
+            data={issue}
+            isOpen={acceptIssueModal}
+            onClose={() => setAcceptIssueModal(false)}
+            onSubmit={async () => {
+              await markInboxStatus({
+                status: 1,
+              }).finally(() => setAcceptIssueModal(false));
+            }}
+          />
+          <DeclineIssueModal
+            data={issue}
+            isOpen={declineIssueModal}
+            onClose={() => setDeclineIssueModal(false)}
+            onSubmit={async () => {
+              await markInboxStatus({
+                status: -1,
+              }).finally(() => setDeclineIssueModal(false));
+            }}
+          />
+          <DeleteInboxIssueModal data={issue} isOpen={deleteIssueModal} onClose={() => setDeleteIssueModal(false)} />
+        </>
+      )}
+      <div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200">
+        <div className="col-span-1 flex justify-between p-4">
+          <div className="flex items-center gap-2">
+            <Inbox className="text-custom-text-200" size={16} strokeWidth={2} />
+            <h3 className="font-medium">Inbox</h3>
+          </div>
+          <FiltersDropdown />
+        </div>
+        {inboxIssueId && (
+          <div className="flex justify-between items-center gap-4 px-4 col-span-3">
+            <div className="flex items-center gap-x-2">
+              <button
+                type="button"
+                className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", { key: "ArrowUp" });
+                  document.dispatchEvent(e);
+                }}
+              >
+                <ChevronUp size={14} strokeWidth={2} />
+              </button>
+              <button
+                type="button"
+                className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", { key: "ArrowDown" });
+                  document.dispatchEvent(e);
+                }}
+              >
+                <ChevronDown size={14} strokeWidth={2} />
+              </button>
+              <div className="text-sm">
+                {currentIssueIndex + 1}/{issuesList?.length ?? 0}
+              </div>
+            </div>
+            <div className="flex items-center gap-3 flex-wrap">
+              {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
+                <div className="flex-shrink-0">
+                  <Popover className="relative">
+                    <Popover.Button as="button" type="button">
+                      <Button variant="neutral-primary" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
+                        Snooze
+                      </Button>
+                    </Popover.Button>
+                    <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
+                      {({ close }) => (
+                        <div className="w-full h-full flex flex-col gap-y-1">
+                          <DatePicker
+                            selected={date ? new Date(date) : null}
+                            onChange={(val) => {
+                              if (!val) return;
+                              setDate(val);
+                            }}
+                            dateFormat="dd-MM-yyyy"
+                            minDate={tomorrow}
+                            inline
+                          />
+                          <Button
+                            variant="primary"
+                            onClick={() => {
+                              close();
+                              markInboxStatus({
+                                status: 0,
+                                snoozed_till: new Date(date),
+                              });
+                            }}
+                          >
+                            Snooze
+                          </Button>
+                        </div>
+                      )}
+                    </Popover.Panel>
+                  </Popover>
+                </div>
+              )}
+              {isAllowed && issueStatus === -2 && (
+                <div className="flex-shrink-0">
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    prependIcon={<FileStack size={14} strokeWidth={2} />}
+                    onClick={() => setSelectDuplicateIssue(true)}
+                  >
+                    Mark as duplicate
+                  </Button>
+                </div>
+              )}
+              {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
+                <div className="flex-shrink-0">
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    prependIcon={<CheckCircle2 className="text-green-500" size={14} strokeWidth={2} />}
+                    onClick={() => setAcceptIssueModal(true)}
+                  >
+                    Accept
+                  </Button>
+                </div>
+              )}
+              {isAllowed && issueStatus === -2 && (
+                <div className="flex-shrink-0">
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    prependIcon={<XCircle className="text-red-500" size={14} strokeWidth={2} />}
+                    onClick={() => setDeclineIssueModal(true)}
+                  >
+                    Decline
+                  </Button>
+                </div>
+              )}
+              {(isAllowed || user?.id === issue?.created_by) && (
+                <div className="flex-shrink-0">
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    prependIcon={<Trash2 className="text-red-500" size={14} strokeWidth={2} />}
+                    onClick={() => setDeleteIssueModal(true)}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx
new file mode 100644
index 00000000000..dc5e627a810
--- /dev/null
+++ b/web/components/inbox/filters-dropdown.tsx
@@ -0,0 +1,98 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { MultiLevelDropdown } from "components/ui";
+// icons
+import { PriorityIcon } from "@plane/ui";
+// types
+import { IInboxFilterOptions } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+import { INBOX_STATUS } from "constants/inbox";
+
+export const FiltersDropdown: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+
+  let filtersLength = 0;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof IInboxFilterOptions;
+
+    if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
+  });
+
+  return (
+    <div className="relative">
+      <MultiLevelDropdown
+        label="Filters"
+        onSelect={(option) => {
+          if (!workspaceSlug || !projectId || !inboxId) return;
+
+          const key = option.key as keyof IInboxFilterOptions;
+          const currentValue: any[] = filters?.[key] ?? [];
+
+          const valueExists = currentValue.includes(option.value);
+
+          if (valueExists)
+            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+              [option.key]: currentValue.filter((val) => val !== option.value),
+            });
+          else
+            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+              [option.key]: [...currentValue, option.value],
+            });
+        }}
+        direction="right"
+        height="rg"
+        options={[
+          {
+            id: "priority",
+            label: "Priority",
+            value: PRIORITIES,
+            hasChildren: true,
+            children: PRIORITIES.map((priority) => ({
+              id: priority === null ? "null" : priority,
+              label: (
+                <div className="flex items-center gap-2 capitalize">
+                  <PriorityIcon priority={priority} /> {priority ?? "None"}
+                </div>
+              ),
+              value: {
+                key: "priority",
+                value: priority === null ? "null" : priority,
+              },
+              selected: filters?.priority?.includes(priority === null ? "null" : priority),
+            })),
+          },
+          {
+            id: "inbox_status",
+            label: "Status",
+            value: INBOX_STATUS.map((status) => status.value),
+            hasChildren: true,
+            children: INBOX_STATUS.map((status) => ({
+              id: status.key,
+              label: status.label,
+              value: {
+                key: "inbox_status",
+                value: status.value,
+              },
+              selected: filters?.inbox_status?.includes(status.value),
+            })),
+          },
+        ]}
+      />
+      {filtersLength > 0 && (
+        <div className="absolute -top-2 -right-2 h-4 w-4 text-[0.65rem] grid place-items-center rounded-full text-custom-text-100 bg-custom-background-80 border border-custom-border-200 z-10">
+          <span>{filtersLength}</span>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx
new file mode 100644
index 00000000000..2f70db99d0a
--- /dev/null
+++ b/web/components/inbox/filters-list.tsx
@@ -0,0 +1,165 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { X } from "lucide-react";
+import { PriorityIcon } from "@plane/ui";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { IInboxFilterOptions, TIssuePriorities } from "types";
+// constants
+import { INBOX_STATUS } from "constants/inbox";
+
+export const InboxFiltersList = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+
+  const handleUpdateFilter = (filter: Partial<IInboxFilterOptions>) => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter);
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    const newFilters: IInboxFilterOptions = {};
+    Object.keys(filters ?? {}).forEach((key) => {
+      newFilters[key as keyof IInboxFilterOptions] = null;
+    });
+
+    inboxFiltersStore.updateInboxFilters(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      inboxId.toString(),
+      newFilters
+    );
+  };
+
+  let filtersLength = 0;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof IInboxFilterOptions;
+
+    if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
+  });
+
+  if (!filters || filtersLength <= 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3">
+      {Object.keys(filters).map((key) => {
+        const filterKey = key as keyof IInboxFilterOptions;
+
+        if (filters[filterKey])
+          return (
+            <div
+              key={key}
+              className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
+            >
+              <span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
+              {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
+                <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
+              ) : (
+                <div className="space-x-2">
+                  {filterKey === "priority" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.priority?.map((priority) => (
+                        <div
+                          key={priority}
+                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
+                            priority === "urgent"
+                              ? "bg-red-500/20 text-red-500"
+                              : priority === "high"
+                              ? "bg-orange-500/20 text-orange-500"
+                              : priority === "medium"
+                              ? "bg-yellow-500/20 text-yellow-500"
+                              : priority === "low"
+                              ? "bg-green-500/20 text-green-500"
+                              : "bg-custom-background-90 text-custom-text-200"
+                          }`}
+                        >
+                          <span>
+                            <PriorityIcon priority={priority as TIssuePriorities} />
+                          </span>
+                          <button
+                            type="button"
+                            className="cursor-pointer"
+                            onClick={() =>
+                              handleUpdateFilter({
+                                priority: filters.priority?.filter((p) => p !== priority),
+                              })
+                            }
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          handleUpdateFilter({
+                            priority: null,
+                          })
+                        }
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : filterKey === "inbox_status" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.inbox_status?.map((status) => (
+                        <div
+                          key={status}
+                          className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize bg-custom-background-90 text-custom-text-200"
+                        >
+                          <span>{INBOX_STATUS.find((s) => s.value === status)?.label}</span>
+                          <button
+                            type="button"
+                            className="cursor-pointer"
+                            onClick={() =>
+                              handleUpdateFilter({
+                                inbox_status: filters.inbox_status?.filter((p) => p !== status),
+                              })
+                            }
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      ))}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          handleUpdateFilter({
+                            inbox_status: null,
+                          })
+                        }
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : (
+                    (filters[filterKey] as any)?.join(", ")
+                  )}
+                </div>
+              )}
+            </div>
+          );
+      })}
+      <button
+        type="button"
+        onClick={handleClearAllFilters}
+        className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
+      >
+        <span>Clear all</span>
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+});
diff --git a/web/components/inbox/index.ts b/web/components/inbox/index.ts
new file mode 100644
index 00000000000..ef1a9e92dd5
--- /dev/null
+++ b/web/components/inbox/index.ts
@@ -0,0 +1,8 @@
+export * from "./modals";
+export * from "./actions-header";
+export * from "./filters-dropdown";
+export * from "./filters-list";
+export * from "./issue-activity";
+export * from "./issue-card";
+export * from "./issues-list-sidebar";
+export * from "./main-content";
diff --git a/web/components/inbox/issue-activity.tsx b/web/components/inbox/issue-activity.tsx
new file mode 100644
index 00000000000..61102f86531
--- /dev/null
+++ b/web/components/inbox/issue-activity.tsx
@@ -0,0 +1,86 @@
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AddComment, IssueActivitySection } from "components/issues";
+// services
+import { IssueService, IssueCommentService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = { issueDetails: IIssue };
+
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
+export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxIssueId } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && projectId && issueDetails ? PROJECT_ISSUES_ACTIVITY(issueDetails.id) : null,
+    workspaceSlug && projectId && issueDetails
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueDetails.id)
+      : null
+  );
+
+  const user = userStore.currentUser;
+
+  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+    if (!workspaceSlug || !projectId || !inboxIssueId || !user) return;
+
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, data, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !inboxIssueId || !user) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issueDetails || !user) return;
+
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="space-y-5">
+      <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
+      <IssueActivitySection
+        activity={issueActivity}
+        handleCommentUpdate={handleCommentUpdate}
+        handleCommentDelete={handleCommentDelete}
+      />
+      <AddComment onSubmit={handleAddComment} />
+    </div>
+  );
+});
diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx
new file mode 100644
index 00000000000..223ef682130
--- /dev/null
+++ b/web/components/inbox/issue-card.tsx
@@ -0,0 +1,111 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// ui
+import { Tooltip, PriorityIcon } from "@plane/ui";
+// icons
+import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IInboxIssue } from "types";
+// constants
+import { INBOX_STATUS } from "constants/inbox";
+
+type Props = {
+  issue: IInboxIssue;
+  active: boolean;
+};
+
+export const InboxIssueCard: React.FC<Props> = (props) => {
+  const { issue, active } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const issueStatus = issue.issue_inbox[0].status;
+
+  return (
+    <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
+      <a>
+        <div
+          id={issue.id}
+          className={`relative min-h-[5rem] cursor-pointer select-none space-y-3 py-2 px-4 border-b border-custom-border-200 hover:bg-custom-primary/5 ${
+            active ? "bg-custom-primary/5" : " "
+          } ${issue.issue_inbox[0].status !== -2 ? "opacity-60" : ""}`}
+        >
+          <div className="flex items-center gap-x-2">
+            <p className="flex-shrink-0 text-custom-text-200 text-xs">
+              {issue.project_detail?.identifier}-{issue.sequence_id}
+            </p>
+            <h5 className="truncate text-sm">{issue.name}</h5>
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
+              <div
+                className={`grid h-6 w-6 place-items-center rounded border items-center shadow-sm ${
+                  issue.priority === "urgent"
+                    ? "border-red-500/20 bg-red-500/20 text-red-500"
+                    : issue.priority === "high"
+                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    : issue.priority === "medium"
+                    ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                    : issue.priority === "low"
+                    ? "border-green-500/20 bg-green-500/20 text-green-500"
+                    : "border-custom-border-200"
+                }`}
+              >
+                <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
+              </div>
+            </Tooltip>
+            <Tooltip
+              tooltipHeading="Created on"
+              tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
+            >
+              <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
+                <CalendarDays size={12} strokeWidth={1.5} />
+                <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
+              </div>
+            </Tooltip>
+          </div>
+          <div
+            className={`text-xs flex items-center justify-end gap-1 w-full ${
+              issueStatus === 0 && new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
+                ? "text-red-500"
+                : INBOX_STATUS.find((s) => s.value === issueStatus)?.textColor
+            }`}
+          >
+            {issueStatus === -2 ? (
+              <>
+                <AlertTriangle size={14} strokeWidth={2} />
+                <span>Pending</span>
+              </>
+            ) : issueStatus === -1 ? (
+              <>
+                <XCircle size={14} strokeWidth={2} />
+                <span>Declined</span>
+              </>
+            ) : issueStatus === 0 ? (
+              <>
+                <Clock size={14} strokeWidth={2} />
+                <span>
+                  {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
+                </span>
+              </>
+            ) : issueStatus === 1 ? (
+              <>
+                <CheckCircle2 size={14} strokeWidth={2} />
+                <span>Accepted</span>
+              </>
+            ) : (
+              <>
+                <Copy size={14} strokeWidth={2} />
+                <span>Duplicate</span>
+              </>
+            )}
+          </div>
+        </div>
+      </a>
+    </Link>
+  );
+};
diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx
new file mode 100644
index 00000000000..305f4980e56
--- /dev/null
+++ b/web/components/inbox/issues-list-sidebar.tsx
@@ -0,0 +1,45 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { InboxIssueCard, InboxFiltersList } from "components/inbox";
+// ui
+import { Loader } from "@plane/ui";
+
+export const InboxIssuesListSidebar = observer(() => {
+  const router = useRouter();
+  const { inboxId, inboxIssueId } = router.query;
+
+  const { inboxIssues: inboxIssuesStore } = useMobxStore();
+
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <InboxFiltersList />
+      {issuesList ? (
+        issuesList.length > 0 ? (
+          <div className="divide-y divide-custom-border-200 overflow-auto h-full">
+            {issuesList.map((issue) => (
+              <InboxIssueCard key={issue.id} active={issue.issue_inbox[0].id === inboxIssueId} issue={issue} />
+            ))}
+          </div>
+        ) : (
+          <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
+            {/* TODO: add filtersLength logic here */}
+            {/* {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} */}
+          </div>
+        )
+      ) : (
+        <Loader className="p-4 space-y-4">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/inbox/main-content.tsx b/web/components/inbox/main-content.tsx
new file mode 100644
index 00000000000..02ead34cb43
--- /dev/null
+++ b/web/components/inbox/main-content.tsx
@@ -0,0 +1,262 @@
+import { useCallback, useEffect } from "react";
+import Router, { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useForm } from "react-hook-form";
+import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
+import { InboxIssueActivity } from "components/inbox";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IInboxIssue, IIssue } from "types";
+
+const defaultValues: Partial<IInboxIssue> = {
+  name: "",
+  description_html: "",
+  assignees: [],
+  priority: "low",
+  target_date: new Date().toString(),
+  labels: [],
+};
+
+export const InboxMainContent: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
+
+  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const userRole = userStore.currentProjectRole;
+
+  const { reset, control, watch } = useForm<IIssue>({
+    defaultValues,
+  });
+
+  useSWR(
+    workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null,
+    workspaceSlug && projectId && inboxId && inboxIssueId
+      ? () =>
+          inboxIssueDetailsStore.fetchIssueDetails(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            inboxId.toString(),
+            inboxIssueId.toString()
+          )
+      : null
+  );
+
+  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
+  const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined;
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IInboxIssue>) => {
+      if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
+
+      await inboxIssueDetailsStore.updateIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        inboxId.toString(),
+        issueDetails.issue_inbox[0].id,
+        formData
+      );
+    },
+    [workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore]
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!issuesList || !inboxIssueId) return;
+
+      const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId);
+
+      switch (e.key) {
+        case "ArrowUp":
+          Router.push({
+            pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
+            query: {
+              inboxIssueId:
+                currentIssueIndex === 0
+                  ? issuesList[issuesList.length - 1].issue_inbox[0].id
+                  : issuesList[currentIssueIndex - 1].issue_inbox[0].id,
+            },
+          });
+          break;
+        case "ArrowDown":
+          Router.push({
+            pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
+            query: {
+              inboxIssueId:
+                currentIssueIndex === issuesList.length - 1
+                  ? issuesList[0].issue_inbox[0].id
+                  : issuesList[currentIssueIndex + 1].issue_inbox[0].id,
+            },
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [workspaceSlug, projectId, inboxIssueId, inboxId, issuesList]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+
+  useEffect(() => {
+    if (!issueDetails || !inboxIssueId) return;
+
+    reset({
+      ...issueDetails,
+      assignees: issueDetails.assignees ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
+      labels: issueDetails.labels ?? issueDetails.labels,
+    });
+  }, [issueDetails, reset, inboxIssueId]);
+
+  const issueStatus = issueDetails?.issue_inbox[0].status;
+
+  if (!inboxIssueId)
+    return (
+      <div className="h-full p-4 grid place-items-center text-custom-text-200">
+        <div className="grid h-full place-items-center">
+          <div className="my-5 flex flex-col items-center gap-4">
+            <Inbox size={60} strokeWidth={1.5} />
+            {issuesList && issuesList.length > 0 ? (
+              <span className="text-custom-text-200">
+                {issuesList?.length} issues found. Select an issue from the sidebar to view its details.
+              </span>
+            ) : (
+              <span className="text-custom-text-200">No issues found</span>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+
+  return (
+    <>
+      {issueDetails ? (
+        <div className="flex h-full overflow-auto divide-x">
+          <div className="basis-2/3 h-full overflow-auto p-5 space-y-3">
+            <div
+              className={`flex items-center gap-2 p-3 text-sm border rounded-md ${
+                issueStatus === -2
+                  ? "text-yellow-500 border-yellow-500 bg-yellow-500/10"
+                  : issueStatus === -1
+                  ? "text-red-500 border-red-500 bg-red-500/10"
+                  : issueStatus === 0
+                  ? new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date()
+                    ? "text-red-500 border-red-500 bg-red-500/10"
+                    : "text-custom-text-200 border-gray-500 bg-gray-500/10"
+                  : issueStatus === 1
+                  ? "text-green-500 border-green-500 bg-green-500/10"
+                  : issueStatus === 2
+                  ? "text-custom-text-200 border-gray-500 bg-gray-500/10"
+                  : ""
+              }`}
+            >
+              {issueStatus === -2 ? (
+                <>
+                  <AlertTriangle size={18} strokeWidth={2} />
+                  <p>This issue is still pending.</p>
+                </>
+              ) : issueStatus === -1 ? (
+                <>
+                  <XCircle size={18} strokeWidth={2} />
+                  <p>This issue has been declined.</p>
+                </>
+              ) : issueStatus === 0 ? (
+                <>
+                  <Clock size={18} strokeWidth={2} />
+                  {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
+                    <p>
+                      This issue was snoozed till{" "}
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
+                    </p>
+                  ) : (
+                    <p>
+                      This issue has been snoozed till{" "}
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
+                    </p>
+                  )}
+                </>
+              ) : issueStatus === 1 ? (
+                <>
+                  <CheckCircle2 size={18} strokeWidth={2} />
+                  <p>This issue has been accepted.</p>
+                </>
+              ) : issueStatus === 2 ? (
+                <>
+                  <Copy size={18} strokeWidth={2} />
+                  <p className="flex items-center gap-1">
+                    This issue has been marked as a duplicate of
+                    <a
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issueDetails.issue_inbox[0].duplicate_to}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="underline flex items-center gap-2"
+                    >
+                      this issue <ExternalLink size={12} strokeWidth={2} />
+                    </a>
+                    .
+                  </p>
+                </>
+              ) : null}
+            </div>
+            <div>
+              <IssueDescriptionForm
+                workspaceSlug={workspaceSlug as string}
+                issue={{
+                  name: issueDetails.name,
+                  description_html: issueDetails.description_html,
+                }}
+                handleFormSubmit={submitChanges}
+                isAllowed={userRole === 15 || userRole === 20 || user?.id === issueDetails.created_by}
+              />
+            </div>
+
+            <IssueReaction projectId={projectId} workspaceSlug={workspaceSlug} issueId={issueDetails.id} />
+
+            <InboxIssueActivity issueDetails={issueDetails} />
+          </div>
+
+          <div className="basis-1/3 space-y-5 border-custom-border-200 py-5">
+            <IssueDetailsSidebar
+              control={control}
+              issueDetail={issueDetails}
+              submitChanges={submitChanges}
+              watch={watch}
+              fieldsToShow={["assignee", "priority", "estimate", "dueDate", "label", "state"]}
+            />
+          </div>
+        </div>
+      ) : (
+        <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>
+      )}
+    </>
+  );
+});
diff --git a/apps/app/components/inbox/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
similarity index 81%
rename from apps/app/components/inbox/accept-issue-modal.tsx
rename to web/components/inbox/modals/accept-issue-modal.tsx
index be557536ba7..11ff416b2bd 100644
--- a/apps/app/components/inbox/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircle } from "lucide-react";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
 type Props = {
+  data: IInboxIssue;
   isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
+  onClose: () => void;
   onSubmit: () => Promise<void>;
 };
 
-export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
+export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
   const [isAccepting, setIsAccepting] = useState(false);
 
-  const onClose = () => {
+  const handleClose = () => {
     setIsAccepting(false);
-    handleClose();
+    onClose();
   };
 
   const handleAccept = () => {
@@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -60,7 +59,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                 <div 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-green-500/20 p-4">
-                      <CheckCircleIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
+                      <CheckCircle className="h-6 w-6 text-green-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Accept Issue</h3>
@@ -76,10 +75,12 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleAccept} loading={isAccepting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleAccept} loading={isAccepting}>
                       {isAccepting ? "Accepting..." : "Accept Issue"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
new file mode 100644
index 00000000000..a468580f4e5
--- /dev/null
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -0,0 +1,188 @@
+import React, { useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { Controller, useForm } from "react-hook-form";
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// components
+import { IssuePrioritySelect } from "components/issues/select";
+// ui
+import { Button, Input, ToggleSwitch } from "@plane/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description_html: "<p></p>",
+  parent: null,
+  priority: "none",
+};
+
+// services
+const fileService = new FileService();
+
+export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose } = props;
+
+  // states
+  const [createMore, setCreateMore] = useState(false);
+
+  const editorRef = useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm({ defaultValues });
+
+  const handleClose = () => {
+    onClose();
+    reset(defaultValues);
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    await inboxIssueDetailsStore
+      .createIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), formData)
+      .then((res) => {
+        if (!createMore) {
+          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`);
+          handleClose();
+        } else reset(defaultValues);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={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 rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <form onSubmit={handleSubmit(handleFormSubmit)}>
+                  <div className="space-y-5">
+                    <h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
+                    <div className="space-y-3">
+                      <div className="mt-2 space-y-3">
+                        <div>
+                          <Controller
+                            control={control}
+                            name="name"
+                            rules={{
+                              required: "Title is required",
+                              maxLength: {
+                                value: 255,
+                                message: "Title should be less than 255 characters",
+                              },
+                            }}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="name"
+                                name="name"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.name)}
+                                placeholder="Title"
+                                className="resize-none text-xl w-full"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div>
+                          <Controller
+                            name="description_html"
+                            control={control}
+                            render={({ field: { value, onChange } }) => (
+                              <RichTextEditorWithRef
+                                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                                deleteFile={fileService.deleteImage}
+                                ref={editorRef}
+                                debouncedUpdatesEnabled={false}
+                                value={!value || value === "" ? "<p></p>" : value}
+                                customClassName="min-h-[150px]"
+                                onChange={(description, description_html: string) => {
+                                  onChange(description_html);
+                                }}
+                              />
+                            )}
+                          />
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Controller
+                            control={control}
+                            name="priority"
+                            render={({ field: { value, onChange } }) => (
+                              <IssuePrioritySelect value={value ?? "none"} onChange={onChange} />
+                            )}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+                    <div
+                      className="flex cursor-pointer items-center gap-1"
+                      onClick={() => setCreateMore((prevData) => !prevData)}
+                    >
+                      <span className="text-xs">Create more</span>
+                      <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button variant="neutral-primary" onClick={() => handleClose()}>
+                        Discard
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
+                        {isSubmitting ? "Adding Issue..." : "Add Issue"}
+                      </Button>
+                    </div>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/apps/app/components/inbox/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
similarity index 79%
rename from apps/app/components/inbox/decline-issue-modal.tsx
rename to web/components/inbox/modals/decline-issue-modal.tsx
index b3168915a56..50fccdd7418 100644
--- a/apps/app/components/inbox/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
 type Props = {
+  data: IInboxIssue;
   isOpen: boolean;
-  handleClose: () => void;
-  data: IInboxIssue | undefined;
+  onClose: () => void;
   onSubmit: () => Promise<void>;
 };
 
-export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => {
+export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
   const [isDeclining, setIsDeclining] = useState(false);
 
-  const onClose = () => {
+  const handleClose = () => {
     setIsDeclining(false);
-    handleClose();
+    onClose();
   };
 
   const handleDecline = () => {
@@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -60,10 +59,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <div 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">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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">Decline Issue</h3>
@@ -79,10 +75,12 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDecline} loading={isDeclining}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDecline} loading={isDeclining}>
                       {isDeclining ? "Declining..." : "Decline Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
new file mode 100644
index 00000000000..e6adc4ebf80
--- /dev/null
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IInboxIssue } from "types";
+
+type Props = {
+  data: IInboxIssue;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, data }) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsDeleting(false);
+    onClose();
+  };
+
+  const handleDelete = () => {
+    if (!workspaceSlug || !projectId || !inboxId) return;
+
+    setIsDeleting(true);
+
+    inboxIssueDetailsStore
+      .deleteIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), data.issue_inbox[0].id)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "成功!",
+          message: "任务已成功删除",
+        });
+
+        // remove inboxIssueId from the url
+        router.push({
+          pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
+        });
+
+        handleClose();
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "任务无法删除。请重试。",
+        })
+      )
+      .finally(() => setIsDeleting(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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 Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data?.project_detail?.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? The issue will only be deleted from the inbox and this action cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
+                      {isDeleting ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/inbox/modals/index.ts b/web/components/inbox/modals/index.ts
new file mode 100644
index 00000000000..12ce68578b5
--- /dev/null
+++ b/web/components/inbox/modals/index.ts
@@ -0,0 +1,5 @@
+export * from "./accept-issue-modal";
+export * from "./create-issue-modal";
+export * from "./decline-issue-modal";
+export * from "./delete-issue-modal";
+export * from "./select-duplicate";
diff --git a/apps/app/components/inbox/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
similarity index 78%
rename from apps/app/components/inbox/select-duplicate.tsx
rename to web/components/inbox/modals/select-duplicate.tsx
index 0f076d73c8c..ac0c63a95cf 100644
--- a/apps/app/components/inbox/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,22 +1,16 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// react-hook-form
-import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
-// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+
 // hooks
 import useToast from "hooks/use-toast";
 // services
-import issuesServices from "services/issues.service";
+import { IssueService } from "services/issue";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Search } from "lucide-react";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -27,6 +21,8 @@ type Props = {
   onSubmit: (issueId: string) => void;
 };
 
+const issueService = new IssueService();
+
 export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, onSubmit, value } = props;
 
@@ -39,12 +35,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, issueId } = router.query;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
     workspaceSlug && projectId
       ? () =>
-          issuesServices
+          issueService
             .getIssues(workspaceSlug as string, projectId as string)
             .then((res) => res.filter((issue) => issue.id !== issueId))
       : null
@@ -71,8 +65,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
     handleClose();
   };
 
-  const filteredIssues =
-    (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? [];
+  const filteredIssues = (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? [];
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
@@ -109,7 +102,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                     }}
                   >
                     <div className="relative m-1">
-                      <MagnifyingGlassIcon
+                      <Search
                         className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
@@ -128,9 +121,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
-                              选择任务
-                            </h2>
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>
                           )}
                           <ul className="text-sm text-custom-text-100">
                             {filteredIssues.map((issue) => (
@@ -140,9 +131,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                 value={issue.id}
                                 className={({ active, selected }) =>
                                   `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                    active || selected
-                                      ? "bg-custom-background-80 text-custom-text-100"
-                                      : ""
+                                    active || selected ? "bg-custom-background-80 text-custom-text-100" : ""
                                   } `
                                 }
                               >
@@ -154,11 +143,8 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                     }}
                                   />
                                   <span className="flex-shrink-0 text-xs text-custom-text-200">
-                                    {
-                                      issues?.find((i) => i.id === issue.id)?.project_detail
-                                        ?.identifier
-                                    }
-                                    -{issue.sequence_id}
+                                    {issues?.find((i) => i.id === issue.id)?.project_detail?.identifier}-
+                                    {issue.sequence_id}
                                   </span>
                                   <span className="text-custom-text-200">{issue.name}</span>
                                 </div>
@@ -168,13 +154,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                         </li>
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="56" width="56" />
+                          <LayersIcon height="56" width="56" />
                           <h3 className="text-sm text-custom-text-200">
-                            未找到任务。用 {" "}创建新任务
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">
-                              C
-                            </pre>
-                            .
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
@@ -183,8 +166,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={handleSubmit}>Mark as original</PrimaryButton>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" onClick={handleSubmit}>
+                        Mark as original
+                      </Button>
                     </div>
                   )}
                 </Dialog.Panel>
diff --git a/apps/app/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
similarity index 75%
rename from apps/app/components/integration/delete-import-modal.tsx
rename to web/components/integration/delete-import-modal.tsx
index 63b11bfe5a8..49f9e5c2819 100644
--- a/apps/app/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -7,15 +7,15 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations/integration.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
-import { ICurrentUserResponse, IImporterService } from "types";
+import { IUser, IImporterService } from "types";
 // fetch-keys
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
@@ -23,9 +23,12 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const integrationService = new IntegrationService();
+
 export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
@@ -46,12 +49,13 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
       false
     );
 
-    IntegrationService.deleteImporterService(workspaceSlug as string, data.service, data.id, user)
+    integrationService
+      .deleteImporterService(workspaceSlug as string, data.service, data.id, user)
       .catch(() =>
         setToastAlert({
           type: "error",
-          title: "错误!",
-          message: "出错了。请重试。",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
         })
       )
       .finally(() => {
@@ -92,50 +96,48 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <div 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">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-500"
-                        aria-hidden="true"
-                      />
+                      <AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">删除项目</h3>
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
                     </span>
                   </div>
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-custom-text-100">
-                        {data?.service}
-                      </span>
-                      ? All of the data related to the import will be permanently removed. This
-                      action cannot be undone.
+                      <span className="break-words font-semibold capitalize text-custom-text-100">{data?.service}</span>
+                      ? All of the data related to the import will be permanently removed. This action cannot be undone.
                     </p>
                   </span>
                   <div>
                     <p className="text-sm text-custom-text-200">
-                      要确认，请在下面键入{" "}
-                      <span className="font-medium text-custom-text-100">删除导入</span> :
+                      To confirm, type <span className="font-medium text-custom-text-100">delete import</span> below:
                     </p>
                     <Input
+                      id="typeDelete"
                       type="text"
                       name="typeDelete"
-                      className="mt-2"
+                      value=""
                       onChange={(e) => {
-                        if (e.target.value === "删除导入") setConfirmDeleteImport(true);
+                        if (e.target.value === "delete import") setConfirmDeleteImport(true);
                         else setConfirmDeleteImport(false);
                       }}
                       placeholder="Enter 'delete import'"
+                      className="mt-2 w-full"
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>取消</SecondaryButton>
-                    <DangerButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={handleDeletion}
                       disabled={!confirmDeleteImport}
                       loading={deleteLoading}
                     >
-                      {deleteLoading ? "删除中..." : "删除项目"}
-                    </DangerButton>
+                      {deleteLoading ? "Deleting..." : "Delete Project"}
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/integration/github/auth.tsx b/web/components/integration/github/auth.tsx
new file mode 100644
index 00000000000..c94bfacd572
--- /dev/null
+++ b/web/components/integration/github/auth.tsx
@@ -0,0 +1,29 @@
+// hooks
+import useIntegrationPopup from "hooks/use-integration-popup";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { IWorkspaceIntegration } from "types";
+
+type Props = {
+  workspaceIntegration: false | IWorkspaceIntegration | undefined;
+  provider: string | undefined;
+};
+
+export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider }) => {
+  const { startAuth, isConnecting } = useIntegrationPopup(provider);
+
+  return (
+    <div>
+      {workspaceIntegration && workspaceIntegration?.id ? (
+        <Button variant="primary" disabled>
+          Successfully Connected
+        </Button>
+      ) : (
+        <Button variant="primary" onClick={startAuth} loading={isConnecting}>
+          {isConnecting ? "Connecting..." : "Connect"}
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
similarity index 87%
rename from apps/app/components/integration/github/import-configure.tsx
rename to web/components/integration/github/import-configure.tsx
index ca5a55a77d3..f804d32dddb 100644
--- a/apps/app/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -1,7 +1,6 @@
 // components
+import { Button } from "@plane/ui";
 import { GithubAuth, TIntegrationSteps } from "components/integration";
-// ui
-import { PrimaryButton } from "components/ui";
 // types
 import { IAppIntegration, IWorkspaceIntegration } from "types";
 
@@ -20,9 +19,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
 }) => {
   // current integration from all the integrations available
   const integration =
-    appIntegrations &&
-    appIntegrations.length > 0 &&
-    appIntegrations.find((i) => i.provider === provider);
+    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
 
   // current integration from workspace integrations
   const workspaceIntegration =
@@ -44,12 +41,13 @@ export const GithubImportConfigure: React.FC<Props> = ({
       </div>
 
       <div className="flex items-center justify-end">
-        <PrimaryButton
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-data")}
           disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
new file mode 100644
index 00000000000..65f3e82b2e6
--- /dev/null
+++ b/web/components/integration/github/import-confirm.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { TFormValues, TIntegrationSteps } from "components/integration";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  watch: UseFormWatch<TFormValues>;
+};
+
+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{'" '}
+      to complete the process.
+    </h4>
+    <div className="mt-6 flex items-center justify-between">
+      <Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
+        Back
+      </Button>
+      <Button variant="primary" type="submit">
+        Confirm & Import
+      </Button>
+    </div>
+  </div>
+);
diff --git a/apps/app/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
similarity index 76%
rename from apps/app/components/integration/github/import-data.tsx
rename to web/components/integration/github/import-data.tsx
index eeae3f28de1..53592420dcd 100644
--- a/apps/app/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -1,13 +1,13 @@
 import { FC } from "react";
-
-// react-hook-form
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
-// hooks
-import useProjects from "hooks/use-projects";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -20,8 +20,15 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
-  const { projects } = useProjects();
+export const GithubImportData: FC<Props> = observer((props) => {
+  const { handleStepChange, integration, control, watch } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const options = projects
     ? projects.map((project) => ({
@@ -51,11 +58,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                     integration={integration}
                     value={value ? value.id : null}
                     label={
-                      value ? (
-                        `${value.full_name}`
-                      ) : (
-                        <span className="text-custom-text-200">Select Repository</span>
-                      )
+                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
                     }
                     onChange={onChange}
                     characterLimit={50}
@@ -68,9 +71,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <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 issues to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {projects && (
@@ -99,9 +100,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <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>
+            <p className="text-xs text-custom-text-200">Set whether you want to sync the issues or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
@@ -115,14 +114,17 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("repo-details")}
           disabled={!watch("github") || !watch("project")}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
new file mode 100644
index 00000000000..ad06544387c
--- /dev/null
+++ b/web/components/integration/github/import-users.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { IUserDetails, SingleUserSelect, TFormValues, TIntegrationSteps } from "components/integration";
+
+type Props = {
+  handleStepChange: (value: TIntegrationSteps) => void;
+  users: IUserDetails[];
+  setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
+  watch: UseFormWatch<TFormValues>;
+};
+
+export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
+  const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
+
+  return (
+    <div className="mt-6">
+      <div>
+        <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
+          <div className="text-custom-text-200">Name</div>
+          <div className="text-custom-text-200">Import as...</div>
+          <div className="text-right">{users.filter((u) => u.import !== false).length} users selected</div>
+        </div>
+        <div className="space-y-2">
+          {watch("collaborators").map((collaborator, index) => (
+            <SingleUserSelect
+              key={collaborator.id}
+              collaborator={collaborator}
+              index={index}
+              users={users}
+              setUsers={setUsers}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-2">
+        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
+          Back
+        </Button>
+        <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/integration/github/index.ts b/web/components/integration/github/index.ts
similarity index 100%
rename from apps/app/components/integration/github/index.ts
rename to web/components/integration/github/index.ts
diff --git a/apps/app/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
similarity index 81%
rename from apps/app/components/integration/github/repo-details.tsx
rename to web/components/integration/github/repo-details.tsx
index 8a9c9719375..70e462a1088 100644
--- a/apps/app/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -7,9 +7,9 @@ import useSWR from "swr";
 // react-hook-form
 import { UseFormSetValue } from "react-hook-form";
 // services
-import GithubIntegrationService from "services/integration/github.service";
+import { GithubIntegrationService } from "services/integrations";
 // ui
-import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // types
 import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
 // fetch-keys
@@ -22,22 +22,18 @@ type Props = {
   setValue: UseFormSetValue<TFormValues>;
 };
 
-export const GithubRepoDetails: FC<Props> = ({
-  selectedRepo,
-  handleStepChange,
-  setUsers,
-  setValue,
-}) => {
+// services
+const githubIntegrationService = new GithubIntegrationService();
+
+export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, setUsers, setValue }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: repoInfo } = useSWR(
-    workspaceSlug && selectedRepo
-      ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name)
-      : null,
+    workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name) : null,
     workspaceSlug && selectedRepo
       ? () =>
-          GithubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
+          githubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
             owner: selectedRepo.owner.login,
             repo: selectedRepo.name,
           })
@@ -92,13 +88,16 @@ export const GithubRepoDetails: FC<Props> = ({
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-data")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-users")}
           disabled={!repoInfo || repoInfo.issue_count === 0}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
new file mode 100644
index 00000000000..58687c8490d
--- /dev/null
+++ b/web/components/integration/github/root.tsx
@@ -0,0 +1,257 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import { IntegrationService, GithubIntegrationService } from "services/integrations";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  GithubImportConfigure,
+  GithubImportData,
+  GithubRepoDetails,
+  GithubImportUsers,
+  GithubImportConfirm,
+} from "components/integration";
+// icons
+import { UserGroupIcon } from "@plane/ui";
+import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
+// images
+import GithubLogo from "public/services/github.png";
+// types
+import { IUser, IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
+// fetch-keys
+import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm";
+export interface IIntegrationData {
+  state: TIntegrationSteps;
+}
+
+export interface IUserDetails {
+  username: string;
+  import: any;
+  email: string;
+}
+
+export type TFormValues = {
+  github: any;
+  project: string | null;
+  sync: boolean;
+  collaborators: IGithubRepoCollaborator[];
+  users: IUserDetails[];
+};
+
+const defaultFormValues = {
+  github: null,
+  project: null,
+  sync: false,
+};
+
+const integrationWorkflowData = [
+  {
+    title: "Configure",
+    key: "import-configure",
+    icon: Settings,
+  },
+  {
+    title: "Import Data",
+    key: "import-data",
+    icon: UploadCloud,
+  },
+  { title: "Issues", key: "repo-details", icon: List },
+  {
+    title: "Users",
+    key: "import-users",
+    icon: UserGroupIcon,
+  },
+  {
+    title: "Confirm",
+    key: "import-confirm",
+    icon: Check,
+  },
+];
+
+type Props = {
+  user: IUser | undefined;
+};
+
+// services
+const integrationService = new IntegrationService();
+const githubIntegrationService = new GithubIntegrationService();
+
+export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
+  const [currentStep, setCurrentStep] = useState<IIntegrationData>({
+    state: "import-configure",
+  });
+  const [users, setUsers] = useState<IUserDetails[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
+    defaultValues: defaultFormValues,
+  });
+
+  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => integrationService.getAppIntegrationsList());
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null
+  );
+
+  const activeIntegrationState = () => {
+    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
+
+    return currentElementIndex;
+  };
+
+  const handleStepChange = (value: TIntegrationSteps) => {
+    setCurrentStep((prevData) => ({ ...prevData, state: value }));
+  };
+
+  // current integration from all the integrations available
+  const integration =
+    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
+
+  // current integration from workspace integrations
+  const workspaceIntegration =
+    integration && workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
+
+  const createGithubImporterService = async (formData: TFormValues) => {
+    if (!formData.github || !formData.project) return;
+
+    const payload: IGithubServiceImportFormData = {
+      metadata: {
+        owner: formData.github.owner.login,
+        name: formData.github.name,
+        repository_id: formData.github.id,
+        url: formData.github.html_url,
+      },
+      data: {
+        users: users,
+      },
+      config: {
+        sync: formData.sync,
+      },
+      project_id: formData.project,
+    };
+
+    await githubIntegrationService
+      .createGithubServiceImport(workspaceSlug as string, payload, user)
+      .then(() => {
+        router.push(`/${workspaceSlug}/settings/imports`);
+        mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "导入不成功。请重试。",
+        })
+      );
+  };
+
+  return (
+    <form onSubmit={handleSubmit(createGithubImporterService)}>
+      <div className="space-y-2">
+        <Link href={`/${workspaceSlug}/settings/imports`}>
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
+            <ArrowLeft className="h-3 w-3" />
+            <div>Cancel import & go back</div>
+          </div>
+        </Link>
+
+        <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" />
+            </div>
+            <div className="flex h-full w-full items-center justify-center">
+              {integrationWorkflowData.map((integration, index) => (
+                <React.Fragment key={integration.key}>
+                  <div
+                    className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
+                      index <= activeIntegrationState()
+                        ? `border-custom-primary bg-custom-primary ${
+                            index === activeIntegrationState()
+                              ? "border-opacity-100 bg-opacity-100"
+                              : "border-opacity-80 bg-opacity-80"
+                          }`
+                        : "border-custom-border-200"
+                    }`}
+                  >
+                    <integration.icon
+                      width="18px"
+                      height="18px"
+                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                    />
+                  </div>
+                  {index < integrationWorkflowData.length - 1 && (
+                    <div
+                      key={index}
+                      className={`border-b px-7 ${
+                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                      }`}
+                    >
+                      {" "}
+                    </div>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative w-full space-y-4">
+            <div className="w-full">
+              {currentStep?.state === "import-configure" && (
+                <GithubImportConfigure
+                  handleStepChange={handleStepChange}
+                  provider={provider as string}
+                  appIntegrations={appIntegrations}
+                  workspaceIntegrations={workspaceIntegrations}
+                />
+              )}
+              {currentStep?.state === "import-data" && (
+                <GithubImportData
+                  handleStepChange={handleStepChange}
+                  integration={workspaceIntegration}
+                  control={control}
+                  watch={watch}
+                />
+              )}
+              {currentStep?.state === "repo-details" && (
+                <GithubRepoDetails
+                  selectedRepo={watch("github")}
+                  handleStepChange={handleStepChange}
+                  setUsers={setUsers}
+                  setValue={setValue}
+                />
+              )}
+              {currentStep?.state === "import-users" && (
+                <GithubImportUsers
+                  handleStepChange={handleStepChange}
+                  users={users}
+                  setUsers={setUsers}
+                  watch={watch}
+                />
+              )}
+              {currentStep?.state === "import-confirm" && (
+                <GithubImportConfirm handleStepChange={handleStepChange} watch={watch} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
similarity index 76%
rename from apps/app/components/integration/github/select-repository.tsx
rename to web/components/integration/github/select-repository.tsx
index 9857c0088ea..9d086c894e5 100644
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -1,17 +1,14 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWRInfinite from "swr/infinite";
-
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
-import { IWorkspaceIntegration, IGithubRepository } from "types";
+import { IWorkspaceIntegration } from "types";
 
 type Props = {
   integration: IWorkspaceIntegration;
@@ -21,22 +18,18 @@ type Props = {
   characterLimit?: number;
 };
 
-export const SelectRepository: React.FC<Props> = ({
-  integration,
-  value,
-  label,
-  onChange,
-  characterLimit = 25,
-}) => {
+const projectService = new ProjectService();
+
+export const SelectRepository: React.FC<Props> = (props) => {
+  const { integration, value, label, onChange, characterLimit = 25 } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const getKey = (pageIndex: number) => {
     if (!workspaceSlug || !integration) return;
 
-    return `${
-      process.env.NEXT_PUBLIC_API_BASE_URL
-    }/api/workspaces/${workspaceSlug}/workspace-integrations/${
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-integrations/${
       integration.id
     }/github-repositories/?page=${++pageIndex}`;
   };
@@ -47,12 +40,7 @@ export const SelectRepository: React.FC<Props> = ({
     return data;
   };
 
-  const {
-    data: paginatedData,
-    size,
-    setSize,
-    isValidating,
-  } = useSWRInfinite(getKey, fetchGithubRepos);
+  const { data: paginatedData, size, setSize, isValidating } = useSWRInfinite(getKey, fetchGithubRepos);
 
   let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
   userRepositories = userRepositories.filter((data) => data?.id);
@@ -66,6 +54,8 @@ export const SelectRepository: React.FC<Props> = ({
       content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
     })) ?? [];
 
+  if (userRepositories.length < 1) return null;
+
   return (
     <CustomSearchSelect
       value={value}
@@ -90,7 +80,6 @@ export const SelectRepository: React.FC<Props> = ({
           )}
         </>
       }
-      position="right"
       optionsClassName="w-full"
     />
   );
diff --git a/apps/app/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
similarity index 84%
rename from apps/app/components/integration/github/single-user-select.tsx
rename to web/components/integration/github/single-user-select.tsx
index 13671ac8930..0bba7b85d7d 100644
--- a/apps/app/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -1,11 +1,9 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // ui
-import { Avatar, CustomSearchSelect, CustomSelect, Input } from "components/ui";
+import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -34,13 +32,16 @@ const importOptions = [
   },
 ];
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: members } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
   );
 
   const options = members?.map((member) => ({
@@ -48,7 +49,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
         {member.member.display_name}
       </div>
     ),
@@ -69,11 +70,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       <div>
         <CustomSelect
           value={users[index].import}
-          label={
-            <div className="text-xs">
-              {importOptions.find((o) => o.key === users[index].import)?.label}
-            </div>
-          }
+          label={<div className="text-xs">{importOptions.find((o) => o.key === users[index].import)?.label}</div>}
           onChange={(val: any) => {
             const newUsers = [...users];
             newUsers[index].import = val;
@@ -92,6 +89,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       </div>
       {users[index].import === "invite" && (
         <Input
+          id="email"
           type="email"
           name={`userEmail${index}`}
           value={users[index].email}
@@ -101,7 +99,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
             setUsers(newUsers);
           }}
           placeholder="Enter email of the user"
-          className="py-1 text-xs"
+          className="py-1 text-xs w-full"
         />
       )}
       {users[index].import === "map" && members && (
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
new file mode 100644
index 00000000000..a0876e673c7
--- /dev/null
+++ b/web/components/integration/guide.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// services
+import { IntegrationService } from "services/integrations";
+// components
+import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
+// ui
+import { Button, Loader } from "@plane/ui";
+// icons
+import { RefreshCw } from "lucide-react";
+// types
+import { IImporterService } from "types";
+// fetch-keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+// constants
+import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
+
+// services
+const integrationService = new IntegrationService();
+
+const IntegrationGuide = () => {
+  const [refreshing, setRefreshing] = useState(false);
+  const [deleteImportModal, setDeleteImportModal] = useState(false);
+  const [importToDelete, setImportToDelete] = useState<IImporterService | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, provider } = router.query;
+
+  const { user } = useUserAuth();
+
+  const { data: importerServices } = useSWR(
+    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug as string) : null
+  );
+
+  const handleDeleteImport = (importService: IImporterService) => {
+    setImportToDelete(importService);
+    setDeleteImportModal(true);
+  };
+
+  return (
+    <>
+      <DeleteImportModal
+        isOpen={deleteImportModal}
+        handleClose={() => setDeleteImportModal(false)}
+        data={importToDelete}
+        user={user}
+      />
+      <div className="h-full">
+        {(!provider || provider === "csv") && (
+          <>
+            {/* <div className="mb-5 flex items-center gap-2">
+              <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.
+                </div>
+              </div>
+              <a
+                href="https://docs.plane.so/importers/github"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap text-sm font-medium text-[#3F76FF] hover:text-opacity-80">
+                  Read More
+                  <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
+                </div>
+              </a>
+            </div> */}
+            {IMPORTERS_EXPORTERS_LIST.map((service) => (
+              <div
+                key={service.provider}
+                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+              >
+                <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`} />
+                  </div>
+                  <div>
+                    <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
+                    <p className="text-sm text-custom-text-200 tracking-tight">{service.description}</p>
+                  </div>
+                </div>
+                <div className="flex-shrink-0">
+                  <Link href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}>
+                    <a>
+                      <Button variant="primary">{service.type}</Button>
+                    </a>
+                  </Link>
+                </div>
+              </div>
+            ))}
+            <div>
+              <div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-200">
+                <h3 className="flex gap-2 text-xl font-medium">
+                  Previous Imports
+                  <button
+                    type="button"
+                    className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
+                    onClick={() => {
+                      setRefreshing(true);
+                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() => setRefreshing(false));
+                    }}
+                  >
+                    <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                    {refreshing ? "Refreshing..." : "Refresh status"}
+                  </button>
+                </h3>
+              </div>
+              <div className="flex flex-col">
+                {importerServices ? (
+                  importerServices.length > 0 ? (
+                    <div className="space-y-2">
+                      <div className="divide-y divide-custom-border-200">
+                        {importerServices.map((service) => (
+                          <SingleImport
+                            key={service.id}
+                            service={service}
+                            refreshing={refreshing}
+                            handleDelete={() => handleDeleteImport(service)}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-custom-text-200 px-4 py-6">No previous imports available.</p>
+                  )
+                ) : (
+                  <Loader className="mt-6 grid grid-cols-1 gap-3">
+                    <Loader.Item height="40px" width="100%" />
+                    <Loader.Item height="40px" width="100%" />
+                    <Loader.Item height="40px" width="100%" />
+                    <Loader.Item height="40px" width="100%" />
+                  </Loader>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        {provider && provider === "github" && <GithubImporterRoot user={user} />}
+        {provider && provider === "jira" && <JiraImporterRoot user={user} />}
+      </div>
+    </>
+  );
+};
+
+export default IntegrationGuide;
diff --git a/apps/app/components/integration/index.ts b/web/components/integration/index.ts
similarity index 100%
rename from apps/app/components/integration/index.ts
rename to web/components/integration/index.ts
diff --git a/apps/app/components/integration/jira/confirm-import.tsx b/web/components/integration/jira/confirm-import.tsx
similarity index 100%
rename from apps/app/components/integration/jira/confirm-import.tsx
rename to web/components/integration/jira/confirm-import.tsx
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
new file mode 100644
index 00000000000..622517439aa
--- /dev/null
+++ b/web/components/integration/jira/give-details.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { useFormContext, Controller } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { Plus } from "lucide-react";
+// components
+import { CustomSelect, Input } from "@plane/ui";
+// types
+import { IJiraImporterForm } from "types";
+
+export const JiraGetImportDetail: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<IJiraImporterForm>();
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  return (
+    <div className="h-full w-full space-y-8 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="font-semibold">Jira Personal Access Token</h3>
+          <p className="text-sm text-custom-text-200">
+            Get to know your access token by navigating to{" "}
+            <Link href="https://id.atlassian.com/manage-profile/security/api-tokens">
+              <a className="text-custom-primary underline" target="_blank" rel="noreferrer">
+                Atlassian Settings
+              </a>
+            </Link>
+          </p>
+        </div>
+
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="metadata.api_token"
+            rules={{
+              required: "Please enter your personal access token.",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.api_token"
+                name="metadata.api_token"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                placeholder="XXXXXXXX"
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <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>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="metadata.project_key"
+            rules={{
+              required: "Please enter your project key.",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.project_key"
+                name="metadata.project_key"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.project_key)}
+                placeholder="LIN"
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="font-semibold">Jira Email Address</h3>
+          <p className="text-sm text-custom-text-200">Enter the Gmail account that you use in Jira account</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="metadata.email"
+            rules={{
+              required: "Please enter email address.",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.email"
+                name="metadata.email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.email)}
+                placeholder="name@company.com"
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="font-semibold">Jira Installation or Cloud Host Name</h3>
+          <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="metadata.cloud_hostname"
+            rules={{
+              required: "Please enter your cloud host name.",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.cloud_hostname"
+                name="metadata.cloud_hostname"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.cloud_hostname)}
+                placeholder="my-company.atlassian.net"
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="font-semibold">Import to project</h3>
+          <p className="text-sm text-custom-text-200">Select which project you want to import to.</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="project_id"
+            rules={{ required: "Please select a project." }}
+            render={({ field: { value, onChange } }) => (
+              <CustomSelect
+                value={value}
+                input
+                width="w-full"
+                onChange={onChange}
+                label={
+                  <span>
+                    {value && value !== "" ? (
+                      projects?.find((p) => p.id === value)?.name
+                    ) : (
+                      <span className="text-custom-text-200">Select a project</span>
+                    )}
+                  </span>
+                }
+              >
+                {projects && projects.length > 0 ? (
+                  projects.map((project) => (
+                    <CustomSelect.Option key={project.id} value={project.id}>
+                      {project.name}
+                    </CustomSelect.Option>
+                  ))
+                ) : (
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
+                    <p>You don{"'"}t have any project. Please create a project first.</p>
+                  </div>
+                )}
+                <div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const event = new KeyboardEvent("keydown", { key: "p" });
+                      document.dispatchEvent(event);
+                    }}
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
+                  >
+                    <Plus className="h-4 w-4 text-custom-text-200" />
+                    <span>Create new project</span>
+                  </button>
+                </div>
+              </CustomSelect>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
new file mode 100644
index 00000000000..93e0e0ec039
--- /dev/null
+++ b/web/components/integration/jira/import-users.tsx
@@ -0,0 +1,141 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { useFormContext, useFieldArray, Controller } from "react-hook-form";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// ui
+import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
+// types
+import { IJiraImporterForm } from "types";
+// fetch keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+
+const workspaceService = new WorkspaceService();
+
+export const JiraImportUsers: FC = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // form info
+  const {
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext<IJiraImporterForm>();
+
+  const { fields } = useFieldArray({
+    control,
+    name: "data.users",
+  });
+
+  const { data: members } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug?.toString() ?? "") : null,
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug?.toString() ?? "") : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.email,
+    query: member.member.display_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  return (
+    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
+        <div className="col-span-1">
+          <h3 className="font-semibold">Users</h3>
+          <p className="text-sm text-custom-text-200">Update, invite or choose not to invite assignee</p>
+        </div>
+        <div className="col-span-1">
+          <Controller
+            control={control}
+            name="data.invite_users"
+            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
+          />
+        </div>
+      </div>
+
+      {watch("data.invite_users") && (
+        <div className="pt-6">
+          <div className="grid grid-cols-3 gap-3">
+            <div className="col-span-1 text-sm text-custom-text-200">Name</div>
+            <div className="col-span-1 text-sm text-custom-text-200">Import as</div>
+          </div>
+
+          <div className="mt-5 space-y-3">
+            {fields.map((user, index) => (
+              <div className="grid grid-cols-3 gap-3" key={`${user.email}-${user.username}`}>
+                <div className="col-span-1">
+                  <p>{user.username}</p>
+                </div>
+                <div className="col-span-1">
+                  <Controller
+                    control={control}
+                    name={`data.users.${index}.import`}
+                    render={({ field: { value, onChange } }) => (
+                      <CustomSelect
+                        input
+                        value={value}
+                        onChange={onChange}
+                        width="w-full"
+                        label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
+                      >
+                        <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
+                        <CustomSelect.Option value="map">Map to existing</CustomSelect.Option>
+                        <CustomSelect.Option value={false}>Do not import</CustomSelect.Option>
+                      </CustomSelect>
+                    )}
+                  />
+                </div>
+                <div className="col-span-1">
+                  {watch(`data.users.${index}.import`) === "invite" && (
+                    <Controller
+                      control={control}
+                      name={`data.users.${index}.email`}
+                      rules={{
+                        required: "This field is required",
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id={`data.users.${index}.email`}
+                          name={`data.users.${index}.email`}
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.data?.users?.[index]?.email)}
+                          className="w-full"
+                        />
+                      )}
+                    />
+                  )}
+                  {watch(`data.users.${index}.import`) === "map" && (
+                    <Controller
+                      control={control}
+                      name={`data.users.${index}.email`}
+                      render={({ field: { value, onChange } }) => (
+                        <CustomSearchSelect
+                          value={value}
+                          input
+                          label={value !== "" ? value : "Select user from project"}
+                          options={options}
+                          onChange={onChange}
+                          optionsClassName="w-full"
+                        />
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/integration/jira/index.ts b/web/components/integration/jira/index.ts
similarity index 100%
rename from apps/app/components/integration/jira/index.ts
rename to web/components/integration/jira/index.ts
diff --git a/apps/app/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
similarity index 94%
rename from apps/app/components/integration/jira/jira-project-detail.tsx
rename to web/components/integration/jira/jira-project-detail.tsx
index 88803727cf4..ac8eb3e904d 100644
--- a/apps/app/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 import { useFormContext, Controller } from "react-hook-form";
 
 // services
-import jiraImporterService from "services/integration/jira.service";
+import { JiraImporterService } from "services/integrations";
 
 // fetch keys
 import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
@@ -18,15 +18,18 @@ import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
 import { IJiraImporterForm, IJiraMetadata } from "types";
 
 // components
-import { Spinner, ToggleSwitch } from "components/ui";
+import { ToggleSwitch, Spinner } from "@plane/ui";
 
-import type { IJiraIntegrationData, TJiraIntegrationSteps } from "./";
+import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
 
 type Props = {
   setCurrentStep: React.Dispatch<React.SetStateAction<IJiraIntegrationData>>;
   setDisableTopBarAfter: React.Dispatch<React.SetStateAction<TJiraIntegrationSteps | null>>;
 };
 
+// services
+const jiraImporterService = new JiraImporterService();
+
 export const JiraProjectDetail: React.FC<Props> = (props) => {
   const { setCurrentStep, setDisableTopBarAfter } = props;
 
@@ -157,9 +160,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
           <Controller
             control={control}
             name="config.epics_to_modules"
-            render={({ field: { value, onChange } }) => (
-              <ToggleSwitch onChange={onChange} value={value} />
-            )}
+            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
           />
         </div>
       </div>
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
new file mode 100644
index 00000000000..9ebb68b7b6f
--- /dev/null
+++ b/web/components/integration/jira/root.tsx
@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+
+// next
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// swr
+import { mutate } from "swr";
+
+// react hook form
+import { FormProvider, useForm } from "react-hook-form";
+
+// icons
+import { ArrowLeft, Check, List, Settings } from "lucide-react";
+
+// services
+import { JiraImporterService } from "services/integrations";
+
+// fetch keys
+import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
+
+// components
+import { Button, UserGroupIcon } from "@plane/ui";
+import {
+  JiraGetImportDetail,
+  JiraProjectDetail,
+  JiraImportUsers,
+  JiraConfirmImport,
+  jiraFormDefaultValues,
+  TJiraIntegrationSteps,
+  IJiraIntegrationData,
+} from ".";
+
+import JiraLogo from "public/services/jira.png";
+
+import { IUser, IJiraImporterForm } from "types";
+
+const integrationWorkflowData: Array<{
+  title: string;
+  key: TJiraIntegrationSteps;
+  icon: any;
+}> = [
+  {
+    title: "Configure",
+    key: "import-configure",
+    icon: Settings,
+  },
+  {
+    title: "Import Data",
+    key: "display-import-data",
+    icon: List,
+  },
+  {
+    title: "Users",
+    key: "import-users",
+    icon: UserGroupIcon,
+  },
+  {
+    title: "Confirm",
+    key: "import-confirmation",
+    icon: Check,
+  },
+];
+
+type Props = {
+  user: IUser | undefined;
+};
+
+// services
+const jiraImporterService = new JiraImporterService();
+
+export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
+  const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
+    state: "import-configure",
+  });
+  const [disableTopBarAfter, setDisableTopBarAfter] = useState<TJiraIntegrationSteps | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const methods = useForm<IJiraImporterForm>({
+    defaultValues: jiraFormDefaultValues,
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const isValid = methods.formState.isValid;
+
+  const onSubmit = async (data: IJiraImporterForm) => {
+    if (!workspaceSlug) return;
+
+    await jiraImporterService
+      .createJiraImporter(workspaceSlug.toString(), data, user)
+      .then(() => {
+        mutate(IMPORTER_SERVICES_LIST(workspaceSlug.toString()));
+        router.push(`/${workspaceSlug}/settings/imports`);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const activeIntegrationState = () => {
+    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
+
+    return currentElementIndex;
+  };
+
+  return (
+    <div className="flex h-full flex-col space-y-2">
+      <Link href={`/${workspaceSlug}/settings/imports`}>
+        <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
+          <div>
+            <ArrowLeft className="h-3 w-3" />
+          </div>
+          <div>Cancel import & go back</div>
+        </div>
+      </Link>
+
+      <div className="flex h-full flex-col 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={JiraLogo} alt="jira logo" />
+          </div>
+          <div className="flex h-full w-full items-center justify-center">
+            {integrationWorkflowData.map((integration, index) => (
+              <React.Fragment key={integration.key}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setCurrentStep({ state: integration.key });
+                  }}
+                  disabled={
+                    index > activeIntegrationState() + 1 ||
+                    Boolean(index === activeIntegrationState() + 1 && disableTopBarAfter)
+                  }
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-custom-border-200 ${
+                    index <= activeIntegrationState()
+                      ? `border-custom-primary bg-custom-primary ${
+                          index === activeIntegrationState()
+                            ? "border-opacity-100 bg-opacity-100"
+                            : "border-opacity-80 bg-opacity-80"
+                        }`
+                      : "border-custom-border-200"
+                  }`}
+                >
+                  <integration.icon
+                    width="18px"
+                    height="18px"
+                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
+                  />
+                </button>
+                {index < integrationWorkflowData.length - 1 && (
+                  <div
+                    key={index}
+                    className={`border-b px-7 ${
+                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                    }`}
+                  >
+                    {" "}
+                  </div>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+
+        <div className="relative h-full w-full pt-6">
+          <FormProvider {...methods}>
+            <form className="flex h-full w-full flex-col">
+              <div className="h-full w-full overflow-y-auto">
+                {currentStep.state === "import-configure" && <JiraGetImportDetail />}
+                {currentStep.state === "display-import-data" && (
+                  <JiraProjectDetail setDisableTopBarAfter={setDisableTopBarAfter} setCurrentStep={setCurrentStep} />
+                )}
+                {currentStep?.state === "import-users" && <JiraImportUsers />}
+                {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
+              </div>
+
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
+                {currentStep?.state !== "import-configure" && (
+                  <Button
+                    variant="neutral-primary"
+                    onClick={() => {
+                      const currentElementIndex = integrationWorkflowData.findIndex(
+                        (i) => i?.key === currentStep?.state
+                      );
+                      setCurrentStep({
+                        state: integrationWorkflowData[currentElementIndex - 1]?.key,
+                      });
+                    }}
+                  >
+                    Back
+                  </Button>
+                )}
+                <Button
+                  variant="primary"
+                  disabled={disableTopBarAfter === currentStep?.state || !isValid || methods.formState.isSubmitting}
+                  onClick={() => {
+                    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
+
+                    if (currentElementIndex === integrationWorkflowData.length - 1) {
+                      methods.handleSubmit(onSubmit)();
+                    } else {
+                      setCurrentStep({
+                        state: integrationWorkflowData[currentElementIndex + 1]?.key,
+                      });
+                    }
+                  }}
+                >
+                  {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
+                </Button>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
similarity index 89%
rename from apps/app/components/integration/single-import.tsx
rename to web/components/integration/single-import.tsx
index b74628a83bb..c5d1524a855 100644
--- a/apps/app/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,7 +1,7 @@
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { Trash2 } from "lucide-react";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -16,7 +16,7 @@ type Props = {
 };
 
 export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
-  <div className="flex items-center justify-between gap-2 py-3">
+  <div className="flex items-center justify-between gap-2 px-4 py-3">
     <div>
       <h4 className="flex items-center gap-2 text-sm">
         <span>
@@ -48,7 +48,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
     <CustomMenu ellipsis>
       <CustomMenu.MenuItem onClick={handleDelete}>
         <span className="flex items-center justify-start gap-2">
-          <TrashIcon className="h-3.5 w-3.5" />
+          <Trash2 className="h-3.5 w-3.5" />
           Delete import
         </span>
       </CustomMenu.MenuItem>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
new file mode 100644
index 00000000000..56c0c240878
--- /dev/null
+++ b/web/components/integration/single-integration-card.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import { IntegrationService } from "services/integrations";
+// hooks
+import useToast from "hooks/use-toast";
+import useIntegrationPopup from "hooks/use-integration-popup";
+// ui
+import { Button, Loader } from "@plane/ui";
+// icons
+import GithubLogo from "public/services/github.png";
+import SlackLogo from "public/services/slack.png";
+import { CheckCircle } from "lucide-react";
+// types
+import { IAppIntegration, IWorkspaceIntegration } from "types";
+// fetch-keys
+import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+type Props = {
+  integration: IAppIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    installed: "Activate GitHub on individual projects to sync with specific repositories.",
+    notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
+  },
+  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.",
+  },
+};
+
+// services
+const integrationService = new IntegrationService();
+
+export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider);
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = workspaceIntegrations?.find((i) => i.integration === integration.id)?.id;
+
+    setDeletingIntegration(true);
+
+    await integrationService
+      .deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
+      .then(() => {
+        mutate<IWorkspaceIntegration[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "success",
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
+      <div className="flex items-start gap-4">
+        <div className="h-10 w-10 flex-shrink-0">
+          <Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-2 text-sm font-medium">
+            {integration.title}
+            {workspaceIntegrations
+              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 text-white fill-green-500" />
+              : null}
+          </h3>
+          <p className="text-sm text-custom-text-200 tracking-tight">
+            {workspaceIntegrations
+              ? isInstalled
+                ? integrationDetails[integration.provider].installed
+                : integrationDetails[integration.provider].notInstalled
+              : "Loading..."}
+          </p>
+        </div>
+      </div>
+
+      {workspaceIntegrations ? (
+        isInstalled ? (
+          <Button variant="danger" onClick={handleRemoveIntegration} loading={deletingIntegration}>
+            {deletingIntegration ? "Uninstalling..." : "Uninstall"}
+          </Button>
+        ) : (
+          <Button variant="primary" onClick={startAuth} loading={isInstalling}>
+            {isInstalling ? "Installing..." : "Install"}
+          </Button>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/integration/slack/index.ts b/web/components/integration/slack/index.ts
new file mode 100644
index 00000000000..4ea6cd1e4b5
--- /dev/null
+++ b/web/components/integration/slack/index.ts
@@ -0,0 +1 @@
+export * from "./select-channel";
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
new file mode 100644
index 00000000000..fb5393f3a51
--- /dev/null
+++ b/web/components/integration/slack/select-channel.tsx
@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+// services
+import { AppInstallationService } from "services/app_installation.service";
+// ui
+import { Loader } from "@plane/ui";
+// hooks
+import useIntegrationPopup from "hooks/use-integration-popup";
+// types
+import { IWorkspaceIntegration, ISlackIntegration } from "types";
+// fetch-keys
+import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+const appInstallationService = new AppInstallationService();
+
+export const SelectChannel: React.FC<Props> = ({ integration }) => {
+  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
+  const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { startAuth } = useIntegrationPopup("slackChannel", integration.id);
+
+  const { data: projectIntegration } = useSWR(
+    workspaceSlug && projectId && integration.id
+      ? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
+      : null,
+    () =>
+      workspaceSlug && projectId && integration.id
+        ? appInstallationService.getSlackChannelDetail(
+            workspaceSlug as string,
+            projectId as string,
+            integration.id as string
+          )
+        : null
+  );
+
+  useEffect(() => {
+    if (projectId && projectIntegration && projectIntegration.length > 0) {
+      const projectSlackIntegrationCheck: ISlackIntegration | undefined = projectIntegration.find(
+        (_slack: ISlackIntegration) => _slack.project === projectId
+      );
+      if (projectSlackIntegrationCheck) {
+        setSlackChannel(() => projectSlackIntegrationCheck);
+        setSlackChannelAvailabilityToggle(true);
+      }
+    }
+  }, [projectIntegration, projectId]);
+
+  const handleDelete = async () => {
+    if (projectIntegration.length === 0) return;
+    mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
+      if (!prevData) return;
+      return prevData.id !== integration.id;
+    }).then(() => {
+      setSlackChannelAvailabilityToggle(false);
+      setSlackChannel(null);
+    });
+    appInstallationService
+      .removeSlackChannel(workspaceSlug as string, projectId as string, integration.id as string, slackChannel?.id)
+      .catch((err) => console.log(err));
+  };
+
+  const handleAuth = async () => {
+    await startAuth();
+  };
+
+  return (
+    <>
+      {projectIntegration ? (
+        <button
+          type="button"
+          className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-gray-700`}
+          role="switch"
+          aria-checked
+          onClick={() => {
+            slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={`self-center inline-block h-2 w-2 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+              slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
+            }`}
+          />
+        </button>
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
new file mode 100644
index 00000000000..b49e11972a3
--- /dev/null
+++ b/web/components/issues/activity.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// components
+import { ActivityIcon, ActivityMessage } from "components/core";
+import { CommentCard } from "components/issues/comment";
+// ui
+import { Loader, Tooltip } from "@plane/ui";
+// helpers
+import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+// types
+import { IIssueActivity, IIssueComment } from "types";
+import { History } from "lucide-react";
+
+type Props = {
+  activity: IIssueActivity[] | undefined;
+  handleCommentUpdate: (commentId: string, data: Partial<IIssueComment>) => Promise<void>;
+  handleCommentDelete: (commentId: string) => Promise<void>;
+  showAccessSpecifier?: boolean;
+};
+
+export const IssueActivitySection: React.FC<Props> = ({
+  activity,
+  handleCommentUpdate,
+  handleCommentDelete,
+  showAccessSpecifier = false,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  if (!activity)
+    return (
+      <Loader className="space-y-4">
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+        <div className="space-y-2">
+          <Loader.Item height="30px" width="40%" />
+          <Loader.Item height="15px" width="60%" />
+        </div>
+      </Loader>
+    );
+
+  return (
+    <div className="flow-root">
+      <ul role="list" className="-mb-4">
+        {activity.map((activityItem, index) => {
+          // determines what type of action is performed
+          const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
+
+          if ("field" in activityItem && activityItem.field !== "updated_by") {
+            return (
+              <li key={activityItem.id}>
+                <div className="relative pb-1">
+                  {activity.length > 1 && index !== activity.length - 1 ? (
+                    <span
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
+                      aria-hidden="true"
+                    />
+                  ) : null}
+                  <div className="relative flex items-start space-x-2">
+                    <div>
+                      <div className="relative px-1.5">
+                        <div className="mt-1.5">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
+                            {activityItem.field ? (
+                              activityItem.new_value === "restore" ? (
+                                <History className="h-3.5 w-3.5 text-custom-text-200" />
+                              ) : (
+                                <ActivityIcon activity={activityItem} />
+                              )
+                            ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                              <img
+                                src={activityItem.actor_detail.avatar}
+                                alt={activityItem.actor_detail.display_name}
+                                height={24}
+                                width={24}
+                                className="rounded-full h-full w-full object-cover"
+                              />
+                            ) : (
+                              <div
+                                className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                              >
+                                {activityItem.actor_detail.is_bot
+                                  ? activityItem.actor_detail.first_name.charAt(0)
+                                  : activityItem.actor_detail.display_name.charAt(0)}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="min-w-0 flex-1 py-3">
+                      <div className="text-xs text-custom-text-200 break-words">
+                        {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                          <span className="text-gray font-medium">Plane</span>
+                        ) : activityItem.actor_detail.is_bot ? (
+                          <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                        ) : (
+                          <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                            <a className="text-gray font-medium">
+                              {activityItem.actor_detail.is_bot
+                                ? activityItem.actor_detail.first_name
+                                : activityItem.actor_detail.display_name}
+                            </a>
+                          </Link>
+                        )}{" "}
+                        {message}{" "}
+                        <Tooltip
+                          tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                            activityItem.created_at
+                          )}`}
+                        >
+                          <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            );
+          } else if ("comment_json" in activityItem)
+            return (
+              <div key={activityItem.id} className="mt-4">
+                <CommentCard
+                  comment={activityItem as IIssueComment}
+                  handleCommentDeletion={handleCommentDelete}
+                  onSubmit={handleCommentUpdate}
+                  showAccessSpecifier={showAccessSpecifier}
+                  workspaceSlug={workspaceSlug as string}
+                />
+              </div>
+            );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
similarity index 86%
rename from apps/app/components/issues/attachment/attachment-upload.tsx
rename to web/components/issues/attachment/attachment-upload.tsx
index bc1cee785a1..48af4cab7f5 100644
--- a/apps/app/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -1,13 +1,9 @@
-import React, { useCallback, useState } from "react";
-
+import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-dropzone
 import { useDropzone } from "react-dropzone";
 // services
-import issuesService from "services/issues.service";
+import { IssueAttachmentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // types
@@ -21,6 +17,8 @@ type Props = {
   disabled?: boolean;
 };
 
+const issueAttachmentService = new IssueAttachmentService();
+
 export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) => {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -43,13 +41,8 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
     );
     setIsLoading(true);
 
-    issuesService
-      .uploadIssueAttachment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        formData
-      )
+    issueAttachmentService
+      .uploadIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, formData)
       .then((res) => {
         mutate<IIssueAttachment[]>(
           ISSUE_ATTACHMENTS(issueId as string),
@@ -64,7 +57,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
         });
         setIsLoading(false);
       })
-      .catch((err) => {
+      .catch(() => {
         setIsLoading(false);
         setToastAlert({
           type: "error",
@@ -83,9 +76,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
   });
 
   const fileError =
-    fileRejections.length > 0
-      ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)`
-      : null;
+    fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null;
 
   return (
     <div
diff --git a/apps/app/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx
similarity index 76%
rename from apps/app/components/issues/attachment/attachments.tsx
rename to web/components/issues/attachment/attachments.tsx
index 4ec598d1a8f..7d8872f9c42 100644
--- a/apps/app/components/issues/attachment/attachments.tsx
+++ b/web/components/issues/attachment/attachments.tsx
@@ -6,14 +6,14 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 import { DeleteAttachmentModal } from "./delete-attachment-modal";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { ExclamationIcon, getFileIcon } from "components/icons";
+import { getFileIcon } from "components/icons";
+import { AlertCircle, X } from "lucide-react";
 // services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
+import { IssueAttachmentService } from "services/issue";
+import { ProjectService } from "services/project";
 // fetch-key
 import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
@@ -23,6 +23,10 @@ import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attac
 // type
 import { IIssueAttachment } from "types";
 
+// services
+const issueAttachmentService = new IssueAttachmentService();
+const projectService = new ProjectService();
+
 export const IssueAttachments = () => {
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
@@ -33,19 +37,14 @@ export const IssueAttachments = () => {
   const { data: attachments } = useSWR<IIssueAttachment[]>(
     workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueAttachment(
-            workspaceSlug as string,
-            projectId as string,
-            issueId as string
-          )
+      ? () => issueAttachmentService.getIssueAttachment(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -70,18 +69,15 @@ export const IssueAttachments = () => {
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
                       <Tooltip tooltipContent={getFileName(file.attributes.name)}>
-                        <span className="text-sm">
-                          {truncateText(`${getFileName(file.attributes.name)}`, 10)}
-                        </span>
+                        <span className="text-sm">{truncateText(`${getFileName(file.attributes.name)}`, 10)}</span>
                       </Tooltip>
                       <Tooltip
                         tooltipContent={`${
-                          people?.find((person) => person.member.id === file.updated_by)?.member
-                            .display_name ?? ""
+                          people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
                         } uploaded on ${renderLongDateFormat(file.updated_at)}`}
                       >
                         <span>
-                          <ExclamationIcon className="h-3 w-3 fill-current" />
+                          <AlertCircle className="h-3 w-3" />
                         </span>
                       </Tooltip>
                     </div>
@@ -101,7 +97,7 @@ export const IssueAttachments = () => {
                 setAttachmentDeleteModal(true);
               }}
             >
-              <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+              <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
             </button>
           </div>
         ))}
diff --git a/apps/app/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
similarity index 79%
rename from apps/app/components/issues/attachment/delete-attachment-modal.tsx
rename to web/components/issues/attachment/delete-attachment-modal.tsx
index 7c0495dd6c8..f2b346b87cc 100644
--- a/apps/app/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -7,13 +7,13 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueAttachmentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // helper
 import { getFileName } from "helpers/attachment.helper";
 // types
@@ -27,6 +27,9 @@ type Props = {
   data: IIssueAttachment | null;
 };
 
+// services
+const issueAttachmentService = new IssueAttachmentService();
+
 export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -46,13 +49,8 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
       false
     );
 
-    await issuesService
-      .deleteIssueAttachment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        assetId as string
-      )
+    await issueAttachmentService
+      .deleteIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, assetId as string)
       .then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
       .catch(() => {
         setToastAlert({
@@ -94,39 +92,35 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                   <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon
-                          className="h-6 w-6 text-red-600"
-                          aria-hidden="true"
-                        />
+                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                        <Dialog.Title
-                          as="h3"
-                          className="text-lg font-medium leading-6 text-custom-text-100"
-                        >
+                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
                           <p className="text-sm text-custom-text-200">
                             Are you sure you want to delete attachment-{" "}
-                            <span className="font-bold">{getFileName(data.attributes.name)}</span>?
-                            This attachment will be permanently removed. This action cannot be
-                            undone.
+                            <span className="font-bold">{getFileName(data.attributes.name)}</span>? This attachment will
+                            be permanently removed. This action cannot be undone.
                           </p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={() => {
                         handleDeletion(data.id);
                         handleClose();
                       }}
                     >
                       Delete
-                    </DangerButton>
+                    </Button>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>
diff --git a/apps/app/components/issues/attachment/index.ts b/web/components/issues/attachment/index.ts
similarity index 100%
rename from apps/app/components/issues/attachment/index.ts
rename to web/components/issues/attachment/index.ts
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
new file mode 100644
index 00000000000..28c986bc7ce
--- /dev/null
+++ b/web/components/issues/comment/add-comment.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { useForm, Controller } from "react-hook-form";
+
+// services
+import { FileService } from "services/file.service";
+// components
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+// ui
+import { Button } from "@plane/ui";
+import { Globe2, Lock } from "lucide-react";
+
+// types
+import type { IIssueComment } from "types";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+const defaultValues: Partial<IIssueComment> = {
+  access: "INTERNAL",
+  comment_html: "",
+};
+
+type Props = {
+  disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
+};
+
+type commentAccessType = {
+  icon: any;
+  key: string;
+  label: "Private" | "Public";
+};
+const commentAccess: commentAccessType[] = [
+  {
+    icon: Lock,
+    key: "INTERNAL",
+    label: "Private",
+  },
+  {
+    icon: Globe2,
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
+
+// services
+const fileService = new FileService();
+
+export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAccessSpecifier = false }) => {
+  const editorRef = React.useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || isSubmitting) return;
+
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleAddComment)}>
+        <div>
+          <Controller
+            name="access"
+            control={control}
+            render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+              <Controller
+                name="comment_html"
+                control={control}
+                render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleAddComment)}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
+                    ref={editorRef}
+                    value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
+                    customClassName="p-2 h-full"
+                    editorContentCustomClassNames="min-h-[35px]"
+                    debouncedUpdatesEnabled={false}
+                    onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
+                    commentAccessSpecifier={
+                      showAccessSpecifier
+                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        : undefined
+                    }
+                    mentionSuggestions={editorSuggestions.mentionSuggestions}
+                    mentionHighlights={editorSuggestions.mentionHighlights}
+                    submitButton={
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        className="!px-2.5 !py-1.5 !text-xs"
+                        disabled={isSubmitting || disabled}
+                      >
+                        {isSubmitting ? "Adding..." : "Comment"}
+                      </Button>
+                    }
+                  />
+                )}
+              />
+            )}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
new file mode 100644
index 00000000000..d967fd3571f
--- /dev/null
+++ b/web/components/issues/comment/comment-card.tsx
@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+// services
+import { FileService } from "services/file.service";
+// icons
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { CommentReaction } from "components/issues";
+import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import type { IIssueComment } from "types";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+// services
+const fileService = new FileService();
+
+type Props = {
+  comment: IIssueComment;
+  handleCommentDeletion: (comment: string) => void;
+  onSubmit: (commentId: string, data: Partial<IIssueComment>) => void;
+  showAccessSpecifier?: boolean;
+  workspaceSlug: string;
+};
+
+export const CommentCard: React.FC<Props> = ({
+  comment,
+  handleCommentDeletion,
+  onSubmit,
+  showAccessSpecifier = false,
+  workspaceSlug,
+}) => {
+  const { user } = useUser();
+
+  const editorRef = React.useRef<any>(null);
+  const showEditorRef = React.useRef<any>(null);
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<IIssueComment>({
+    defaultValues: comment,
+  });
+
+  const onEnter = (formData: Partial<IIssueComment>) => {
+    if (isSubmitting) return;
+    setIsEditing(false);
+
+    onSubmit(comment.id, formData);
+
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  useEffect(() => {
+    isEditing && setFocus("comment");
+  }, [isEditing, setFocus]);
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment.actor_detail.first_name.charAt(0)
+              : comment.actor_detail.display_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">commented {timeAgo(comment.created_at)}</p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
+            <div>
+              <LiteTextEditorWithRef
+                onEnterKeyPress={handleSubmit(onEnter)}
+                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                deleteFile={fileService.deleteImage}
+                ref={editorRef}
+                value={watch("comment_html")}
+                debouncedUpdatesEnabled={false}
+                customClassName="min-h-[50px] p-3 shadow-sm"
+                onChange={(comment_json: Object, comment_html: string) => {
+                  setValue("comment_json", comment_json);
+                  setValue("comment_html", comment_html);
+                }}
+                mentionSuggestions={editorSuggestions.mentionSuggestions}
+                mentionHighlights={editorSuggestions.mentionHighlights}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="button"
+                onClick={handleSubmit(onEnter)}
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </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" />
+              </button>
+            </div>
+          </form>
+          <div className={`relative ${isEditing ? "hidden" : ""}`}>
+            {showAccessSpecifier && (
+              <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
+              </div>
+            )}
+            <LiteReadOnlyEditorWithRef
+              ref={showEditorRef}
+              value={comment.comment_html}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
+            />
+            <CommentReaction projectId={comment.project} commentId={comment.id} />
+          </div>
+        </div>
+      </div>
+      {user?.id === comment.actor && (
+        <CustomMenu ellipsis>
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
+            <Pencil className="h-3 w-3" />
+            Edit comment
+          </CustomMenu.MenuItem>
+          {showAccessSpecifier && (
+            <>
+              {comment.access === "INTERNAL" ? (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Globe2 className="h-3 w-3" />
+                  Switch to public comment
+                </CustomMenu.MenuItem>
+              ) : (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Lock className="h-3 w-3" />
+                  Switch to private comment
+                </CustomMenu.MenuItem>
+              )}
+            </>
+          )}
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleCommentDeletion(comment.id);
+            }}
+            className="flex items-center gap-1"
+          >
+            <Trash2 className="h-3 w-3" />
+            Delete comment
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/comment/comment-reaction.tsx b/web/components/issues/comment/comment-reaction.tsx
new file mode 100644
index 00000000000..fe95f8e58ea
--- /dev/null
+++ b/web/components/issues/comment/comment-reaction.tsx
@@ -0,0 +1,93 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+// hooks
+import useUser from "hooks/use-user";
+import useCommentReaction from "hooks/use-comment-reaction";
+// ui
+import { ReactionSelector } from "components/core";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+import { IssueCommentReaction } from "types";
+
+type Props = {
+  projectId?: string | string[];
+  commentId: string;
+  readonly?: boolean;
+};
+
+export const CommentReaction: FC<Props> = (props) => {
+  const { projectId, commentId, readonly = false } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+
+  const { commentReactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useCommentReaction(
+    workspaceSlug,
+    projectId,
+    commentId
+  );
+
+  const handleReactionClick = (reaction: string) => {
+    if (!workspaceSlug || !projectId || !commentId) return;
+
+    const isSelected = commentReactions?.some(
+      (r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction
+    );
+
+    if (isSelected) {
+      handleReactionDelete(reaction);
+    } else {
+      handleReactionCreate(reaction);
+    }
+  };
+
+  return (
+    <div className="flex gap-1.5 items-center mt-2">
+      {!readonly && (
+        <ReactionSelector
+          size="md"
+          position="top"
+          value={
+            commentReactions
+              ?.filter((reaction: IssueCommentReaction) => reaction.actor === user?.id)
+              .map((r: IssueCommentReaction) => r.reaction) || []
+          }
+          onSelect={handleReactionClick}
+        />
+      )}
+
+      {Object.keys(groupedReactions || {}).map(
+        (reaction) =>
+          groupedReactions?.[reaction]?.length &&
+          groupedReactions[reaction].length > 0 && (
+            <button
+              type="button"
+              disabled={readonly}
+              onClick={() => {
+                handleReactionClick(reaction);
+              }}
+              key={reaction}
+              className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                commentReactions?.some((r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction)
+                  ? "bg-custom-primary-100/10"
+                  : "bg-custom-background-80"
+              }`}
+            >
+              <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  commentReactions?.some((r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
+            </button>
+          )
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/comment/index.ts b/web/components/issues/comment/index.ts
similarity index 100%
rename from apps/app/components/issues/comment/index.ts
rename to web/components/issues/comment/index.ts
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
new file mode 100644
index 00000000000..eca797e6416
--- /dev/null
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscard: () => void;
+  onConfirm: () => Promise<void>;
+};
+
+export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onDiscard, onConfirm } = props;
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClose = () => {
+    handleClose();
+    setIsLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsLoading(true);
+    await onConfirm();
+    setIsLoading(false);
+  };
+
+  return (
+    <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
+            <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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mt-3 text-center sm:mt-0 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Draft Issue
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-between gap-2 p-4 sm:px-6">
+                  <div>
+                    <Button variant="neutral-primary" onClick={onDiscard}>
+                      Discard
+                    </Button>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
+                      {isLoading ? "Saving..." : "Save Draft"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/issues/delete-archived-issue-modal.tsx b/web/components/issues/delete-archived-issue-modal.tsx
new file mode 100644
index 00000000000..fd9c9b3fd5d
--- /dev/null
+++ b/web/components/issues/delete-archived-issue-modal.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue;
+  onSubmit?: () => Promise<void>;
+};
+
+export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, handleClose, onSubmit } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { archivedIssueDetail: archivedIssueDetailStore } = useMobxStore();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    if (!workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await archivedIssueDetailStore
+      .deleteArchivedIssue(workspaceSlug.toString(), data.project, data.id)
+      .then(() => {
+        if (onSubmit) onSubmit();
+      })
+      .catch((err) => {
+        const error = err?.detail;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: errorString || "Something went wrong.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+        onClose();
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 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={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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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 Archived Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? All of the data related to the archived issue will be permanently removed. This action
+                      cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
new file mode 100644
index 00000000000..3b3efaea06a
--- /dev/null
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueDraftService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue | null;
+  onSubmit?: () => Promise<void> | void;
+};
+
+const issueDraftService = new IssueDraftService();
+
+export const DeleteDraftIssueModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, data, onSubmit } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !data || !user) return;
+
+    setIsDeleteLoading(true);
+
+    await issueDraftService
+      .deleteDraftIssue(workspaceSlug as string, data.project, data.id)
+      .then(() => {
+        setIsDeleteLoading(false);
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          message: "Draft Issue deleted successfully",
+          type: "success",
+        });
+      })
+      .catch((error) => {
+        console.log(error);
+        handleClose();
+        setToastAlert({
+          title: "Error",
+          message: "Something went wrong",
+          type: "error",
+        });
+        setIsDeleteLoading(false);
+      });
+    if (onSubmit) await onSubmit();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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 Draft Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? All of the data related to the draft issue will be permanently removed. This action cannot
+                      be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
new file mode 100644
index 00000000000..41133111e39
--- /dev/null
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IIssue;
+  onSubmit?: () => Promise<void>;
+};
+
+export const DeleteIssueModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, handleClose, onSubmit } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { issueDetail: issueDetailStore } = useMobxStore();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  useEffect(() => {
+    setIsDeleteLoading(false);
+  }, [isOpen]);
+
+  const onClose = () => {
+    setIsDeleteLoading(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    if (!workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await issueDetailStore.deleteIssue(workspaceSlug.toString(), data.project, data.id);
+
+    if (onSubmit) await onSubmit().finally(() => setIsDeleteLoading(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 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={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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div 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 Issue</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm text-custom-text-200">
+                      Are you sure you want to delete issue{" "}
+                      <span className="break-words font-medium text-custom-text-100">
+                        {data?.project_detail.identifier}-{data?.sequence_id}
+                      </span>
+                      {""}? All of the data related to the issue will be permanently removed. This action cannot be
+                      undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
+                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
new file mode 100644
index 00000000000..a3c4289f070
--- /dev/null
+++ b/web/components/issues/description-form.tsx
@@ -0,0 +1,176 @@
+import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { useDebouncedCallback } from "use-debounce";
+// components
+import { TextArea } from "@plane/ui";
+import { RichTextEditor } from "@plane/rich-text-editor";
+// types
+import { IIssue } from "types";
+// services
+import { FileService } from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+export interface IssueDescriptionFormValues {
+  name: string;
+  description_html: string;
+}
+
+export interface IssueDetailsProps {
+  issue: {
+    name: string;
+    description_html: string;
+    project_id?: string;
+  };
+  workspaceSlug: string;
+  handleFormSubmit: (value: IssueDescriptionFormValues) => Promise<void>;
+  isAllowed: boolean;
+}
+
+const fileService = new FileService();
+
+export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
+  const { issue, handleFormSubmit, workspaceSlug, isAllowed } = props;
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [characterLimit, setCharacterLimit] = useState(false);
+
+  const { setShowAlert } = useReloadConfirmations();
+
+  const editorSuggestion = useEditorSuggestions();
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description_html: "",
+    },
+  });
+
+  const [localTitleValue, setLocalTitleValue] = useState("");
+  const issueTitleCurrentValue = watch("name");
+  useEffect(() => {
+    if (localTitleValue === "" && issueTitleCurrentValue !== "") {
+      setLocalTitleValue(issueTitleCurrentValue);
+    }
+  }, [issueTitleCurrentValue, localTitleValue]);
+
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
+
+      await handleFormSubmit({
+        name: formData.name ?? "",
+        description_html: formData.description_html ?? "<p></p>",
+      });
+    },
+    [handleFormSubmit]
+  );
+
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
+  // reset form values
+  useEffect(() => {
+    if (!issue) return;
+
+    reset({
+      ...issue,
+    });
+  }, [issue, reset]);
+
+  const debouncedFormSave = useDebouncedCallback(async () => {
+    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+  }, 1500);
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        {isAllowed ? (
+          <Controller
+            name="name"
+            control={control}
+            render={({ field: { onChange } }) => (
+              <TextArea
+                value={localTitleValue}
+                id="name"
+                name="name"
+                placeholder="Enter issue name"
+                onFocus={() => setCharacterLimit(true)}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                  setCharacterLimit(false);
+                  setIsSubmitting("submitting");
+                  setLocalTitleValue(e.target.value);
+                  onChange(e.target.value);
+                  debouncedFormSave();
+                }}
+                required
+                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                hasError={Boolean(errors?.description)}
+                role="textbox"
+                disabled={!isAllowed}
+              />
+            )}
+          />
+        ) : (
+          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
+        )}
+        {characterLimit && isAllowed && (
+          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
+            <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
+              {watch("name").length}
+            </span>
+            /255
+          </div>
+        )}
+      </div>
+      <span>{errors.name ? errors.name.message : null}</span>
+      <div className="relative">
+        <Controller
+          name="description_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <RichTextEditor
+              uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+              deleteFile={fileService.deleteImage}
+              value={value}
+              setShouldShowAlert={setShowAlert}
+              setIsSubmitting={setIsSubmitting}
+              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              noBorder={!isAllowed}
+              onChange={(description: Object, description_html: string) => {
+                setShowAlert(true);
+                setIsSubmitting("submitting");
+                onChange(description_html);
+                debouncedFormSave();
+              }}
+              mentionSuggestions={editorSuggestion.mentionSuggestions}
+              mentionHighlights={editorSuggestion.mentionHighlights}
+            />
+          )}
+        />
+        <div
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+          }`}
+        >
+          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
new file mode 100644
index 00000000000..c6f880c1d2e
--- /dev/null
+++ b/web/components/issues/draft-issue-form.tsx
@@ -0,0 +1,628 @@
+import React, { FC, useState, useEffect, useRef } from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+// services
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { GptAssistantModal } from "components/core";
+import { ParentIssuesListModal } from "components/issues";
+import {
+  IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
+  IssueLabelSelect,
+  IssuePrioritySelect,
+  IssueProjectSelect,
+  IssueStateSelect,
+} from "components/issues/select";
+import { CreateStateModal } from "components/states";
+import { CreateLabelModal } from "components/labels";
+// ui
+import {} from "components/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
+// icons
+import { Sparkle, X } from "lucide-react";
+// types
+import type { IUser, IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+const aiService = new AIService();
+const fileService = new FileService();
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description: {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+      },
+    ],
+  },
+  description_html: "<p></p>",
+  estimate_point: null,
+  state: "",
+  parent: null,
+  priority: "none",
+  assignees: [],
+  labels: [],
+  start_date: null,
+  target_date: null,
+};
+
+interface IssueFormProps {
+  handleFormSubmit: (
+    formData: Partial<IIssue>,
+    action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
+  ) => Promise<void>;
+  data?: Partial<IIssue> | null;
+  isOpen: boolean;
+  prePopulatedData?: Partial<IIssue> | null;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  createMore: boolean;
+  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClose: () => void;
+  handleDiscard: () => void;
+  status: boolean;
+  user: IUser | undefined;
+  fieldsToShow: (
+    | "project"
+    | "name"
+    | "description"
+    | "state"
+    | "priority"
+    | "assignee"
+    | "label"
+    | "startDate"
+    | "dueDate"
+    | "estimate"
+    | "parent"
+    | "all"
+  )[];
+}
+
+export const DraftIssueForm: FC<IssueFormProps> = (props) => {
+  const {
+    handleFormSubmit,
+    data,
+    isOpen,
+    prePopulatedData,
+    projectId,
+    setActiveProject,
+    createMore,
+    setCreateMore,
+    status,
+    user,
+    fieldsToShow,
+    handleDiscard,
+  } = props;
+
+  const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
+
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
+
+  const editorRef = useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+    setFocus,
+  } = useForm<IIssue>({
+    defaultValues: prePopulatedData ?? defaultValues,
+    reValidateMode: "onChange",
+  });
+
+  const issueName = watch("name");
+
+  const payload: Partial<IIssue> = {
+    name: watch("name"),
+    description: watch("description"),
+    description_html: watch("description_html"),
+    state: watch("state"),
+    priority: watch("priority"),
+    assignees: watch("assignees"),
+    labels: watch("labels"),
+    start_date: watch("start_date"),
+    target_date: watch("target_date"),
+    project: watch("project"),
+    parent: watch("parent"),
+    cycle: watch("cycle"),
+    module: watch("module"),
+  };
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+
+    setLocalStorageValue(
+      JSON.stringify({
+        ...payload,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isOpen, data]);
+
+  // const onClose = () => {
+  //   handleClose();
+  // };
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+
+    setLocalStorageValue(
+      JSON.stringify({
+        ...payload,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isOpen, data]);
+
+  // const onClose = () => {
+  //   handleClose();
+  // };
+
+  const handleCreateUpdateIssue = async (
+    formData: Partial<IIssue>,
+    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
+  ) => {
+    await handleFormSubmit(
+      {
+        ...(data ?? {}),
+        ...formData,
+        is_draft: action === "createDraft" || action === "updateDraft",
+      },
+      action
+    );
+
+    setGptAssistantModal(false);
+
+    reset({
+      ...defaultValues,
+      project: projectId,
+      description: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+          },
+        ],
+      },
+      description_html: "<p></p>",
+    });
+    editorRef?.current?.clearEditor();
+  };
+
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description", {});
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(
+        workspaceSlug as string,
+        projectId as string,
+        {
+          prompt: issueName,
+          task: "Generate a proper description for this issue.",
+        },
+        user
+      )
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Issue title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        const error = err?.data?.error;
+
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  useEffect(() => {
+    setFocus("name");
+
+    reset({
+      ...defaultValues,
+      ...(prePopulatedData ?? {}),
+      ...(data ?? {}),
+    });
+  }, [setFocus, prePopulatedData, reset, data]);
+
+  // update projectId in form when projectId changes
+  useEffect(() => {
+    reset({
+      ...getValues(),
+      project: projectId,
+    });
+  }, [getValues, projectId, reset]);
+
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      {projectId && (
+        <>
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
+          />
+        </>
+      )}
+      <form
+        onSubmit={handleSubmit((formData) =>
+          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
+        )}
+      >
+        <div className="space-y-5">
+          <div className="flex items-center gap-x-2">
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
+              <Controller
+                control={control}
+                name="project"
+                render={({ field: { value, onChange } }) => (
+                  <IssueProjectSelect
+                    value={value}
+                    onChange={(val: string) => {
+                      onChange(val);
+                      setActiveProject(val);
+                    }}
+                  />
+                )}
+              />
+            )}
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+              {status ? "Update" : "Create"} Issue
+            </h3>
+          </div>
+          {watch("parent") &&
+            (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
+            selectedParentIssue && (
+              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <span
+                    className="block h-1.5 w-1.5 rounded-full"
+                    style={{
+                      backgroundColor: selectedParentIssue.state__color,
+                    }}
+                  />
+                  <span className="flex-shrink-0 text-custom-text-200">
+                    {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
+                  </span>
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+                  <X
+                    className="h-3 w-3 cursor-pointer"
+                    onClick={() => {
+                      setValue("parent", null);
+                      setSelectedParentIssue(null);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          <div className="space-y-3">
+            <div className="mt-2 space-y-3">
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
+                <div>
+                  <Controller
+                    control={control}
+                    name="name"
+                    rules={{
+                      required: "Title is required",
+                      maxLength: {
+                        value: 255,
+                        message: "Title should be less than 255 characters",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
+                  />
+                </div>
+              )}
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
+                <div className="relative">
+                  <div className="flex justify-end">
+                    {issueName && issueName !== "" && (
+                      <button
+                        type="button"
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
+                          iAmFeelingLucky ? "cursor-wait" : ""
+                        }`}
+                        onClick={handleAutoGenerateDescription}
+                        disabled={iAmFeelingLucky}
+                      >
+                        {iAmFeelingLucky ? (
+                          "Generating response..."
+                        ) : (
+                          <>
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
+                          </>
+                        )}
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                      onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                    >
+                      <Sparkle className="h-4 w-4" />
+                      AI
+                    </button>
+                  </div>
+                  <Controller
+                    name="description_html"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditorWithRef
+                        uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                        deleteFile={fileService.deleteImage}
+                        ref={editorRef}
+                        debouncedUpdatesEnabled={false}
+                        value={
+                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                            ? watch("description_html")
+                            : value
+                        }
+                        customClassName="min-h-[150px]"
+                        onChange={(description: Object, description_html: string) => {
+                          onChange(description_html);
+                          setValue("description", description);
+                        }}
+                        mentionHighlights={editorSuggestions.mentionHighlights}
+                        mentionSuggestions={editorSuggestions.mentionSuggestions}
+                      />
+                    )}
+                  />
+                  <GptAssistantModal
+                    isOpen={gptAssistantModal}
+                    handleClose={() => {
+                      setGptAssistantModal(false);
+                      // this is done so that the title do not reset after gpt popover closed
+                      reset(getValues());
+                    }}
+                    inset="top-2 left-0"
+                    content=""
+                    htmlContent={watch("description_html")}
+                    onResponse={(response) => {
+                      handleAiAssistance(response);
+                    }}
+                    projectId={projectId}
+                  />
+                </div>
+              )}
+              <div className="flex flex-wrap items-center gap-2">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+                  <Controller
+                    control={control}
+                    name="state"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueStateSelect
+                        setIsOpen={setStateModal}
+                        value={value}
+                        onChange={onChange}
+                        projectId={projectId}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+                  <Controller
+                    control={control}
+                    name="priority"
+                    render={({ field: { value, onChange } }) => (
+                      <IssuePrioritySelect value={value} onChange={onChange} />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+                  <Controller
+                    control={control}
+                    name="assignees"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+                  <Controller
+                    control={control}
+                    name="labels"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueLabelSelect
+                        setIsOpen={setLabelModal}
+                        value={value}
+                        onChange={onChange}
+                        projectId={projectId}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="start_date"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueDateSelect
+                          label="Start date"
+                          maxDate={maxDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="target_date"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueDateSelect
+                          label="Due date"
+                          minDate={minDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="estimate_point"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueEstimateSelect value={value} onChange={onChange} />
+                      )}
+                    />
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                  <Controller
+                    control={control}
+                    name="parent"
+                    render={({ field: { onChange } }) => (
+                      <ParentIssuesListModal
+                        isOpen={parentIssueListModalOpen}
+                        handleClose={() => setParentIssueListModalOpen(false)}
+                        onChange={(issue) => {
+                          onChange(issue.id);
+                          setSelectedParentIssue(issue);
+                        }}
+                        projectId={projectId}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                  <CustomMenu ellipsis>
+                    {watch("parent") ? (
+                      <>
+                        <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
+                          Change parent issue
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
+                          Remove parent issue
+                        </CustomMenu.MenuItem>
+                      </>
+                    ) : (
+                      <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
+                        Select Parent Issue
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setCreateMore((prevData) => !prevData)}
+          >
+            <span className="text-xs">Create more</span>
+            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="neutral-primary" onClick={handleDiscard}>
+              Discard
+            </Button>
+            <Button
+              variant="neutral-primary"
+              loading={isSubmitting}
+              onClick={handleSubmit((formData) =>
+                handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
+              )}
+            >
+              {isSubmitting ? "Saving..." : "Save Draft"}
+            </Button>
+            <Button
+              loading={isSubmitting}
+              variant="primary"
+              onClick={handleSubmit((formData) =>
+                handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
+              )}
+            >
+              {isSubmitting ? "Saving..." : "Add Issue"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
new file mode 100644
index 00000000000..1987a4fd937
--- /dev/null
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -0,0 +1,358 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueService, IssueDraftService } from "services/issue";
+import { ModuleService } from "services/module.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { DraftIssueForm } from "components/issues";
+// types
+import type { IIssue } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_DETAILS, USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
+
+interface IssuesModalProps {
+  data?: IIssue | null;
+  handleClose: () => void;
+  isOpen: boolean;
+  isUpdatingSingleIssue?: boolean;
+  prePopulateData?: Partial<IIssue>;
+  fieldsToShow?: (
+    | "project"
+    | "name"
+    | "description"
+    | "state"
+    | "priority"
+    | "assignee"
+    | "label"
+    | "startDate"
+    | "dueDate"
+    | "estimate"
+    | "parent"
+    | "all"
+  )[];
+  onSubmit?: (data: Partial<IIssue>) => Promise<void> | void;
+}
+
+// services
+const issueService = new IssueService();
+const issueDraftService = new IssueDraftService();
+const moduleService = new ModuleService();
+
+export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const {
+    data,
+    handleClose,
+    isOpen,
+    isUpdatingSingleIssue = false,
+    prePopulateData: prePopulateDataProps,
+    fieldsToShow = ["all"],
+    onSubmit,
+  } = props;
+
+  // states
+  const [createMore, setCreateMore] = useState(false);
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+  const [prePopulateData, setPreloadedData] = useState<Partial<IIssue> | undefined>(undefined);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { project: projectStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const { clearValue: clearDraftIssueLocalStorage } = useLocalStorage("draftedIssue", {});
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+    setActiveProject(null);
+  };
+
+  const onDiscard = () => {
+    clearDraftIssueLocalStorage();
+    onClose();
+  };
+
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) return setActiveProject(data.project);
+
+    if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
+
+    if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen, prePopulateData]);
+
+  const createDraftIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject || !user) return;
+
+    await issueDraftService
+      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
+      .then(async () => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug.toString()));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+
+    if (!createMore) onClose();
+  };
+
+  const updateDraftIssue = async (payload: Partial<IIssue>) => {
+    if (!user) return;
+
+    await issueDraftService
+      .updateDraftIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
+      .then((res) => {
+        if (isUpdatingSingleIssue) {
+          mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
+        } else {
+          if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
+        }
+
+        if (!payload.is_draft) {
+          if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+          if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+        }
+
+        if (!createMore) onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+    if (!workspaceSlug || !activeProject || !user) return;
+
+    await issueService.addIssueToCycle(
+      workspaceSlug as string,
+      activeProject ?? "",
+      cycleId,
+      {
+        issues: [issueId],
+      },
+      user
+    );
+  };
+
+  const addIssueToModule = async (issueId: string, moduleId: string) => {
+    if (!workspaceSlug || !activeProject || !user) return;
+
+    await moduleService.addIssuesToModule(
+      workspaceSlug as string,
+      activeProject ?? "",
+      moduleId as string,
+      {
+        issues: [issueId],
+      },
+      user
+    );
+  };
+
+  const createIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject || !user) return;
+
+    await issueService
+      .createIssue(workspaceSlug.toString(), activeProject, payload, user)
+      .then(async (res) => {
+        if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (!createMore) onClose();
+
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (
+    formData: Partial<IIssue>,
+    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
+  ) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    const payload: Partial<IIssue> = {
+      ...formData,
+      description: formData.description ?? "",
+      description_html: formData.description_html ?? "<p></p>",
+    };
+
+    if (action === "createDraft") await createDraftIssue(payload);
+    else if (action === "updateDraft" || action === "convertToNewIssue") await updateDraftIssue(payload);
+    else if (action === "createNewIssue") await createIssue(payload);
+
+    clearDraftIssueLocalStorage();
+
+    if (onSubmit) await onSubmit(payload);
+  };
+
+  if (!projects || projects.length === 0) return null;
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={onClose}>
+          <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 bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto">
+            <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+              <Transition.Child
+                as={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 rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                  <DraftIssueForm
+                    isOpen={isOpen}
+                    handleFormSubmit={handleFormSubmit}
+                    prePopulatedData={prePopulateData}
+                    data={data}
+                    createMore={createMore}
+                    setCreateMore={setCreateMore}
+                    handleClose={onClose}
+                    handleDiscard={onDiscard}
+                    projectId={activeProject ?? ""}
+                    setActiveProject={setActiveProject}
+                    status={data ? true : false}
+                    user={user ?? undefined}
+                    fieldsToShow={fieldsToShow}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
new file mode 100644
index 00000000000..b54ce112183
--- /dev/null
+++ b/web/components/issues/form.tsx
@@ -0,0 +1,633 @@
+import React, { FC, useState, useEffect, useRef } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { GptAssistantModal } from "components/core";
+import { ParentIssuesListModal } from "components/issues";
+import {
+  IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
+  IssueLabelSelect,
+  IssuePrioritySelect,
+  IssueProjectSelect,
+  IssueStateSelect,
+  IssueModuleSelect,
+  IssueCycleSelect,
+} from "components/issues/select";
+import { CreateStateModal } from "components/states";
+import { CreateLabelModal } from "components/labels";
+// ui
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
+// icons
+import { LayoutPanelTop, Sparkle, X } from "lucide-react";
+// types
+import type { IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description_html: "<p></p>",
+  estimate_point: null,
+  state: "",
+  parent: null,
+  priority: "none",
+  assignees: [],
+  labels: [],
+  start_date: null,
+  target_date: null,
+};
+
+export interface IssueFormProps {
+  handleFormSubmit: (values: Partial<IIssue>) => Promise<void>;
+  initialData?: Partial<IIssue>;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  createMore: boolean;
+  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
+  handleDiscardClose: () => void;
+  status: boolean;
+  handleFormDirty: (payload: Partial<IIssue> | null) => void;
+  fieldsToShow: (
+    | "project"
+    | "name"
+    | "description"
+    | "state"
+    | "priority"
+    | "assignee"
+    | "label"
+    | "startDate"
+    | "dueDate"
+    | "estimate"
+    | "parent"
+    | "all"
+    | "module"
+    | "cycle"
+  )[];
+}
+
+// services
+const aiService = new AIService();
+const fileService = new FileService();
+
+export const IssueForm: FC<IssueFormProps> = observer((props) => {
+  const {
+    handleFormSubmit,
+    initialData,
+    projectId,
+    setActiveProject,
+    createMore,
+    setCreateMore,
+    handleDiscardClose,
+    status,
+    fieldsToShow,
+    handleFormDirty,
+  } = props;
+
+  const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
+
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
+  const editorRef = useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const editorSuggestion = useEditorSuggestions();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    formState: { errors, isSubmitting, isDirty },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+    setFocus,
+  } = useForm<IIssue>({
+    defaultValues: initialData ?? defaultValues,
+    reValidateMode: "onChange",
+  });
+
+  const issueName = watch("name");
+
+  const payload: Partial<IIssue> = {
+    name: getValues("name"),
+    description: getValues("description"),
+    state: getValues("state"),
+    priority: getValues("priority"),
+    assignees: getValues("assignees"),
+    labels: getValues("labels"),
+    start_date: getValues("start_date"),
+    target_date: getValues("target_date"),
+    project: getValues("project"),
+    parent: getValues("parent"),
+    cycle: getValues("cycle"),
+    module: getValues("module"),
+  };
+
+  useEffect(() => {
+    if (isDirty) handleFormDirty(payload);
+    else handleFormDirty(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isDirty]);
+
+  const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
+    await handleFormSubmit(formData);
+
+    setGptAssistantModal(false);
+
+    reset({
+      ...defaultValues,
+      project: projectId,
+      description: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+          },
+        ],
+      },
+      description_html: "<p></p>",
+    });
+    editorRef?.current?.clearEditor();
+  };
+
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setValue("description", {});
+    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
+    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId || !user) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(
+        workspaceSlug as string,
+        projectId as string,
+        {
+          prompt: issueName,
+          task: "Generate a proper description for this issue.",
+        },
+        user
+      )
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Issue title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        const error = err?.data?.error;
+
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: error || "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  useEffect(() => {
+    setFocus("name");
+
+    reset({
+      ...defaultValues,
+      ...initialData,
+    });
+  }, [setFocus, initialData, reset]);
+
+  // update projectId in form when projectId changes
+  useEffect(() => {
+    reset({
+      ...getValues(),
+      project: projectId,
+    });
+  }, [getValues, projectId, reset]);
+
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      {projectId && (
+        <>
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
+          />
+        </>
+      )}
+      <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
+        <div className="space-y-5">
+          <div className="flex items-center gap-x-2">
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
+              <Controller
+                control={control}
+                name="project"
+                render={({ field: { value, onChange } }) => (
+                  <IssueProjectSelect
+                    value={value}
+                    onChange={(val: string) => {
+                      onChange(val);
+                      setActiveProject(val);
+                    }}
+                  />
+                )}
+              />
+            )}
+            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
+              {status ? "Update" : "Create"} Issue
+            </h3>
+          </div>
+          {watch("parent") &&
+            (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
+            selectedParentIssue && (
+              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <span
+                    className="block h-1.5 w-1.5 rounded-full"
+                    style={{
+                      backgroundColor: selectedParentIssue.state__color,
+                    }}
+                  />
+                  <span className="flex-shrink-0 text-custom-text-200">
+                    {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
+                  </span>
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+                  <X
+                    className="h-3 w-3 cursor-pointer"
+                    onClick={() => {
+                      setValue("parent", null);
+                      setSelectedParentIssue(null);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          <div className="space-y-3">
+            <div className="mt-2 space-y-3">
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
+                <div>
+                  <Controller
+                    control={control}
+                    name="name"
+                    rules={{
+                      required: "Title is required",
+                      maxLength: {
+                        value: 255,
+                        message: "Title should be less than 255 characters",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
+                  />
+                </div>
+              )}
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
+                <div className="relative">
+                  <div className="flex justify-end">
+                    {issueName && issueName !== "" && (
+                      <button
+                        type="button"
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
+                          iAmFeelingLucky ? "cursor-wait" : ""
+                        }`}
+                        onClick={handleAutoGenerateDescription}
+                        disabled={iAmFeelingLucky}
+                      >
+                        {iAmFeelingLucky ? (
+                          "Generating response..."
+                        ) : (
+                          <>
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
+                          </>
+                        )}
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                      onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                    >
+                      <Sparkle className="h-4 w-4" />
+                      AI
+                    </button>
+                  </div>
+                  <Controller
+                    name="description_html"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditorWithRef
+                        uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                        deleteFile={fileService.deleteImage}
+                        ref={editorRef}
+                        debouncedUpdatesEnabled={false}
+                        value={
+                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                            ? watch("description_html")
+                            : value
+                        }
+                        customClassName="min-h-[150px]"
+                        onChange={(description: Object, description_html: string) => {
+                          onChange(description_html);
+                          setValue("description", description);
+                        }}
+                        mentionHighlights={editorSuggestion.mentionHighlights}
+                        mentionSuggestions={editorSuggestion.mentionSuggestions}
+                      />
+                    )}
+                  />
+                  <GptAssistantModal
+                    isOpen={gptAssistantModal}
+                    handleClose={() => {
+                      setGptAssistantModal(false);
+                      // this is done so that the title do not reset after gpt popover closed
+                      reset(getValues());
+                    }}
+                    inset="top-2 left-0"
+                    content=""
+                    htmlContent={watch("description_html")}
+                    onResponse={(response) => {
+                      handleAiAssistance(response);
+                    }}
+                    projectId={projectId}
+                  />
+                </div>
+              )}
+              <div className="flex flex-wrap items-center gap-2">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+                  <Controller
+                    control={control}
+                    name="state"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueStateSelect
+                        setIsOpen={setStateModal}
+                        value={value}
+                        onChange={onChange}
+                        projectId={projectId}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+                  <Controller
+                    control={control}
+                    name="priority"
+                    render={({ field: { value, onChange } }) => (
+                      <IssuePrioritySelect value={value} onChange={onChange} />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+                  <Controller
+                    control={control}
+                    name="assignees"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+                  <Controller
+                    control={control}
+                    name="labels"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueLabelSelect
+                        setIsOpen={setLabelModal}
+                        value={value}
+                        onChange={onChange}
+                        projectId={projectId}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="start_date"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueDateSelect
+                          label="Start date"
+                          maxDate={maxDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+                  <div>
+                    <Controller
+                      control={control}
+                      name="target_date"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueDateSelect
+                          label="Due date"
+                          minDate={minDate ?? undefined}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
+                  <Controller
+                    control={control}
+                    name="module"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueModuleSelect
+                        workspaceSlug={workspaceSlug as string}
+                        projectId={projectId}
+                        value={value}
+                        onChange={(val: string) => {
+                          onChange(val);
+                        }}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
+                  <Controller
+                    control={control}
+                    name="cycle"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueCycleSelect
+                        workspaceSlug={workspaceSlug as string}
+                        projectId={projectId}
+                        value={value}
+                        onChange={(val: string) => {
+                          onChange(val);
+                        }}
+                      />
+                    )}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
+                  <>
+                    <Controller
+                      control={control}
+                      name="estimate_point"
+                      render={({ field: { value, onChange } }) => (
+                        <IssueEstimateSelect value={value} onChange={onChange} />
+                      )}
+                    />
+                  </>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                  <>
+                    <CustomMenu
+                      customButton={
+                        <button
+                          type="button"
+                          className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200"
+                        >
+                          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
+                            {watch("parent") ? (
+                              <>
+                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
+                                <span className="whitespace-nowrap text-custom-text-100">
+                                  {selectedParentIssue &&
+                                    `${selectedParentIssue.project__identifier}-
+                                  ${selectedParentIssue.sequence_id}`}
+                                </span>
+                              </>
+                            ) : (
+                              <>
+                                <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
+                                <span className="whitespace-nowrap">Add Parent</span>
+                              </>
+                            )}
+                          </span>
+                        </button>
+                      }
+                    >
+                      {watch("parent") ? (
+                        <>
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                            Change parent issue
+                          </CustomMenu.MenuItem>
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
+                            Remove parent issue
+                          </CustomMenu.MenuItem>
+                        </>
+                      ) : (
+                        <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                          Select Parent Issue
+                        </CustomMenu.MenuItem>
+                      )}
+                    </CustomMenu>
+                    <Controller
+                      control={control}
+                      name="parent"
+                      render={({ field: { onChange } }) => (
+                        <ParentIssuesListModal
+                          isOpen={parentIssueListModalOpen}
+                          handleClose={() => setParentIssueListModalOpen(false)}
+                          onChange={(issue) => {
+                            onChange(issue.id);
+                            setSelectedParentIssue(issue);
+                          }}
+                          projectId={projectId}
+                        />
+                      )}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setCreateMore((prevData) => !prevData)}
+          >
+            <span className="text-xs">Create more</span>
+            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="neutral-primary"
+              onClick={() => {
+                handleDiscardClose();
+              }}
+            >
+              Discard
+            </Button>
+            <Button variant="primary" type="submit" loading={isSubmitting}>
+              {status
+                ? isSubmitting
+                  ? "Updating Issue..."
+                  : "Update Issue"
+                : isSubmitting
+                ? "Adding Issue..."
+                : "Add Issue"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+});
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
new file mode 100644
index 00000000000..3768d66cda4
--- /dev/null
+++ b/web/components/issues/index.ts
@@ -0,0 +1,25 @@
+export * from "./attachment";
+export * from "./comment";
+export * from "./sidebar-select";
+export * from "./view-select";
+export * from "./activity";
+export * from "./delete-issue-modal";
+export * from "./description-form";
+export * from "./form";
+export * from "./issue-layouts";
+export * from "./main-content";
+export * from "./modal";
+export * from "./parent-issues-list-modal";
+export * from "./sidebar";
+export * from "./label";
+export * from "./issue-reaction";
+export * from "./peek-overview";
+export * from "./confirm-issue-discard";
+
+// draft issue
+export * from "./draft-issue-form";
+export * from "./draft-issue-modal";
+export * from "./delete-draft-issue-modal";
+
+// archived issue
+export * from "./delete-archived-issue-modal";
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
new file mode 100644
index 00000000000..bdc0a786e30
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -0,0 +1,72 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { ICalendarWeek } from "./types";
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  layout: "month" | "week" | undefined;
+  showWeekends: boolean;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+};
+
+export const CalendarChart: React.FC<Props> = observer((props) => {
+  const { issues, layout, showWeekends, handleIssues, quickActions } = props;
+
+  const { calendar: calendarStore } = useMobxStore();
+
+  const calendarPayload = calendarStore.calendarPayload;
+
+  const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
+
+  if (!calendarPayload)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <div className="h-full w-full flex flex-col overflow-hidden">
+        <CalendarHeader />
+        <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
+        <div className="h-full w-full overflow-y-auto">
+          {layout === "month" && (
+            <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+              {allWeeksOfActiveMonth &&
+                Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                  <CalendarWeekDays
+                    key={weekIndex}
+                    week={week}
+                    issues={issues}
+                    enableQuickIssueCreate
+                    handleIssues={handleIssues}
+                    quickActions={quickActions}
+                  />
+                ))}
+            </div>
+          )}
+          {layout === "week" && (
+            <CalendarWeekDays
+              week={calendarStore.allDaysOfActiveWeek}
+              issues={issues}
+              enableQuickIssueCreate
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
new file mode 100644
index 00000000000..87a28a320ab
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -0,0 +1,86 @@
+import { observer } from "mobx-react-lite";
+import { Droppable } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarIssueBlocks, ICalendarDate, CalendarInlineCreateIssueForm } from "components/issues";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+import { IIssue } from "types";
+
+type Props = {
+  date: ICalendarDate;
+  issues: IIssueGroupedStructure | null;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const CalendarDayTile: React.FC<Props> = observer((props) => {
+  const { date, issues, handleIssues, quickActions, enableQuickIssueCreate } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const issuesList = issues ? (issues as IIssueGroupedStructure)[renderDateFormat(date.date)] : null;
+
+  return (
+    <>
+      <div className="group w-full h-full relative flex flex-col bg-custom-background-90">
+        {/* header */}
+        <div
+          className={`text-xs text-right flex-shrink-0 py-1 px-2 ${
+            calendarLayout === "month" // if month layout, highlight current month days
+              ? date.is_current_month
+                ? "font-medium"
+                : "text-custom-text-300"
+              : "font-medium" // if week layout, highlight all days
+          } ${
+            date.date.getDay() === 0 || date.date.getDay() === 6
+              ? "bg-custom-background-90"
+              : "bg-custom-background-100"
+          }`}
+        >
+          {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
+          {date.date.getDate()}
+        </div>
+
+        {/* content */}
+        <div className="w-full h-full">
+          <Droppable droppableId={renderDateFormat(date.date)} isDropDisabled={false}>
+            {(provided, snapshot) => (
+              <div
+                className={`h-full w-full overflow-y-auto select-none ${
+                  snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
+                    ? "bg-custom-background-90"
+                    : "bg-custom-background-100"
+                } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                <CalendarIssueBlocks issues={issuesList} handleIssues={handleIssues} quickActions={quickActions} />
+                {enableQuickIssueCreate && (
+                  <div className="py-1 px-2">
+                    <CalendarInlineCreateIssueForm
+                      groupId={renderDateFormat(date.date)}
+                      prePopulatedData={{
+                        target_date: renderDateFormat(date.date),
+                      }}
+                    />
+                  </div>
+                )}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/index.ts b/web/components/issues/issue-layouts/calendar/dropdowns/index.ts
new file mode 100644
index 00000000000..3f32637c320
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/index.ts
@@ -0,0 +1,2 @@
+export * from "./months-dropdown";
+export * from "./options-dropdown";
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
new file mode 100644
index 00000000000..ba72bfc2628
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { ChevronLeft, ChevronRight } from "lucide-react";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+export const CalendarMonthsDropdown: React.FC = observer(() => {
+  const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const { activeMonthDate } = calendarStore.calendarFilters;
+
+  const getWeekLayoutHeader = (): string => {
+    const allDaysOfActiveWeek = calendarStore.allDaysOfActiveWeek;
+
+    if (!allDaysOfActiveWeek) return "Week view";
+
+    const daysList = Object.keys(allDaysOfActiveWeek);
+
+    const firstDay = new Date(daysList[0]);
+    const lastDay = new Date(daysList[daysList.length - 1]);
+
+    if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear())
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`;
+
+    if (firstDay.getFullYear() !== lastDay.getFullYear()) {
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+    } else
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+  };
+
+  const handleDateChange = (date: Date) => {
+    calendarStore.updateCalendarFilters({
+      activeMonthDate: date,
+    });
+  };
+
+  return (
+    <Popover className="relative">
+      <Popover.Button as={React.Fragment}>
+        <button
+          type="button"
+          ref={setReferenceElement}
+          className="outline-none text-xl font-semibold"
+          disabled={calendarLayout === "week"}
+        >
+          {calendarLayout === "month"
+            ? `${MONTHS_LIST[activeMonthDate.getMonth() + 1].title} ${activeMonthDate.getFullYear()}`
+            : getWeekLayoutHeader()}
+        </button>
+      </Popover.Button>
+      <Transition
+        as={React.Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="fixed z-50">
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className="bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded w-56 p-3 divide-y divide-custom-border-200"
+          >
+            <div className="flex items-center justify-between gap-2 pb-3">
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const previousYear = new Date(activeMonthDate.getFullYear() - 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(previousYear);
+                }}
+              >
+                <ChevronLeft size={14} />
+              </button>
+              <span className="text-xs">{activeMonthDate.getFullYear()}</span>
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const nextYear = new Date(activeMonthDate.getFullYear() + 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(nextYear);
+                }}
+              >
+                <ChevronRight size={14} />
+              </button>
+            </div>
+            <div className="grid grid-cols-4 gap-4 items-stretch justify-items-stretch pt-3">
+              {Object.values(MONTHS_LIST).map((month, index) => (
+                <button
+                  key={month.shortTitle}
+                  type="button"
+                  className="text-xs hover:bg-custom-background-80 rounded py-0.5"
+                  onClick={() => {
+                    const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
+                    handleDateChange(newDate);
+                  }}
+                >
+                  {month.shortTitle}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
new file mode 100644
index 00000000000..f9fb48f2120
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { ToggleSwitch } from "@plane/ui";
+// icons
+import { Check, ChevronUp } from "lucide-react";
+// types
+import { TCalendarLayouts } from "types";
+// constants
+import { CALENDAR_LAYOUTS } from "constants/calendar";
+
+export const CalendarOptionsDropdown: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+  const handleLayoutChange = (layout: TCalendarLayouts) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        calendar: {
+          ...issueFilterStore.userDisplayFilters.calendar,
+          layout,
+        },
+      },
+    });
+
+    calendarStore.updateCalendarPayload(
+      layout === "month" ? calendarStore.calendarFilters.activeMonthDate : calendarStore.calendarFilters.activeWeekDate
+    );
+  };
+
+  const handleToggleWeekends = () => {
+    const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+    if (!workspaceSlug || !projectId) return;
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        calendar: {
+          ...issueFilterStore.userDisplayFilters.calendar,
+          show_weekends: !showWeekends,
+        },
+      },
+    });
+  };
+
+  return (
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            <button
+              type="button"
+              ref={setReferenceElement}
+              className={`outline-none bg-custom-background-80 text-xs rounded flex items-center gap-1.5 px-2.5 py-1 hover:bg-custom-background-80 ${
+                open ? "text-custom-text-100" : "text-custom-text-200"
+              }`}
+            >
+              <div className="font-medium">Options</div>
+              <div
+                className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+              >
+                <ChevronUp width={12} strokeWidth={2} />
+              </div>
+            </button>
+          </Popover.Button>
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="fixed z-50">
+              <div
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+                className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded min-w-[12rem] p-1 overflow-hidden"
+              >
+                <div>
+                  {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
+                    <button
+                      key={layout}
+                      type="button"
+                      className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
+                      onClick={() => handleLayoutChange(layoutDetails.key)}
+                    >
+                      {layoutDetails.title}
+                      {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
+                    </button>
+                  ))}
+                  <button
+                    type="button"
+                    className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
+                    onClick={handleToggleWeekends}
+                  >
+                    Show weekends
+                    <ToggleSwitch value={showWeekends} onChange={() => {}} />
+                  </button>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
new file mode 100644
index 00000000000..034be98c4c6
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -0,0 +1,98 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "components/issues";
+// icons
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export const CalendarHeader: React.FC = observer(() => {
+  const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const { activeMonthDate, activeWeekDate } = calendarStore.calendarFilters;
+
+  const handlePrevious = () => {
+    if (calendarLayout === "month") {
+      const previousMonthYear =
+        activeMonthDate.getMonth() === 0 ? activeMonthDate.getFullYear() - 1 : activeMonthDate.getFullYear();
+      const previousMonthMonth = activeMonthDate.getMonth() === 0 ? 11 : activeMonthDate.getMonth() - 1;
+
+      const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
+
+      calendarStore.updateCalendarFilters({
+        activeMonthDate: previousMonthFirstDate,
+      });
+    } else {
+      const previousWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() - 7
+      );
+
+      calendarStore.updateCalendarFilters({
+        activeWeekDate: previousWeekDate,
+      });
+    }
+  };
+
+  const handleNext = () => {
+    if (calendarLayout === "month") {
+      const nextMonthYear =
+        activeMonthDate.getMonth() === 11 ? activeMonthDate.getFullYear() + 1 : activeMonthDate.getFullYear();
+      const nextMonthMonth = (activeMonthDate.getMonth() + 1) % 12;
+
+      const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
+
+      calendarStore.updateCalendarFilters({
+        activeMonthDate: nextMonthFirstDate,
+      });
+    } else {
+      const nextWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() + 7
+      );
+
+      calendarStore.updateCalendarFilters({
+        activeWeekDate: nextWeekDate,
+      });
+    }
+  };
+
+  const handleToday = () => {
+    const today = new Date();
+    const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+    calendarStore.updateCalendarFilters({
+      activeMonthDate: firstDayOfCurrentMonth,
+      activeWeekDate: today,
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 px-3 mb-4">
+      <div className="flex items-center gap-1.5">
+        <button type="button" className="grid place-items-center" onClick={handlePrevious}>
+          <ChevronLeft size={16} strokeWidth={2} />
+        </button>
+        <button type="button" className="grid place-items-center" onClick={handleNext}>
+          <ChevronRight size={16} strokeWidth={2} />
+        </button>
+        <CalendarMonthsDropdown />
+      </div>
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          className="px-2.5 py-1 text-xs bg-custom-background-80 rounded font-medium text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleToday}
+        >
+          Today
+        </button>
+        <CalendarOptionsDropdown />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/index.ts b/web/components/issues/issue-layouts/calendar/index.ts
new file mode 100644
index 00000000000..a33cf557b18
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/index.ts
@@ -0,0 +1,10 @@
+export * from "./dropdowns";
+export * from "./roots";
+export * from "./calendar";
+export * from "./types.d";
+export * from "./day-tile";
+export * from "./header";
+export * from "./issue-blocks";
+export * from "./week-days";
+export * from "./week-header";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
new file mode 100644
index 00000000000..deef5f1bc35
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
@@ -0,0 +1,213 @@
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// icons
+import { PlusIcon } from "lucide-react";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  dependencies?: any[];
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
+  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
+
+  const router = useRouter();
+  const { moduleId, cycleId, viewId } = router.query;
+
+  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const { right } = ref.current.getBoundingClientRect();
+
+    const width = right;
+
+    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
+
+    if (width > innerWidth) setIsThereSpaceOnRight(false);
+    else setIsThereSpaceOnRight(true);
+  }, [ref, deps, container]);
+
+  return isThereSpaceOnRight;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full pr-2 py-1.5 rounded-md bg-transparent text-xs font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, dependencies = [], groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLDivElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          ref={ref}
+          className={`transition-all z-20 w-full ${
+            isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
+          }`}
+        >
+          <form
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      )}
+
+      {!isOpen && (
+        <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
+          <button
+            type="button"
+            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
new file mode 100644
index 00000000000..c4795739ccc
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -0,0 +1,76 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Draggable } from "@hello-pangea/dnd";
+// components
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssue[] | null;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+};
+
+export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
+  const { issues, handleIssues, quickActions } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <>
+      {issues?.map((issue, index) => (
+        <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          {(provided, snapshot) => (
+            <div
+              className="p-1 px-2 relative"
+              {...provided.draggableProps}
+              {...provided.dragHandleProps}
+              ref={provided.innerRef}
+            >
+              {issue?.tempId !== undefined && (
+                <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+              )}
+              <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
+                <a
+                  className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
+                    snapshot.isDragging
+                      ? "shadow-custom-shadow-rg bg-custom-background-90"
+                      : "bg-custom-background-100 hover:bg-custom-background-90"
+                  }`}
+                >
+                  <span
+                    className="h-full w-0.5 rounded flex-shrink-0"
+                    style={{
+                      backgroundColor: issue.state_detail.color,
+                    }}
+                  />
+                  <div className="text-xs text-custom-text-300 flex-shrink-0">
+                    {issue.project_detail.identifier}-{issue.sequence_id}
+                  </div>
+                  <IssuePeekOverview
+                    workspaceSlug={issue?.workspace_detail?.slug}
+                    projectId={issue?.project_detail?.id}
+                    issueId={issue?.id}
+                    // TODO: add the logic here
+                    handleIssue={(issueToUpdate) => {
+                      handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
+                    }}
+                  >
+                    <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                      <span className="text-xs flex-grow truncate">{issue.name}</span>
+                    </Tooltip>
+                  </IssuePeekOverview>
+                  <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
+                </a>
+              </Link>
+            </div>
+          )}
+        </Draggable>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
new file mode 100644
index 00000000000..a340f534e60
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart, CycleIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CycleCalendarLayout: React.FC = observer(() => {
+  const {
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    cycleIssueCalendarView: cycleIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    cycleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = cycleIssueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(date, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(date, null, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <CycleIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+              handleRemoveFromCycle={async () => handleIssues(issue.target_date ?? "", issue, "remove")}
+            />
+          )}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/index.ts b/web/components/issues/issue-layouts/calendar/roots/index.ts
new file mode 100644
index 00000000000..19de048067f
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./project-root";
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
new file mode 100644
index 00000000000..a5f3b9cc19f
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart, ModuleIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ModuleCalendarLayout: React.FC = observer(() => {
+  const {
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    moduleIssueCalendarView: moduleIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    moduleIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = moduleIssueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(date, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ModuleIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+              handleRemoveFromModule={async () => handleIssues(issue.target_date ?? "", issue, "remove")}
+            />
+          )}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
new file mode 100644
index 00000000000..dfd0208a680
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart, ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CalendarLayout: React.FC = observer(() => {
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    issueCalendarView: issueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    issueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = issueStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        issueStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ProjectIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+            />
+          )}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
new file mode 100644
index 00000000000..2d5ed50bb73
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart, ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ProjectViewCalendarLayout: React.FC = observer(() => {
+  const {
+    projectViewIssues: projectViewIssuesStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    projectViewIssueCalendarViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = projectViewIssuesStore.getIssues;
+
+  const handleIssues = useCallback(
+    (date: string, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        projectViewIssuesStore.updateIssueStructure(date, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      } else {
+        projectViewIssuesStore.deleteIssue(date, null, issue);
+        issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
+      }
+    },
+    [projectViewIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+          showWeekends={issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false}
+          handleIssues={handleIssues}
+          quickActions={(issue) => (
+            <ProjectIssueQuickActions
+              issue={issue}
+              handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
+              handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
+            />
+          )}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/types.d.ts b/web/components/issues/issue-layouts/calendar/types.d.ts
new file mode 100644
index 00000000000..3855aeb86ea
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/types.d.ts
@@ -0,0 +1,24 @@
+export interface ICalendarDate {
+  date: Date;
+  year: number;
+  month: number;
+  day: number;
+  week: number; // week number wrt year, eg- 51, 52
+  is_current_month: boolean;
+  is_current_week: boolean;
+  is_today: boolean;
+}
+
+export interface ICalendarWeek {
+  [date: string]: ICalendarDate;
+}
+
+export interface ICalendarMonth {
+  [monthIndex: string]: {
+    [weekNumber: string]: ICalendarWeek;
+  };
+}
+
+export interface ICalendarPayload {
+  [year: string]: ICalendarMonth;
+}
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
new file mode 100644
index 00000000000..6762d9db5f2
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -0,0 +1,54 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarDayTile } from "components/issues";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { ICalendarDate, ICalendarWeek } from "./types";
+import { IIssueGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  week: ICalendarWeek | undefined;
+  handleIssues: (date: string, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
+};
+
+export const CalendarWeekDays: React.FC<Props> = observer((props) => {
+  const { issues, week, handleIssues, quickActions, enableQuickIssueCreate } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+  if (!week) return null;
+
+  return (
+    <div
+      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+        calendarLayout === "month" ? "" : "h-full"
+      }`}
+    >
+      {Object.values(week).map((date: ICalendarDate) => {
+        if (!showWeekends && (date.date.getDay() === 0 || date.date.getDay() === 6)) return null;
+
+        return (
+          <CalendarDayTile
+            key={renderDateFormat(date.date)}
+            date={date}
+            issues={issues}
+            handleIssues={handleIssues}
+            quickActions={quickActions}
+            enableQuickIssueCreate={enableQuickIssueCreate}
+          />
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
new file mode 100644
index 00000000000..52e64e5aea1
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -0,0 +1,34 @@
+import { observer } from "mobx-react-lite";
+
+// constants
+import { DAYS_LIST } from "constants/calendar";
+
+type Props = {
+  isLoading: boolean;
+  showWeekends: boolean;
+};
+
+export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
+  const { isLoading, showWeekends } = props;
+
+  return (
+    <div
+      className={`relative grid text-sm font-medium divide-x-[0.5px] divide-custom-border-200 ${
+        showWeekends ? "grid-cols-7" : "grid-cols-5"
+      }`}
+    >
+      {isLoading && (
+        <div className="absolute h-[1.5px] w-3/4 bg-custom-primary-100 animate-[bar-loader_2s_linear_infinite]" />
+      )}
+      {Object.values(DAYS_LIST).map((day) => {
+        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+
+        return (
+          <div key={day.shortTitle} className="h-11 bg-custom-background-90 flex items-center px-4">
+            {day.shortTitle}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
new file mode 100644
index 00000000000..53ea4500145
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmptyState } from "components/common";
+import { ExistingIssuesListModal } from "components/core";
+// ui
+import { Button } from "@plane/ui";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+// types
+import { ISearchIssueResponse } from "types";
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
+};
+
+export const CycleEmptyState: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, cycleId } = props;
+  // states
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+
+  const { cycleIssue: cycleIssueStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    await cycleIssueStore
+      .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        searchParams={{ cycle: true }}
+        handleOnSubmit={handleAddIssuesToCycle}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Cycle 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."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setCycleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/global-view.tsx b/web/components/issues/issue-layouts/empty-states/global-view.tsx
new file mode 100644
index 00000000000..dc782912725
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -0,0 +1,25 @@
+import { PlusIcon } from "lucide-react";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+
+export const GlobalViewEmptyState: React.FC = () => (
+  <div className="h-full w-full grid 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."
+      image={emptyIssue}
+      primaryButton={{
+        text: "New issue",
+        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+        onClick: () => {
+          const e = new KeyboardEvent("keydown", {
+            key: "c",
+          });
+          document.dispatchEvent(e);
+        },
+      }}
+    />
+  </div>
+);
diff --git a/web/components/issues/issue-layouts/empty-states/index.ts b/web/components/issues/issue-layouts/empty-states/index.ts
new file mode 100644
index 00000000000..0373709d282
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle";
+export * from "./global-view";
+export * from "./module";
+export * from "./project-view";
+export * from "./project";
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
new file mode 100644
index 00000000000..7e5edeeb87e
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -0,0 +1,81 @@
+import { PlusIcon } from "lucide-react";
+// components
+import { EmptyState } from "components/common";
+import { Button } from "@plane/ui";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+import { ExistingIssuesListModal } from "components/core";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { ISearchIssueResponse } from "types";
+import useToast from "hooks/use-toast";
+import { useState } from "react";
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  moduleId: string | undefined;
+};
+
+export const ModuleEmptyState: React.FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, moduleId } = props;
+  // states
+  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
+
+  const { moduleIssue: moduleIssueStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    await moduleIssueStore
+      .addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={moduleIssuesListModal}
+        handleClose={() => setModuleIssuesListModal(false)}
+        searchParams={{ module: true }}
+        handleOnSubmit={handleAddIssuesToModule}
+      />
+      <div className="h-full w-full grid place-items-center">
+        <EmptyState
+          title="Module 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."
+          image={emptyIssue}
+          primaryButton={{
+            text: "New issue",
+            icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "c",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+          secondaryButton={
+            <Button
+              variant="neutral-primary"
+              prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+              onClick={() => setModuleIssuesListModal(true)}
+            >
+              Add an existing issue
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/empty-states/project-view.tsx b/web/components/issues/issue-layouts/empty-states/project-view.tsx
new file mode 100644
index 00000000000..2b046a14f4e
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -0,0 +1,25 @@
+import { PlusIcon } from "lucide-react";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+
+export const ProjectViewEmptyState: React.FC = () => (
+  <div className="h-full w-full grid 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."
+      image={emptyIssue}
+      primaryButton={{
+        text: "New issue",
+        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+        onClick: () => {
+          const e = new KeyboardEvent("keydown", {
+            key: "c",
+          });
+          document.dispatchEvent(e);
+        },
+      }}
+    />
+  </div>
+);
diff --git a/web/components/issues/issue-layouts/empty-states/project.tsx b/web/components/issues/issue-layouts/empty-states/project.tsx
new file mode 100644
index 00000000000..03c4522c0db
--- /dev/null
+++ b/web/components/issues/issue-layouts/empty-states/project.tsx
@@ -0,0 +1,25 @@
+import { PlusIcon } from "lucide-react";
+// components
+import { EmptyState } from "components/common";
+// assets
+import emptyIssue from "public/empty-state/issue.svg";
+
+export const ProjectEmptyState: React.FC = () => (
+  <div className="h-full w-full grid place-items-center">
+    <EmptyState
+      title="Project 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."
+      image={emptyIssue}
+      primaryButton={{
+        text: "New issue",
+        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
+        onClick: () => {
+          const e = new KeyboardEvent("keydown", {
+            key: "c",
+          });
+          document.dispatchEvent(e);
+        },
+      }}
+    />
+  </div>
+);
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
new file mode 100644
index 00000000000..a94be20a632
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -0,0 +1,54 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// helpers
+import { renderLongDateFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((date) => (
+        <div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(date)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
new file mode 100644
index 00000000000..83c072ede28
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -0,0 +1,110 @@
+import { observer } from "mobx-react-lite";
+
+// components
+import {
+  AppliedDateFilters,
+  AppliedLabelsFilters,
+  AppliedMembersFilters,
+  AppliedPriorityFilters,
+  AppliedProjectFilters,
+  AppliedStateFilters,
+  AppliedStateGroupFilters,
+} from "components/issues";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+
+type Props = {
+  appliedFilters: IIssueFilterOptions;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
+  labels?: IIssueLabels[] | undefined;
+  members?: IUserLite[] | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
+const dateFilters = ["start_date", "target_date"];
+
+export const AppliedFiltersList: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof IIssueFilterOptions;
+
+        if (!value) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            {membersFilters.includes(filterKey) && (
+              <AppliedMembersFilters
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                members={members}
+                values={value}
+              />
+            )}
+            {dateFilters.includes(filterKey) && (
+              <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
+            )}
+            {filterKey === "labels" && (
+              <AppliedLabelsFilters
+                handleRemove={(val) => handleRemoveFilter("labels", val)}
+                labels={labels}
+                values={value}
+              />
+            )}
+            {filterKey === "priority" && (
+              <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
+            )}
+            {filterKey === "state" && (
+              <AppliedStateFilters
+                handleRemove={(val) => handleRemoveFilter("state", val)}
+                states={states}
+                values={value}
+              />
+            )}
+            {filterKey === "state_group" && (
+              <AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
+            )}
+            {filterKey === "project" && (
+              <AppliedProjectFilters
+                handleRemove={(val) => handleRemoveFilter("project", val)}
+                projects={projects}
+                values={value}
+              />
+            )}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemoveFilter(filterKey, null)}
+            >
+              <X size={12} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleClearAllFilters}
+        className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
+      >
+        Clear all
+        <X size={12} strokeWidth={2} />
+      </button>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
new file mode 100644
index 00000000000..a9feecfdf02
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
@@ -0,0 +1,9 @@
+export * from "./roots";
+export * from "./date";
+export * from "./filters-list";
+export * from "./label";
+export * from "./members";
+export * from "./priority";
+export * from "./project";
+export * from "./state";
+export * from "./state-group";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
new file mode 100644
index 00000000000..abc5a8b2c9f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabels[] | undefined;
+  values: string[];
+};
+
+export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, labels, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
new file mode 100644
index 00000000000..cef65882cb6
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -0,0 +1,40 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  members: IUserLite[] | undefined;
+  values: string[];
+};
+
+export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, members, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((memberId) => {
+        const memberDetails = members?.find((m) => m.id === memberId);
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(memberId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
new file mode 100644
index 00000000000..7b76f8b5140
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -0,0 +1,47 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { PriorityIcon } from "@plane/ui";
+import { X } from "lucide-react";
+// types
+import { TIssuePriorities } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((priority) => (
+        <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <PriorityIcon
+            priority={priority as TIssuePriorities}
+            className={`h-3 w-3 ${
+              priority === "urgent"
+                ? "text-red-500"
+                : priority === "high"
+                ? "text-orange-500"
+                : priority === "medium"
+                ? "text-yellow-500"
+                : priority === "low"
+                ? "text-green-500"
+                : ""
+            }`}
+          />
+          {priority}
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(priority)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
new file mode 100644
index 00000000000..d8bc758ea96
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -0,0 +1,49 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// types
+import { IProject } from "types";
+import { renderEmoji } from "helpers/emoji.helper";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  projects: IProject[] | undefined;
+  values: string[];
+};
+
+export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, projects, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((projectId) => {
+        const projectDetails = projects?.find((p) => p.id === projectId);
+
+        if (!projectDetails) return null;
+
+        return (
+          <div key={projectId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            {projectDetails.emoji ? (
+              <span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
+            ) : projectDetails.icon_prop ? (
+              <div className="grid place-items-center flex-shrink-0 -my-1">{renderEmoji(projectDetails.icon_prop)}</div>
+            ) : (
+              <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                {projectDetails?.name.charAt(0)}
+              </span>
+            )}
+            <span className="normal-case">{projectDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(projectId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
new file mode 100644
index 00000000000..20e20d34e37
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
+
+  const userFilters = archivedIssueFiltersStore.userFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: null,
+        },
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: { ...newFilters },
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
new file mode 100644
index 00000000000..5910eff960a
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -0,0 +1,77 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const CycleAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { project: projectStore, cycleIssueFilter: cycleIssueFilterStore } = useMobxStore();
+
+  const userFilters = cycleIssueFilterStore.cycleFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = cycleIssueFilterStore.cycleFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId?.toString(), {
+      ...newFilters,
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
new file mode 100644
index 00000000000..ad1712b55e3
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -0,0 +1,114 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// ui
+import { Button } from "@plane/ui";
+// helpers
+import { areFiltersDifferent } from "helpers/filter.helper";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const GlobalViewsAppliedFiltersRoot = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewFilters: globalViewFiltersStore,
+    project: projectStore,
+    workspace: workspaceStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!globalViewId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!globalViewId || !storedFilters) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(storedFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      ...newFilters,
+    });
+  };
+
+  const handleUpdateView = () => {
+    if (!workspaceSlug || !globalViewId || !viewDetails) return;
+
+    globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
+      query_data: {
+        ...viewDetails.query_data,
+        filters: {
+          ...(storedFilters ?? {}),
+        },
+      },
+    });
+  };
+
+  // update stored filters when view details are fetched
+  useEffect(() => {
+    if (!globalViewId || !viewDetails) return;
+
+    if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
+  }, [globalViewId, globalViewFiltersStore, viewDetails]);
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-start justify-between gap-4 p-4">
+      <AppliedFiltersList
+        appliedFilters={storedFilters ?? {}}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={workspaceStore.workspaceLabels ?? undefined}
+        members={workspaceStore.workspaceMembers?.map((m) => m.member)}
+        projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
+        <Button variant="primary" onClick={handleUpdateView}>
+          Update view
+        </Button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
new file mode 100644
index 00000000000..e5030d7c4e6
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
@@ -0,0 +1,6 @@
+export * from "./cycle-root";
+export * from "./global-view-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./project-root";
+export * from "./archived-issue";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
new file mode 100644
index 00000000000..6bcfb40f56d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -0,0 +1,77 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+
+  const userFilters = moduleFilterStore.moduleFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), {
+      ...newFilters,
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
new file mode 100644
index 00000000000..505649bce30
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+
+  const userFilters = issueFilterStore.userFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: null,
+        },
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = issueFilterStore.userFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: { ...newFilters },
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
new file mode 100644
index 00000000000..c8ee36fe75d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -0,0 +1,111 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// ui
+import { Button } from "@plane/ui";
+// helpers
+import { areFiltersDifferent } from "helpers/filter.helper";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    project: projectStore,
+    projectViews: projectViewsStore,
+    projectViewFilters: projectViewFiltersStore,
+  } = useMobxStore();
+
+  const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
+  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!viewId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = storedFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !viewId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(storedFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+      ...newFilters,
+    });
+  };
+
+  const handleUpdateView = () => {
+    if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
+
+    projectViewsStore.updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), {
+      query_data: {
+        ...viewDetails.query_data,
+        ...(storedFilters ?? {}),
+      },
+    });
+  };
+
+  // update stored filters when view details are fetched
+  useEffect(() => {
+    if (!viewId || !viewDetails) return;
+
+    if (!projectViewFiltersStore.storedFilters[viewId.toString()])
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), viewDetails?.query_data ?? {});
+  }, [projectViewFiltersStore, viewDetails, viewId]);
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-center justify-between gap-4 p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
+        <Button variant="primary" size="sm" onClick={handleUpdateView}>
+          Update view
+        </Button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
new file mode 100644
index 00000000000..d0707efda44
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -0,0 +1,33 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { StateGroupIcon } from "@plane/ui";
+import { X } from "lucide-react";
+import { TStateGroups } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((stateGroup) => (
+        <div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
+          {stateGroup}
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(stateGroup)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
new file mode 100644
index 00000000000..5293a623a3b
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { StateGroupIcon } from "@plane/ui";
+import { X } from "lucide-react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IStateResponse } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IStateResponse | undefined;
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, states, values } = props;
+
+  const statesList = getStatesList(states);
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((stateId) => {
+        const stateDetails = statesList?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
new file mode 100644
index 00000000000..0133f901542
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import {
+  FilterDisplayProperties,
+  FilterExtraOptions,
+  FilterGroupBy,
+  FilterIssueType,
+  FilterOrderBy,
+  FilterSubGroupBy,
+} from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { ILayoutDisplayFiltersOptions } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+};
+
+export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
+  const {
+    displayFilters,
+    displayProperties,
+    handleDisplayFiltersUpdate,
+    handleDisplayPropertiesUpdate,
+    layoutDisplayFiltersOptions,
+  } = props;
+
+  const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
+    Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
+
+  return (
+    <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
+      {/* display properties */}
+      {layoutDisplayFiltersOptions?.display_properties && (
+        <div className="py-2">
+          <FilterDisplayProperties displayProperties={displayProperties} handleUpdate={handleDisplayPropertiesUpdate} />
+        </div>
+      )}
+
+      {/* group by */}
+      {isDisplayFilterEnabled("group_by") && (
+        <div className="py-2">
+          <FilterGroupBy
+            displayFilters={displayFilters}
+            groupByOptions={layoutDisplayFiltersOptions?.display_filters.group_by ?? []}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                group_by: val,
+              })
+            }
+          />
+        </div>
+      )}
+
+      {/* sub-group by */}
+      {isDisplayFilterEnabled("sub_group_by") &&
+        displayFilters.group_by !== null &&
+        displayFilters.layout === "kanban" && (
+          <div className="py-2">
+            <FilterSubGroupBy
+              displayFilters={displayFilters}
+              handleUpdate={(val) =>
+                handleDisplayFiltersUpdate({
+                  sub_group_by: val,
+                })
+              }
+              subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+            />
+          </div>
+        )}
+
+      {/* order by */}
+      {isDisplayFilterEnabled("order_by") && (
+        <div className="py-2">
+          <FilterOrderBy
+            selectedOrderBy={displayFilters.order_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                order_by: val,
+              })
+            }
+            orderByOptions={layoutDisplayFiltersOptions?.display_filters.order_by ?? []}
+          />
+        </div>
+      )}
+
+      {/* issue type */}
+      {isDisplayFilterEnabled("type") && (
+        <div className="py-2">
+          <FilterIssueType
+            selectedIssueType={displayFilters.type}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                type: val,
+              })
+            }
+          />
+        </div>
+      )}
+
+      {/* Options */}
+      {layoutDisplayFiltersOptions?.extra_options.access && (
+        <div className="py-2">
+          <FilterExtraOptions
+            selectedExtraOptions={{
+              show_empty_groups: displayFilters.show_empty_groups ?? true,
+              sub_issue: displayFilters.sub_issue ?? true,
+            }}
+            handleUpdate={(key, val) =>
+              handleDisplayFiltersUpdate({
+                [key]: val,
+              })
+            }
+            enabledExtraOptions={layoutDisplayFiltersOptions?.extra_options.values}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
new file mode 100644
index 00000000000..c5d4a724d43
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader } from "../helpers/filter-header";
+// types
+import { IIssueDisplayProperties } from "types";
+// constants
+import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+};
+
+export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
+  const { displayProperties, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Display Properties"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div className="flex items-center gap-2 flex-wrap mt-1">
+          {ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
+            <button
+              key={displayProperty.key}
+              type="button"
+              className={`rounded transition-all text-xs border px-2 py-0.5 ${
+                displayProperties?.[displayProperty.key]
+                  ? "bg-custom-primary-100 border-custom-primary-100 text-white"
+                  : "border-custom-border-200 hover:bg-custom-background-80"
+              }`}
+              onClick={() =>
+                handleUpdate({
+                  [displayProperty.key]: !displayProperties?.[displayProperty.key],
+                })
+              }
+            >
+              {displayProperty.title}
+            </button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
new file mode 100644
index 00000000000..111d25772e7
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "types";
+// constants
+import { ISSUE_EXTRA_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedExtraOptions: {
+    sub_issue: boolean;
+    show_empty_groups: boolean;
+  };
+  handleUpdate: (key: keyof IIssueDisplayFilterOptions, val: boolean) => void;
+  enabledExtraOptions: TIssueExtraOptions[];
+};
+
+export const FilterExtraOptions: React.FC<Props> = observer((props) => {
+  const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
+
+  return (
+    <>
+      <FilterHeader
+        title="Extra Options"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_EXTRA_OPTIONS.map((option) => {
+            if (!isExtraOptionEnabled(option.key)) return null;
+
+            return (
+              <FilterOption
+                key={option.key}
+                isChecked={selectedExtraOptions?.[option.key] ? true : false}
+                onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
+                title={option.title}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
new file mode 100644
index 00000000000..aa057e4174f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  groupByOptions: TIssueGroupByOptions[];
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+};
+
+export const FilterGroupBy: React.FC<Props> = observer((props) => {
+  const { displayFilters, groupByOptions, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters.group_by ?? null;
+  const selectedSubGroupBy = displayFilters.sub_group_by ?? null;
+
+  return (
+    <>
+      <FilterHeader
+        title="Group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => groupByOptions.includes(option.key)).map((groupBy) => {
+            if (displayFilters.layout === "kanban" && selectedSubGroupBy !== null && groupBy.key === selectedSubGroupBy)
+              return null;
+
+            return (
+              <FilterOption
+                key={groupBy?.key}
+                isChecked={selectedGroupBy === groupBy?.key ? true : false}
+                onClick={() => handleUpdate(groupBy.key)}
+                title={groupBy.title}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/index.ts b/web/components/issues/issue-layouts/filters/header/display-filters/index.ts
new file mode 100644
index 00000000000..741d0a22a8e
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/index.ts
@@ -0,0 +1,7 @@
+export * from "./display-filters-selection";
+export * from "./display-properties";
+export * from "./extra-options";
+export * from "./group-by";
+export * from "./issue-type";
+export * from "./order-by";
+export * from "./sub-group-by";
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
new file mode 100644
index 00000000000..a6fa2bf0612
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueTypeFilters } from "types";
+// constants
+import { ISSUE_FILTER_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedIssueType: TIssueTypeFilters | undefined;
+  handleUpdate: (val: TIssueTypeFilters) => void;
+};
+
+export const FilterIssueType: React.FC<Props> = observer((props) => {
+  const { selectedIssueType, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+
+  const activeIssueType = selectedIssueType ?? null;
+
+  return (
+    <>
+      <FilterHeader
+        title="Issue Type"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_FILTER_OPTIONS.map((issueType) => (
+            <FilterOption
+              key={issueType?.key}
+              isChecked={activeIssueType === issueType?.key ? true : false}
+              onClick={() => handleUpdate(issueType?.key)}
+              title={issueType.title}
+              multiple={false}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
new file mode 100644
index 00000000000..004d1b6e94f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueOrderByOptions } from "types";
+// constants
+import { ISSUE_ORDER_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedOrderBy: TIssueOrderByOptions | undefined;
+  handleUpdate: (val: TIssueOrderByOptions) => void;
+  orderByOptions: TIssueOrderByOptions[];
+};
+
+export const FilterOrderBy: React.FC<Props> = observer((props) => {
+  const { selectedOrderBy, handleUpdate, orderByOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const activeOrderBy = selectedOrderBy ?? "-created_at";
+
+  return (
+    <>
+      <FilterHeader
+        title="Order by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_ORDER_BY_OPTIONS.filter((option) => orderByOptions.includes(option.key)).map((orderBy) => (
+            <FilterOption
+              key={orderBy?.key}
+              isChecked={activeOrderBy === orderBy?.key ? true : false}
+              onClick={() => handleUpdate(orderBy.key)}
+              title={orderBy.title}
+              multiple={false}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
new file mode 100644
index 00000000000..f6642242778
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+  subGroupByOptions: TIssueGroupByOptions[];
+};
+
+export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+  const { displayFilters, handleUpdate, subGroupByOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters.group_by ?? null;
+  const selectedSubGroupBy = displayFilters.sub_group_by ?? null;
+
+  return (
+    <>
+      <FilterHeader
+        title="Sub-group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => subGroupByOptions.includes(option.key)).map((subGroupBy) => {
+            if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
+
+            return (
+              <FilterOption
+                key={subGroupBy?.key}
+                isChecked={selectedSubGroupBy === subGroupBy?.key ? true : false}
+                onClick={() => handleUpdate(subGroupBy.key)}
+                title={subGroupBy.title}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
new file mode 100644
index 00000000000..7c92b0ed916
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterAssignees: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Assignee${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`assignees-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
new file mode 100644
index 00000000000..90873cb7b8d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterCreatedBy: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Created by${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`created-by-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
new file mode 100644
index 00000000000..f07a47974c8
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+// components
+import {
+  FilterAssignees,
+  FilterMentions,
+  FilterCreatedBy,
+  FilterLabels,
+  FilterPriority,
+  FilterProjects,
+  FilterStartDate,
+  FilterState,
+  FilterStateGroup,
+  FilterTargetDate,
+} from "components/issues";
+// types
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+// constants
+import { ILayoutDisplayFiltersOptions } from "constants/issue";
+
+type Props = {
+  filters: IIssueFilterOptions;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  labels?: IIssueLabels[] | undefined;
+  members?: IUserLite[] | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, members, projects, states } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
+        <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("priority", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state group */}
+        {isFilterEnabled("state_group") && (
+          <div className="py-2">
+            <FilterStateGroup
+              appliedFilters={filters.state_group ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state", val)}
+              searchQuery={filtersSearchQuery}
+              states={states}
+            />
+          </div>
+        )}
+
+        {/* assignees */}
+        {isFilterEnabled("assignees") && (
+          <div className="py-2">
+            <FilterAssignees
+              appliedFilters={filters.assignees ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* assignees */}
+        {isFilterEnabled("mentions") && (
+          <div className="py-2">
+            <FilterMentions
+              appliedFilters={filters.mentions ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("mentions", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* created_by */}
+        {isFilterEnabled("created_by") && (
+          <div className="py-2">
+            <FilterCreatedBy
+              appliedFilters={filters.created_by ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
+              members={members}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("labels", val)}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* project */}
+        {isFilterEnabled("project") && (
+          <div className="py-2">
+            <FilterProjects
+              appliedFilters={filters.project ?? null}
+              projects={projects}
+              handleUpdate={(val) => handleFiltersUpdate("project", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* start_date */}
+        {isFilterEnabled("start_date") && (
+          <div className="py-2">
+            <FilterStartDate
+              appliedFilters={filters.start_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* target_date */}
+        {isFilterEnabled("target_date") && (
+          <div className="py-2">
+            <FilterTargetDate
+              appliedFilters={filters.target_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/index.ts b/web/components/issues/issue-layouts/filters/header/filters/index.ts
new file mode 100644
index 00000000000..2d3a04d0f7f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -0,0 +1,11 @@
+export * from "./assignee";
+export * from "./mentions";
+export * from "./created-by";
+export * from "./filters-selection";
+export * from "./labels";
+export * from "./priority";
+export * from "./project";
+export * from "./start-date";
+export * from "./state-group";
+export * from "./state";
+export * from "./target-date";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
new file mode 100644
index 00000000000..764d2995174
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+
+const LabelIcons = ({ color }: { color: string }) => (
+  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
+);
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  labels: IIssueLabels[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
new file mode 100644
index 00000000000..5d7a6309788
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader, Avatar } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMentions: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, members, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Mention${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`mentions-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />}
+                    title={member.display_name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
new file mode 100644
index 00000000000..66089710021
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// icons
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+const PriorityIcons = ({
+  priority,
+  size = 12,
+  strokeWidth = 1.5,
+}: {
+  priority: string;
+  size?: number;
+  strokeWidth?: number;
+}) => {
+  if (priority === "urgent")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-red-500 bg-red-500 text-white flex justify-center items-center">
+        <AlertCircle size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "high")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-red-500 flex justify-center items-center pl-1">
+        <SignalHigh size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "medium")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-orange-500 flex justify-center items-center pl-1">
+        <SignalMedium size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "low")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-green-500 flex justify-center items-center pl-1">
+        <SignalLow size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  return (
+    <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-custom-text-400 flex justify-center items-center">
+      <Ban size={size} strokeWidth={strokeWidth} />
+    </div>
+  );
+};
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_PRIORITIES.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                onClick={() => handleUpdate(priority.key)}
+                icon={<PriorityIcons priority={priority.key} />}
+                title={priority.title}
+              />
+            ))
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
new file mode 100644
index 00000000000..9dcc6b54272
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  projects: IProject[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterProjects: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, projects, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Project${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((project) => (
+                  <FilterOption
+                    key={`project-${project.id}`}
+                    isChecked={appliedFilters?.includes(project.id) ? true : false}
+                    onClick={() => handleUpdate(project.id)}
+                    icon={
+                      project.emoji ? (
+                        <span className="grid flex-shrink-0 place-items-center text-sm">
+                          {renderEmoji(project.emoji)}
+                        </span>
+                      ) : project.icon_prop ? (
+                        <div className="grid place-items-center flex-shrink-0 -my-1">
+                          {renderEmoji(project.icon_prop)}
+                        </div>
+                      ) : (
+                        <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {project?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                    title={project.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
new file mode 100644
index 00000000000..e585332708b
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
new file mode 100644
index 00000000000..fb4bd6e1022
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// icons
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { ISSUE_STATE_GROUPS } from "constants/issue";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStateGroup: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_STATE_GROUPS.filter((s) => s.key.includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State group${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((stateGroup) => (
+                <FilterOption
+                  key={stateGroup.key}
+                  isChecked={appliedFilters?.includes(stateGroup.key) ? true : false}
+                  onClick={() => handleUpdate(stateGroup.key)}
+                  icon={<StateGroupIcon stateGroup={stateGroup.key} />}
+                  title={stateGroup.title}
+                />
+              ))}
+              {filteredOptions.length > 5 && (
+                <button
+                  type="button"
+                  className="text-custom-primary-100 text-xs font-medium ml-8"
+                  onClick={handleViewToggle}
+                >
+                  {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                </button>
+              )}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
new file mode 100644
index 00000000000..20caebc20f9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader, StateGroupIcon } from "@plane/ui";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IStateResponse } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+  states: IStateResponse | undefined;
+};
+
+export const FilterState: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, searchQuery, states } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const statesList = getStatesList(states);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
new file mode 100644
index 00000000000..f914eb194ce
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterTargetDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Target date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
new file mode 100644
index 00000000000..0f93b75c94c
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -0,0 +1,72 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown", placement } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button
+                ref={setReferenceElement}
+                variant="neutral-primary"
+                size="sm"
+                appendIcon={
+                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                }
+              >
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
new file mode 100644
index 00000000000..4513b079550
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+// lucide icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface IFilterHeader {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+}
+
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
+  <div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
+    <div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
+    <button
+      type="button"
+      className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
+      onClick={handleIsPreviewEnabled}
+    >
+      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+    </button>
+  </div>
+);
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
new file mode 100644
index 00000000000..4b6f1b0417c
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+// lucide icons
+import { Check } from "lucide-react";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export const FilterOption: React.FC<Props> = (props) => {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
+      onClick={onClick}
+    >
+      <div
+        className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
+          isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
+        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+      >
+        {isChecked && <Check size={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
+        <div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
+      </div>
+    </button>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/index.ts b/web/components/issues/issue-layouts/filters/header/helpers/index.ts
new file mode 100644
index 00000000000..ef38d9884d5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/index.ts
@@ -0,0 +1,3 @@
+export * from "./dropdown";
+export * from "./filter-header";
+export * from "./filter-option";
diff --git a/web/components/issues/issue-layouts/filters/header/index.ts b/web/components/issues/issue-layouts/filters/header/index.ts
new file mode 100644
index 00000000000..61375f0ffab
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/index.ts
@@ -0,0 +1,4 @@
+export * from "./display-filters";
+export * from "./filters";
+export * from "./helpers";
+export * from "./layout-selection";
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
new file mode 100644
index 00000000000..8212471a591
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { TIssueLayouts } from "types";
+// constants
+import { ISSUE_LAYOUTS } from "constants/issue";
+
+type Props = {
+  layouts: TIssueLayouts[];
+  onChange: (layout: TIssueLayouts) => void;
+  selectedLayout: TIssueLayouts | undefined;
+};
+
+export const LayoutSelection: React.FC<Props> = (props) => {
+  const { layouts, onChange, selectedLayout } = props;
+
+  return (
+    <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+      {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
+        <Tooltip key={layout.key} tooltipContent={layout.title}>
+          <button
+            type="button"
+            className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+              selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+            }`}
+            onClick={() => onChange(layout.key)}
+          >
+            <layout.icon
+              size={14}
+              strokeWidth={2}
+              className={`h-3.5 w-3.5 ${
+                selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+              }`}
+            />
+          </button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/index.ts b/web/components/issues/issue-layouts/filters/index.ts
new file mode 100644
index 00000000000..427d969431f
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./header";
+export * from "./applied-filters";
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
new file mode 100644
index 00000000000..7cf8cc66420
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -0,0 +1,71 @@
+// ui
+import { Tooltip, StateGroupIcon } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { IBlockUpdateData } from "components/gantt-chart";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+export const IssueGanttBlock = ({
+  data,
+  handleIssue,
+}: {
+  data: IIssue;
+  handleIssue: (block: IIssue, payload: IBlockUpdateData) => void;
+}) => (
+  <IssuePeekOverview
+    workspaceSlug={data?.workspace_detail?.slug}
+    projectId={data?.project_detail?.id}
+    issueId={data?.id}
+    handleIssue={(issueToUpdate) => handleIssue({ ...data, ...issueToUpdate }, {})}
+  >
+    <div
+      className="flex items-center relative h-full w-full rounded cursor-pointer"
+      style={{ backgroundColor: data?.state_detail?.color }}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
+          <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
+        </Tooltip>
+      </Tooltip>
+    </div>
+  </IssuePeekOverview>
+);
+
+// rendering issues on gantt sidebar
+export const IssueGanttSidebarBlock = ({
+  data,
+  handleIssue,
+}: {
+  data: IIssue;
+  handleIssue: (block: IIssue, payload: IBlockUpdateData) => void;
+}) => (
+  <IssuePeekOverview
+    workspaceSlug={data?.workspace_detail?.slug}
+    projectId={data?.project_detail?.id}
+    issueId={data?.id}
+    handleIssue={(issueToUpdate) => handleIssue({ ...data, ...issueToUpdate }, {})}
+  >
+    <div className="relative w-full flex items-center gap-2 h-full cursor-pointer">
+      <StateGroupIcon stateGroup={data?.state_detail?.group} color={data?.state_detail?.color} />
+      <div className="text-xs text-custom-text-300 flex-shrink-0">
+        {data?.project_detail?.identifier} {data?.sequence_id}
+      </div>
+      <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
+        <span className="text-sm font-medium flex-grow truncate">{data?.name}</span>
+      </Tooltip>
+    </div>
+  </IssuePeekOverview>
+);
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
new file mode 100644
index 00000000000..78ba7f2a6c5
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -0,0 +1,52 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const CycleGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = cycleIssueStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !cycleId) return;
+
+    cycleIssueStore.updateGanttIssueStructure(workspaceSlug.toString(), cycleId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/index.ts b/web/components/issues/issue-layouts/gantt/index.ts
new file mode 100644
index 00000000000..87899ae83f0
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/index.ts
@@ -0,0 +1,6 @@
+export * from "./blocks";
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./root";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
new file mode 100644
index 00000000000..8ce451e2b52
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { createIssuePayload } from "constants/issue";
+
+type Props = {
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <input
+      type="text"
+      autoComplete="off"
+      placeholder="Issue Title"
+      {...register("name", {
+        required: "Issue title is required.",
+      })}
+      className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+    />
+  );
+};
+
+export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      start_date: renderDateFormat(new Date()),
+      target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <form
+          ref={ref}
+          className="flex py-3 px-2 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs"
+          onSubmit={handleSubmit(onSubmitHandler)}
+        >
+          <div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
+          <h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+          <Inputs register={register} setFocus={setFocus} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
new file mode 100644
index 00000000000..7584cc7c6c8
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -0,0 +1,52 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ModuleGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = moduleIssueStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !moduleId) return;
+
+    moduleIssueStore.updateGanttIssueStructure(workspaceSlug.toString(), moduleId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
new file mode 100644
index 00000000000..1be9ad0c3d6
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -0,0 +1,54 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const ProjectViewGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, viewId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { projectViewIssues: projectViewIssuesStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = projectViewIssuesStore.getIssues;
+
+  const updateIssue = (block: any, payload: IBlockUpdateData) => {
+    if (!workspaceSlug || !viewId) return;
+
+    projectViewIssuesStore.updateGanttIssueStructure(workspaceSlug.toString(), viewId.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/gantt/root.tsx b/web/components/issues/issue-layouts/gantt/root.tsx
new file mode 100644
index 00000000000..77bbc0710df
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+import { IIssue } from "types";
+
+export const GanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = issueStore.getIssues;
+
+  const updateIssue = (block: IIssue, payload: IBlockUpdateData) => {
+    if (!workspaceSlug) return;
+
+    issueStore.updateGanttIssueStructure(workspaceSlug.toString(), block, payload);
+  };
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          blockUpdateHandler={updateIssue}
+          blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/index.ts b/web/components/issues/issue-layouts/index.ts
new file mode 100644
index 00000000000..aa82dc686d5
--- /dev/null
+++ b/web/components/issues/issue-layouts/index.ts
@@ -0,0 +1,15 @@
+// filters
+export * from "./filters";
+export * from "./empty-states";
+export * from "./quick-action-dropdowns";
+
+// layouts
+export * from "./list";
+export * from "./calendar";
+export * from "./gantt";
+export * from "./kanban";
+export * from "./spreadsheet";
+
+export * from "./properties";
+
+export * from "./roots";
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
new file mode 100644
index 00000000000..9d4c8aedd23
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -0,0 +1,106 @@
+import { Draggable } from "@hello-pangea/dnd";
+// components
+import { KanBanProperties } from "./properties";
+import { Tooltip } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+// types
+import { IIssueDisplayProperties, IIssue } from "types";
+
+interface IssueBlockProps {
+  sub_group_id: string;
+  columnId: string;
+  index: number;
+  issue: IIssue;
+  isDragDisabled: boolean;
+  showEmptyGroup: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+}
+
+export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
+  const {
+    sub_group_id,
+    columnId,
+    index,
+    issue,
+    isDragDisabled,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
+    if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
+  };
+
+  return (
+    <>
+      <Draggable draggableId={issue.id} index={index}>
+        {(provided, snapshot) => (
+          <div
+            className="group/kanban-block relative p-1.5 hover:cursor-default"
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+          >
+            {issue.tempId !== undefined && (
+              <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+            )}
+            <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
+              {quickActions(
+                !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                !columnId && columnId === "null" ? null : columnId,
+                issue
+              )}
+            </div>
+            <div
+              className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
+                isDragDisabled ? "" : "hover:cursor-grab"
+              } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+            >
+              {displayProperties && displayProperties?.key && (
+                <div className="text-xs line-clamp-1 text-custom-text-300">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+              )}
+              <IssuePeekOverview
+                workspaceSlug={issue?.workspace_detail?.slug}
+                projectId={issue?.project_detail?.id}
+                issueId={issue?.id}
+                handleIssue={(issueToUpdate) => {
+                  handleIssues(
+                    !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                    !columnId && columnId === "null" ? null : columnId,
+                    { ...issue, ...issueToUpdate },
+                    "update"
+                  );
+                }}
+              >
+                <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                  <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
+                </Tooltip>
+              </IssuePeekOverview>
+              <div>
+                <KanBanProperties
+                  sub_group_id={sub_group_id}
+                  columnId={columnId}
+                  issue={issue}
+                  handleIssues={updateIssue}
+                  displayProperties={displayProperties}
+                  showEmptyGroup={showEmptyGroup}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Draggable>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
new file mode 100644
index 00000000000..ea1b4c840f9
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -0,0 +1,61 @@
+// components
+import { KanbanIssueBlock } from "components/issues";
+import { IIssueDisplayProperties, IIssue } from "types";
+
+interface IssueBlocksListProps {
+  sub_group_id: string;
+  columnId: string;
+  issues: IIssue[];
+  isDragDisabled: boolean;
+  showEmptyGroup: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+}
+
+export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
+  const {
+    sub_group_id,
+    columnId,
+    issues,
+    showEmptyGroup,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
+
+  return (
+    <>
+      {issues && issues.length > 0 ? (
+        <>
+          {issues.map((issue, index) => (
+            <KanbanIssueBlock
+              key={`kanban-issue-block-${issue.id}`}
+              index={index}
+              issue={issue}
+              showEmptyGroup={showEmptyGroup}
+              handleIssues={handleIssues}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              columnId={columnId}
+              sub_group_id={sub_group_id}
+              isDragDisabled={isDragDisabled}
+            />
+          ))}
+        </>
+      ) : (
+        !isDragDisabled && (
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+            {/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
+          </div>
+        )
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
new file mode 100644
index 00000000000..eee31e7c306
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -0,0 +1,356 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Droppable } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues";
+// types
+import { IIssueDisplayProperties, IIssue } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+
+export interface IGroupByKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  sub_group_id: string;
+  list: any;
+  listKey: string;
+  isDragDisabled: boolean;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  showEmptyGroup: boolean;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  enableQuickIssueCreate?: boolean;
+  isDragStarted?: boolean;
+}
+
+const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    showEmptyGroup,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    enableQuickIssueCreate,
+    isDragStarted,
+  } = props;
+
+  const verticalAlignPosition = (_list: any) =>
+    kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string);
+
+  return (
+    <div className="relative w-full h-full flex gap-3">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div
+            className={`relative flex-shrink-0 flex flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
+          >
+            {sub_group_by === null && (
+              <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
+                <KanBanGroupByHeaderRoot
+                  column_id={getValueFromObject(_list, listKey) as string}
+                  column_value={_list}
+                  sub_group_by={sub_group_by}
+                  group_by={group_by}
+                  issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                />
+              </div>
+            )}
+
+            <div
+              className={`min-h-[150px] h-full ${
+                verticalAlignPosition(_list) ? `w-[0px] overflow-hidden` : `w-full transition-all`
+              }`}
+            >
+              <Droppable
+                droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}
+                isDropDisabled={isDragDisabled}
+              >
+                {(provided: any, snapshot: any) => (
+                  <div
+                    className={`w-full h-full relative transition-all ${
+                      snapshot.isDraggingOver ? `bg-custom-background-80` : ``
+                    }`}
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
+                  >
+                    {issues ? (
+                      <KanbanIssueBlocksList
+                        sub_group_id={sub_group_id}
+                        columnId={getValueFromObject(_list, listKey) as string}
+                        issues={issues[getValueFromObject(_list, listKey) as string]}
+                        isDragDisabled={isDragDisabled}
+                        showEmptyGroup={showEmptyGroup}
+                        handleIssues={handleIssues}
+                        quickActions={quickActions}
+                        displayProperties={displayProperties}
+                      />
+                    ) : (
+                      isDragDisabled && (
+                        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-sm">
+                          {/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
+                        </div>
+                      )
+                    )}
+
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </div>
+
+            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky bottom-0 z-[0]">
+              {enableQuickIssueCreate && (
+                <BoardInlineCreateIssueForm
+                  groupId={getValueFromObject(_list, listKey) as string}
+                  subGroupId={sub_group_id}
+                  prePopulatedData={{
+                    ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
+                    ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+                  }}
+                />
+              )}
+            </div>
+
+            {isDragStarted && isDragDisabled && (
+              <div className="invisible group-hover:visible transition-all text-sm absolute top-12 bottom-10 left-0 right-0 bg-custom-background-100/40 text-center">
+                <div className="rounded inline-flex mt-80 h-8 px-3 justify-center items-center bg-custom-background-80 text-custom-text-100 font-medium">
+                  {`This board is ordered by "${replaceUnderscoreIfSnakeCase(
+                    order_by ? (order_by[0] === "-" ? order_by.slice(1) : order_by) : "created_at"
+                  )}"`}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+export interface IKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  sub_group_id?: string;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  showEmptyGroup: boolean;
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
+  enableQuickIssueCreate?: boolean;
+  isDragStarted?: boolean;
+}
+
+export const KanBan: React.FC<IKanBan> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    sub_group_id = "null",
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    enableQuickIssueCreate,
+    isDragStarted,
+  } = props;
+
+  const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by && group_by === "project" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projects}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "state" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={states}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={stateGroups}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "priority" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={priorities}
+          listKey={`key`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "labels" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          order_by={order_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={members}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isDragStarted={isDragStarted}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
new file mode 100644
index 00000000000..d350ca90bc0
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// ui
+import { Avatar } from "@plane/ui";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
+
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const assignee = column_value ?? null;
+
+  return (
+    <>
+      {assignee &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon user={assignee} />}
+            title={assignee?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon user={assignee} />}
+            title={assignee?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ assignees: [assignee?.id] }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/created_by.tsx b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
new file mode 100644
index 00000000000..dde2059a9ca
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Icon } from "./assignee";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const createdBy = column_value ?? null;
+
+  return (
+    <>
+      {createdBy &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon user={createdBy} />}
+            title={createdBy?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon user={createdBy} />}
+            title={createdBy?.display_name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ created_by: createdBy?.id }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
new file mode 100644
index 00000000000..bb5060326e2
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -0,0 +1,160 @@
+import React, { FC } from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
+// components
+import { CustomMenu } from "@plane/ui";
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
+// lucide icons
+import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// mobx
+import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
+
+interface IHeaderGroupByCard {
+  sub_group_by: string | null;
+  group_by: string | null;
+  column_id: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  issuePayload: Partial<IIssue>;
+}
+
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
+export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
+  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props;
+  const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
+      {renderExistingIssueModal && (
+        <ExistingIssuesListModal
+          isOpen={openExistingIssueListModal}
+          handleClose={() => setOpenExistingIssueListModal(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+        />
+      )}
+      <div
+        className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+        }`}
+      >
+        <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+          {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        </div>
+
+        <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+          <div
+            className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
+          >
+            {title}
+          </div>
+          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+            {count || 0}
+          </div>
+        </div>
+
+        {sub_group_by === null && (
+          <div
+            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => handleKanBanToggle("groupByHeaderMinMax", column_id)}
+          >
+            {verticalAlignPosition ? (
+              <Maximize2 width={14} strokeWidth={2} />
+            ) : (
+              <Minimize2 width={14} strokeWidth={2} />
+            )}
+          </div>
+        )}
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus height={14} width={14} strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <div
+            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => setIsOpen(true)}
+          >
+            <Plus width={14} strokeWidth={2} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
new file mode 100644
index 00000000000..01e7ac8b5fd
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
@@ -0,0 +1,112 @@
+// components
+import { ProjectHeader } from "./project";
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+// mobx
+import { observer } from "mobx-react-lite";
+
+export interface IKanBanGroupByHeaderRoot {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
+  ({ column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+    <>
+      {group_by && group_by === "project" && (
+        <ProjectHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+
+      {group_by && group_by === "state" && (
+        <StateHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+    </>
+  )
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/label.tsx b/web/components/issues/issue-layouts/kanban/headers/label.tsx
new file mode 100644
index 00000000000..1b6fb864c3f
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/label.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+
+export interface ILabelHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const label = column_value ?? null;
+
+  return (
+    <>
+      {label &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon color={label?.color} />}
+            title={label?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon />}
+            title={label?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ labels: [label?.id] }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
new file mode 100644
index 00000000000..57fe6cd0719
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -0,0 +1,86 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+
+export interface IPriorityHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={14} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={14} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const priority = column_value || null;
+
+  return (
+    <>
+      {priority &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon priority={priority?.key} />}
+            title={priority?.title || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon priority={priority?.key} />}
+            title={priority?.title || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ priority: priority?.key }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/project.tsx b/web/components/issues/issue-layouts/kanban/headers/project.tsx
new file mode 100644
index 00000000000..5e4a052073b
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/project.tsx
@@ -0,0 +1,63 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon emoji={project?.emoji} />}
+            title={project?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon emoji={project?.emoji} />}
+            title={project?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ project: project?.id }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
new file mode 100644
index 00000000000..47d258c36f5
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
@@ -0,0 +1,66 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { StateGroupIcon } from "@plane/ui";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
+  <div className="w-3.5 h-3.5 rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const stateGroup = column_value || null;
+
+  return (
+    <>
+      {stateGroup &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon stateGroup={stateGroup?.key} />}
+            title={stateGroup?.key || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon stateGroup={stateGroup?.key} />}
+            title={stateGroup?.key || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{}}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/state.tsx b/web/components/issues/issue-layouts/kanban/headers/state.tsx
new file mode 100644
index 00000000000..18a06421406
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Icon } from "./state-group";
+
+export interface IStateHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const StateHeader: FC<IStateHeader> = observer((props) => {
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const state = column_value ?? null;
+
+  return (
+    <>
+      {state &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon stateGroup={state?.group} color={state?.color} />}
+            title={state?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon stateGroup={state?.group} color={state?.color} />}
+            title={state?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ state: state?.id }}
+          />
+        ))}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
new file mode 100644
index 00000000000..e9b0775f30f
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+// lucide icons
+import { Circle, ChevronDown, ChevronUp } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+
+interface IHeaderSubGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  column_id: string;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const HeaderSubGroupByCard = observer(
+  ({ icon, title, count, column_id, kanBanToggle, handleKanBanToggle }: IHeaderSubGroupByCard) => (
+    <div className={`flex-shrink-0 relative flex gap-2 rounded-sm flex-row items-center w-full p-1.5`}>
+      <div
+        className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+        onClick={() => handleKanBanToggle("subgroupByIssuesVisibility", column_id)}
+      >
+        {kanBanToggle?.subgroupByIssuesVisibility.includes(column_id) ? (
+          <ChevronDown width={14} strokeWidth={2} />
+        ) : (
+          <ChevronUp width={14} strokeWidth={2} />
+        )}
+      </div>
+
+      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex-shrink-0 flex items-center gap-1 text-sm">
+        <div className="line-clamp-1 text-custom-text-100">{title}</div>
+        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+      </div>
+    </div>
+  )
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
new file mode 100644
index 00000000000..3546e73d5fd
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
@@ -0,0 +1,100 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+
+export interface IKanBanSubGroupByHeaderRoot {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
+  const { column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle } = props;
+
+  return (
+    <>
+      {sub_group_by && sub_group_by === "state" && (
+        <StateHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "state_detail.group" && (
+        <StateGroupHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "priority" && (
+        <PriorityHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "labels" && (
+        <LabelHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "assignees" && (
+        <AssigneesHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "created_by" && (
+        <CreatedByHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/index.ts b/web/components/issues/issue-layouts/kanban/index.ts
new file mode 100644
index 00000000000..761f32a773a
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/index.ts
@@ -0,0 +1,4 @@
+export * from "./block";
+export * from "./roots";
+export * from "./blocks-list";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
new file mode 100644
index 00000000000..750606ebbca
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
@@ -0,0 +1,181 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { PlusIcon } from "lucide-react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  subGroupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <div>
+      <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 pl-0 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </div>
+  );
+};
+
+export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId, subGroupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: subGroupId ?? null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      {isOpen && (
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 mx-1.5 rounded bg-custom-background-300 shadow-custom-shadow-sm"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 italic mb-2 text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-3 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
new file mode 100644
index 00000000000..a17947550bf
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -0,0 +1,193 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyDate } from "../properties/date";
+import { Tooltip } from "@plane/ui";
+import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types";
+
+export interface IKanBanProperties {
+  sub_group_id: string;
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
+  displayProperties: IIssueDisplayProperties;
+  showEmptyGroup: boolean;
+}
+
+export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
+  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props;
+
+  const handleState = (state: IState) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, state: state.id }
+    );
+  };
+
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, priority: value }
+    );
+  };
+
+  const handleLabel = (ids: string[]) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, labels: ids }
+    );
+  };
+
+  const handleAssignee = (ids: string[]) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, assignees: ids }
+    );
+  };
+
+  const handleStartDate = (date: string) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, start_date: date }
+    );
+  };
+
+  const handleTargetDate = (date: string) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, target_date: date }
+    );
+  };
+
+  const handleEstimate = (value: number | null) => {
+    handleIssues(
+      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+      !group_id && group_id === "null" ? null : group_id,
+      { ...issue, estimate_point: value }
+    );
+  };
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {displayProperties && displayProperties?.state && (
+        <IssuePropertyState
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.state_detail || null}
+          onChange={handleState}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* priority */}
+      {displayProperties && displayProperties?.priority && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          onChange={handlePriority}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* label */}
+      {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
+        <IssuePropertyLabels
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.labels || null}
+          onChange={handleLabel}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* start date */}
+      {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={false}
+          placeHolder="Start date"
+        />
+      )}
+
+      {/* target/due date */}
+      {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={false}
+          placeHolder="Target date"
+        />
+      )}
+
+      {/* estimates */}
+      {displayProperties && displayProperties?.estimate && (
+        <IssuePropertyEstimates
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.estimate_point || null}
+          onChange={handleEstimate}
+          disabled={false}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {displayProperties && displayProperties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* attachments */}
+      {displayProperties && displayProperties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* link */}
+      {displayProperties && displayProperties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* assignee */}
+      {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees.length > 0) && (
+        <IssuePropertyAssignee
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.assignees || null}
+          hideDropdownArrow
+          onChange={handleAssignee}
+          disabled={false}
+          multiple
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
new file mode 100644
index 00000000000..facf2ec9437
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -0,0 +1,181 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { CycleIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface ICycleKanBanLayout {}
+
+export const CycleKanBanLayout: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    cycleIssueKanBanView: cycleIssueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = cycleIssueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  const onDragStart = () => {
+    setIsDragStarted(true);
+  };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? cycleIssueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : cycleIssueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {cycleIssueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <CycleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromCycle={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <CycleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromCycle={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/index.ts b/web/components/issues/issue-layouts/kanban/roots/index.ts
new file mode 100644
index 00000000000..139c09a7ae0
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
new file mode 100644
index 00000000000..c37cc555034
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -0,0 +1,179 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ModuleIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IModuleKanBanLayout {}
+
+export const ModuleKanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    moduleIssueKanBanView: moduleIssueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = moduleIssueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  const onDragStart = () => {
+    setIsDragStarted(true);
+  };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? moduleIssueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : moduleIssueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") moduleIssueStore.deleteIssue(group_by, sub_group_by, issue);
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(group_by, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {moduleIssueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ModuleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromModule={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ModuleIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                    handleRemoveFromModule={async () => handleIssues(sub_group_by, group_by, issue, "remove")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
new file mode 100644
index 00000000000..8d0cf172976
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -0,0 +1,162 @@
+import { FC, useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+// types
+import { IIssue } from "types";
+
+export interface IProfileIssuesKanBanLayout {}
+
+export const ProfileIssuesKanBanLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssues: profileIssuesStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    issueKanBanView: issueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const issues = profileIssuesStore?.getIssues;
+
+  const sub_group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const order_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = profileIssueFiltersStore?.userDisplayFilters || null;
+
+  const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  const onDragStart = () => {
+    setIsDragStarted(true);
+  };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        profileIssuesStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") profileIssuesStore.deleteIssue(group_by, sub_group_by, issue);
+    },
+    [profileIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+
+  return (
+    <>
+      {profileIssuesStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+          <DragDropContext onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
new file mode 100644
index 00000000000..52e60813e39
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -0,0 +1,170 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { DragDropContext } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IKanBanLayout {}
+
+export const KanBanLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
+
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = issueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const order_by: string | null = issueFilterStore?.userDisplayFilters?.order_by || null;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
+
+  const onDragStart = () => {
+    setIsDragStarted(true);
+  };
+
+  const onDragEnd = (result: any) => {
+    setIsDragStarted(false);
+
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.source.droppableId &&
+      result.destination.droppableId &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const handleIssues = useCallback(
+    (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") issueStore.deleteIssue(group_by, sub_group_by, issue);
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects?.[workspaceSlug] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {issueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+          <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
+            {currentKanBanView === "default" ? (
+              <KanBan
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                enableQuickIssueCreate
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            ) : (
+              <KanBanSwimLanes
+                issues={issues}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                order_by={order_by}
+                handleIssues={handleIssues}
+                quickActions={(sub_group_by, group_by, issue) => (
+                  <ProjectIssueQuickActions
+                    issue={issue}
+                    handleDelete={async () => handleIssues(sub_group_by, group_by, issue, "delete")}
+                    handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, "update")}
+                  />
+                )}
+                displayProperties={displayProperties}
+                kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+                handleKanBanToggle={handleKanBanToggle}
+                states={states}
+                stateGroups={stateGroups}
+                priorities={priorities}
+                labels={labels}
+                members={members?.map((m) => m.member) ?? null}
+                projects={projects}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+                isDragStarted={isDragStarted}
+              />
+            )}
+          </DragDropContext>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
new file mode 100644
index 00000000000..583835ba345
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "../swimlanes";
+import { KanBan } from "../default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IViewKanBanLayout {}
+
+export const ProjectViewKanBanLayout: React.FC = observer(() => {
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
+  return null;
+
+  // return (
+  //   <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+  //     <DragDropContext onDragEnd={onDragEnd}>
+  //       {currentKanBanView === "default" ? (
+  //         <KanBan
+  //           issues={issues}
+  //           sub_group_by={sub_group_by}
+  //           group_by={group_by}
+  //           handleIssues={updateIssue}
+  //           display_properties={display_properties}
+  //           kanBanToggle={() => {}}
+  //           handleKanBanToggle={() => {}}
+  //           states={states}
+  //           stateGroups={stateGroups}
+  //           priorities={priorities}
+  //           labels={labels}
+  //           members={members}
+  //           projects={projects}
+  //           estimates={estimates}
+  //         />
+  //       ) : (
+  //         <KanBanSwimLanes
+  //           issues={issues}
+  //           sub_group_by={sub_group_by}
+  //           group_by={group_by}
+  //           handleIssues={updateIssue}
+  //           display_properties={display_properties}
+  //           kanBanToggle={() => {}}
+  //           handleKanBanToggle={() => {}}
+  //           states={states}
+  //           stateGroups={stateGroups}
+  //           priorities={priorities}
+  //           labels={labels}
+  //           members={members}
+  //           projects={projects}
+  //           estimates={estimates}
+  //         />
+  //       )}
+  //     </DragDropContext>
+  //   </div>
+  // );
+});
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
new file mode 100644
index 00000000000..e25ddea3d66
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -0,0 +1,492 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
+import { KanBan } from "./default";
+// types
+import { IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+
+interface ISubGroupSwimlaneHeader {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  list: any;
+  listKey: string;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
+  issues,
+  sub_group_by,
+  group_by,
+  list,
+  listKey,
+  kanBanToggle,
+  handleKanBanToggle,
+}) => {
+  const calculateIssueCount = (column_id: string) => {
+    let issueCount = 0;
+    issues &&
+      Object.keys(issues)?.forEach((_issueKey: any) => {
+        issueCount += issues?.[_issueKey]?.[column_id]?.length || 0;
+      });
+    return issueCount;
+  };
+
+  return (
+    <div className="relative w-full min-h-full h-max flex items-center">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div className="flex-shrink-0 flex flex-col w-[340px]">
+            <KanBanGroupByHeaderRoot
+              column_id={getValueFromObject(_list, listKey) as string}
+              column_value={_list}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
+  order_by: string | null;
+  showEmptyGroup: boolean;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  issues: any;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  isDragStarted?: boolean;
+}
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    list,
+    listKey,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    isDragStarted,
+  } = props;
+
+  const calculateIssueCount = (column_id: string) => {
+    let issueCount = 0;
+    issues?.[column_id] &&
+      Object.keys(issues?.[column_id])?.forEach((_list: any) => {
+        issueCount += issues?.[column_id]?.[_list]?.length || 0;
+      });
+    return issueCount;
+  };
+
+  return (
+    <div className="relative w-full min-h-full h-max">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div className="flex-shrink-0 flex flex-col">
+            <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
+              <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
+                <KanBanSubGroupByHeaderRoot
+                  column_id={getValueFromObject(_list, listKey) as string}
+                  column_value={_list}
+                  sub_group_by={sub_group_by}
+                  group_by={group_by}
+                  issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                />
+              </div>
+              <div className="w-full border-b border-custom-border-400 border-dashed" />
+            </div>
+            {!kanBanToggle?.subgroupByIssuesVisibility.includes(getValueFromObject(_list, listKey) as string) && (
+              <div className="relative">
+                <KanBan
+                  issues={issues?.[getValueFromObject(_list, listKey) as string]}
+                  sub_group_by={sub_group_by}
+                  group_by={group_by}
+                  order_by={order_by}
+                  sub_group_id={getValueFromObject(_list, listKey) as string}
+                  handleIssues={handleIssues}
+                  quickActions={quickActions}
+                  displayProperties={displayProperties}
+                  kanBanToggle={kanBanToggle}
+                  handleKanBanToggle={handleKanBanToggle}
+                  showEmptyGroup={showEmptyGroup}
+                  states={states}
+                  stateGroups={stateGroups}
+                  priorities={priorities}
+                  labels={labels}
+                  members={members}
+                  projects={projects}
+                  enableQuickIssueCreate
+                  isDragStarted={isDragStarted}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+export interface IKanBanSwimLanes {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  order_by: string | null;
+  handleIssues: (
+    sub_group_by: string | null,
+    group_by: string | null,
+    issue: IIssue,
+    action: "update" | "delete"
+  ) => void;
+  quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+  showEmptyGroup: boolean;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  isDragStarted?: boolean;
+}
+
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+  const {
+    issues,
+    sub_group_by,
+    group_by,
+    order_by,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    kanBanToggle,
+    handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    isDragStarted,
+  } = props;
+
+  return (
+    <div className="relative">
+      <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+        {group_by && group_by === "project" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projects}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "state" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={states}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "state_detail.group" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={stateGroups}
+            listKey={`key`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "priority" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={priorities}
+            listKey={`key`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "labels" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={labels ? [...labels, { id: "None", name: "None" }] : labels}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "assignees" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={members ? [...members, { id: "None", display_name: "None" }] : members}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "created_by" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={members}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </div>
+
+      {sub_group_by && sub_group_by === "project" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={projects}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state_detail.group" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "priority" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "labels" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "assignees" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "created_by" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          order_by={order_by}
+          list={members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+          isDragStarted={isDragStarted}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
new file mode 100644
index 00000000000..28f5f765a6a
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -0,0 +1,65 @@
+// components
+import { KanBanProperties } from "./properties";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+interface IssueBlockProps {
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  isReadonly?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
+  const { columnId, issue, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props;
+
+  const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
+    handleIssues(group_by, issueToUpdate, "update");
+  };
+
+  return (
+    <>
+      <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
+        {displayProperties && displayProperties?.key && (
+          <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
+            {issue?.project_detail?.identifier}-{issue.sequence_id}
+          </div>
+        )}
+        {issue?.tempId !== undefined && (
+          <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+        )}
+        <IssuePeekOverview
+          workspaceSlug={issue?.workspace_detail?.slug}
+          projectId={issue?.project_detail?.id}
+          issueId={issue?.id}
+          isArchived={issue?.archived_at !== null}
+          handleIssue={(issueToUpdate) => {
+            handleIssues(!columnId && columnId === "null" ? null : columnId, issueToUpdate as IIssue, "update");
+          }}
+        >
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div className="line-clamp-1 text-sm font-medium text-custom-text-100 w-full">{issue.name}</div>
+          </Tooltip>
+        </IssuePeekOverview>
+
+        <div className="ml-auto flex-shrink-0 flex items-center gap-2">
+          <KanBanProperties
+            columnId={columnId}
+            issue={issue}
+            isReadonly={isReadonly}
+            handleIssues={updateIssue}
+            displayProperties={displayProperties}
+            showEmptyGroup={showEmptyGroup}
+          />
+          {quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
new file mode 100644
index 00000000000..22a92a15991
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -0,0 +1,40 @@
+import { FC } from "react";
+// components
+import { IssueBlock } from "components/issues";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+interface Props {
+  columnId: string;
+  issues: IIssue[];
+  isReadonly?: boolean;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  showEmptyGroup?: boolean;
+}
+
+export const IssueBlocksList: FC<Props> = (props) => {
+  const { columnId, issues, handleIssues, quickActions, displayProperties, showEmptyGroup, isReadonly } = props;
+
+  return (
+    <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
+      {issues && issues.length > 0 ? (
+        issues.map((issue) => (
+          <IssueBlock
+            key={issue.id}
+            columnId={columnId}
+            issue={issue}
+            handleIssues={handleIssues}
+            quickActions={quickActions}
+            isReadonly={isReadonly}
+            displayProperties={displayProperties}
+            showEmptyGroup={showEmptyGroup}
+          />
+        ))
+      ) : (
+        <div className="bg-custom-background-100 text-custom-text-400 text-sm p-3">No issues</div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
new file mode 100644
index 00000000000..b9d13a92bce
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -0,0 +1,243 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { ListGroupByHeaderRoot } from "./headers/group-by-root";
+import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
+// types
+import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+// constants
+import { getValueFromObject } from "constants/issue";
+
+export interface IGroupByList {
+  issues: any;
+  group_by: string | null;
+  list: any;
+  isReadonly?: boolean;
+  listKey: string;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  is_list?: boolean;
+  enableQuickIssueCreate?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+const GroupByList: React.FC<IGroupByList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    list,
+    isReadonly,
+    listKey,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    is_list = false,
+    enableQuickIssueCreate,
+    showEmptyGroup,
+  } = props;
+
+  return (
+    <div className="relative w-full h-full">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
+            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90">
+              <ListGroupByHeaderRoot
+                column_id={getValueFromObject(_list, listKey) as string}
+                column_value={_list}
+                group_by={group_by}
+                issues_count={
+                  is_list ? issues?.length || 0 : issues?.[getValueFromObject(_list, listKey) as string]?.length || 0
+                }
+              />
+            </div>
+            {issues && (
+              <IssueBlocksList
+                columnId={getValueFromObject(_list, listKey) as string}
+                issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                displayProperties={displayProperties}
+                isReadonly={isReadonly}
+                showEmptyGroup={showEmptyGroup}
+              />
+            )}
+            {enableQuickIssueCreate && (
+              <ListInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                prePopulatedData={{
+                  [group_by!]: getValueFromObject(_list, listKey),
+                }}
+              />
+            )}
+          </div>
+        ))}
+    </div>
+  );
+});
+
+// TODO: update all the types
+export interface IList {
+  issues: any;
+  group_by: string | null;
+  isReadonly?: boolean;
+  handleDragDrop?: (result: any) => void | undefined;
+  handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
+  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  stateGroups: any;
+  priorities: any;
+  enableQuickIssueCreate?: boolean;
+  estimates: IEstimatePoint[] | null;
+  showEmptyGroup?: boolean;
+}
+
+export const List: React.FC<IList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    isReadonly,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    showEmptyGroup,
+    enableQuickIssueCreate,
+  } = props;
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by === null && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[{ id: "null", title: "All Issues" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          is_list
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "project" && projects && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={projects}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "state" && states && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && stateGroups && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "priority" && priorities && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "labels" && labels && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[...labels, { id: "None", name: "None" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={[...members, { id: "None", display_name: "None" }]}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          isReadonly={isReadonly}
+          showEmptyGroup={showEmptyGroup}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/assignee.tsx b/web/components/issues/issue-layouts/list/headers/assignee.tsx
new file mode 100644
index 00000000000..edc74d9cc7b
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/assignee.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// ui
+import { Avatar } from "@plane/ui";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
+
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const assignee = column_value ?? null;
+
+  return (
+    <>
+      {assignee && (
+        <HeaderGroupByCard
+          icon={<Icon user={assignee} />}
+          title={assignee?.display_name || ""}
+          count={issues_count}
+          issuePayload={{ assignees: [assignee?.member?.id] }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/created-by.tsx b/web/components/issues/issue-layouts/list/headers/created-by.tsx
new file mode 100644
index 00000000000..0814fdbe507
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/created-by.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./assignee";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const createdBy = column_value ?? null;
+
+  return (
+    <>
+      {createdBy && (
+        <HeaderGroupByCard
+          icon={<Icon user={createdBy} />}
+          title={createdBy?.display_name || ""}
+          count={issues_count}
+          issuePayload={{ created_by: createdBy?.member?.id }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/empty-group.tsx b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
new file mode 100644
index 00000000000..59840cde68e
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/empty-group.tsx
@@ -0,0 +1,15 @@
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IEmptyHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} issuePayload={{}} />;
+});
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
new file mode 100644
index 00000000000..4a43fdf778f
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
+// lucide icons
+import { CircleDashed, Plus } from "lucide-react";
+// components
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// mobx
+import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
+
+interface IHeaderGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  issuePayload: Partial<IIssue>;
+}
+
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
+export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }: IHeaderGroupByCard) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const verticalAlignPosition = false;
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
+      {renderExistingIssueModal && (
+        <ExistingIssuesListModal
+          isOpen={openExistingIssueListModal}
+          handleClose={() => setOpenExistingIssueListModal(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+        />
+      )}
+      <div
+        className={`flex-shrink-0 relative flex gap-2 py-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-11` : `flex-row items-center w-full`
+        }`}
+      >
+        <div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
+          {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
+        </div>
+
+        <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+          <div
+            className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
+          >
+            {title}
+          </div>
+          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+            {count || 0}
+          </div>
+        </div>
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <div
+            className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => setIsOpen(true)}
+          >
+            <Plus width={14} strokeWidth={2} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-root.tsx b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
new file mode 100644
index 00000000000..5a724a8d4ad
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
@@ -0,0 +1,52 @@
+// components
+import { EmptyHeader } from "./empty-group";
+import { ProjectHeader } from "./project";
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created-by";
+// mobx
+import { observer } from "mobx-react-lite";
+
+export interface IListGroupByHeaderRoot {
+  column_id: string;
+  column_value: any;
+  group_by: string | null;
+  issues_count: number;
+}
+
+export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
+  const { column_id, column_value, group_by, issues_count } = props;
+
+  return (
+    <>
+      {!group_by && group_by === null && (
+        <EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "project" && (
+        <ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+
+      {group_by && group_by === "state" && (
+        <StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/label.tsx b/web/components/issues/issue-layouts/list/headers/label.tsx
new file mode 100644
index 00000000000..2abe186f375
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/label.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface ILabelHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const label = column_value ?? null;
+
+  return (
+    <>
+      {column_value && (
+        <HeaderGroupByCard
+          icon={<Icon color={label?.color || null} />}
+          title={column_value?.name || ""}
+          count={issues_count}
+          issuePayload={{ labels: [label.id] }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/priority.tsx b/web/components/issues/issue-layouts/list/headers/priority.tsx
new file mode 100644
index 00000000000..72f71b13f23
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/priority.tsx
@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IPriorityHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={14} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={14} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const priority = column_value ?? null;
+
+  return (
+    <>
+      {priority && (
+        <HeaderGroupByCard
+          icon={<Icon priority={priority?.key} />}
+          title={priority?.title || ""}
+          count={issues_count}
+          issuePayload={{ priority: priority?.key }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/project.tsx b/web/components/issues/issue-layouts/list/headers/project.tsx
new file mode 100644
index 00000000000..880892af25e
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/project.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project && (
+        <HeaderGroupByCard
+          icon={<Icon emoji={project?.emoji} />}
+          title={project?.name || ""}
+          count={issues_count}
+          issuePayload={{ project: project?.id ?? "" }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/state-group.tsx b/web/components/issues/issue-layouts/list/headers/state-group.tsx
new file mode 100644
index 00000000000..9f6610e5dc8
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state-group.tsx
@@ -0,0 +1,37 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// ui
+import { StateGroupIcon } from "@plane/ui";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
+  <div className="w-[14px] h-[14px] rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const stateGroup = column_value ?? null;
+
+  return (
+    <>
+      {stateGroup && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={stateGroup?.key} />}
+          title={stateGroup?.key || ""}
+          count={issues_count}
+          issuePayload={{}}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/state.tsx b/web/components/issues/issue-layouts/list/headers/state.tsx
new file mode 100644
index 00000000000..e169d0fbb72
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./state-group";
+
+export interface IStateHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const StateHeader: FC<IStateHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const state = column_value ?? null;
+
+  return (
+    <>
+      {state && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={state?.group} color={state?.color} />}
+          title={state?.name || ""}
+          count={issues_count}
+          issuePayload={{ state: state?.id }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/index.ts b/web/components/issues/issue-layouts/list/index.ts
new file mode 100644
index 00000000000..be3968fdde1
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/index.ts
@@ -0,0 +1,5 @@
+export * from "./roots";
+export * from "./block";
+export * from "./roots";
+export * from "./blocks-list";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
new file mode 100644
index 00000000000..effc96acbe3
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs font-medium text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div className="bg-custom-background-100">
+      {isOpen && (
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="absolute flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 my-3 mt-14 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <div className="w-full border-t-[0.5px] border-custom-border-200">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 p-3"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx
new file mode 100644
index 00000000000..92a203f3639
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@@ -0,0 +1,166 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyDate } from "../properties/date";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayProperties, IState, TIssuePriorities } from "types";
+
+export interface IKanBanProperties {
+  columnId: string;
+  issue: IIssue;
+  handleIssues: (group_by: string | null, issue: IIssue) => void;
+  displayProperties: IIssueDisplayProperties;
+  isReadonly?: boolean;
+  showEmptyGroup?: boolean;
+}
+
+export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
+  const { columnId: group_id, issue, handleIssues, displayProperties, isReadonly, showEmptyGroup } = props;
+
+  const handleState = (state: IState) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id });
+  };
+
+  const handlePriority = (value: TIssuePriorities) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: value });
+  };
+
+  const handleLabel = (ids: string[]) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+  };
+
+  const handleAssignee = (ids: string[]) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+  };
+
+  const handleStartDate = (date: string) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+  };
+
+  const handleTargetDate = (date: string) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+  };
+
+  const handleEstimate = (value: number | null) => {
+    handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: value });
+  };
+
+  return (
+    <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {displayProperties && displayProperties?.state && (
+        <IssuePropertyState
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.state_detail || null}
+          hideDropdownArrow
+          onChange={handleState}
+          disabled={isReadonly}
+        />
+      )}
+
+      {/* priority */}
+      {displayProperties && displayProperties?.priority && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          onChange={handlePriority}
+          disabled={isReadonly}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* label */}
+      {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
+        <IssuePropertyLabels
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.labels || null}
+          onChange={handleLabel}
+          disabled={isReadonly}
+          hideDropdownArrow
+        />
+      )}
+
+      {/* assignee */}
+      {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees?.length > 0) && (
+        <IssuePropertyAssignee
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.assignees || null}
+          hideDropdownArrow
+          onChange={handleAssignee}
+          disabled={isReadonly}
+          multiple
+        />
+      )}
+
+      {/* start date */}
+      {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={isReadonly}
+          placeHolder="Start date"
+        />
+      )}
+
+      {/* target/due date */}
+      {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={isReadonly}
+          placeHolder="Target date"
+        />
+      )}
+
+      {/* estimates */}
+      {displayProperties && displayProperties?.estimate && (
+        <IssuePropertyEstimates
+          projectId={issue?.project_detail?.id || null}
+          value={issue?.estimate_point || null}
+          hideDropdownArrow
+          onChange={handleEstimate}
+          disabled={isReadonly}
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {displayProperties && displayProperties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* attachments */}
+      {displayProperties && displayProperties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
+
+      {/* link */}
+      {displayProperties && displayProperties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
+            <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <div className="text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
new file mode 100644
index 00000000000..1ddbd53923e
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -0,0 +1,73 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ArchivedIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export const ArchivedIssueListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    project: projectStore,
+    archivedIssues: archivedIssueStore,
+    archivedIssueFilters: archivedIssueFiltersStore,
+  } = useMobxStore();
+
+  // derived values
+  const issues = archivedIssueStore.getIssues;
+  const displayProperties = archivedIssueFiltersStore?.userDisplayProperties || null;
+  const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (action === "delete") {
+      archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
+    }
+  };
+
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    projectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className="relative w-full h-full bg-custom-background-90">
+      <List
+        issues={issues}
+        group_by={group_by}
+        isReadonly
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ArchivedIssueQuickActions issue={issue} handleDelete={async () => handleIssues(group_by, issue, "delete")} />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
new file mode 100644
index 00000000000..7bbb37f4612
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { CycleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface ICycleListLayout {}
+
+export const CycleListLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, cycleId } = router.query;
+  // store
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = cycleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !cycleId) return;
+
+      if (action === "update") {
+        cycleIssueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") cycleIssueStore.deleteIssue(group_by, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        cycleIssueStore.deleteIssue(group_by, null, issue);
+        cycleIssueStore.removeIssueFromCycle(
+          workspaceSlug.toString(),
+          issue.project,
+          cycleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
+  );
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <CycleIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+            handleRemoveFromCycle={async () => handleIssues(group_by, issue, "remove")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/index.ts b/web/components/issues/issue-layouts/list/roots/index.ts
new file mode 100644
index 00000000000..aae6f833cc5
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/index.ts
@@ -0,0 +1,6 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./profile-issues-root";
+export * from "./project-root";
+export * from "./project-view-root";
+export * from "./archived-issue-root";
diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx
new file mode 100644
index 00000000000..11704f3b652
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ModuleIssueQuickActions } from "components/issues";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IModuleListLayout {}
+
+export const ModuleListLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, moduleId } = router.query;
+
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = moduleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete" | "remove") => {
+      if (!workspaceSlug || !moduleId) return;
+
+      if (action === "update") {
+        moduleIssueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") moduleIssueStore.deleteIssue(group_by, null, issue);
+      if (action === "remove" && issue.bridge_id) {
+        moduleIssueStore.deleteIssue(group_by, null, issue);
+        moduleIssueStore.removeIssueFromModule(
+          workspaceSlug.toString(),
+          issue.project,
+          moduleId.toString(),
+          issue.bridge_id
+        );
+      }
+    },
+    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
+  );
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <div className="relative w-full h-full bg-custom-background-90">
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ModuleIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+            handleRemoveFromModule={async () => handleIssues(group_by, issue, "remove")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
new file mode 100644
index 00000000000..e66cda2d28d
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -0,0 +1,78 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IProfileIssuesListLayout {}
+
+export const ProfileIssuesListLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const issues = profileIssuesStore?.getIssues;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        profileIssuesStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") profileIssuesStore.deleteIssue(group_by, null, issue);
+    },
+    [profileIssuesStore, issueDetailStore, workspaceSlug]
+  );
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={(group_by, issue) => (
+          <ProjectIssueQuickActions
+            issue={issue}
+            handleDelete={async () => handleIssues(group_by, issue, "delete")}
+            handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+          />
+        )}
+        displayProperties={displayProperties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members?.map((m) => m.member) ?? null}
+        projects={projects}
+        estimates={null}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx
new file mode 100644
index 00000000000..8ed96d54ce0
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -0,0 +1,93 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { List } from "../default";
+import { ProjectIssueQuickActions } from "components/issues";
+import { Spinner } from "@plane/ui";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue } from "types";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export const ListLayout: FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    issueFilter: issueFilterStore,
+  } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+
+  const issues = issueStore?.getIssues;
+
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+  const group_by: string | null = userDisplayFilters?.group_by || null;
+  const displayProperties = issueFilterStore?.userDisplayProperties || null;
+
+  const handleIssues = useCallback(
+    (group_by: string | null, issue: IIssue, action: "update" | "delete") => {
+      if (!workspaceSlug) return;
+
+      if (action === "update") {
+        issueStore.updateIssueStructure(group_by, null, issue);
+        issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      }
+      if (action === "delete") issueStore.deleteIssue(group_by, null, issue);
+    },
+    [issueStore, issueDetailStore, workspaceSlug]
+  );
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const estimates =
+    currentProjectDetails?.estimate !== null
+      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+      : null;
+
+  return (
+    <>
+      {issueStore.loader ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="relative w-full h-full bg-custom-background-90">
+          <List
+            issues={issues}
+            group_by={group_by}
+            handleIssues={handleIssues}
+            quickActions={(group_by, issue) => (
+              <ProjectIssueQuickActions
+                issue={issue}
+                handleDelete={async () => handleIssues(group_by, issue, "delete")}
+                handleUpdate={async (data) => handleIssues(group_by, data, "update")}
+              />
+            )}
+            displayProperties={displayProperties}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members?.map((m) => m.member) ?? null}
+            projects={projects}
+            enableQuickIssueCreate
+            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+            showEmptyGroup={userDisplayFilters.show_empty_groups}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
new file mode 100644
index 00000000000..85b8177b3d1
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "../default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IViewListLayout {}
+
+export const ProjectViewListLayout: React.FC = observer(() => {
+  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
+  return null;
+
+  // return (
+  //   <div className={`relative w-full h-full bg-custom-background-90`}>
+  //     <List
+  //       issues={issues}
+  //       group_by={group_by}
+  //       handleIssues={updateIssue}
+  //       display_properties={display_properties}
+  //       states={states}
+  //       stateGroups={stateGroups}
+  //       priorities={priorities}
+  //       labels={labels}
+  //       members={members}
+  //       projects={projects}
+  //       estimates={estimates}
+  //     />
+  //   </div>
+  // );
+});
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
new file mode 100644
index 00000000000..b436e274f9b
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -0,0 +1,192 @@
+import { Fragment, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// ui
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
+// types
+import { Placement } from "@popperjs/core";
+
+export interface IIssuePropertyAssignee {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: string[] | string;
+  onChange: (data: string[]) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  multiple?: true;
+  noLabelBorder?: boolean;
+}
+
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled = false,
+    hideDropdownArrow = false,
+    className,
+    buttonClassName,
+    optionsClassName,
+    placement,
+    multiple = false,
+    noLabelBorder = false,
+  } = props;
+
+  const { workspace: workspaceStore, project: projectStore } = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  const projectMembers = projectId ? projectStore?.members?.[projectId] : undefined;
+
+  const fetchProjectMembers = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      workspaceSlug &&
+        projectId &&
+        projectStore.fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const options = (projectMembers ?? [])?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member.member.display_name} src={member.member.avatar} showTooltip={false} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <Tooltip
+      tooltipHeading="Assignee"
+      tooltipContent={
+        value && value.length > 0
+          ? (projectMembers ? projectMembers : [])
+              ?.filter((m) => value.includes(m.member.display_name))
+              .map((m) => m.member.display_name)
+              .join(", ")
+          : "No Assignee"
+      }
+      position="top"
+    >
+      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
+        {value && value.length > 0 && Array.isArray(value) ? (
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = projectMembers?.find((m) => m.member.id === assigneeId)?.member;
+
+              if (!member) return null;
+
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
+        ) : (
+          <span
+            className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
+              noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
+            }}`}
+          >
+            <User2 className="h-3 w-3" />
+          </span>
+        )}
+      </div>
+    </Tooltip>
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const comboboxProps: any = { value, onChange, disabled };
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox as="div" className={`flex-shrink-0 text-left ${className}`} {...comboboxProps}>
+      <Combobox.Button as={Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+          onClick={() => !projectMembers && fetchProjectMembers()}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 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}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active && !selected ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                    </>
+                  )}
+                </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>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
new file mode 100644
index 00000000000..f39741e1905
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+// headless ui
+import { Popover } from "@headlessui/react";
+// lucide icons
+import { Calendar, X } from "lucide-react";
+// react date picker
+import DatePicker from "react-datepicker";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export interface IIssuePropertyDate {
+  value: any;
+  onChange: (date: any) => void;
+  disabled?: boolean;
+  placeHolder?: string;
+}
+
+export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
+  const { value, onChange, disabled, placeHolder } = props;
+
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  return (
+    <Popover as="div" className="relative">
+      {({ open }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Popover.Button
+              ref={dropdownBtn}
+              className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none w-full ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }`}
+            >
+              <Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
+                <div className="overflow-hidden flex justify-center items-center gap-2">
+                  <Calendar className="h-3 w-3" strokeWidth={2} />
+                  {value && (
+                    <>
+                      <div className="text-xs">{value}</div>
+                      <div
+                        className="flex-shrink-0 flex justify-center items-center"
+                        onClick={() => {
+                          if (onChange) onChange(null);
+                        }}
+                      >
+                        <X className="h-2.5 w-2.5" strokeWidth={2} />
+                      </div>
+                    </>
+                  )}
+                </div>
+              </Tooltip>
+            </Popover.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Popover.Panel
+                ref={dropdownOptions}
+                className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
+              >
+                {({ close }) => (
+                  <DatePicker
+                    selected={value ? new Date(value) : new Date()}
+                    onChange={(val: any) => {
+                      if (onChange && val) {
+                        onChange(renderDateFormat(val));
+                        close();
+                      }
+                    }}
+                    dateFormat="dd-MM-yyyy"
+                    calendarClassName="h-full"
+                    inline
+                  />
+                )}
+              </Popover.Panel>
+            </div>
+          </>
+        );
+      }}
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
new file mode 100644
index 00000000000..5737389754b
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -0,0 +1,172 @@
+import { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { observer } from "mobx-react-lite";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { Placement } from "@popperjs/core";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IIssuePropertyEstimates {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: number | null;
+  onChange: (value: number | null) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+}
+
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer((props) => {
+  const {
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectDetails = projectId ? projectStore.project_details[projectId] : null;
+  const isEstimateEnabled = projectDetails?.estimate !== null;
+  const estimates = projectId ? projectStore.estimates?.[projectId] : null;
+  const estimatePoints =
+    projectDetails && isEstimateEnabled ? estimates?.find((e) => e.id === projectDetails.estimate)?.points : null;
+
+  const options: { value: number | null; query: string; content: any }[] | undefined = (estimatePoints ?? []).map(
+    (estimate) => ({
+      value: estimate.key,
+      query: estimate.value,
+      content: (
+        <div className="flex items-center gap-2">
+          <Triangle className="h-3 w-3" strokeWidth={2} />
+          {estimate.value}
+        </div>
+      ),
+    })
+  );
+  options?.unshift({
+    value: null,
+    query: "none",
+    content: (
+      <div className="flex items-center gap-2">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        None
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = estimatePoints?.find((e) => e.key === value);
+  const label = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        <Triangle className="h-3 w-3" strokeWidth={2} />
+        <span className="truncate">{selectedEstimate?.value ?? "None"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  if (!isEstimateEnabled) return null;
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={(val) => onChange(val as number | null)}
+      disabled={disabled}
+    >
+      <Combobox.Button as={Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/index.tsx b/web/components/issues/issue-layouts/properties/index.tsx
new file mode 100644
index 00000000000..3e2e2acd67d
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/index.tsx
@@ -0,0 +1,6 @@
+export * from "./assignee";
+export * from "./date";
+export * from "./estimates";
+export * from "./labels";
+export * from "./priority";
+export * from "./state";
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
new file mode 100644
index 00000000000..596237ef468
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,224 @@
+import { Fragment, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import { usePopper } from "react-popper";
+// components
+import { Combobox } from "@headlessui/react";
+import { Tooltip } from "@plane/ui";
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { Placement } from "@popperjs/core";
+import { RootStore } from "store/root";
+
+export interface IIssuePropertyLabels {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: string[];
+  onChange: (data: string[]) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  maxRender?: number;
+  noLabelBorder?: boolean;
+}
+
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className,
+    buttonClassName,
+    optionsClassName,
+    placement,
+    maxRender = 2,
+    noLabelBorder = false,
+  } = props;
+
+  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  const projectLabels = projectId && projectStore?.labels?.[projectId];
+
+  const fetchProjectLabels = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      projectStore.fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const options = (projectLabels ? projectLabels : []).map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center justify-start gap-2">
+        <span
+          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color,
+          }}
+        />
+        <span>{label.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const label = (
+    <div className="flex items-center gap-2 text-custom-text-200 h-full">
+      {value.length > 0 ? (
+        value.length <= maxRender ? (
+          <>
+            {(projectLabels ? projectLabels : [])
+              ?.filter((l) => value.includes(l.id))
+              .map((label) => (
+                <div
+                  key={label.id}
+                  className="flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
+                >
+                  <div className="flex items-center gap-1.5 text-custom-text-200">
+                    <span
+                      className="h-2 w-2 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: label?.color ?? "#000000",
+                      }}
+                    />
+                    {label.name}
+                  </div>
+                </div>
+              ))}
+          </>
+        ) : (
+          <div className="h-full flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
+            <Tooltip
+              position="top"
+              tooltipHeading="Labels"
+              tooltipContent={(projectLabels ? projectLabels : [])
+                ?.filter((l) => value.includes(l.id))
+                .map((l) => l.name)
+                .join(", ")}
+            >
+              <div className="h-full flex 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>
+        )
+      ) : (
+        <div
+          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+          }`}
+        >
+          Select labels
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      multiple
+    >
+      <Combobox.Button as={Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
+          }  ${buttonClassName}`}
+          onClick={() => !projectLabels && fetchProjectLabels()}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 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}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                    </>
+                  )}
+                </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>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx
new file mode 100644
index 00000000000..cbf6602eb1c
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -0,0 +1,25 @@
+import { PrioritySelect } from "components/project";
+import { observer } from "mobx-react-lite";
+// types
+import { TIssuePriorities } from "types";
+
+export interface IIssuePropertyPriority {
+  value: TIssuePriorities;
+  onChange: (value: TIssuePriorities) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+}
+
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer((props) => {
+  const { value, onChange, disabled, hideDropdownArrow = false } = props;
+
+  return (
+    <PrioritySelect
+      value={value}
+      onChange={onChange}
+      buttonClassName="!h-5 p-1.5"
+      disabled={disabled}
+      hideDropdownArrow={hideDropdownArrow}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
new file mode 100644
index 00000000000..5bd0edb18ef
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -0,0 +1,179 @@
+import { Fragment, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import { usePopper } from "react-popper";
+// ui
+import { Combobox } from "@headlessui/react";
+import { StateGroupIcon, Tooltip } from "@plane/ui";
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { IState } from "types";
+import { Placement } from "@popperjs/core";
+import { RootStore } from "store/root";
+
+export interface IIssuePropertyState {
+  view?: "profile" | "workspace" | "project";
+  projectId: string | null;
+  value: IState;
+  onChange: (state: IState) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props) => {
+  const {
+    view,
+    projectId,
+    value,
+    onChange,
+    disabled,
+    hideDropdownArrow = false,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+  } = props;
+
+  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const workspaceSlug = workspaceStore?.workspaceSlug;
+
+  const [query, setQuery] = useState("");
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
+
+  const projectStates: IState[] = [];
+  const projectStatesByGroup = projectId && projectStore?.states?.[projectId];
+  if (projectStatesByGroup)
+    for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);
+
+  const fetchProjectStates = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      workspaceSlug &&
+        projectId &&
+        projectStore.fetchProjectStates(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const dropdownOptions = projectStates?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const filteredOptions =
+    query === ""
+      ? dropdownOptions
+      : dropdownOptions?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
+        <span className="truncate">{value?.name ?? "State"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <Combobox
+          as="div"
+          className={`flex-shrink-0 text-left ${className}`}
+          value={value.id}
+          onChange={(data: string) => {
+            const selectedState = projectStates?.find((state) => state.id === data);
+            if (selectedState) onChange(selectedState);
+          }}
+          disabled={disabled}
+        >
+          <Combobox.Button as={Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+              onClick={() => !projectStatesByGroup && fetchProjectStates()}
+            >
+              {label}
+              {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+            </button>
+          </Combobox.Button>
+          <Combobox.Options className="fixed z-10">
+            <div
+              className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+                  className="w-full bg-transparent py-1 px-2 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}
+                />
+              </div>
+              <div className={`mt-2 space-y-1 max-h-48 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}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && <Check className="h-3.5 w-3.5" />}
+                        </>
+                      )}
+                    </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>
+        </Combobox>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
new file mode 100644
index 00000000000..428fca5d485
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Link, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteArchivedIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+};
+
+export const ArchivedIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteArchivedIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
new file mode 100644
index 00000000000..9736c575ec3
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+  handleRemoveFromCycle: () => Promise<void>;
+};
+
+export const CycleIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate, handleRemoveFromCycle } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleRemoveFromCycle();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <XCircle className="h-3 w-3" />
+            Remove from cycle
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
new file mode 100644
index 00000000000..642c3903242
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-issue";
+export * from "./module-issue";
+export * from "./project-issue";
+export * from "./archived-issue";
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
new file mode 100644
index 00000000000..93594de9ef1
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+  handleRemoveFromModule: () => Promise<void>;
+};
+
+export const ModuleIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate, handleRemoveFromModule } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleRemoveFromModule();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <XCircle className="h-3 w-3" />
+            Remove from module
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
new file mode 100644
index 00000000000..7999be31dd9
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { CustomMenu } from "@plane/ui";
+import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate: (data: IIssue) => Promise<void>;
+};
+
+export const ProjectIssueQuickActions: React.FC<Props> = (props) => {
+  const { issue, handleDelete, handleUpdate } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyIssueLink = () => {
+    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Link copied",
+        message: "Issue link copied to clipboard",
+      })
+    );
+  };
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        handleClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(null);
+        }}
+        // pre-populate date only if not editing
+        prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
+        data={issueToEdit}
+        onSubmit={async (data) => {
+          if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
+        }}
+      />
+      <CustomMenu placement="bottom-start" ellipsis>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCopyIssueLink();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Link className="h-3 w-3" />
+            Copy link
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIssueToEdit(issue);
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Pencil className="h-3 w-3" />
+            Edit issue
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setCreateUpdateIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Copy className="h-3 w-3" />
+            Make a copy
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDeleteIssueModal(true);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <Trash2 className="h-3 w-3" />
+            Delete issue
+          </div>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
new file mode 100644
index 00000000000..2906de3f193
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "components/issues";
+
+export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId) {
+      await archivedIssueFiltersStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      await archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+    }
+  });
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ArchivedIssueAppliedFiltersRoot />
+      <div className="w-full h-full overflow-auto">
+        <ArchivedIssueListLayout />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
new file mode 100644
index 00000000000..4d9fa7f08cb
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  CycleAppliedFiltersRoot,
+  CycleCalendarLayout,
+  CycleEmptyState,
+  CycleGanttLayout,
+  CycleKanBanLayout,
+  CycleListLayout,
+  CycleSpreadsheetLayout,
+} from "components/issues";
+import { TransferIssues, TransferIssuesModal } from "components/cycles";
+// ui
+import { Spinner } from "@plane/ui";
+// helpers
+import { getDateRangeStatus } from "helpers/date-time.helper";
+
+export const CycleLayoutRoot: React.FC = observer(() => {
+  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycle: cycleStore,
+    cycleIssue: cycleIssueStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && cycleId ? `CYCLE_FILTERS_AND_ISSUES_${cycleId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId && cycleId) {
+      // fetching the project display filters and display properties
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+      // fetching the cycle filters
+      await cycleIssueFilterStore.fetchCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+
+      // fetching the cycle issues
+      await cycleIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const cycleDetails = cycleId ? cycleStore.cycle_details[cycleId.toString()] : undefined;
+  const cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+
+  const issueCount = cycleIssueStore.getIssuesCount;
+
+  if (!cycleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
+      <div className="relative w-full h-full flex flex-col overflow-hidden">
+        {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
+        <CycleAppliedFiltersRoot />
+        {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+          <CycleEmptyState
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            cycleId={cycleId?.toString()}
+          />
+        ) : (
+          <div className="w-full h-full overflow-auto">
+            {activeLayout === "list" ? (
+              <CycleListLayout />
+            ) : activeLayout === "kanban" ? (
+              <CycleKanBanLayout />
+            ) : activeLayout === "calendar" ? (
+              <CycleCalendarLayout />
+            ) : activeLayout === "gantt_chart" ? (
+              <CycleGanttLayout />
+            ) : activeLayout === "spreadsheet" ? (
+              <CycleSpreadsheetLayout />
+            ) : null}
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
new file mode 100644
index 00000000000..018a63d2aa6
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
@@ -0,0 +1,116 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
+
+type Props = {
+  type?: TStaticViewTypes;
+};
+
+export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
+  const { type } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewIssues: globalViewIssuesStore,
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+    workspace: workspaceStore,
+    issueDetail: issueDetailStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  useSWR(
+    workspaceSlug && globalViewId && viewDetails ? `GLOBAL_VIEW_ISSUES_${globalViewId.toString()}` : null,
+    workspaceSlug && globalViewId && viewDetails
+      ? () => {
+          globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
+        }
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && type ? `GLOBAL_VIEW_ISSUES_${type.toString()}` : null,
+    workspaceSlug && type
+      ? () => {
+          globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
+        }
+      : null
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !globalViewId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      globalViewIssuesStore.updateIssueStructure(globalViewId.toString(), payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, data);
+    },
+    [globalViewId, globalViewIssuesStore, workspaceSlug, issueDetailStore]
+  );
+
+  const issues = type
+    ? globalViewIssuesStore.viewIssues?.[type]
+    : globalViewId
+    ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
+    : undefined;
+
+  if (!issues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <GlobalViewsAppliedFiltersRoot />
+      {issues?.length === 0 ? (
+        <GlobalViewEmptyState />
+      ) : (
+        <div className="h-full w-full overflow-auto">
+          <SpreadsheetView
+            displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+            displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+            handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+            issues={issues}
+            members={workspaceStore.workspaceMembers ? workspaceStore.workspaceMembers.map((m) => m.member) : undefined}
+            labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
+            handleIssueAction={() => {}}
+            handleUpdateIssue={handleUpdateIssue}
+            disableUserActions={false}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/index.ts b/web/components/issues/issue-layouts/roots/index.ts
new file mode 100644
index 00000000000..515d73403f1
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/index.ts
@@ -0,0 +1,6 @@
+export * from "./cycle-layout-root";
+export * from "./global-view-layout-root";
+export * from "./module-layout-root";
+export * from "./project-layout-root";
+export * from "./project-view-layout-root";
+export * from "./archived-issue-layout-root";
diff --git a/web/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
new file mode 100644
index 00000000000..3386725bc62
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ModuleAppliedFiltersRoot,
+  ModuleCalendarLayout,
+  ModuleEmptyState,
+  ModuleGanttLayout,
+  ModuleKanBanLayout,
+  ModuleListLayout,
+  ModuleSpreadsheetLayout,
+} from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+
+export const ModuleLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+
+  const {
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    moduleFilter: moduleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && moduleId ? `MODULE_FILTERS_AND_ISSUES_${moduleId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId && moduleId) {
+        // fetching the project display filters and display properties
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+        // fetching the module filters
+        await moduleIssueFilterStore.fetchModuleFilters(workspaceSlug, projectId, moduleId);
+
+        // fetching the module issues
+        await moduleIssueStore.fetchIssues(workspaceSlug, projectId, moduleId);
+      }
+    }
+  );
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const issueCount = moduleIssueStore.getIssuesCount;
+
+  if (!moduleIssueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ModuleAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ModuleEmptyState
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          moduleId={moduleId?.toString()}
+        />
+      ) : (
+        <div className="h-full w-full overflow-auto">
+          {activeLayout === "list" ? (
+            <ModuleListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ModuleKanBanLayout />
+          ) : activeLayout === "calendar" ? (
+            <ModuleCalendarLayout />
+          ) : activeLayout === "gantt_chart" ? (
+            <ModuleGanttLayout />
+          ) : activeLayout === "spreadsheet" ? (
+            <ModuleSpreadsheetLayout />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
new file mode 100644
index 00000000000..0f5cac86b83
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ListLayout,
+  CalendarLayout,
+  GanttLayout,
+  KanBanLayout,
+  ProjectAppliedFiltersRoot,
+  ProjectSpreadsheetLayout,
+  ProjectEmptyState,
+} from "components/issues";
+import { Spinner } from "@plane/ui";
+
+export const ProjectLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_FILTERS_AND_ISSUES_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+        await issueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
+      }
+    }
+  );
+
+  console.log("--");
+  console.log("isLoading -- -->", isLoading);
+  console.log("--");
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const issueCount = issueStore.getIssuesCount;
+
+  if (!issueStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ProjectAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ProjectEmptyState />
+      ) : (
+        <div className="w-full h-full overflow-auto">
+          {activeLayout === "list" ? (
+            <ListLayout />
+          ) : activeLayout === "kanban" ? (
+            <KanBanLayout />
+          ) : activeLayout === "calendar" ? (
+            <CalendarLayout />
+          ) : activeLayout === "gantt_chart" ? (
+            <GanttLayout />
+          ) : activeLayout === "spreadsheet" ? (
+            <ProjectSpreadsheetLayout />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
new file mode 100644
index 00000000000..ce8051deac6
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ModuleKanBanLayout,
+  ModuleListLayout,
+  ProjectViewAppliedFiltersRoot,
+  ProjectViewCalendarLayout,
+  ProjectViewEmptyState,
+  ProjectViewGanttLayout,
+  ProjectViewSpreadsheetLayout,
+} from "components/issues";
+import { Spinner } from "@plane/ui";
+
+export const ProjectViewLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViews: projectViewsStore,
+    projectViewIssues: projectViewIssuesStore,
+    projectViewFilters: projectViewFiltersStore,
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && viewId ? `PROJECT_VIEW_FILTERS_AND_ISSUES_${viewId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId && viewId) {
+        // fetching the project display filters and display properties
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+
+        // fetching the view details
+        await projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString());
+        // fetching the view issues
+        await projectViewIssuesStore.fetchViewIssues(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          viewId.toString(),
+          projectViewFiltersStore.storedFilters[viewId.toString()] ?? {}
+        );
+      }
+    }
+  );
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const issueCount = projectViewIssuesStore.getIssuesCount;
+
+  if (!projectViewIssuesStore.getIssues)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="relative h-full w-full flex flex-col overflow-hidden">
+      <ProjectViewAppliedFiltersRoot />
+      {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
+        <ProjectViewEmptyState />
+      ) : (
+        <div className="h-full w-full overflow-y-auto">
+          {activeLayout === "list" ? (
+            <ModuleListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ModuleKanBanLayout />
+          ) : activeLayout === "calendar" ? (
+            <ProjectViewCalendarLayout />
+          ) : activeLayout === "gantt_chart" ? (
+            <ProjectViewGanttLayout />
+          ) : activeLayout === "spreadsheet" ? (
+            <ProjectViewSpreadsheetLayout />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
new file mode 100644
index 00000000000..4cd19fdd139
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+// components
+import { IssuePropertyAssignee } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IUserLite } from "types";
+
+type Props = {
+  issue: IIssue;
+  members: IUserLite[] | undefined;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyAssignee
+        projectId={issue.project_detail.id ?? null}
+        value={issue.assignees}
+        onChange={(data) => onChange({ assignees: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
+        hideDropdownArrow
+        disabled={disabled}
+        multiple
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue) => (
+          <SpreadsheetAssigneeColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            members={members}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
new file mode 100644
index 00000000000..475161eeb8a
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
new file mode 100644
index 00000000000..90ad56d124e
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
@@ -0,0 +1,180 @@
+import { observer } from "mobx-react-lite";
+// components
+import { SpreadsheetColumn } from "components/issues";
+// types
+import {
+  IIssue,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueLabels,
+  IStateResponse,
+  IUserLite,
+} from "types";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+  disableUserActions: boolean;
+  expandedIssues: string[];
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  issues: IIssue[] | undefined;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+export const SpreadsheetColumnsList: React.FC<Props> = observer((props) => {
+  const {
+    disableUserActions,
+    displayFilters,
+    displayProperties,
+    expandedIssues,
+    handleDisplayFilterUpdate,
+    handleUpdateIssue,
+    issues,
+    members,
+    labels,
+    states,
+  } = props;
+
+  return (
+    <>
+      {displayProperties.state && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          states={states}
+          property="state"
+        />
+      )}
+      {displayProperties.priority && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="priority"
+        />
+      )}
+      {displayProperties.assignee && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          members={members}
+          property="assignee"
+        />
+      )}
+      {displayProperties.labels && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          labels={labels}
+          property="labels"
+        />
+      )}{" "}
+      {displayProperties.start_date && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="start_date"
+        />
+      )}
+      {displayProperties.due_date && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="due_date"
+        />
+      )}
+      {displayProperties.estimate && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="estimate"
+        />
+      )}
+      {displayProperties.created_on && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="created_on"
+        />
+      )}
+      {displayProperties.updated_on && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="updated_on"
+        />
+      )}
+      {displayProperties.link && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="link"
+        />
+      )}
+      {displayProperties.attachment_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="attachment_count"
+        />
+      )}
+      {displayProperties.sub_issue_count && (
+        <SpreadsheetColumn
+          displayFilters={displayFilters}
+          disableUserActions={disableUserActions}
+          expandedIssues={expandedIssues}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          handleUpdateIssue={handleUpdateIssue}
+          issues={issues}
+          property="sub_issue_count"
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
new file mode 100644
index 00000000000..8c901a9d8db
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIssues }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.created_at)}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
new file mode 100644
index 00000000000..f2b1a1d9b8f
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+// components
+import { ViewDueDateSelect } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <ViewDueDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ target_date: val })}
+        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
+        noBorder
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetDueDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
new file mode 100644
index 00000000000..c70c7e3180f
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -0,0 +1,49 @@
+// components
+import { IssuePropertyEstimates } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyEstimates
+        projectId={issue.project_detail.id ?? null}
+        value={issue.estimate_point}
+        onChange={(data) => onChange({ estimate_point: data })}
+        className="h-full w-full"
+        buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetEstimateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
new file mode 100644
index 00000000000..a6c4979b31d
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -0,0 +1,14 @@
+export * from "./issue";
+export * from "./assignee-column";
+export * from "./attachment-column";
+export * from "./columns-list";
+export * from "./created-on-column";
+export * from "./due-date-column";
+export * from "./estimate-column";
+export * from "./label-column";
+export * from "./link-column";
+export * from "./priority-column";
+export * from "./start-date-column";
+export * from "./state-column";
+export * from "./sub-issue-column";
+export * from "./updated-on-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
new file mode 100644
index 00000000000..b8d09d1df1d
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
@@ -0,0 +1,2 @@
+export * from "./spreadsheet-issue-column";
+export * from "./issue-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
new file mode 100644
index 00000000000..3fd042c1d3c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Popover2 } from "@blueprintjs/popover2";
+import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { Tooltip } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+type Props = {
+  issue: IIssue;
+  expanded: boolean;
+  handleToggleExpand: (issueId: string) => void;
+  properties: IIssueDisplayProperties;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
+  disableUserActions: boolean;
+  nestingLevel: number;
+};
+
+export const IssueColumn: React.FC<Props> = ({
+  issue,
+  expanded,
+  handleToggleExpand,
+  setIssuePeekOverView,
+  properties,
+  handleEditIssue,
+  handleDeleteIssue,
+  disableUserActions,
+  nestingLevel,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const router = useRouter();
+
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyText = () => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleIssuePeekOverview = (issue: IIssue) => {
+    const { query } = router;
+    setIssuePeekOverView({
+      workspaceSlug: issue?.workspace_detail?.slug,
+      projectId: issue?.project_detail?.id,
+      issueId: issue?.id,
+    });
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssueId: issue?.id },
+    });
+  };
+
+  const paddingLeft = `${nestingLevel * 54}px`;
+
+  return (
+    <>
+      <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
+        {properties.key && (
+          <div
+            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+            style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+              <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+
+              {!disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link className="h-3 w-3" />
+                            <span>Copy link</span>
+                          </div>
+                        </button>
+
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>
+
+                        <button
+                          type="button"
+                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
+                >
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+        <div className="w-full overflow-hidden">
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div
+              className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
+              onClick={() => handleIssuePeekOverview(issue)}
+            >
+              {issue.name}
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
new file mode 100644
index 00000000000..703174de591
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+// components
+import { IssueColumn } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IIssueDisplayProperties } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+  setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
+  properties: IIssueDisplayProperties;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
+  disableUserActions: boolean;
+  nestingLevel?: number;
+};
+
+export const SpreadsheetIssuesColumn: React.FC<Props> = ({
+  issue,
+  expandedIssues,
+  setExpandedIssues,
+  setIssuePeekOverView,
+  properties,
+  handleIssueAction,
+  disableUserActions,
+  nestingLevel = 0,
+}) => {
+  const handleToggleExpand = (issueId: string) => {
+    setExpandedIssues((prevState) => {
+      const newArray = [...prevState];
+      const index = newArray.indexOf(issueId);
+
+      if (index > -1) newArray.splice(index, 1);
+      else newArray.push(issueId);
+
+      return newArray;
+    });
+  };
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssueColumn
+        issue={issue}
+        expanded={isExpanded}
+        handleToggleExpand={handleToggleExpand}
+        properties={properties}
+        handleEditIssue={() => handleIssueAction(issue, "edit")}
+        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+        setIssuePeekOverView={setIssuePeekOverView}
+        disableUserActions={disableUserActions}
+        nestingLevel={nestingLevel}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue) => (
+          <SpreadsheetIssuesColumn
+            key={subIssue.id}
+            issue={subIssue}
+            expandedIssues={expandedIssues}
+            setExpandedIssues={setExpandedIssues}
+            properties={properties}
+            handleIssueAction={handleIssueAction}
+            setIssuePeekOverView={setIssuePeekOverView}
+            disableUserActions={disableUserActions}
+            nestingLevel={nestingLevel + 1}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
new file mode 100644
index 00000000000..65f48245e1e
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+// components
+import { IssuePropertyLabels } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IIssueLabels } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  labels: IIssueLabels[] | undefined;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, labels, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyLabels
+        projectId={issue.project_detail.id ?? null}
+        value={issue.labels}
+        onChange={(data) => onChange({ labels: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        noLabelBorder
+        hideDropdownArrow
+        maxRender={1}
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLabelColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            labels={labels}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
new file mode 100644
index 00000000000..90e71bcdef5
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.link_count} {issue.link_count === 1 ? "link" : "links"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
new file mode 100644
index 00000000000..388755cd350
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+// components
+import { PrioritySelect } from "components/project";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <PrioritySelect
+        value={issue.priority}
+        onChange={(data) => onChange({ priority: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
+        showTitle
+        highlightUrgentPriority={false}
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetPriorityColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
new file mode 100644
index 00000000000..446aba22a8e
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+// components
+import { ViewStartDateSelect } from "components/issues";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (formData: Partial<IIssue>) => void;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <ViewStartDateSelect
+        issue={issue}
+        onChange={(val) => onChange({ start_date: val })}
+        className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
+        buttonClassName="!h-full !w-full !shadow-none px-2.5"
+        noBorder
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetStartDateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
new file mode 100644
index 00000000000..412e14e48f8
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+// components
+import { IssuePropertyState } from "../../properties";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue, IStateResponse } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: Partial<IIssue>) => void;
+  states: IStateResponse | undefined;
+  expandedIssues: string[];
+  disabled: boolean;
+};
+
+export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
+  const { issue, onChange, states, expandedIssues, disabled } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <IssuePropertyState
+        projectId={issue.project_detail.id ?? null}
+        value={issue.state_detail}
+        onChange={(data) => onChange({ state: data.id, state_detail: data })}
+        className="h-full w-full"
+        buttonClassName="!shadow-none !border-0 h-full w-full"
+        hideDropdownArrow
+        disabled={disabled}
+      />
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue) => (
+          <SpreadsheetStateColumn
+            key={subIssue.id}
+            issue={subIssue}
+            onChange={onChange}
+            states={states}
+            expandedIssues={expandedIssues}
+            disabled={disabled}
+          />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
new file mode 100644
index 00000000000..8f5e6f1255b
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
new file mode 100644
index 00000000000..dba684c848d
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+// hooks
+import useSubIssue from "hooks/use-sub-issue";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  expandedIssues: string[];
+};
+
+export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
+  const { issue, expandedIssues } = props;
+
+  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
+
+  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
+
+  return (
+    <>
+      <div className="flex items-center justify-center text-xs h-full w-full">
+        {renderLongDetailDateFormat(issue.updated_at)}
+      </div>
+
+      {isExpanded &&
+        !isLoading &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssue: IIssue) => (
+          <SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
+        ))}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
new file mode 100644
index 00000000000..5b14a2dab1c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -0,0 +1,5 @@
+export * from "./columns";
+export * from "./roots";
+export * from "./spreadsheet-column";
+export * from "./spreadsheet-view";
+export * from "./inline-create-issue-form";
diff --git a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
new file mode 100644
index 00000000000..269ad553894
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-xs w-20 leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full py-3 rounded-md bg-transparent text-sm leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      {isOpen && (
+        <div>
+          <form
+            ref={ref}
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      )}
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <div className="flex items-center">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pt-3 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
new file mode 100644
index 00000000000..43c53e51c2b
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -0,0 +1,69 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const CycleSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const issues = cycleIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      cycleIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, cycleIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/index.ts b/web/components/issues/issue-layouts/spreadsheet/roots/index.ts
new file mode 100644
index 00000000000..10037416cfb
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-root";
+export * from "./project-view-root";
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
new file mode 100644
index 00000000000..cfa4259e7da
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -0,0 +1,69 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ModuleSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const issues = moduleIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      moduleIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, moduleIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
new file mode 100644
index 00000000000..a3856f5fb2c
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ProjectSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+    user: userStore,
+  } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const issues = issueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !user) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      issueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueStore, issueDetailStore, projectId, user, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+      enableQuickCreateIssue
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
new file mode 100644
index 00000000000..80092be5e75
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -0,0 +1,69 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/issues";
+// types
+import { IIssue, IIssueDisplayFilterOptions } from "types";
+// constants
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViewIssues: projectViewIssueStore,
+    issueDetail: issueDetailStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const issues = projectViewIssueStore.getIssues;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      projectViewIssueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueDetailStore, projectViewIssueStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <SpreadsheetView
+      displayProperties={issueFilterStore.userDisplayProperties}
+      displayFilters={issueFilterStore.userDisplayFilters}
+      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+      issues={issues as IIssueUnGroupedStructure}
+      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
+      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      handleIssueAction={() => {}}
+      handleUpdateIssue={handleUpdateIssue}
+      disableUserActions={false}
+    />
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
new file mode 100644
index 00000000000..006e91d501d
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@@ -0,0 +1,242 @@
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  CheckIcon,
+  ChevronDownIcon,
+  Eraser,
+  ListFilter,
+  MoveRight,
+} from "lucide-react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetAttachmentColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetLinkColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetSubIssueColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "components/issues";
+// ui
+import { CustomMenu } from "@plane/ui";
+// types
+import {
+  IIssue,
+  IIssueDisplayFilterOptions,
+  IIssueLabels,
+  IStateResponse,
+  IUserLite,
+  TIssueOrderByOptions,
+} from "types";
+// constants
+import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
+
+type Props = {
+  disableUserActions: boolean;
+  displayFilters: IIssueDisplayFilterOptions;
+  expandedIssues: string[];
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  issues: IIssue[] | undefined;
+  property: string;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+export const SpreadsheetColumn: React.FC<Props> = (props) => {
+  const {
+    disableUserActions,
+    displayFilters,
+    expandedIssues,
+    handleDisplayFilterUpdate,
+    handleUpdateIssue,
+    issues,
+    property,
+    members,
+    labels,
+    states,
+  } = props;
+
+  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+    "spreadsheetViewSorting",
+    ""
+  );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
+    "spreadsheetViewActiveSortingProperty",
+    ""
+  );
+
+  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+    handleDisplayFilterUpdate({ order_by: order });
+
+    setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+  };
+
+  const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
+
+  return (
+    <div className="relative flex flex-col h-max w-full bg-custom-background-100">
+      <div className="flex items-center min-w-[8rem] px-4 py-1 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
+        <CustomMenu
+          customButtonClassName="!w-full"
+          className="!w-full"
+          customButton={
+            <div className="flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-2">
+              <div className="flex items-center gap-1.5">
+                {activeSortingProperty === property && (
+                  <div className="rounded-full flex items-center justify-center h-3.5 w-3.5">
+                    <ListFilter className="h-3 w-3" />
+                  </div>
+                )}
+                {propertyDetails.title}
+              </div>
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
+          width="xl"
+          placement="bottom-end"
+        >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
+            <div
+              className={`flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                <ArrowDownWideNarrow className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+                <MoveRight className="h-3 w-3" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+              </div>
+
+              {selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` && (
+                <CheckIcon className="h-3 w-3" />
+              )}
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
+            <div
+              className={`flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                <ArrowUpNarrowWide className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+                <MoveRight className="h-3 w-3" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+              </div>
+
+              {selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && (
+                <CheckIcon className="h-3 w-3" />
+              )}
+            </div>
+          </CustomMenu.MenuItem>
+          {selectedMenuItem &&
+            selectedMenuItem !== "" &&
+            displayFilters?.order_by !== "-created_at" &&
+            selectedMenuItem.includes(property) && (
+              <CustomMenu.MenuItem
+                className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
+                key={property}
+                onClick={() => handleOrderBy("-created_at", property)}
+              >
+                <div className="flex items-center gap-2 px-1">
+                  <Eraser className="h-3 w-3" />
+                  <span>Clear sorting</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+        </CustomMenu>
+      </div>
+
+      <div className="h-full min-w-[8rem] w-full">
+        {issues?.map((issue) => (
+          <div
+            key={`${property}-${issue.id}`}
+            className={`h-11 border-b-[0.5px] border-custom-border-200 ${
+              disableUserActions ? "" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+          >
+            {property === "state" ? (
+              <SpreadsheetStateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+                states={states}
+              />
+            ) : property === "priority" ? (
+              <SpreadsheetPriorityColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "estimate" ? (
+              <SpreadsheetEstimateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "assignee" ? (
+              <SpreadsheetAssigneeColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                members={members}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "labels" ? (
+              <SpreadsheetLabelColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                labels={labels}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "start_date" ? (
+              <SpreadsheetStartDateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "due_date" ? (
+              <SpreadsheetDueDateColumn
+                disabled={disableUserActions}
+                expandedIssues={expandedIssues}
+                issue={issue}
+                onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
+              />
+            ) : property === "created_on" ? (
+              <SpreadsheetCreatedOnColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "updated_on" ? (
+              <SpreadsheetUpdatedOnColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "link" ? (
+              <SpreadsheetLinkColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "attachment_count" ? (
+              <SpreadsheetAttachmentColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : property === "sub_issue_count" ? (
+              <SpreadsheetSubIssueColumn expandedIssues={expandedIssues} issue={issue} />
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
new file mode 100644
index 00000000000..800383d1def
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Spinner } from "@plane/ui";
+// types
+import {
+  IIssue,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueLabels,
+  IStateResponse,
+  IUserLite,
+} from "types";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issues: IIssue[] | undefined;
+  members?: IUserLite[] | undefined;
+  labels?: IIssueLabels[] | undefined;
+  states?: IStateResponse | undefined;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+  openIssuesListModal?: (() => void) | null;
+  disableUserActions: boolean;
+  enableQuickCreateIssue?: boolean;
+};
+
+export const SpreadsheetView: React.FC<Props> = observer((props) => {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issues,
+    members,
+    labels,
+    states,
+    handleIssueAction,
+    handleUpdateIssue,
+    openIssuesListModal,
+    disableUserActions,
+    enableQuickCreateIssue,
+  } = props;
+
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [issuePeekOverview, setIssuePeekOverView] = useState<{
+    workspaceSlug: string;
+    projectId: string;
+    issueId: string;
+  } | null>(null);
+
+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+
+    const scrollLeft = containerRef.current.scrollLeft;
+    setIsScrolled(scrollLeft > 0);
+  };
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
+      <div className="h-full w-full flex flex-col">
+        <div
+          ref={containerRef}
+          className="flex max-h-full h-full overflow-y-auto divide-x-[0.5px] divide-custom-border-200"
+        >
+          {issues && issues.length > 0 ? (
+            <>
+              <div className="sticky left-0 w-[28rem] z-[2]">
+                <div
+                  className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                  style={{
+                    boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.05)" : "",
+                  }}
+                >
+                  <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
+                    {displayProperties.key && (
+                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
+                    )}
+                    <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                  </div>
+
+                  {issues.map((issue, index) => (
+                    <SpreadsheetIssuesColumn
+                      key={`${issue.id}_${index}`}
+                      issue={issue}
+                      expandedIssues={expandedIssues}
+                      setExpandedIssues={setExpandedIssues}
+                      properties={displayProperties}
+                      handleIssueAction={handleIssueAction}
+                      disableUserActions={disableUserActions}
+                      setIssuePeekOverView={setIssuePeekOverView}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <SpreadsheetColumnsList
+                displayFilters={displayFilters}
+                displayProperties={displayProperties}
+                disableUserActions={disableUserActions}
+                expandedIssues={expandedIssues}
+                handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                handleUpdateIssue={handleUpdateIssue}
+                issues={issues}
+                members={members}
+                labels={labels}
+                states={states}
+              />
+            </>
+          ) : (
+            <div className="grid place-items-center h-full w-full">
+              <Spinner />
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-custom-border-100">
+          <div className="mb-3 z-50 sticky bottom-0 left-0">
+            {enableQuickCreateIssue && <SpreadsheetInlineCreateIssueForm />}
+          </div>
+
+          {/* {!disableUserActions &&
+            !isInlineCreateIssueFormOpen &&
+            (type === "issue" ? (
+              <button
+                className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] w-full"
+                onClick={() => setIsInlineCreateIssueFormOpen(true)}
+              >
+                <PlusIcon className="h-4 w-4" />
+                New Issue
+              </button>
+            ) : (
+              <CustomMenu
+                className="sticky left-0 z-10"
+                customButton={
+                  <button
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                    type="button"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    New Issue
+                  </button>
+                }
+                optionsClassName="left-5 !w-36"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            ))} */}
+        </div>
+      </div>
+      {issuePeekOverview && (
+        <IssuePeekOverview
+          workspaceSlug={issuePeekOverview?.workspaceSlug}
+          projectId={issuePeekOverview?.projectId}
+          issueId={issuePeekOverview?.issueId}
+          handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/activity/card.tsx b/web/components/issues/issue-peek-overview/activity/card.tsx
new file mode 100644
index 00000000000..1b475c6c7d7
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/card.tsx
@@ -0,0 +1,138 @@
+import { FC } from "react";
+import Link from "next/link";
+import { History } from "lucide-react";
+// packages
+import { Loader, Tooltip } from "@plane/ui";
+// components
+import { ActivityIcon, ActivityMessage } from "components/core";
+import { IssueCommentCard } from "./comment-card";
+// helpers
+import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+
+interface IssueActivityCard {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueComments: any;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+}
+
+export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueComments,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+  } = props;
+
+  return (
+    <div className="flow-root">
+      <ul role="list" className="-mb-4">
+        {issueComments &&
+          issueComments.length > 0 &&
+          issueComments.map((activityItem: any, index: any) => {
+            // determines what type of action is performed
+            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
+
+            if ("field" in activityItem && activityItem.field !== "updated_by") {
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    {issueComments.length > 1 && index !== issueComments.length - 1 ? (
+                      <span
+                        className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
+                        aria-hidden="true"
+                      />
+                    ) : null}
+                    <div className="relative flex items-start space-x-2">
+                      <div>
+                        <div className="relative px-1.5">
+                          <div className="mt-1.5">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-100 text-custom-text-200 ring-white">
+                              {activityItem.field ? (
+                                activityItem.new_value === "restore" ? (
+                                  <History className="h-3.5 w-3.5 text-custom-text-200" />
+                                ) : (
+                                  <ActivityIcon activity={activityItem} />
+                                )
+                              ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                <img
+                                  src={activityItem.actor_detail.avatar}
+                                  alt={activityItem.actor_detail.display_name}
+                                  height={24}
+                                  width={24}
+                                  className="rounded-full h-full w-full object-cover"
+                                />
+                              ) : (
+                                <div
+                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                >
+                                  {activityItem.actor_detail.is_bot
+                                    ? activityItem.actor_detail.first_name.charAt(0)
+                                    : activityItem.actor_detail.display_name.charAt(0)}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="min-w-0 flex-1 py-3">
+                        <div className="text-xs text-custom-text-200 break-words">
+                          {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                            <span className="text-gray font-medium">Plane</span>
+                          ) : activityItem.actor_detail.is_bot ? (
+                            <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                          ) : (
+                            <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                              <a className="text-gray font-medium">
+                                {activityItem.actor_detail.is_bot
+                                  ? activityItem.actor_detail.first_name
+                                  : activityItem.actor_detail.display_name}
+                              </a>
+                            </Link>
+                          )}{" "}
+                          {message}{" "}
+                          <Tooltip
+                            tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                              activityItem.created_at
+                            )}`}
+                          >
+                            <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                          </Tooltip>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              );
+            } else if ("comment_json" in activityItem)
+              return (
+                <div key={activityItem.id} className="mt-4">
+                  <IssueCommentCard
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    user={user}
+                    comment={activityItem}
+                    onSubmit={issueCommentUpdate}
+                    handleCommentDeletion={issueCommentRemove}
+                    issueCommentReactionCreate={issueCommentReactionCreate}
+                    issueCommentReactionRemove={issueCommentReactionRemove}
+                    // showAccessSpecifier={showAccessSpecifier}
+                  />
+                </div>
+              );
+          })}
+      </ul>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-card.tsx b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
new file mode 100644
index 00000000000..4ca072f6eab
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
+// services
+import { FileService } from "services/file.service";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+// components
+import { IssueCommentReaction } from "./comment-reaction";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import type { IIssueComment } from "types";
+
+// services
+const fileService = new FileService();
+
+type IIssueCommentCard = {
+  comment: IIssueComment;
+  handleCommentDeletion: (comment: string) => void;
+  onSubmit: (data: Partial<IIssueComment>) => void;
+  showAccessSpecifier?: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+};
+
+export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
+  const {
+    comment,
+    handleCommentDeletion,
+    onSubmit,
+    showAccessSpecifier = false,
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+  } = props;
+
+  const editorRef = React.useRef<any>(null);
+  const showEditorRef = React.useRef<any>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<IIssueComment>({
+    defaultValues: comment,
+  });
+
+  const formSubmit = (formData: Partial<IIssueComment>) => {
+    if (isSubmitting) return;
+
+    setIsEditing(false);
+
+    onSubmit({ id: comment.id, ...formData });
+
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  useEffect(() => {
+    isEditing && setFocus("comment");
+  }, [isEditing, setFocus]);
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment.actor_detail.first_name.charAt(0)
+              : comment.actor_detail.display_name.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">commented {timeAgo(comment.created_at)}</p>
+        </div>
+
+        <div className="issue-comments-section p-0">
+          <div className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
+            <div>
+              <LiteTextEditorWithRef
+                onEnterKeyPress={handleSubmit(formSubmit)}
+                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                deleteFile={fileService.deleteImage}
+                ref={editorRef}
+                value={watch("comment_html")}
+                debouncedUpdatesEnabled={false}
+                customClassName="min-h-[50px] p-3 shadow-sm"
+                onChange={(comment_json: Object, comment_html: string) => {
+                  setValue("comment_json", comment_json);
+                  setValue("comment_html", comment_html);
+                }}
+                mentionSuggestions={editorSuggestions.mentionSuggestions}
+                mentionHighlights={editorSuggestions.mentionHighlights}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="button"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+                onClick={handleSubmit(formSubmit)}
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </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" />
+              </button>
+            </div>
+          </div>
+
+          <div className={`relative ${isEditing ? "hidden" : ""}`}>
+            {showAccessSpecifier && (
+              <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
+              </div>
+            )}
+            <LiteReadOnlyEditorWithRef
+              ref={showEditorRef}
+              value={comment.comment_html}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={editorSuggestions.mentionHighlights}
+            />
+
+            <div className="mt-1">
+              <IssueCommentReaction
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                user={user}
+                comment={comment}
+                issueCommentReactionCreate={issueCommentReactionCreate}
+                issueCommentReactionRemove={issueCommentReactionRemove}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      {user?.id === comment.actor && (
+        <CustomMenu ellipsis>
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
+            <Pencil className="h-3 w-3" />
+            Edit comment
+          </CustomMenu.MenuItem>
+          {showAccessSpecifier && (
+            <>
+              {comment.access === "INTERNAL" ? (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit({ id: comment.id, access: "EXTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Globe2 className="h-3 w-3" />
+                  Switch to public comment
+                </CustomMenu.MenuItem>
+              ) : (
+                <CustomMenu.MenuItem
+                  onClick={() => onSubmit({ id: comment.id, access: "INTERNAL" })}
+                  className="flex items-center gap-1"
+                >
+                  <Lock className="h-3 w-3" />
+                  Switch to private comment
+                </CustomMenu.MenuItem>
+              )}
+            </>
+          )}
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleCommentDeletion(comment.id);
+            }}
+            className="flex items-center gap-1"
+          >
+            <Trash2 className="h-3 w-3" />
+            Delete comment
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
new file mode 100644
index 00000000000..1eccfb33e00
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { useForm, Controller } from "react-hook-form";
+import { Globe2, Lock } from "lucide-react";
+// services
+import { FileService } from "services/file.service";
+// hooks
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+// components
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssueComment } from "types";
+
+const defaultValues: Partial<IIssueComment> = {
+  access: "INTERNAL",
+  comment_html: "",
+};
+
+type IIssueCommentEditor = {
+  disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
+};
+
+type commentAccessType = {
+  icon: any;
+  key: string;
+  label: "Private" | "Public";
+};
+const commentAccess: commentAccessType[] = [
+  {
+    icon: Lock,
+    key: "INTERNAL",
+    label: "Private",
+  },
+  {
+    icon: Globe2,
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
+
+// services
+const fileService = new FileService();
+
+export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
+  const { disabled = false, onSubmit, showAccessSpecifier = false } = props;
+
+  const editorRef = React.useRef<any>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || isSubmitting) return;
+
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleAddComment)}>
+      <div className="space-y-2">
+        <div className="h-full">
+          <Controller
+            name="access"
+            control={control}
+            render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+              <Controller
+                name="comment_html"
+                control={control}
+                render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
+                  <LiteTextEditorWithRef
+                    onEnterKeyPress={handleSubmit(handleAddComment)}
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
+                    ref={editorRef}
+                    value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
+                    customClassName="p-2 h-full"
+                    editorContentCustomClassNames="min-h-[35px]"
+                    debouncedUpdatesEnabled={false}
+                    mentionSuggestions={editorSuggestions.mentionSuggestions}
+                    mentionHighlights={editorSuggestions.mentionHighlights}
+                    onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
+                    commentAccessSpecifier={
+                      showAccessSpecifier
+                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        : undefined
+                    }
+                    submitButton={
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        className="!px-2.5 !py-1.5 !text-xs"
+                        disabled={isSubmitting || disabled}
+                      >
+                        {isSubmitting ? "Adding..." : "Comment"}
+                      </Button>
+                    }
+                  />
+                )}
+              />
+            )}
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx b/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx
new file mode 100644
index 00000000000..46fbae50b1e
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/comment-reaction.tsx
@@ -0,0 +1,61 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueReaction } from "../reactions";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { RootStore } from "store/root";
+
+interface IIssueCommentReaction {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+
+  comment: any;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+}
+
+export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props) => {
+  const { workspaceSlug, projectId, issueId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } =
+    props;
+
+  const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
+
+  const handleCommentReactionCreate = (reaction: string) => {
+    if (issueCommentReactionCreate && comment?.id) issueCommentReactionCreate(comment?.id, reaction);
+  };
+
+  const handleCommentReactionRemove = (reaction: string) => {
+    if (issueCommentReactionRemove && comment?.id) issueCommentReactionRemove(comment?.id, reaction);
+  };
+
+  useSWR(
+    workspaceSlug && projectId && issueId && comment && comment?.id
+      ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}`
+      : null,
+    () => {
+      if (workspaceSlug && projectId && issueId && comment && comment.id) {
+        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, issueId, comment?.id);
+      }
+    }
+  );
+
+  let issueReactions = issueDetailStore?.getIssueCommentReactions || null;
+  issueReactions = issueReactions && comment.id ? issueReactions?.[comment.id] : [];
+
+  return (
+    <div>
+      <IssueReaction
+        issueReactions={issueReactions}
+        user={user}
+        issueReactionCreate={handleCommentReactionCreate}
+        issueReactionRemove={handleCommentReactionRemove}
+        position="top"
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/activity/index.ts b/web/components/issues/issue-peek-overview/activity/index.ts
new file mode 100644
index 00000000000..a2196d35dde
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/index.ts
@@ -0,0 +1,5 @@
+export * from "./view";
+
+export * from "./card";
+export * from "./comment-editor";
+export * from "./comment-reaction";
diff --git a/web/components/issues/issue-peek-overview/activity/view.tsx b/web/components/issues/issue-peek-overview/activity/view.tsx
new file mode 100644
index 00000000000..97976ed8f95
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/activity/view.tsx
@@ -0,0 +1,61 @@
+import { FC } from "react";
+// components
+import { IssueActivityCard } from "./card";
+import { IssueCommentEditor } from "./comment-editor";
+
+interface IIssueComment {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  user: any;
+  issueComments: any;
+  issueCommentCreate: (comment: any) => void;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+  showCommentAccessSpecifier: boolean;
+}
+
+export const IssueComment: FC<IIssueComment> = (props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    user,
+    issueComments,
+    issueCommentCreate,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+    showCommentAccessSpecifier,
+  } = props;
+
+  const handleAddComment = async (formData: any) => {
+    if (!formData.comment_html) return;
+    await issueCommentCreate(formData);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 border-t py-6 border-custom-border-200">
+      <div className="font-medium text-lg">Activity</div>
+
+      <div className="space-y-2">
+        <IssueCommentEditor onSubmit={handleAddComment} showAccessSpecifier={showCommentAccessSpecifier} />
+
+        <IssueActivityCard
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          user={user}
+          issueComments={issueComments}
+          issueCommentUpdate={issueCommentUpdate}
+          issueCommentRemove={issueCommentRemove}
+          issueCommentReactionCreate={issueCommentReactionCreate}
+          issueCommentReactionRemove={issueCommentReactionRemove}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/index.ts b/web/components/issues/issue-peek-overview/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/components/issues/issue-peek-overview/issue-detail.tsx b/web/components/issues/issue-peek-overview/issue-detail.tsx
new file mode 100644
index 00000000000..2aee4aedd1f
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/issue-detail.tsx
@@ -0,0 +1,162 @@
+import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// packages
+import { RichTextEditor } from "@plane/rich-text-editor";
+// components
+import { TextArea } from "@plane/ui";
+import { IssueReaction } from "./reactions";
+// hooks
+import { useDebouncedCallback } from "use-debounce";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
+// types
+import { IIssue } from "types";
+// services
+import { FileService } from "services/file.service";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const fileService = new FileService();
+
+interface IPeekOverviewIssueDetails {
+  workspaceSlug: string;
+  issue: IIssue;
+  issueReactions: any;
+  user: any;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+}
+
+export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
+  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props;
+  // store
+  const { user: userStore } = useMobxStore();
+  const { currentProjectRole } = userStore;
+  const isAllowed = [15, 20].includes(currentProjectRole || 0);
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [characterLimit, setCharacterLimit] = useState(false);
+  // hooks
+  const { setShowAlert } = useReloadConfirmations();
+  const editorSuggestions = useEditorSuggestions();
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description_html: "",
+    },
+  });
+
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
+
+      await issueUpdate({
+        ...issue,
+        name: formData.name ?? "",
+        description_html: formData.description_html ?? "<p></p>",
+      });
+    },
+    [issue, issueUpdate]
+  );
+
+  const debouncedIssueDescription = useDebouncedCallback(async (_data: any) => {
+    issueUpdate({ ...issue, description_html: _data });
+  }, 1500);
+
+  const debouncedTitleSave = useDebouncedCallback(async () => {
+    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+  }, 1500);
+
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
+  // reset form values
+  useEffect(() => {
+    if (!issue) return;
+
+    reset({
+      ...issue,
+    });
+  }, [issue, reset]);
+
+  return (
+    <>
+      <span className="font-medium text-base text-custom-text-400">
+        {issue?.project_detail?.identifier}-{issue?.sequence_id}
+      </span>
+
+      <div className="relative">
+        {isAllowed ? (
+          <Controller
+            name="name"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Enter issue name"
+                onFocus={() => setCharacterLimit(true)}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                  setCharacterLimit(false);
+                  setIsSubmitting("submitting");
+                  debouncedTitleSave();
+                  onChange(e.target.value);
+                }}
+                required={true}
+                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent  text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary !p-0 focus:!px-3 focus:!py-2"
+                hasError={Boolean(errors?.description)}
+                role="textbox"
+                disabled={!true}
+              />
+            )}
+          />
+        ) : (
+          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
+        )}
+        {characterLimit && true && (
+          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
+            <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
+              {watch("name").length}
+            </span>
+            /255
+          </div>
+        )}
+      </div>
+      <span>{errors.name ? errors.name.message : null}</span>
+      <RichTextEditor
+        uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+        deleteFile={fileService.deleteImage}
+        value={issue?.description_html}
+        debouncedUpdatesEnabled={false}
+        onChange={(description: Object, description_html: string) => {
+          debouncedIssueDescription(description_html);
+        }}
+        customClassName="mt-0"
+        mentionSuggestions={editorSuggestions.mentionSuggestions}
+        mentionHighlights={editorSuggestions.mentionHighlights}
+      />
+      <IssueReaction
+        issueReactions={issueReactions}
+        user={user}
+        issueReactionCreate={issueReactionCreate}
+        issueReactionRemove={issueReactionRemove}
+      />
+    </>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/properties.tsx b/web/components/issues/issue-peek-overview/properties.tsx
new file mode 100644
index 00000000000..303687d3931
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/properties.tsx
@@ -0,0 +1,386 @@
+import { FC, useState } from "react";
+import { mutate } from "swr";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui icons
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+import { CalendarDays, ContrastIcon, Link2, Plus, Signal, Tag, Triangle, User2 } from "lucide-react";
+import {
+  SidebarAssigneeSelect,
+  SidebarCycleSelect,
+  SidebarEstimateSelect,
+  SidebarLabelSelect,
+  SidebarModuleSelect,
+  SidebarParentSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+} from "../sidebar-select";
+// hooks
+import useToast from "hooks/use-toast";
+
+// components
+import { CustomDatePicker } from "components/ui";
+import { LinkModal, LinksList } from "components/core";
+// types
+import { IIssue, IIssueLink, TIssuePriorities, linkDetails } from "types";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+// services
+import { IssueService } from "services/issue";
+
+interface IPeekOverviewProperties {
+  issue: IIssue;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  disableUserActions: boolean;
+}
+
+const issueService = new IssueService();
+
+export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
+  const { issue, issueUpdate, disableUserActions } = props;
+  // states
+  const [linkModal, setLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
+
+  const { user: userStore, cycleIssue: cycleIssueStore, moduleIssue: moduleIssueStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleState = (_state: string) => {
+    issueUpdate({ ...issue, state: _state });
+  };
+  const handlePriority = (_priority: TIssuePriorities) => {
+    issueUpdate({ ...issue, priority: _priority });
+  };
+  const handleAssignee = (_assignees: string[]) => {
+    issueUpdate({ ...issue, assignees: _assignees });
+  };
+  const handleEstimate = (_estimate: number | null) => {
+    issueUpdate({ ...issue, estimate_point: _estimate });
+  };
+  const handleStartDate = (_startDate: string | null) => {
+    issueUpdate({ ...issue, start_date: _startDate });
+  };
+  const handleTargetDate = (_targetDate: string | null) => {
+    issueUpdate({ ...issue, target_date: _targetDate });
+  };
+  const handleParent = (_parent: string) => {
+    issueUpdate({ ...issue, parent: _parent });
+  };
+  const addIssueToCycle = async (cycleId: string) => {
+    if (!workspaceSlug || !issue || !cycleId) return;
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), issue.project_detail.id, cycleId, [issue.id]);
+  };
+
+  const addIssueToModule = async (moduleId: string) => {
+    if (!workspaceSlug || !issue || !moduleId) return;
+
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), issue.project_detail.id, moduleId, [issue.id]);
+  };
+  const handleLabels = (formData: Partial<IIssue>) => {
+    issueUpdate({ ...issue, ...formData });
+  };
+
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await issueService
+      .createIssueLink(workspaceSlug as string, projectId as string, issue.id, payload)
+      .then(() => mutate(ISSUE_DETAILS(issue.id)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this issue.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdateLink = async (formData: IIssueLink, linkId: string) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    const updatedLinks = issue.issue_link.map((l) =>
+      l.id === linkId
+        ? {
+            ...l,
+            title: formData.title,
+            url: formData.url,
+          }
+        : l
+    );
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issue.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .updateIssueLink(workspaceSlug as string, projectId as string, issue.id, linkId, payload)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issue.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleEditLink = (link: linkDetails) => {
+    setSelectedLinkToUpdate(link);
+    setLinkModal(true);
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !issue) return;
+
+    const updatedLinks = issue.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issue.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .deleteIssueLink(workspaceSlug as string, projectId as string, issue.id, linkId)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issue.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => {
+          setLinkModal(false);
+          setSelectedLinkToUpdate(null);
+        }}
+        data={selectedLinkToUpdate}
+        status={selectedLinkToUpdate ? true : false}
+        createIssueLink={handleCreateLink}
+        updateIssueLink={handleUpdateLink}
+      />
+      <div className="flex flex-col">
+        <div className="flex flex-col gap-5 py-5 w-full">
+          {/* state */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+              <p>State</p>
+            </div>
+            <div>
+              <SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={disableUserActions} />
+            </div>
+          </div>
+
+          {/* assignee */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Assignees</p>
+            </div>
+            <div>
+              <SidebarAssigneeSelect
+                value={issue.assignees || []}
+                onChange={handleAssignee}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* priority */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <Signal className="h-4 w-4 flex-shrink-0" />
+              <p>Priority</p>
+            </div>
+            <div>
+              <SidebarPrioritySelect
+                value={issue.priority || ""}
+                onChange={handlePriority}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* estimate */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <Triangle className="h-4 w-4 flex-shrink-0 " />
+              <p>Estimate</p>
+            </div>
+            <div>
+              <SidebarEstimateSelect
+                value={issue.estimate_point}
+                onChange={handleEstimate}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* start date */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <CalendarDays className="h-4 w-4 flex-shrink-0" />
+              <p>Start date</p>
+            </div>
+            <div>
+              <CustomDatePicker
+                placeholder="Start date"
+                value={issue.start_date}
+                onChange={handleStartDate}
+                className="bg-custom-background-80 border-none !px-2.5 !py-0.5"
+                maxDate={maxDate ?? undefined}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* due date */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <CalendarDays className="h-4 w-4 flex-shrink-0" />
+              <p>Due date</p>
+            </div>
+            <div>
+              <CustomDatePicker
+                placeholder="Due date"
+                value={issue.target_date}
+                onChange={handleTargetDate}
+                className="bg-custom-background-80 border-none !px-2.5 !py-0.5"
+                minDate={minDate ?? undefined}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          {/* parent */}
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <User2 className="h-4 w-4 flex-shrink-0" />
+              <p>Parent</p>
+            </div>
+            <div>
+              <SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={disableUserActions} />
+            </div>
+          </div>
+        </div>
+
+        <span className="border-t border-custom-border-200" />
+
+        <div className="flex flex-col gap-5 py-5 w-full">
+          <div className="flex items-center gap-2 w-80">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Cycle</p>
+            </div>
+            <div>
+              <SidebarCycleSelect
+                issueDetail={issue}
+                handleCycleChange={addIssueToCycle}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 w-80">
+            <div className="flex items-center gap-2 w-40 text-sm">
+              <DiceIcon className="h-4 w-4 flex-shrink-0" />
+              <p>Module</p>
+            </div>
+            <div>
+              <SidebarModuleSelect
+                issueDetail={issue}
+                handleModuleChange={addIssueToModule}
+                disabled={disableUserActions}
+              />
+            </div>
+          </div>
+          <div className="flex items-start gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
+              <Tag className="h-4 w-4 flex-shrink-0" />
+              <p>Label</p>
+            </div>
+            <div className="flex flex-col gap-3 w-full">
+              <SidebarLabelSelect
+                issueDetails={issue}
+                labelList={issue.labels}
+                submitChanges={handleLabels}
+                isNotAllowed={disableUserActions}
+                uneditable={disableUserActions}
+              />
+            </div>
+          </div>
+        </div>
+
+        <span className="border-t border-custom-border-200" />
+
+        <div className="flex flex-col gap-5 pt-5 w-full">
+          <div className="flex flex-col gap-2 w-full">
+            <div className="flex items-center gap-2 w-80">
+              <div className="flex items-center gap-2 w-40 text-sm">
+                <Link2 className="h-4 w-4 flex-shrink-0" />
+                <p>Links</p>
+              </div>
+              <div>
+                {!disableUserActions && (
+                  <button
+                    type="button"
+                    className={`flex ${
+                      disableUserActions ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
+                    } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
+                    onClick={() => setLinkModal(true)}
+                    disabled={false}
+                  >
+                    <Plus className="h-3 w-3" /> New
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              {issue?.issue_link && issue.issue_link.length > 0 ? (
+                <LinksList
+                  links={issue.issue_link}
+                  handleDeleteLink={handleDeleteLink}
+                  handleEditLink={handleEditLink}
+                  userAuth={{
+                    isGuest: userRole === 5,
+                    isViewer: userRole === 10,
+                    isMember: userRole === 15,
+                    isOwner: userRole === 20,
+                  }}
+                />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/reactions/index.ts b/web/components/issues/issue-peek-overview/reactions/index.ts
new file mode 100644
index 00000000000..a65262eb7be
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/index.ts
@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./selector";
+export * from "./preview";
diff --git a/web/components/issues/issue-peek-overview/reactions/preview.tsx b/web/components/issues/issue-peek-overview/reactions/preview.tsx
new file mode 100644
index 00000000000..46c1cc2ce05
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/preview.tsx
@@ -0,0 +1,48 @@
+import { FC } from "react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+
+interface IIssueReactionPreview {
+  issueReactions: any;
+  user: any;
+  handleReaction: (reaction: string) => void;
+}
+
+export const IssueReactionPreview: FC<IIssueReactionPreview> = (props) => {
+  const { issueReactions, user, handleReaction } = props;
+
+  const isUserReacted = (reactions: any) => {
+    const userReaction = reactions?.find((reaction: any) => reaction.actor === user?.id);
+    if (userReaction) return true;
+    return false;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      {Object.keys(issueReactions || {}).map(
+        (reaction) =>
+          issueReactions[reaction]?.length > 0 && (
+            <button
+              type="button"
+              onClick={() => handleReaction(reaction)}
+              key={reaction}
+              className={`flex items-center gap-1.5 text-custom-text-100 text-sm h-full px-2 py-1 rounded ${
+                isUserReacted(issueReactions[reaction])
+                  ? `bg-custom-primary-100/10 hover:bg-custom-primary-100/30`
+                  : `bg-custom-background-90 hover:bg-custom-background-100/30`
+              }`}
+            >
+              <span className="text-sm">{renderEmoji(reaction)}</span>
+              <span
+                className={`${
+                  isUserReacted(issueReactions[reaction]) ? `text-custom-primary-100 hover:text-custom-primary-200` : ``
+                }`}
+              >
+                {issueReactions[reaction].length}
+              </span>
+            </button>
+          )
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/reactions/root.tsx b/web/components/issues/issue-peek-overview/reactions/root.tsx
new file mode 100644
index 00000000000..efa2e488c13
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/root.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+// components
+import { IssueReactionPreview, IssueReactionSelector } from "./";
+
+interface IIssueReaction {
+  issueReactions: any;
+  user: any;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+  position?: "top" | "bottom";
+}
+
+export const IssueReaction: FC<IIssueReaction> = (props) => {
+  const { issueReactions, user, issueReactionCreate, issueReactionRemove, position = "bottom" } = props;
+
+  const handleReaction = (reaction: string) => {
+    const isReactionAvailable =
+      issueReactions?.[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
+
+    if (isReactionAvailable) issueReactionRemove(reaction);
+    else issueReactionCreate(reaction);
+  };
+
+  return (
+    <div className="relative flex items-center flex-wrap gap-2">
+      <IssueReactionSelector onSelect={handleReaction} position={position} />
+      <IssueReactionPreview issueReactions={issueReactions} user={user} handleReaction={handleReaction} />
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/reactions/selector.tsx b/web/components/issues/issue-peek-overview/reactions/selector.tsx
new file mode 100644
index 00000000000..b34f14871f6
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/reactions/selector.tsx
@@ -0,0 +1,69 @@
+import { FC, Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+// icons
+import { SmilePlus } from "lucide-react";
+// constants
+import { issueReactionEmojis } from "constants/issue";
+
+interface IIssueReactionSelector {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  onSelect: (reaction: any) => void;
+}
+
+export const IssueReactionSelector: FC<IIssueReactionSelector> = (props) => {
+  const { size = "md", position = "top", onSelect } = props;
+
+  return (
+    <>
+      <Popover className="relative">
+        {({ open, close: closePopover }) => (
+          <>
+            <Popover.Button
+              className={`${
+                open ? "" : "bg-custom-background-80"
+              } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none transition-all hover:bg-custom-background-90`}
+            >
+              <span className={`flex justify-center items-center rounded px-2 py-1.5`}>
+                <SmilePlus className={`${size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : "w-4 h-4"}`} />
+              </span>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel
+                className={`bg-custom-sidebar-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded p-1 overflow-hidden absolute -left-2 z-10 ${
+                  position === "top" ? "-top-10" : "-bottom-10"
+                }`}
+              >
+                <div className="flex gap-x-1">
+                  {issueReactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        if (onSelect) onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="select-none rounded text-sm p-1 hover:bg-custom-sidebar-background-80 transition-all w-6 h-6 flex justify-center items-center"
+                    >
+                      <div className="w-4 h-4">{renderEmoji(emoji)}</div>
+                    </button>
+                  ))}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </>
+  );
+};
diff --git a/web/components/issues/issue-peek-overview/root.tsx b/web/components/issues/issue-peek-overview/root.tsx
new file mode 100644
index 00000000000..6c8631b5bd4
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/root.tsx
@@ -0,0 +1,155 @@
+import { FC, Fragment, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueView } from "./view";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IIssue } from "types";
+import { RootStore } from "store/root";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+
+interface IIssuePeekOverview {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  handleIssue: (issue: Partial<IIssue>) => void;
+  isArchived?: boolean;
+  children?: ReactNode;
+}
+
+export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
+  const { workspaceSlug, projectId, issueId, handleIssue, children, isArchived = false } = props;
+
+  const router = useRouter();
+  const { peekIssueId } = router.query as { peekIssueId: string };
+
+  const {
+    user: userStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    archivedIssueDetail: archivedIssueDetailStore,
+    archivedIssues: archivedIssuesStore,
+    project: projectStore,
+  }: RootStore = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  useSWR(
+    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
+      ? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
+        if (isArchived) await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+        else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
+      }
+    }
+  );
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(
+      `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${peekIssueId}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
+    });
+  };
+
+  const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
+  const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
+
+  const issueUpdate = (_data: Partial<IIssue>) => {
+    if (handleIssue) {
+      handleIssue(_data);
+      issueDetailStore.updateIssue(workspaceSlug, projectId, issueId, _data);
+    }
+  };
+
+  const issueReactionCreate = (reaction: string) =>
+    issueDetailStore.createIssueReaction(workspaceSlug, projectId, issueId, reaction);
+
+  const issueReactionRemove = (reaction: string) =>
+    issueDetailStore.removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
+
+  const issueCommentCreate = (comment: any) =>
+    issueDetailStore.createIssueComment(workspaceSlug, projectId, issueId, comment);
+
+  const issueCommentUpdate = (comment: any) =>
+    issueDetailStore.updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
+
+  const issueCommentRemove = (commentId: string) =>
+    issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
+
+  const issueCommentReactionCreate = (commentId: string, reaction: string) =>
+    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+
+  const issueCommentReactionRemove = (commentId: string, reaction: string) =>
+    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+
+  const issueSubscriptionCreate = () => issueDetailStore.createIssueSubscription(workspaceSlug, projectId, issueId);
+
+  const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
+
+  const handleDeleteIssue = async () => {
+    if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
+    else await issueStore.deleteIssue(workspaceSlug, projectId, issue!);
+    const { query } = router;
+    if (query.peekIssueId) {
+      issueDetailStore.setPeekId(null);
+      delete query.peekIssueId;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    }
+  };
+
+  const userRole = userStore.currentProjectRole ?? 5;
+
+  return (
+    <Fragment>
+      <IssueView
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        issue={issue}
+        isLoading={isLoading}
+        isArchived={isArchived}
+        handleCopyText={handleCopyText}
+        redirectToIssueDetail={redirectToIssueDetail}
+        issueUpdate={issueUpdate}
+        issueReactionCreate={issueReactionCreate}
+        issueReactionRemove={issueReactionRemove}
+        issueCommentCreate={issueCommentCreate}
+        issueCommentUpdate={issueCommentUpdate}
+        issueCommentRemove={issueCommentRemove}
+        issueCommentReactionCreate={issueCommentReactionCreate}
+        issueCommentReactionRemove={issueCommentReactionRemove}
+        issueSubscriptionCreate={issueSubscriptionCreate}
+        issueSubscriptionRemove={issueSubscriptionRemove}
+        handleDeleteIssue={handleDeleteIssue}
+        disableUserActions={[5, 10].includes(userRole)}
+        showCommentAccessSpecifier={projectStore.currentProjectDetails?.is_deployed}
+      >
+        {children}
+      </IssueView>
+    </Fragment>
+  );
+});
diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
new file mode 100644
index 00000000000..3342cbf4065
--- /dev/null
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -0,0 +1,329 @@
+import { FC, ReactNode, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+// components
+import { PeekOverviewIssueDetails } from "./issue-detail";
+import { PeekOverviewProperties } from "./properties";
+import { IssueComment } from "./activity";
+import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+import { DeleteIssueModal } from "../delete-issue-modal";
+import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
+// types
+import { IIssue } from "types";
+import { RootStore } from "store/root";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+interface IIssueView {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issue: IIssue | null;
+  isLoading?: boolean;
+  isArchived?: boolean;
+  handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  redirectToIssueDetail: () => void;
+  issueUpdate: (issue: Partial<IIssue>) => void;
+  issueReactionCreate: (reaction: string) => void;
+  issueReactionRemove: (reaction: string) => void;
+  issueCommentCreate: (comment: any) => void;
+  issueCommentUpdate: (comment: any) => void;
+  issueCommentRemove: (commentId: string) => void;
+  issueCommentReactionCreate: (commentId: string, reaction: string) => void;
+  issueCommentReactionRemove: (commentId: string, reaction: string) => void;
+  issueSubscriptionCreate: () => void;
+  issueSubscriptionRemove: () => void;
+  handleDeleteIssue: () => Promise<void>;
+  children: ReactNode;
+  disableUserActions?: boolean;
+  showCommentAccessSpecifier?: boolean;
+}
+
+type TPeekModes = "side-peek" | "modal" | "full-screen";
+
+const peekOptions: { key: TPeekModes; icon: any; title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePanelIcon,
+    title: "Side Peek",
+  },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    title: "Modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPanelIcon,
+    title: "Full Screen",
+  },
+];
+
+export const IssueView: FC<IIssueView> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    issue,
+    isLoading,
+    isArchived,
+    handleCopyText,
+    redirectToIssueDetail,
+    issueUpdate,
+    issueReactionCreate,
+    issueReactionRemove,
+    issueCommentCreate,
+    issueCommentUpdate,
+    issueCommentRemove,
+    issueCommentReactionCreate,
+    issueCommentReactionRemove,
+    issueSubscriptionCreate,
+    issueSubscriptionRemove,
+    handleDeleteIssue,
+    children,
+    disableUserActions = false,
+    showCommentAccessSpecifier = false,
+  } = props;
+
+  const router = useRouter();
+  const { peekIssueId } = router.query as { peekIssueId: string };
+
+  const { user: userStore, issueDetail: issueDetailStore }: RootStore = useMobxStore();
+
+  const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const updateRoutePeekId = () => {
+    if (issueId != peekIssueId) {
+      issueDetailStore.setPeekId(issueId);
+      const { query } = router;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekIssueId: issueId },
+      });
+    }
+  };
+  const removeRoutePeekId = () => {
+    const { query } = router;
+    if (query.peekIssueId) {
+      issueDetailStore.setPeekId(null);
+      delete query.peekIssueId;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    }
+  };
+
+  useSWR(
+    workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
+      ? `ISSUE_PEEK_OVERVIEW_SUBSCRIPTION_${workspaceSlug}_${projectId}_${peekIssueId}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
+        await issueDetailStore.fetchIssueSubscription(workspaceSlug, projectId, issueId);
+      }
+    }
+  );
+
+  const issueReactions = issueDetailStore.getIssueReactions || [];
+  const issueComments = issueDetailStore.getIssueComments || [];
+  const issueSubscription = issueDetailStore.getIssueSubscription || [];
+
+  const user = userStore?.currentUser;
+
+  const currentMode = peekOptions.find((m) => m.key === peekMode);
+
+  return (
+    <>
+      {issue && !isArchived && (
+        <DeleteIssueModal
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          data={issue}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
+      {issue && isArchived && (
+        <DeleteArchivedIssueModal
+          data={issue}
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
+      <div className="w-full !text-base">
+        {children && (
+          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
+            {children}
+          </div>
+        )}
+
+        {issueId === peekIssueId && (
+          <div
+            className={`fixed z-20 overflow-hidden bg-custom-background-100 flex flex-col transition-all duration-300 border border-custom-border-200 rounded 
+          ${peekMode === "side-peek" ? `w-full md:w-[50%] top-0 right-0 bottom-0` : ``}
+          ${peekMode === "modal" ? `top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-5/6 h-5/6` : ``}
+          ${peekMode === "full-screen" ? `top-0 right-0 bottom-0 left-0 m-4` : ``}
+          `}
+            style={{
+              boxShadow:
+                "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)",
+            }}
+          >
+            {/* header */}
+            <div className="relative flex items-center justify-between p-5 border-b border-custom-border-200">
+              <div className="flex items-center gap-4">
+                <button onClick={removeRoutePeekId}>
+                  <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                </button>
+
+                <button onClick={redirectToIssueDetail}>
+                  <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                </button>
+                {currentMode && (
+                  <div className="flex-shrink-0 flex items-center gap-2">
+                    <CustomSelect
+                      value={currentMode}
+                      onChange={(val: any) => setPeekMode(val)}
+                      customButton={
+                        <button type="button" className="">
+                          <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                        </button>
+                      }
+                    >
+                      {peekOptions.map((mode) => (
+                        <CustomSelect.Option key={mode.key} value={mode.key}>
+                          <div
+                            className={`flex items-center gap-1.5 ${
+                              currentMode.key === mode.key
+                                ? "text-custom-text-200"
+                                : "text-custom-text-400 hover:text-custom-text-200"
+                            }`}
+                          >
+                            <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 `} />
+                            {mode.title}
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4">
+                {!isArchived && (
+                  <Button
+                    size="sm"
+                    prependIcon={<Bell className="h-3 w-3" />}
+                    variant="outline-primary"
+                    onClick={() =>
+                      issueSubscription && issueSubscription.subscribed
+                        ? issueSubscriptionRemove
+                        : issueSubscriptionCreate
+                    }
+                  >
+                    {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
+                  </Button>
+                )}
+                <button onClick={handleCopyText}>
+                  <Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
+                </button>
+                {!disableUserActions && (
+                  <button onClick={() => setDeleteIssueModal(true)}>
+                    <Trash2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* content */}
+            <div className="relative w-full h-full overflow-hidden overflow-y-auto">
+              {isArchived && (
+                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
+              )}
+              {isLoading && !issue ? (
+                <div className="text-center py-10">Loading...</div>
+              ) : (
+                issue && (
+                  <>
+                    {["side-peek", "modal"].includes(peekMode) ? (
+                      <div className="flex flex-col gap-3 py-6 px-8">
+                        <PeekOverviewIssueDetails
+                          workspaceSlug={workspaceSlug}
+                          issue={issue}
+                          issueUpdate={issueUpdate}
+                          issueReactions={issueReactions}
+                          user={user}
+                          issueReactionCreate={issueReactionCreate}
+                          issueReactionRemove={issueReactionRemove}
+                        />
+
+                        <PeekOverviewProperties
+                          issue={issue}
+                          issueUpdate={issueUpdate}
+                          disableUserActions={disableUserActions}
+                        />
+
+                        <IssueComment
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                          user={user}
+                          issueComments={issueComments}
+                          issueCommentCreate={issueCommentCreate}
+                          issueCommentUpdate={issueCommentUpdate}
+                          issueCommentRemove={issueCommentRemove}
+                          issueCommentReactionCreate={issueCommentReactionCreate}
+                          issueCommentReactionRemove={issueCommentReactionRemove}
+                          showCommentAccessSpecifier={showCommentAccessSpecifier}
+                        />
+                      </div>
+                    ) : (
+                      <div className="w-full h-full flex">
+                        <div className="w-full h-full space-y-6 p-4 py-5">
+                          <PeekOverviewIssueDetails
+                            workspaceSlug={workspaceSlug}
+                            issue={issue}
+                            issueReactions={issueReactions}
+                            issueUpdate={issueUpdate}
+                            user={user}
+                            issueReactionCreate={issueReactionCreate}
+                            issueReactionRemove={issueReactionRemove}
+                          />
+
+                          <IssueComment
+                            workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            issueId={issueId}
+                            user={user}
+                            issueComments={issueComments}
+                            issueCommentCreate={issueCommentCreate}
+                            issueCommentUpdate={issueCommentUpdate}
+                            issueCommentRemove={issueCommentRemove}
+                            issueCommentReactionCreate={issueCommentReactionCreate}
+                            issueCommentReactionRemove={issueCommentReactionRemove}
+                            showCommentAccessSpecifier={showCommentAccessSpecifier}
+                          />
+                        </div>
+                        <div className="flex-shrink-0 !w-[400px] h-full border-l border-custom-border-200 p-4 py-5">
+                          <PeekOverviewProperties
+                            issue={issue}
+                            issueUpdate={issueUpdate}
+                            disableUserActions={disableUserActions}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/app/components/issues/issue-reaction.tsx b/web/components/issues/issue-reaction.tsx
similarity index 100%
rename from apps/app/components/issues/issue-reaction.tsx
rename to web/components/issues/issue-reaction.tsx
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
new file mode 100644
index 00000000000..776011d5730
--- /dev/null
+++ b/web/components/issues/label.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+// components
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  labelDetails: any[];
+  maxRender?: number;
+};
+
+export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => (
+  <>
+    {labelDetails.length > 0 ? (
+      labelDetails.length <= maxRender ? (
+        <>
+          {labelDetails.map((label) => (
+            <div
+              key={label.id}
+              className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+            >
+              <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name}>
+                <div className="flex items-center gap-1.5 text-custom-text-200">
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color ?? "#000000",
+                    }}
+                  />
+                  {label.name}
+                </div>
+              </Tooltip>
+            </div>
+          ))}
+        </>
+      ) : (
+        <div className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
+          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelDetails.map((l) => l.name).join(", ")}>
+            <div className="flex items-center gap-1.5 text-custom-text-200">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              {`${labelDetails.length} Labels`}
+            </div>
+          </Tooltip>
+        </div>
+      )
+    ) : (
+      ""
+    )}
+  </>
+);
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
new file mode 100644
index 00000000000..f9ad6e09aec
--- /dev/null
+++ b/web/components/issues/main-content.tsx
@@ -0,0 +1,201 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR, { mutate } from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueService, IssueCommentService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  AddComment,
+  IssueActivitySection,
+  IssueAttachmentUpload,
+  IssueAttachments,
+  IssueDescriptionForm,
+  IssueReaction,
+} from "components/issues";
+import { SubIssuesRoot } from "./sub-issues";
+// ui
+import { CustomMenu, LayersIcon } from "@plane/ui";
+// icons
+import { MinusCircle } from "lucide-react";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
+
+type Props = {
+  issueDetails: IIssue;
+  submitChanges: (formData: Partial<IIssue>) => Promise<void>;
+  uneditable?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
+export const IssueMainContent: React.FC<Props> = observer((props) => {
+  const { issueDetails, submitChanges, uneditable = false } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const user = userStore.currentUser ?? undefined;
+  const userRole = userStore.currentProjectRole;
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
+
+  const { data: siblingIssues } = useSWR(
+    workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
+    workspaceSlug && projectId && issueDetails?.parent
+      ? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueDetails.parent ?? "")
+      : null
+  );
+  const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
+
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      : null
+  );
+
+  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, data, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !issueId || !user) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issueDetails || !user) return;
+
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <>
+      <div className="rounded-lg">
+        {issueDetails?.parent ? (
+          <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md bg-custom-background-80 border border-custom-border-300 py-1 px-2.5 text-xs">
+            <Link
+              href={`/${workspaceSlug}/projects/${issueDetails.parent_detail?.project_detail.id}/issues/${issueDetails.parent}`}
+            >
+              <a className="flex items-center gap-3">
+                <div className="flex items-center gap-2.5">
+                  <span
+                    className="block h-2 w-2 rounded-full"
+                    style={{
+                      backgroundColor: issueDetails.parent_detail?.state_detail.color,
+                    }}
+                  />
+                  <span className="flex-shrink-0 text-custom-text-200">
+                    {issueDetails.parent_detail?.project_detail.identifier}-{issueDetails.parent_detail?.sequence_id}
+                  </span>
+                </div>
+                <span className="truncate text-custom-text-100">
+                  {issueDetails.parent_detail?.name.substring(0, 50)}
+                </span>
+              </a>
+            </Link>
+
+            <CustomMenu ellipsis optionsClassName="px-1.5">
+              {siblingIssuesList ? (
+                siblingIssuesList.length > 0 ? (
+                  <>
+                    <h2 className="mb-1 text-custom-text-200 text-xs font-medium px-2 pb-1 border-b border-custom-border-300">
+                      Sibling issues
+                    </h2>
+                    {siblingIssuesList.map((issue) => (
+                      <CustomMenu.MenuItem
+                        key={issue.id}
+                        onClick={() =>
+                          router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
+                        }
+                        className="flex items-center gap-2 py-2"
+                      >
+                        <LayersIcon className="h-4 w-4" />
+                        {issueDetails.project_detail.identifier}-{issue.sequence_id}
+                      </CustomMenu.MenuItem>
+                    ))}
+                  </>
+                ) : (
+                  <p className="flex items-center gap-2 whitespace-nowrap px-1 text-left text-xs text-custom-text-200 py-1">
+                    No sibling issues
+                  </p>
+                )
+              ) : null}
+              <CustomMenu.MenuItem
+                onClick={() => submitChanges({ parent: null })}
+                className="flex items-center gap-2 text-red-500 py-2"
+              >
+                <MinusCircle className="h-4 w-4" />
+                <span> Remove Parent Issue</span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        ) : null}
+        <IssueDescriptionForm
+          workspaceSlug={workspaceSlug as string}
+          issue={issueDetails}
+          handleFormSubmit={submitChanges}
+          isAllowed={userRole === 20 || userRole === 15 || !uneditable}
+        />
+
+        <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
+
+        <div className="mt-2 space-y-2">
+          <SubIssuesRoot parentIssue={issueDetails} user={user} />
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 py-3">
+        <h3 className="text-lg">附件</h3>
+        <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <IssueAttachmentUpload disabled={uneditable} />
+          <IssueAttachments />
+        </div>
+      </div>
+      <div className="space-y-5 pt-3">
+        <h3 className="text-lg text-custom-text-100">评论/活动</h3>
+        <IssueActivitySection
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+        />
+        <AddComment
+          onSubmit={handleAddComment}
+          disabled={uneditable}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
new file mode 100644
index 00000000000..12f9074540d
--- /dev/null
+++ b/web/components/issues/modal.tsx
@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueDraftService } from "services/issue";
+// hooks
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { IssueForm, ConfirmIssueDiscard } from "components/issues";
+// types
+import type { IIssue } from "types";
+// fetch-keys
+import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
+
+export interface IssuesModalProps {
+  data?: IIssue | null;
+  handleClose: () => void;
+  isOpen: boolean;
+  prePopulateData?: Partial<IIssue>;
+  fieldsToShow?: (
+    | "project"
+    | "name"
+    | "description"
+    | "state"
+    | "priority"
+    | "assignee"
+    | "label"
+    | "startDate"
+    | "dueDate"
+    | "estimate"
+    | "parent"
+    | "all"
+    | "module"
+    | "cycle"
+  )[];
+  onSubmit?: (data: Partial<IIssue>) => Promise<void>;
+}
+
+const issueDraftService = new IssueDraftService();
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+  const { data, handleClose, isOpen, prePopulateData: prePopulateDataProps, fieldsToShow = ["all"], onSubmit } = props;
+
+  // states
+  const [createMore, setCreateMore] = useState(false);
+  const [formDirtyState, setFormDirtyState] = useState<any>(null);
+  const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+  const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueDetail: issueDetailStore,
+    cycleIssue: cycleIssueStore,
+    moduleIssue: moduleIssueStore,
+    user: userStore,
+  } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
+    "draftedIssue",
+    {}
+  );
+
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
+  /**
+   *
+   * @description This function is used to close the modals. This function will show a confirm discard modal if the form is dirty.
+   * @returns void
+   */
+
+  const onClose = () => {
+    if (!showConfirmDiscard) handleClose();
+    if (formDirtyState === null) return setActiveProject(null);
+    const data = JSON.stringify(formDirtyState);
+    setValueInLocalStorage(data);
+  };
+
+  /**
+   * @description This function is used to close the modals. This function is to be used when the form is submitted,
+   * meaning we don't need to show the confirm discard modal or store the form data in local storage.
+   */
+
+  const onFormSubmitClose = () => {
+    setFormDirtyState(null);
+    handleClose();
+  };
+
+  /**
+   * @description This function is used to close the modals. This function is to be used when we click outside the modal,
+   * meaning we don't need to show the confirm discard modal but will store the form data in local storage.
+   * Use this function when you want to store the form data in local storage.
+   */
+
+  const onDiscardClose = () => {
+    if (formDirtyState !== null) {
+      setShowConfirmDiscard(true);
+    } else {
+      handleClose();
+      setActiveProject(null);
+    }
+  };
+
+  const handleFormDirty = (data: any) => {
+    setFormDirtyState(data);
+  };
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
+  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
+  };
+
+  const addIssueToModule = async (issueId: string, moduleId: string) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
+  };
+
+  const createIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    await issueDetailStore
+      .createIssue(workspaceSlug.toString(), activeProject, payload)
+      .then(async (res) => {
+        issueStore.fetchIssues(workspaceSlug.toString(), activeProject);
+
+        if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+
+    if (!createMore) onFormSubmitClose();
+  };
+
+  const createDraftIssue = async () => {
+    if (!workspaceSlug || !activeProject || !user) return;
+
+    const payload: Partial<IIssue> = {
+      ...formDirtyState,
+    };
+
+    await issueDraftService
+      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Draft Issue created successfully.",
+        });
+
+        handleClose();
+        setActiveProject(null);
+        setFormDirtyState(null);
+        setShowConfirmDiscard(false);
+
+        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject || !data) return;
+
+    await issueDetailStore
+      .updateIssue(workspaceSlug.toString(), activeProject, data.id, payload)
+      .then(() => {
+        if (!createMore) onFormSubmitClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    const payload: Partial<IIssue> = {
+      ...formData,
+      description: formData.description ?? "",
+      description_html: formData.description_html ?? "<p></p>",
+    };
+
+    if (!data) await createIssue(payload);
+    else await updateIssue(payload);
+
+    if (onSubmit) await onSubmit(payload);
+  };
+
+  if (!projects || projects.length === 0) return null;
+
+  return (
+    <>
+      <ConfirmIssueDiscard
+        isOpen={showConfirmDiscard}
+        handleClose={() => setShowConfirmDiscard(false)}
+        onConfirm={createDraftIssue}
+        onDiscard={() => {
+          handleClose();
+          setActiveProject(null);
+          setFormDirtyState(null);
+          setShowConfirmDiscard(false);
+          clearLocalStorageValue();
+        }}
+      />
+
+      <Transition.Root show={isOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={onClose}>
+          <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 bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto">
+            <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+              <Transition.Child
+                as={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 rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full mx-4 sm:max-w-4xl">
+                  <IssueForm
+                    handleFormSubmit={handleFormSubmit}
+                    initialData={data ?? prePopulateData}
+                    createMore={createMore}
+                    setCreateMore={setCreateMore}
+                    handleDiscardClose={onDiscardClose}
+                    projectId={activeProject ?? ""}
+                    setActiveProject={setActiveProject}
+                    status={data ? true : false}
+                    fieldsToShow={fieldsToShow}
+                    handleFormDirty={handleFormDirty}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
similarity index 80%
rename from apps/app/components/issues/parent-issues-list-modal.tsx
rename to web/components/issues/parent-issues-list-modal.tsx
index f939ea7693d..792ce0031af 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -5,16 +5,13 @@ import { useRouter } from "next/router";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useDebounce from "hooks/use-debounce";
-// components
-import { LayerDiagonalIcon } from "components/icons";
 // ui
-import { Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Rocket, Search } from "lucide-react";
 // types
 import { ISearchIssueResponse } from "types";
 
@@ -27,6 +24,9 @@ type Props = {
   issueId?: string;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -69,12 +69,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -107,20 +102,20 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm placeholder:text-custom-text-400"
-                      placeholder="输入关键字搜索..."
+                      placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                       displayValue={() => ""}
                     />
                   </div>
                   <div className="flex sm:justify-end p-2">
-                    <Tooltip tooltipContent="切换工作区级搜索">
+                    <Tooltip tooltipContent="Toggle workspace level search">
                       <div
                         className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
                           isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
@@ -129,14 +124,14 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                         <ToggleSwitch
                           value={isWorkspaceLevel}
                           onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          label="工作区级"
+                          label="Workspace level"
                         />
                         <button
                           type="button"
                           onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
                           className="flex-shrink-0"
                         >
-                          工作区级
+                          Workspace Level
                         </button>
                       </div>
                     </Tooltip>
@@ -144,30 +139,25 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                     {searchTerm !== "" && (
                       <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
-                         项目中{" "}
+                        Search results for{" "}
                         <span className="text-custom-text-100">
                           {'"'}
                           {searchTerm}
                           {'"'}
-                        </span>{" "}的搜索结果:
+                        </span>{" "}
+                        in project:
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            未找到任务。用 {" "}创建新任务
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayersIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
@@ -207,11 +197,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                               rel="noopener noreferrer"
                               onClick={(e) => e.stopPropagation()}
                             >
-                              <LaunchOutlined
-                                sx={{
-                                  fontSize: 16,
-                                }}
-                              />
+                              <Rocket className="h-4 w-4" />
                             </a>
                           </Combobox.Option>
                         ))}
diff --git a/web/components/issues/peek-overview/full-screen-peek-view.tsx b/web/components/issues/peek-overview/full-screen-peek-view.tsx
new file mode 100644
index 00000000000..47d0d1e7d53
--- /dev/null
+++ b/web/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -0,0 +1,99 @@
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | undefined;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const FullScreenPeekView: React.FC<Props> = ({
+  handleClose,
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  mode,
+  readOnly,
+  setMode,
+  workspaceSlug,
+}) => (
+  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+      <div className="w-full p-5">
+        <PeekOverviewHeader
+          handleClose={handleClose}
+          handleDeleteIssue={handleDeleteIssue}
+          issue={issue}
+          mode={mode}
+          setMode={setMode}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+      {issue ? (
+        <div className="h-full w-full px-6 overflow-y-auto">
+          {/* issue title and description */}
+          <div className="w-full">
+            <PeekOverviewIssueDetails
+              handleUpdateIssue={handleUpdateIssue}
+              issue={issue}
+              readOnly={readOnly}
+              workspaceSlug={workspaceSlug}
+            />
+          </div>
+          {/* divider */}
+          <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+          {/* issue activity/comments */}
+          <div className="w-full pb-5">
+            <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />
+          </div>
+        </div>
+      ) : (
+        <Loader className="px-6">
+          <Loader.Item height="30px" />
+          <div className="space-y-2 mt-3">
+            <Loader.Item height="20px" width="70%" />
+            <Loader.Item height="20px" width="60%" />
+            <Loader.Item height="20px" width="60%" />
+          </div>
+        </Loader>
+      )}
+    </div>
+    <div className="col-span-3 h-full w-full overflow-y-auto">
+      {/* issue properties */}
+      <div className="w-full px-6 py-5">
+        {issue ? (
+          <PeekOverviewIssueProperties
+            handleDeleteIssue={handleDeleteIssue}
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            mode="full"
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        ) : (
+          <Loader className="mt-11 space-y-4">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </Loader>
+        )}
+      </div>
+    </div>
+  </div>
+);
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
new file mode 100644
index 00000000000..55586ddf8ef
--- /dev/null
+++ b/web/components/issues/peek-overview/header.tsx
@@ -0,0 +1,110 @@
+import Link from "next/link";
+
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+// icons
+import { LinkIcon, MoveDiagonal, MoveRight, Trash2 } from "lucide-react";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+import { TPeekOverviewModes } from "./layout";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  issue: IIssue | undefined;
+  mode: TPeekOverviewModes;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+const peekModes: {
+  key: TPeekOverviewModes;
+  icon: any;
+  label: string;
+}[] = [
+  { key: "side", icon: SidePanelIcon, label: "Side Peek" },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: FullScreenPanelIcon,
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = ({
+  issue,
+  handleClose,
+  handleDeleteIssue,
+  mode,
+  setMode,
+  workspaceSlug,
+}) => {
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  const currentMode = peekModes.find((m) => m.key === mode);
+
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-4">
+        {mode === "side" && (
+          <button type="button" onClick={handleClose}>
+            <MoveRight className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
+          <a>
+            <MoveDiagonal className="h-3.5 w-3.5" />
+          </a>
+        </Link>
+        <CustomSelect
+          value={mode}
+          onChange={(val: TPeekOverviewModes) => setMode(val)}
+          customButton={
+            <button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
+              {currentMode && <currentMode.icon className="h-3.5 w-3.5" />}
+            </button>
+          }
+        >
+          {peekModes.map((mode) => (
+            <CustomSelect.Option key={mode.key} value={mode.key}>
+              <div className="flex items-center gap-1.5">
+                <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`} />
+                {mode.label}
+              </div>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      </div>
+      {(mode === "side" || mode === "modal") && (
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <button type="button" onClick={handleCopyLink} className="-rotate-45">
+            <LinkIcon className="h-3.5 w-3.5" />
+          </button>
+          <button type="button" onClick={handleDeleteIssue}>
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/peek-overview/index.ts b/web/components/issues/peek-overview/index.ts
similarity index 100%
rename from apps/app/components/issues/peek-overview/index.ts
rename to web/components/issues/peek-overview/index.ts
diff --git a/web/components/issues/peek-overview/issue-activity.tsx b/web/components/issues/peek-overview/issue-activity.tsx
new file mode 100644
index 00000000000..dc1d044af09
--- /dev/null
+++ b/web/components/issues/peek-overview/issue-activity.tsx
@@ -0,0 +1,90 @@
+import useSWR, { mutate } from "swr";
+// services
+import { IssueCommentService, IssueService } from "services/issue";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { AddComment, IssueActivitySection } from "components/issues";
+// types
+import { IIssue, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  workspaceSlug: string;
+  issue: IIssue;
+  readOnly: boolean;
+};
+
+const issueCommentService = new IssueCommentService();
+const issueService = new IssueService();
+
+export const PeekOverviewIssueActivity: React.FC<Props> = (props) => {
+  const { workspaceSlug, issue } = props;
+  // toast
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
+    workspaceSlug && issue
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
+      : null
+  );
+
+  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+    if (!workspaceSlug || !issue) return;
+
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, data, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !issue) return;
+
+    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
+      .then(() => mutateIssueActivity());
+  };
+
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!workspaceSlug || !issue) return;
+
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div>
+      <h4 className="font-medium">Activity</h4>
+      <div className="mt-4">
+        <IssueActivitySection
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+        />
+        <div className="mt-4">
+          <AddComment onSubmit={handleAddComment} showAccessSpecifier={projectDetails && projectDetails.is_deployed} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/peek-overview/issue-details.tsx b/web/components/issues/peek-overview/issue-details.tsx
new file mode 100644
index 00000000000..317234fb01a
--- /dev/null
+++ b/web/components/issues/peek-overview/issue-details.tsx
@@ -0,0 +1,35 @@
+// components
+import { IssueDescriptionForm, IssueReaction } from "components/issues";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue;
+  readOnly: boolean;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({
+  handleUpdateIssue,
+  issue,
+  readOnly,
+  workspaceSlug,
+}) => (
+  <div className="space-y-2">
+    <h6 className="font-medium text-custom-text-200">
+      {issue.project_detail.identifier}-{issue.sequence_id}
+    </h6>
+    <IssueDescriptionForm
+      handleFormSubmit={handleUpdateIssue}
+      isAllowed={!readOnly}
+      issue={{
+        name: issue.name,
+        description_html: issue.description_html,
+        project_id: issue.project_detail.id,
+      }}
+      workspaceSlug={workspaceSlug}
+    />
+    <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} />
+  </div>
+);
diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
new file mode 100644
index 00000000000..6bb267a6c9b
--- /dev/null
+++ b/web/components/issues/peek-overview/issue-properties.tsx
@@ -0,0 +1,187 @@
+import { FC } from "react";
+// components
+import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  SidebarAssigneeSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+  TPeekOverviewModes,
+} from "components/issues";
+// ui
+import { CustomDatePicker } from "components/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue } from "types";
+import { CalendarDays, LinkIcon, Signal, Trash2 } from "lucide-react";
+
+type Props = {
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueProperties: FC<Props> = (props) => {
+  const { handleDeleteIssue, handleUpdateIssue, issue, mode, readOnly } = props;
+  // toast
+  const { setToastAlert } = useToast();
+
+  const startDate = issue.start_date;
+  const targetDate = issue.target_date;
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            <StateGroupIcon stateGroup={issue.state_detail.group} color={issue.state_detail.color} />
+            {issue.project_detail.identifier}-{issue.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <LinkIcon className="h-3.5 w-3.5" />
+            </button>
+            <button type="button" onClick={handleDeleteIssue}>
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <DoubleCircleIcon className="h-3.5 w-3.5 flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarStateSelect
+              value={issue.state}
+              onChange={(val: string) => handleUpdateIssue({ state: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <UserGroupIcon className="h-3.5 w-3.5" />
+            <span className="flex-grow truncate">Assignees</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarAssigneeSelect
+              value={issue.assignees}
+              onChange={(val: string[]) => handleUpdateIssue({ assignees: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Signal className="h-3.5 w-3.5" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarPrioritySelect
+              value={issue.priority}
+              onChange={(val) => handleUpdateIssue({ priority: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <CalendarDays className="h-3.5 w-3.5" />
+            <span className="flex-grow truncate">Start date</span>
+          </div>
+          <div>
+            <CustomDatePicker
+              placeholder="Select start date"
+              value={issue.start_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  start_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              maxDate={maxDate ?? undefined}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <CalendarDays className="h-3.5 w-3.5" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          <div>
+            <CustomDatePicker
+              placeholder="Select due date"
+              value={issue.target_date}
+              onChange={(val) =>
+                handleUpdateIssue({
+                  target_date: val,
+                })
+              }
+              className="bg-custom-background-80 border-none"
+              minDate={minDate ?? undefined}
+              disabled={readOnly}
+            />
+          </div>
+        </div>
+        {/* <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Estimate</span>
+          </div>
+          <div className="w-3/4">
+            <SidebarEstimateSelect
+              value={issue.estimate_point}
+              onChange={(val: number | null) =>handleUpdateIssue({ estimate_point: val })}
+              disabled={readOnly}
+            />
+          </div>
+        </div> */}
+        {/* <Disclosure as="div">
+          {({ open }) => (
+            <>
+              <Disclosure.Button
+                as="button"
+                type="button"
+                className="flex items-center gap-1 text-sm text-custom-text-200"
+              >
+                Show {open ? "Less" : "More"}
+                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
+              </Disclosure.Button>
+              <Disclosure.Panel as="div" className="mt-4 space-y-4">
+                Disclosure Panel
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure> */}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
new file mode 100644
index 00000000000..1ad0104e248
--- /dev/null
+++ b/web/components/issues/peek-overview/layout.tsx
@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { DeleteIssueModal, FullScreenPeekView, SidePeekView } from "components/issues";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  handleMutation?: () => void;
+  projectId: string;
+  readOnly: boolean;
+  workspaceSlug: string;
+};
+
+export type TPeekOverviewModes = "side" | "modal" | "full";
+
+export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, projectId, readOnly, workspaceSlug }) => {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const router = useRouter();
+  const { peekIssue } = router.query;
+
+  const { issueDetail: issueDetailStore } = useMobxStore();
+  const { deleteIssue, fetchIssueDetails, issues, updateIssue } = issueDetailStore;
+
+  const issue = issues[peekIssue?.toString() ?? ""];
+
+  const handleClose = () => {
+    const { query } = router;
+    delete query.peekIssue;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query },
+    });
+  };
+
+  const handleUpdateIssue = async (formData: Partial<IIssue>) => {
+    if (!issue) return;
+
+    await updateIssue(workspaceSlug, projectId, issue.id, formData);
+    mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+    if (handleMutation) handleMutation();
+  };
+
+  const handleDeleteIssue = async () => {
+    if (!issue) return;
+
+    await deleteIssue(workspaceSlug, projectId, issue.id);
+    if (handleMutation) handleMutation();
+
+    handleClose();
+  };
+
+  useEffect(() => {
+    if (!peekIssue) return;
+
+    fetchIssueDetails(workspaceSlug, projectId, peekIssue.toString());
+  }, [fetchIssueDetails, peekIssue, projectId, workspaceSlug]);
+
+  useEffect(() => {
+    if (peekIssue) {
+      if (peekOverviewMode === "side") {
+        setIsSidePeekOpen(true);
+        setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
+      }
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekIssue, peekOverviewMode]);
+
+  return (
+    <>
+      {issue && (
+        <DeleteIssueModal
+          isOpen={deleteIssueModal}
+          handleClose={() => setDeleteIssueModal(false)}
+          data={issue}
+          onSubmit={handleDeleteIssue}
+        />
+      )}
+      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Transition.Child
+              as={React.Fragment}
+              enter="transition-transform duration-300"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition-transform duration-200"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                <SidePeekView
+                  handleClose={handleClose}
+                  handleDeleteIssue={() => setDeleteIssueModal(true)}
+                  handleUpdateIssue={handleUpdateIssue}
+                  issue={issue}
+                  mode={peekOverviewMode}
+                  readOnly={readOnly}
+                  setMode={(mode) => setPeekOverviewMode(mode)}
+                  workspaceSlug={workspaceSlug}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} 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 bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <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"
+            >
+              <Dialog.Panel>
+                <div
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
+                >
+                  {peekOverviewMode === "modal" && (
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                  {peekOverviewMode === "full" && (
+                    <FullScreenPeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/web/components/issues/peek-overview/side-peek-view.tsx b/web/components/issues/peek-overview/side-peek-view.tsx
new file mode 100644
index 00000000000..cb3e8316b4a
--- /dev/null
+++ b/web/components/issues/peek-overview/side-peek-view.tsx
@@ -0,0 +1,86 @@
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+  TPeekOverviewModes,
+} from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  handleClose: () => void;
+  handleDeleteIssue: () => void;
+  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
+  issue: IIssue | undefined;
+  mode: TPeekOverviewModes;
+  readOnly: boolean;
+  setMode: (mode: TPeekOverviewModes) => void;
+  workspaceSlug: string;
+};
+
+export const SidePeekView: React.FC<Props> = ({
+  handleClose,
+  handleDeleteIssue,
+  handleUpdateIssue,
+  issue,
+  mode,
+  readOnly,
+  setMode,
+  workspaceSlug,
+}) => (
+  <div className="h-full w-full flex flex-col overflow-hidden">
+    <div className="w-full p-5">
+      <PeekOverviewHeader
+        handleClose={handleClose}
+        handleDeleteIssue={handleDeleteIssue}
+        issue={issue}
+        mode={mode}
+        setMode={setMode}
+        workspaceSlug={workspaceSlug}
+      />
+    </div>
+    {issue ? (
+      <div className="h-full w-full px-6 overflow-y-auto">
+        {/* issue title and description */}
+        <div className="w-full">
+          <PeekOverviewIssueDetails
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+        {/* issue properties */}
+        <div className="w-full mt-10">
+          <PeekOverviewIssueProperties
+            handleDeleteIssue={handleDeleteIssue}
+            handleUpdateIssue={handleUpdateIssue}
+            issue={issue}
+            mode={mode}
+            readOnly={readOnly}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+        {/* divider */}
+        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+        {/* issue activity/comments */}
+        <div className="w-full pb-5">
+          {issue && <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />}
+        </div>
+      </div>
+    ) : (
+      <Loader className="px-6">
+        <Loader.Item height="30px" />
+        <div className="space-y-2 mt-3">
+          <Loader.Item height="20px" width="70%" />
+          <Loader.Item height="20px" width="60%" />
+          <Loader.Item height="20px" width="60%" />
+        </div>
+      </Loader>
+    )}
+  </div>
+);
diff --git a/web/components/issues/select/assignee.tsx b/web/components/issues/select/assignee.tsx
new file mode 100644
index 00000000000..4d7ec27dfb9
--- /dev/null
+++ b/web/components/issues/select/assignee.tsx
@@ -0,0 +1,72 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
+import { User2 } from "lucide-react";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+export type Props = {
+  projectId: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+const projectService = new ProjectService();
+
+export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name ?? "",
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
+        {member.member.is_bot ? member.member.first_name : member.member.display_name}
+      </div>
+    ),
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
+      customButton={
+        <div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="-my-0.5 flex items-center justify-center gap-2">
+              <AvatarGroup showTooltip={false}>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
+              <User2 className="h-4 w-4" />
+              <span className="text-custom-text-200">Assignee</span>
+            </div>
+          )}
+        </div>
+      }
+      multiple
+      noChevron
+    />
+  );
+};
diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx
new file mode 100644
index 00000000000..3df4948a7c4
--- /dev/null
+++ b/web/components/issues/select/cycle.tsx
@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { ContrastIcon } from "@plane/ui";
+// icons
+import { Check, Search } from "lucide-react";
+
+export interface IssueCycleSelectProps {
+  workspaceSlug: string;
+  projectId: string;
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props) => {
+  const { workspaceSlug, projectId, value, onChange } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const fetchCycles = () => {
+    if (workspaceSlug && projectId) cycleStore.fetchCycles(workspaceSlug, projectId, "all");
+  };
+
+  const cycles = projectId ? cycleStore.cycles[projectId] : undefined;
+
+  const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined;
+
+  const options = cycles?.map((cycle) => ({
+    value: cycle.id,
+    query: cycle.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <ContrastIcon />
+        </span>
+        <span className="truncate flex-grow">{cycle.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedCycle ? (
+    <div className="flex items-center gap-1.5">
+      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+        <ContrastIcon />
+      </span>
+      <div className="truncate">{selectedCycle.name}</div>
+    </div>
+  ) : (
+    <>
+      <ContrastIcon className="h-3 w-3" />
+      <span>Select Cycle</span>
+    </>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value}
+      onChange={(val: string) => onChange(val)}
+      disabled={false}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
+            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          }`}
+          onClick={fetchCycles}
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx
new file mode 100644
index 00000000000..e3c2b9614ae
--- /dev/null
+++ b/web/components/issues/select/date.tsx
@@ -0,0 +1,87 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDays, X } from "lucide-react";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+
+type Props = {
+  label: string;
+  maxDate?: Date;
+  minDate?: Date;
+  onChange: (val: string | null) => void;
+  value: string | null;
+};
+
+export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => {
+  const [referenceElement, setReferenceElement] = React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  return (
+    <Popover className="relative flex items-center justify-center  rounded-lg">
+      {({ close }) => (
+        <>
+          <Popover.Button>
+            <div
+              ref={setReferenceElement}
+              className="cursor-pointer rounded-md border border-custom-border-200 shadow-sm duration-200 flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
+            >
+              {value ? (
+                <>
+                  <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
+                  <button onClick={() => onChange(null)}>
+                    <X className="h-3 w-3" />
+                  </button>
+                </>
+              ) : (
+                <>
+                  <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span>{label}</span>
+                </>
+              )}
+            </div>
+          </Popover.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel>
+              <div
+                className="absolute top-10 -left-10 z-20 transform overflow-hidden"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <DatePicker
+                  selected={value ? new Date(value) : null}
+                  onChange={(val) => {
+                    if (!val) onChange("");
+                    else onChange(renderDateFormat(val));
+
+                    close();
+                  }}
+                  dateFormat="dd-MM-yyyy"
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  inline
+                />
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
new file mode 100644
index 00000000000..f2d8750728e
--- /dev/null
+++ b/web/components/issues/select/estimate.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+// ui
+import { CustomSelect } from "@plane/ui";
+// icons
+import { Triangle } from "lucide-react";
+// fetch-keys
+import useEstimateOption from "hooks/use-estimate-option";
+
+type Props = {
+  value: number | null;
+  onChange: (value: number | null) => void;
+};
+
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+  const { isEstimateActive, estimatePoints } = useEstimateOption();
+
+  if (!isEstimateActive) return null;
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-xs">
+          <Triangle className={`h-3.5 w-3.5 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
+          <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
+            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
+          </span>
+        </div>
+      }
+      onChange={onChange}
+      width="w-full min-w-[8rem]"
+      noChevron
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <Triangle className="h-4 w-4" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option key={point.key} value={point.key}>
+            <>
+              <span>
+                <Triangle className="h-4 w-4" />
+              </span>
+              {point.value}
+            </>
+          </CustomSelect.Option>
+        ))}
+    </CustomSelect>
+  );
+};
diff --git a/web/components/issues/select/index.ts b/web/components/issues/select/index.ts
new file mode 100644
index 00000000000..40c435bc07f
--- /dev/null
+++ b/web/components/issues/select/index.ts
@@ -0,0 +1,9 @@
+export * from "./assignee";
+export * from "./date";
+export * from "./estimate";
+export * from "./label";
+export * from "./priority";
+export * from "./project";
+export * from "./state";
+export * from "./module";
+export * from "./cycle";
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
new file mode 100644
index 00000000000..47b1d4e5b02
--- /dev/null
+++ b/web/components/issues/select/label.tsx
@@ -0,0 +1,205 @@
+import React, { Fragment, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { Combobox, Transition } from "@headlessui/react";
+import { usePopper } from "react-popper";
+// services
+import { IssueLabelService } from "services/issue";
+// ui
+import { IssueLabelsList } from "components/ui";
+// icons
+import { Check, Component, Plus, Search, Tag } from "lucide-react";
+// types
+import type { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string[];
+  onChange: (value: string[]) => void;
+  projectId: string;
+  label?: JSX.Element;
+};
+
+const issueLabelService = new IssueLabelService();
+
+export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId, label }) => {
+  // states
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
+    workspaceSlug && projectId
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const filteredOptions =
+    query === "" ? issueLabels : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox as="div" value={value} onChange={(val) => onChange(val)} className="relative flex-shrink-0" multiple>
+      {({ open }: any) => (
+        <>
+          <Combobox.Button as={Fragment}>
+            <div
+              ref={setReferenceElement}
+              className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200"
+            >
+              {label ? (
+                label
+              ) : value && value.length > 0 ? (
+                <span className="flex items-center justify-center gap-2 text-xs">
+                  <IssueLabelsList
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
+                    length={3}
+                    showLength
+                  />
+                </span>
+              ) : (
+                <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
+                  <Tag className="h-3.5 w-3.5 text-custom-text-200" />
+                  <span className=" text-custom-text-200">Label</span>
+                </span>
+              )}
+            </div>
+          </Combobox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Combobox.Options as={Fragment}>
+              <div
+                className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
+                bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="Search for label..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div className="py-1.5">
+                  {issueLabels && filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((label) => {
+                        const children = issueLabels?.filter((l) => l.parent === label.id);
+
+                        if (children.length === 0) {
+                          if (!label.parent)
+                            return (
+                              <Combobox.Option
+                                key={label.id}
+                                className={({ active }) =>
+                                  `${
+                                    active ? "bg-custom-background-80" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                }
+                                value={label.id}
+                              >
+                                {({ selected }) => (
+                                  <div className="flex w-full justify-between gap-2 rounded">
+                                    <div className="flex items-center justify-start gap-2">
+                                      <span
+                                        className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor: label.color,
+                                        }}
+                                      />
+                                      <span>{label.name}</span>
+                                    </div>
+                                    <div className="flex items-center justify-center rounded p-1">
+                                      <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                    </div>
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            );
+                        } else
+                          return (
+                            <div className="border-y border-custom-border-200">
+                              <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
+                                <Component className="h-3 w-3" /> {label.name}
+                              </div>
+                              <div>
+                                {children.map((child) => (
+                                  <Combobox.Option
+                                    key={child.id}
+                                    className={({ active }) =>
+                                      `${
+                                        active ? "bg-custom-background-80" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                                    }
+                                    value={child.id}
+                                  >
+                                    {({ selected }) => (
+                                      <div className="flex w-full justify-between gap-2 rounded">
+                                        <div className="flex items-center justify-start gap-2">
+                                          <span
+                                            className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor: child?.color,
+                                            }}
+                                          />
+                                          <span>{child.name}</span>
+                                        </div>
+                                        <div className="flex items-center justify-center rounded p-1">
+                                          <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                        </div>
+                                      </div>
+                                    )}
+                                  </Combobox.Option>
+                                ))}
+                              </div>
+                            </div>
+                          );
+                      })
+                    ) : (
+                      <p className="px-2 text-xs text-custom-text-200">No labels found</p>
+                    )
+                  ) : (
+                    <p className="px-2 text-xs text-custom-text-200">Loading...</p>
+                  )}
+                  <button
+                    type="button"
+                    className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
+                    onClick={() => setIsOpen(true)}
+                  >
+                    <span className="flex items-center justify-start gap-1 text-custom-text-200">
+                      <Plus className="h-4 w-4" aria-hidden="true" />
+                      <span className="whitespace-nowrap">Create New Label</span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};
diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
new file mode 100644
index 00000000000..c0d9c6c4c3b
--- /dev/null
+++ b/web/components/issues/select/module.tsx
@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { DiceIcon } from "@plane/ui";
+// icons
+import { Check, Search } from "lucide-react";
+
+export interface IssueModuleSelectProps {
+  workspaceSlug: string;
+  projectId: string;
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((props) => {
+  const { workspaceSlug, projectId, value, onChange } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { module: moduleStore } = useMobxStore();
+
+  const fetchModules = () => {
+    if (workspaceSlug && projectId) moduleStore.fetchModules(workspaceSlug, projectId);
+  };
+
+  const modules = projectId ? moduleStore.modules[projectId] : undefined;
+
+  const selectedModule = modules ? modules?.find((i) => i.id === value) : undefined;
+
+  const options = modules?.map((module) => ({
+    value: module.id,
+    query: module.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <DiceIcon />
+        </span>
+        <span className="truncate flex-grow">{module.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedModule ? (
+    <div className="flex items-center gap-1.5">
+      <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+        <DiceIcon />
+      </span>
+      <div className="truncate">{selectedModule.name}</div>
+    </div>
+  ) : (
+    <>
+      <DiceIcon className="h-3 w-3" />
+      <span>Select Module</span>
+    </>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value}
+      onChange={(val: string) => onChange(val)}
+      disabled={false}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
+            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          }`}
+          onClick={fetchModules}
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
new file mode 100644
index 00000000000..503a6543b4c
--- /dev/null
+++ b/web/components/issues/select/priority.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+// ui
+import { CustomSelect, PriorityIcon } from "@plane/ui";
+// types
+import { TIssuePriorities } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  value: TIssuePriorities;
+  onChange: (value: string) => void;
+};
+
+export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
+  <CustomSelect
+    value={value}
+    label={
+      <div className="flex items-center justify-center gap-2 text-xs">
+        <span className="flex items-center">
+          <PriorityIcon priority={value} className={`h-3.5 w-3.5 ${value ? "" : "text-custom-text-200"}`} />
+        </span>
+        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>{value ?? "Priority"}</span>
+      </div>
+    }
+    onChange={onChange}
+    noChevron
+  >
+    {PRIORITIES.map((priority) => (
+      <CustomSelect.Option key={priority} value={priority}>
+        <div className="flex w-full justify-between gap-2 rounded">
+          <div className="flex items-center justify-start gap-2">
+            <span>
+              <PriorityIcon priority={priority} />
+            </span>
+            <span className="capitalize">{priority}</span>
+          </div>
+        </div>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
new file mode 100644
index 00000000000..08f245b1480
--- /dev/null
+++ b/web/components/issues/select/project.tsx
@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// popper js
+import { usePopper } from "react-popper";
+// ui
+import { Combobox } from "@headlessui/react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// icons
+import { Check, Clipboard, Search } from "lucide-react";
+
+export interface IssueProjectSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
+  const { value, onChange } = props;
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const selectedProject = projects?.find((i) => i.id === value);
+
+  const options = projects?.map((project) => ({
+    value: project.id,
+    query: project.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="grid place-items-center flex-shrink-0">
+          {project.emoji ? renderEmoji(project.emoji) : project.icon_prop ? renderEmoji(project.icon_prop) : null}
+        </span>
+        <span className="truncate flex-grow">{project.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedProject ? (
+    <div className="flex items-center gap-1.5">
+      <span className="flex items-center h-3 w-3">
+        {selectedProject.emoji
+          ? renderEmoji(selectedProject.emoji)
+          : selectedProject.icon_prop
+          ? renderEmoji(selectedProject.icon_prop)
+          : null}
+      </span>
+      <div className="truncate">{selectedProject.identifier}</div>
+    </div>
+  ) : (
+    <>
+      <Clipboard className="h-3 w-3" />
+      <span>Select Project</span>
+    </>
+  );
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value}
+      onChange={(val: string) => onChange(val)}
+      disabled={false}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
+            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          }`}
+        >
+          {label}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+});
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
new file mode 100644
index 00000000000..024024641fb
--- /dev/null
+++ b/web/components/issues/select/state.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { ProjectStateService } from "services/project";
+// ui
+import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// fetch keys
+import { STATES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string;
+  onChange: (value: string) => void;
+  projectId: string;
+};
+
+// services
+const projectStateService = new ProjectStateService();
+
+export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+  // states
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId) : null,
+    workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = states?.find((s) => s.id === value);
+  const currentDefaultState = states?.find((s) => s.default);
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
+      label={
+        <div className="flex items-center gap-2">
+          {selectedOption ? (
+            <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
+          ) : currentDefaultState ? (
+            <StateGroupIcon stateGroup={currentDefaultState.group} color={currentDefaultState.color} />
+          ) : (
+            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+          )}
+          {selectedOption?.name
+            ? selectedOption.name
+            : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
+        </div>
+      }
+      footerOption={
+        <button
+          type="button"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
+          onClick={() => setIsOpen(true)}
+        >
+          <Plus className="h-4 w-4" aria-hidden="true" />
+          Create New State
+        </button>
+      }
+      noChevron
+    />
+  );
+};
diff --git a/web/components/issues/sidebar-select/assignee.tsx b/web/components/issues/sidebar-select/assignee.tsx
new file mode 100644
index 00000000000..4fdb71fa0c3
--- /dev/null
+++ b/web/components/issues/sidebar-select/assignee.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, AvatarGroup, CustomSearchSelect } from "@plane/ui";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[];
+  onChange: (val: string[]) => void;
+  disabled?: boolean;
+};
+
+// services
+const projectService = new ProjectService();
+
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      customButton={
+        <>
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="-my-0.5 flex items-center gap-2">
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
+              <span className="text-custom-text-100 text-xs">{value.length} Assignees</span>
+            </div>
+          ) : (
+            <button
+              type="button"
+              className="bg-custom-background-80 px-2.5 py-0.5 text-xs rounded text-custom-text-200"
+            >
+              No assignees
+            </button>
+          )}
+        </>
+      }
+      options={options}
+      onChange={onChange}
+      multiple
+      disabled={disabled}
+    />
+  );
+};
diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
new file mode 100644
index 00000000000..4361e68d990
--- /dev/null
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// services
+import { IssueService } from "services/issue";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// icons
+import { X } from "lucide-react";
+import { BlockedIcon } from "@plane/ui";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+
+export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
+  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsBlockedModalOpen(false);
+  };
+
+  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        title: "错误",
+        type: "error",
+        message: "请至少选择一个任务",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocked_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocked_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issueService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            relation_type: "blocked_by" as const,
+            issue_detail: issue.blocked_issue_detail,
+            related_issue: issue.blocked_issue_detail.id,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [...watch("related_issues"), ...response],
+        });
+      });
+
+    handleClose();
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isBlockedModalOpen}
+        handleClose={() => setIsBlockedModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <BlockedIcon height={16} width={16} />
+          <p>受阻于</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {blockedByIssue && blockedByIssue.length > 0
+              ? blockedByIssue.map((relation) => (
+                  <div
+                    key={relation?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockedIcon height={10} width={10} />
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedRelations = watch("related_issues")?.filter((i) => i.id !== relation.id);
+
+                        submitChanges({
+                          related_issues: updatedRelations,
+                        });
+
+                        if (!user) return;
+
+                        issueService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsBlockedModalOpen(true)}
+            disabled={disabled}
+          >
+            选择任务
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
new file mode 100644
index 00000000000..764be034ab1
--- /dev/null
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import { IssueService } from "services/issue";
+// icons
+import { X } from "lucide-react";
+import { BlockerIcon } from "@plane/ui";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+
+export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
+  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsBlockerModalOpen(false);
+  };
+
+  const blockerIssue = watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "错误!",
+        message: "请至少选择一个任务",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issueService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issue.blocker_issue_detail.id,
+            relation_type: "blocked_by" as const,
+            related_issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+          })),
+        ],
+        relation: "blocking",
+      })
+      .then((response) => {
+        submitChanges({
+          issue_relations: [
+            ...blockerIssue,
+            ...(response ?? []).map((i: any) => ({
+              id: i.id,
+              relation_type: i.relation_type,
+              issue_detail: i.issue_detail,
+              issue: i.related_issue,
+            })),
+          ],
+        });
+      });
+
+    handleClose();
+  };
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isBlockerModalOpen}
+        handleClose={() => setIsBlockerModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <BlockerIcon height={16} width={16} />
+          <p>阻塞</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {blockerIssue && blockerIssue.length > 0
+              ? blockerIssue.map((relation) => (
+                  <div
+                    key={relation.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockerIcon height={10} width={10} />
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedBlockers = blockerIssue.filter((i) => i.id !== relation.id);
+
+                        submitChanges({
+                          issue_relations: updatedBlockers,
+                        });
+
+                        if (!user) return;
+
+                        issueService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          relation.issue_detail?.id as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsBlockerModalOpen(true)}
+            disabled={disabled}
+          >
+            选择任务
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
new file mode 100644
index 00000000000..ff37cc68f8c
--- /dev/null
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
+// ui
+import { ContrastIcon, CustomSearchSelect, Tooltip } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  issueDetail: IIssue | undefined;
+  handleCycleChange: (cycleId: string) => void;
+  disabled?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+const cycleService = new CycleService();
+
+export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleChange, disabled = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: incompleteCycles } = useSWR(
+    workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
+      : null
+  );
+
+  const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issueService
+      .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(CYCLE_ISSUES(cycleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const options = incompleteCycles?.map((cycle) => ({
+    value: cycle.id,
+    query: cycle.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <ContrastIcon />
+        </span>
+        <span className="truncate flex-grow">{cycle.name}</span>
+      </div>
+    ),
+  }));
+
+  const issueCycle = issueDetail?.issue_cycle;
+
+  return (
+    <CustomSearchSelect
+      value={issueCycle?.cycle_detail.id}
+      onChange={(value: any) => {
+        value === issueCycle?.cycle_detail.id
+          ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
+          : handleCycleChange(value);
+      }}
+      options={options}
+      customButton={
+        <div>
+          <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
+            <button
+              type="button"
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+                disabled ? "cursor-not-allowed" : ""
+              }`}
+            >
+              <span
+                className={`flex items-center gap-1.5 truncate ${
+                  issueCycle ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
+              >
+                {issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}
+                {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+              </span>
+            </button>
+          </Tooltip>
+        </div>
+      }
+      width="max-w-[10rem]"
+      noChevron
+      disabled={disabled}
+    />
+  );
+};
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
new file mode 100644
index 00000000000..a28d472baa3
--- /dev/null
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { X, CopyPlus } from "lucide-react";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import { IssueService } from "services/issue";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData?: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+
+export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsDuplicateModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issueService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "duplicate" as const,
+          })),
+        ],
+      })
+      .then(() => {
+        submitChanges();
+      });
+
+    handleClose();
+  };
+
+  const duplicateIssuesRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "duplicate") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "duplicate")
+      .map((i) => ({
+        ...i,
+        issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isDuplicateModalOpen}
+        handleClose={() => setIsDuplicateModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <CopyPlus className="h-4 w-4 flex-shrink-0" />
+          <p>Duplicate</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {duplicateIssuesRelation && duplicateIssuesRelation.length > 0
+              ? duplicateIssuesRelation.map((relation) => (
+                  <div
+                    key={relation.issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs  duration-300 "
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <CopyPlus height={10} width={10} />
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        if (!user) return;
+
+                        issueService
+                          .deleteIssueRelation(
+                            workspaceSlug as string,
+                            projectId as string,
+                            issueId as string,
+                            relation.id,
+                            user
+                          )
+                          .then(() => {
+                            submitChanges();
+                          });
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsDuplicateModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar-select/estimate.tsx b/web/components/issues/sidebar-select/estimate.tsx
new file mode 100644
index 00000000000..cdc74cbb2fc
--- /dev/null
+++ b/web/components/issues/sidebar-select/estimate.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
+// ui
+import { CustomSelect } from "@plane/ui";
+// icons
+import { Triangle } from "lucide-react";
+
+type Props = {
+  value: number | null;
+  onChange: (val: number | null) => void;
+  disabled?: boolean;
+};
+
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+  const { estimatePoints } = useEstimateOption();
+
+  const currentEstimate = estimatePoints?.find((e) => e.key === value)?.value;
+  return (
+    <CustomSelect
+      value={value}
+      customButton={
+        <div className="flex items-center gap-1.5 text-xs bg-custom-background-80 rounded px-2.5 py-0.5">
+          {currentEstimate ? (
+            <>
+              <Triangle className={`h-3 w-3 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
+              {currentEstimate}
+            </>
+          ) : (
+            "No Estimate"
+          )}
+        </div>
+      }
+      onChange={onChange}
+      disabled={disabled}
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <Triangle className="h-3.5 w-3" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option key={point.key} value={point.key}>
+            <>
+              <span>
+                <Triangle className="h-3.5 w-3.5" />
+              </span>
+              {point.value}
+            </>
+          </CustomSelect.Option>
+        ))}
+    </CustomSelect>
+  );
+};
diff --git a/web/components/issues/sidebar-select/index.ts b/web/components/issues/sidebar-select/index.ts
new file mode 100644
index 00000000000..8b083841eaf
--- /dev/null
+++ b/web/components/issues/sidebar-select/index.ts
@@ -0,0 +1,12 @@
+export * from "./assignee";
+export * from "./blocked";
+export * from "./blocker";
+export * from "./cycle";
+export * from "./estimate";
+export * from "./label";
+export * from "./module";
+export * from "./parent";
+export * from "./priority";
+export * from "./state";
+export * from "./duplicate";
+export * from "./relates-to";
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
new file mode 100644
index 00000000000..464554aec24
--- /dev/null
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { Controller, useForm } from "react-hook-form";
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// services
+import { IssueLabelService } from "services/issue";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Input } from "@plane/ui";
+import { IssueLabelSelect } from "../select";
+// icons
+import { Plus, X } from "lucide-react";
+// types
+import { IIssue, IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  issueDetails: IIssue | undefined;
+  labelList: string[];
+  submitChanges: (formData: any) => void;
+  isNotAllowed: boolean;
+  uneditable: boolean;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "#ff0000",
+};
+
+const issueLabelService = new IssueLabelService();
+
+export const SidebarLabelSelect: React.FC<Props> = ({
+  issueDetails,
+  labelList,
+  submitChanges,
+  isNotAllowed,
+  uneditable,
+}) => {
+  const [createLabelForm, setCreateLabelForm] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+    watch,
+    control,
+    setFocus,
+  } = useForm<Partial<IIssueLabels>>({
+    defaultValues,
+  });
+
+  const { user } = useUser();
+
+  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    await issueLabelService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+      .then((res) => {
+        reset(defaultValues);
+
+        issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false);
+
+        submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] });
+
+        setCreateLabelForm(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    setFocus("name");
+    reset();
+  }, [createLabelForm, reset, setFocus]);
+
+  return (
+    <div className={`flex flex-col gap-3 ${uneditable ? "opacity-60" : ""}`}>
+      <div className="flex flex-wrap gap-1">
+        {labelList?.map((labelId) => {
+          const label = issueLabels?.find((l) => l.id === labelId);
+
+          if (label)
+            return (
+              <span
+                key={label.id}
+                className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
+                onClick={() => {
+                  const updatedLabels = labelList?.filter((l) => l !== labelId);
+                  submitChanges({
+                    labels: updatedLabels,
+                  });
+                }}
+              >
+                <span
+                  className="h-2 w-2 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                  }}
+                />
+                {label.name}
+                <X className="h-2 w-2 group-hover:text-red-500" />
+              </span>
+            );
+        })}
+        <IssueLabelSelect
+          setIsOpen={setCreateLabelForm}
+          value={issueDetails?.labels ?? []}
+          onChange={(val: any) => submitChanges({ labels: val })}
+          projectId={issueDetails?.project_detail.id ?? ""}
+          label={
+            <span
+              className={`flex ${
+                isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
+              } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
+            >
+              Select Label
+            </span>
+          }
+        />
+        {!isNotAllowed && (
+          <button
+            type="button"
+            className={`flex ${
+              isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
+            } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
+            onClick={() => setCreateLabelForm((prevData) => !prevData)}
+            disabled={uneditable}
+          >
+            {createLabelForm ? (
+              <>
+                <X className="h-3 w-3" /> Cancel
+              </>
+            ) : (
+              <>
+                <Plus className="h-3 w-3" /> New
+              </>
+            )}
+          </button>
+        )}
+      </div>
+
+      {createLabelForm && (
+        <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
+          <div>
+            <Popover className="relative">
+              <>
+                <Popover.Button className="grid place-items-center outline-none">
+                  {watch("color") && watch("color") !== "" && (
+                    <span
+                      className="h-6 w-6 rounded"
+                      style={{
+                        backgroundColor: watch("color") ?? "black",
+                      }}
+                    />
+                  )}
+                </Popover.Button>
+
+                <Transition
+                  as={React.Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
+                    <Controller
+                      name="color"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                      )}
+                    />
+                  </Popover.Panel>
+                </Transition>
+              </>
+            </Popover>
+          </div>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "This is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Title"
+                className="w-full"
+              />
+            )}
+          />
+          <button
+            type="button"
+            className="grid place-items-center rounded bg-red-500 p-2.5"
+            onClick={() => setCreateLabelForm(false)}
+          >
+            <X className="h-4 w-4 text-white" />
+          </button>
+          <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
+            <Plus className="h-4 w-4 text-white" />
+          </button>
+        </form>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
new file mode 100644
index 00000000000..9948753d422
--- /dev/null
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+// services
+import { ModuleService } from "services/module.service";
+// ui
+import { CustomSearchSelect, DiceIcon, Tooltip } from "@plane/ui";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  issueDetail: IIssue | undefined;
+  handleModuleChange: (moduleId: string) => void;
+  disabled?: boolean;
+};
+
+const moduleService = new ModuleService();
+
+export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModuleChange, disabled = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: modules } = useSWR(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId ? () => moduleService.getModules(workspaceSlug as string, projectId as string) : null
+  );
+
+  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    moduleService
+      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(MODULE_ISSUES(moduleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const options = modules?.map((module) => ({
+    value: module.id,
+    query: module.name,
+    content: (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="flex justify-center items-center flex-shrink-0 w-3.5 h-3.5">
+          <DiceIcon />
+        </span>
+        <span className="truncate flex-grow">{module.name}</span>
+      </div>
+    ),
+  }));
+
+  const issueModule = issueDetail?.issue_module;
+
+  return (
+    <CustomSearchSelect
+      value={issueModule?.module_detail.id}
+      onChange={(value: any) => {
+        value === issueModule?.module_detail.id
+          ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+          : handleModuleChange(value);
+      }}
+      options={options}
+      customButton={
+        <div>
+          <Tooltip
+            position="left"
+            tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
+          >
+            <button
+              type="button"
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+                disabled ? "cursor-not-allowed" : ""
+              }`}
+            >
+              <span
+                className={`flex items-center gap-1.5 truncate ${
+                  issueModule ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
+              >
+                {issueModule && <DiceIcon className="h-3.5 w-3.5" />}
+                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+              </span>
+            </button>
+          </Tooltip>
+        </div>
+      }
+      width="max-w-[10rem]"
+      noChevron
+      disabled={disabled}
+    />
+  );
+};
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/web/components/issues/sidebar-select/parent.tsx
similarity index 90%
rename from apps/app/components/issues/sidebar-select/parent.tsx
rename to web/components/issues/sidebar-select/parent.tsx
index fcd2139d431..525cf23ea8e 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/web/components/issues/sidebar-select/parent.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { ParentIssuesListModal } from "components/issues";
 // types
-import { IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   onChange: (value: string) => void;
@@ -13,11 +13,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarParentSelect: React.FC<Props> = ({
-  onChange,
-  issueDetails,
-  disabled = false,
-}) => {
+export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, disabled = false }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
 
diff --git a/web/components/issues/sidebar-select/priority.tsx b/web/components/issues/sidebar-select/priority.tsx
new file mode 100644
index 00000000000..3d36acabc23
--- /dev/null
+++ b/web/components/issues/sidebar-select/priority.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+// ui
+import { CustomSelect, PriorityIcon } from "@plane/ui";
+// types
+import { TIssuePriorities } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  value: TIssuePriorities;
+  onChange: (val: TIssuePriorities) => void;
+  disabled?: boolean;
+};
+
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
+  <CustomSelect
+    customButton={
+      <div
+        className={`flex items-center gap-1.5 text-left text-xs capitalize rounded px-2.5 py-0.5 ${
+          value === "urgent"
+            ? "border-red-500/20 bg-red-500/20 text-red-500"
+            : value === "high"
+            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+            : value === "medium"
+            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+            : value === "low"
+            ? "border-green-500/20 bg-green-500/20 text-green-500"
+            : "bg-custom-background-80 border-custom-border-200 text-custom-text-200"
+        }`}
+      >
+        <span className="grid place-items-center -my-1">
+          <PriorityIcon priority={value} className="h-3.5 w-3.5" />
+        </span>
+        <span>{value ?? "None"}</span>
+      </div>
+    }
+    value={value}
+    onChange={onChange}
+    optionsClassName="w-min"
+    disabled={disabled}
+  >
+    {PRIORITIES.map((option) => (
+      <CustomSelect.Option key={option} value={option} className="capitalize">
+        <>
+          <PriorityIcon priority={option} className="h-3.5 w-3.5" />
+          {option ?? "None"}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
new file mode 100644
index 00000000000..2f543e38197
--- /dev/null
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { X } from "lucide-react";
+import { RelatedIcon } from "@plane/ui";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import { IssueService } from "services/issue";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData?: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+// services
+const issueService = new IssueService();
+
+export const SidebarRelatesSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isRelatesToModalOpen, setIsRelatesToModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsRelatesToModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issueService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "relates_to" as const,
+          })),
+        ],
+      })
+      .then(() => {
+        submitChanges();
+      });
+
+    handleClose();
+  };
+
+  const relatedToIssueRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "relates_to") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "relates_to")
+      .map((i) => ({
+        ...i,
+        issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isRelatesToModalOpen}
+        handleClose={() => setIsRelatesToModalOpen(false)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <RelatedIcon className="h-4 w-4 flex-shrink-0" />
+          <p>Relates to</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {relatedToIssueRelation && relatedToIssueRelation.length > 0
+              ? relatedToIssueRelation.map((relation) => (
+                  <div
+                    key={relation.issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <RelatedIcon height={10} width={10} />
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        if (!user) return;
+
+                        issueService
+                          .deleteIssueRelation(
+                            workspaceSlug as string,
+                            projectId as string,
+                            issueId as string,
+                            relation.id,
+                            user
+                          )
+                          .then(() => {
+                            submitChanges();
+                          });
+                      }}
+                    >
+                      <X className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsRelatesToModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
new file mode 100644
index 00000000000..a109ddab9a1
--- /dev/null
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { ProjectStateService } from "services/project";
+// ui
+import { CustomSearchSelect, StateGroupIcon } from "@plane/ui";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// constants
+import { STATES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  value: string;
+  onChange: (val: string) => void;
+  disabled?: boolean;
+};
+
+// services
+const stateService = new ProjectStateService();
+
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxIssueId } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const selectedOption = states?.find((s) => s.id === value);
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        {state.name}
+      </div>
+    ),
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      onChange={onChange}
+      options={options}
+      customButton={
+        <div className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5">
+          {selectedOption ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
+              {addSpaceIfCamelCase(selectedOption?.name ?? "")}
+            </div>
+          ) : inboxIssueId ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              <StateGroupIcon stateGroup="backlog" color="#ff7700" />
+              Triage
+            </div>
+          ) : (
+            "None"
+          )}
+        </div>
+      }
+      width="min-w-[10rem]"
+      noChevron
+      disabled={disabled}
+    />
+  );
+};
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
new file mode 100644
index 00000000000..3ef335309a5
--- /dev/null
+++ b/web/components/issues/sidebar.tsx
@@ -0,0 +1,663 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { Controller, UseFormWatch } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import useUserIssueNotificationSubscription from "hooks/use-issue-notification-subscription";
+import useEstimateOption from "hooks/use-estimate-option";
+// services
+import { IssueService } from "services/issue";
+import { ModuleService } from "services/module.service";
+// components
+import { LinkModal, LinksList } from "components/core";
+import {
+  DeleteIssueModal,
+  SidebarAssigneeSelect,
+  SidebarBlockedSelect,
+  SidebarBlockerSelect,
+  SidebarCycleSelect,
+  SidebarModuleSelect,
+  SidebarParentSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+  SidebarEstimateSelect,
+  SidebarLabelSelect,
+  SidebarDuplicateSelect,
+  SidebarRelatesSelect,
+} from "components/issues";
+// ui
+import { CustomDatePicker } from "components/ui";
+// icons
+import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import type { IIssue, IIssueLink, linkDetails } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  control: any;
+  submitChanges: (formData: any) => void;
+  issueDetail: IIssue | undefined;
+  watch: UseFormWatch<IIssue>;
+  fieldsToShow?: (
+    | "state"
+    | "assignee"
+    | "priority"
+    | "estimate"
+    | "parent"
+    | "blocker"
+    | "blocked"
+    | "startDate"
+    | "dueDate"
+    | "cycle"
+    | "module"
+    | "label"
+    | "link"
+    | "delete"
+    | "all"
+    | "subscribe"
+    | "duplicate"
+    | "relates_to"
+  )[];
+  uneditable?: boolean;
+};
+
+const issueService = new IssueService();
+const moduleService = new ModuleService();
+
+export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { control, submitChanges, issueDetail, watch: watchIssue, fieldsToShow = ["all"], uneditable = false } = props;
+
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
+
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+  const userRole = userStore.currentProjectRole;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { isEstimateActive } = useEstimateOption();
+
+  const { loading, handleSubscribe, handleUnsubscribe, subscribed } = useUserIssueNotificationSubscription(
+    workspaceSlug,
+    projectId,
+    issueId
+  );
+
+  const { setToastAlert } = useToast();
+
+  const handleCycleChange = useCallback(
+    (cycleId: string) => {
+      if (!workspaceSlug || !projectId || !issueDetail || !user) return;
+
+      issueService
+        .addIssueToCycle(
+          workspaceSlug as string,
+          projectId as string,
+          cycleId,
+          {
+            issues: [issueDetail.id],
+          },
+          user
+        )
+        .then(() => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail, user]
+  );
+
+  const handleModuleChange = useCallback(
+    (moduleId: string) => {
+      if (!workspaceSlug || !projectId || !issueDetail || !user) return;
+
+      moduleService
+        .addIssuesToModule(
+          workspaceSlug as string,
+          projectId as string,
+          moduleId,
+          {
+            issues: [issueDetail.id],
+          },
+          user
+        )
+        .then(() => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail, user]
+  );
+
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await issueService
+      .createIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, payload)
+      .then(() => mutate(ISSUE_DETAILS(issueDetail.id)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this issue.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdateLink = async (formData: IIssueLink, linkId: string) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    const updatedLinks = issueDetail.issue_link.map((l) =>
+      l.id === linkId
+        ? {
+            ...l,
+            title: formData.title,
+            url: formData.url,
+          }
+        : l
+    );
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issueDetail.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .updateIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId, payload)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issueDetail.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    const updatedLinks = issueDetail.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(issueDetail.id),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issueService
+      .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId)
+      .then(() => {
+        mutate(ISSUE_DETAILS(issueDetail.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issueDetail?.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const showFirstSection =
+    fieldsToShow.includes("all") ||
+    fieldsToShow.includes("state") ||
+    fieldsToShow.includes("assignee") ||
+    fieldsToShow.includes("priority") ||
+    fieldsToShow.includes("estimate");
+
+  const showSecondSection =
+    fieldsToShow.includes("all") ||
+    fieldsToShow.includes("parent") ||
+    fieldsToShow.includes("blocker") ||
+    fieldsToShow.includes("blocked") ||
+    fieldsToShow.includes("dueDate");
+
+  const showThirdSection =
+    fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
+
+  const startDate = watchIssue("start_date");
+  const targetDate = watchIssue("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const handleEditLink = (link: linkDetails) => {
+    setSelectedLinkToUpdate(link);
+    setLinkModal(true);
+  };
+
+  const isNotAllowed = userRole === 5 || userRole === 10;
+
+  return (
+    <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => {
+          setLinkModal(false);
+          setSelectedLinkToUpdate(null);
+        }}
+        data={selectedLinkToUpdate}
+        status={selectedLinkToUpdate ? true : false}
+        createIssueLink={handleCreateLink}
+        updateIssueLink={handleUpdateLink}
+      />
+      {issueDetail && (
+        <DeleteIssueModal handleClose={() => setDeleteIssueModal(false)} isOpen={deleteIssueModal} data={issueDetail} />
+      )}
+      <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
+        <div className="flex items-center justify-between px-5 pb-3">
+          <h4 className="text-sm font-medium">
+            {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
+          </h4>
+          <div className="flex flex-wrap items-center gap-2">
+            {issueDetail?.created_by !== user?.id &&
+              !issueDetail?.assignees.includes(user?.id ?? "") &&
+              !router.pathname.includes("[archivedIssueId]") &&
+              (fieldsToShow.includes("all") || fieldsToShow.includes("subscribe")) && (
+                <button
+                  type="button"
+                  className="rounded-md flex items-center gap-2 border border-custom-primary-100 px-2 py-1 text-xs text-custom-primary-100 shadow-sm duration-300 focus:outline-none"
+                  onClick={() => {
+                    if (subscribed) handleUnsubscribe();
+                    else handleSubscribe();
+                  }}
+                >
+                  <Bell className="h-3.5 w-3.5" />
+                  {loading ? "Loading..." : subscribed ? "Unsubscribe" : "Subscribe"}
+                </button>
+              )}
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+              <button
+                type="button"
+                className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
+                onClick={handleCopyText}
+              >
+                <LinkIcon className="h-3.5 w-3.5" />
+              </button>
+            )}
+            {!isNotAllowed && (fieldsToShow.includes("all") || fieldsToShow.includes("delete")) && (
+              <button
+                type="button"
+                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
+                onClick={() => setDeleteIssueModal(true)}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="h-full w-full px-5 overflow-y-auto">
+          <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
+            {showFirstSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>State</p>
+                    </div>
+                    <div>
+                      <Controller
+                        control={control}
+                        name="state"
+                        render={({ field: { value } }) => (
+                          <SidebarStateSelect
+                            value={value}
+                            onChange={(val: string) => submitChanges({ state: val })}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Assignees</p>
+                    </div>
+                    <div>
+                      <Controller
+                        control={control}
+                        name="assignees"
+                        render={({ field: { value } }) => (
+                          <SidebarAssigneeSelect
+                            value={value}
+                            onChange={(val: string[]) => submitChanges({ assignees: val })}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <Signal className="h-4 w-4 flex-shrink-0" />
+                      <p>Priority</p>
+                    </div>
+                    <div>
+                      <Controller
+                        control={control}
+                        name="priority"
+                        render={({ field: { value } }) => (
+                          <SidebarPrioritySelect
+                            value={value}
+                            onChange={(val) => submitChanges({ priority: val })}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && isEstimateActive && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <Triangle className="h-4 w-4 flex-shrink-0 " />
+                      <p>Estimate</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="estimate_point"
+                        render={({ field: { value } }) => (
+                          <SidebarEstimateSelect
+                            value={value}
+                            onChange={(val: number | null) => submitChanges({ estimate_point: val })}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+            {showSecondSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <User2 className="h-4 w-4 flex-shrink-0" />
+                      <p>Parent</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="parent"
+                        render={({ field: { onChange } }) => (
+                          <SidebarParentSelect
+                            onChange={(val: string) => {
+                              submitChanges({ parent: val });
+                              onChange(val);
+                            }}
+                            issueDetails={issueDetail}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+                  <SidebarBlockerSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+                    }}
+                    watch={watchIssue}
+                    disabled={isNotAllowed || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
+                  <SidebarBlockedSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+                    }}
+                    watch={watchIssue}
+                    disabled={isNotAllowed || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
+                  <SidebarDuplicateSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      if (!data) return mutate(ISSUE_DETAILS(issueId as string));
+                      mutate<IIssue>(ISSUE_DETAILS(issueId as string), (prevData) => {
+                        if (!prevData) return prevData;
+                        return {
+                          ...prevData,
+                          ...data,
+                        };
+                      });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+                    }}
+                    watch={watchIssue}
+                    disabled={isNotAllowed || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
+                  <SidebarRelatesSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      if (!data) return mutate(ISSUE_DETAILS(issueId as string));
+                      mutate<IIssue>(ISSUE_DETAILS(issueId as string), (prevData) => {
+                        if (!prevData) return prevData;
+                        return {
+                          ...prevData,
+                          ...data,
+                        };
+                      });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+                    }}
+                    watch={watchIssue}
+                    disabled={isNotAllowed || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
+                      <p>Start date</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="start_date"
+                        render={({ field: { value } }) => (
+                          <CustomDatePicker
+                            placeholder="Start date"
+                            value={value}
+                            onChange={(val) =>
+                              submitChanges({
+                                start_date: val,
+                              })
+                            }
+                            className="bg-custom-background-80 border-none"
+                            maxDate={maxDate ?? undefined}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
+                      <p>Due date</p>
+                    </div>
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="target_date"
+                        render={({ field: { value } }) => (
+                          <CustomDatePicker
+                            placeholder="Due date"
+                            value={value}
+                            onChange={(val) =>
+                              submitChanges({
+                                target_date: val,
+                              })
+                            }
+                            className="bg-custom-background-80 border-none"
+                            minDate={minDate ?? undefined}
+                            disabled={isNotAllowed || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+            {showThirdSection && (
+              <div className="py-1">
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                      <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Cycle</p>
+                    </div>
+                    <div className="space-y-1">
+                      <SidebarCycleSelect
+                        issueDetail={issueDetail}
+                        handleCycleChange={handleCycleChange}
+                        disabled={isNotAllowed || uneditable}
+                      />
+                    </div>
+                  </div>
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                      <DiceIcon className="h-4 w-4 flex-shrink-0" />
+                      <p>Module</p>
+                    </div>
+                    <div className="space-y-1">
+                      <SidebarModuleSelect
+                        issueDetail={issueDetail}
+                        handleModuleChange={handleModuleChange}
+                        disabled={isNotAllowed || uneditable}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+            <div className="flex flex-wrap items-start py-2">
+              <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                <Tag className="h-4 w-4 flex-shrink-0" />
+                <p>Label</p>
+              </div>
+              <div className="space-y-1 sm:w-1/2">
+                <SidebarLabelSelect
+                  issueDetails={issueDetail}
+                  labelList={issueDetail?.labels ?? []}
+                  submitChanges={submitChanges}
+                  isNotAllowed={isNotAllowed}
+                  uneditable={uneditable ?? false}
+                />
+              </div>
+            </div>
+          )}
+          {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+            <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
+              <div className="flex items-center justify-between gap-2">
+                <h4>Links</h4>
+                {!isNotAllowed && (
+                  <button
+                    type="button"
+                    className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
+                      uneditable ? "cursor-not-allowed" : "cursor-pointer"
+                    }`}
+                    onClick={() => setLinkModal(true)}
+                    disabled={uneditable}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              <div className="mt-2 space-y-2">
+                {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
+                  <LinksList
+                    links={issueDetail.issue_link}
+                    handleDeleteLink={handleDeleteLink}
+                    handleEditLink={handleEditLink}
+                    userAuth={{
+                      isGuest: userRole === 5,
+                      isViewer: userRole === 10,
+                      isMember: userRole === 15,
+                      isOwner: userRole === 20,
+                    }}
+                  />
+                ) : null}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/sub-issues/index.ts b/web/components/issues/sub-issues/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/web/components/issues/sub-issues/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
new file mode 100644
index 00000000000..fcf4c590691
--- /dev/null
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -0,0 +1,185 @@
+import React from "react";
+
+// lucide icons
+import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+// components
+import { IssuePeekOverview } from "../issue-peek-overview";
+import { SubIssuesRootList } from "./issues-list";
+import { IssueProperty } from "./properties";
+// ui
+import { CustomMenu, Tooltip } from "@plane/ui";
+// types
+import { IUser, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// fetch keys
+
+export interface ISubIssues {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  issue: any;
+  spacingLeft?: number;
+  user: IUser | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+}
+
+export const SubIssues: React.FC<ISubIssues> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  issue,
+  spacingLeft = 0,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+  handleUpdateIssue,
+}) => (
+  <div>
+    {issue && (
+      <div
+        className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
+        style={{ paddingLeft: `${spacingLeft}px` }}
+      >
+        <div className="flex-shrink-0 w-[22px] h-[22px]">
+          {issue?.sub_issues_count > 0 && (
+            <>
+              {issuesLoader.sub_issues.includes(issue?.id) ? (
+                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
+                <div
+                  className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
+                >
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
+                    <ChevronDown width={14} strokeWidth={2} />
+                  ) : (
+                    <ChevronRight width={14} strokeWidth={2} />
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <IssuePeekOverview
+          workspaceSlug={issue?.workspace_detail?.slug}
+          projectId={issue?.project_detail?.id}
+          issueId={issue?.id}
+          handleIssue={(issueToUpdate) => {
+            console.log("issueToUpdate", issueToUpdate);
+            handleUpdateIssue(issue, { ...issue, ...issueToUpdate });
+          }}
+        >
+          <div className="w-full flex items-center gap-2 cursor-pointer">
+            <div
+              className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
+              style={{
+                backgroundColor: issue.state_detail.color,
+              }}
+            />
+            <div className="flex-shrink-0 text-xs text-custom-text-200">
+              {issue.project_detail.identifier}-{issue?.sequence_id}
+            </div>
+            <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
+              <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
+            </Tooltip>
+          </div>
+        </IssuePeekOverview>
+
+        <div className="flex-shrink-0 text-sm">
+          <IssueProperty
+            workspaceSlug={workspaceSlug}
+            parentIssue={parentIssue}
+            issue={issue}
+            user={user}
+            editable={editable}
+          />
+        </div>
+
+        <div className="flex-shrink-0 text-sm">
+          <CustomMenu width="auto" ellipsis>
+            {editable && (
+              <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <Pencil width={14} strokeWidth={2} />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            {editable && (
+              <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
+                <div className="flex items-center justify-start gap-2">
+                  <Trash width={14} strokeWidth={2} />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            <CustomMenu.MenuItem
+              onClick={() => copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)}
+            >
+              <div className="flex items-center justify-start gap-2">
+                <LinkIcon width={14} strokeWidth={2} />
+                <span>Copy issue link</span>
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+
+        {editable && (
+          <>
+            {issuesLoader.delete.includes(issue?.id) ? (
+              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+                <Loader width={14} strokeWidth={2} className="animate-spin" />
+              </div>
+            ) : (
+              <div
+                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
+              >
+                <X width={14} strokeWidth={2} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    )}
+
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+      <SubIssuesRootList
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        parentIssue={issue}
+        spacingLeft={spacingLeft + 22}
+        user={user}
+        editable={editable}
+        removeIssueFromSubIssues={removeIssueFromSubIssues}
+        issuesLoader={issuesLoader}
+        handleIssuesLoader={handleIssuesLoader}
+        copyText={copyText}
+        handleIssueCrudOperation={handleIssueCrudOperation}
+        handleUpdateIssue={handleUpdateIssue}
+      />
+    )}
+  </div>
+);
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
new file mode 100644
index 00000000000..65f459d9558
--- /dev/null
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+// swr
+import useSWR from "swr";
+// components
+import { SubIssues } from "./issue";
+// types
+import { IUser, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// services
+import { IssueService } from "services/issue";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRootList {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  spacingLeft?: number;
+  user: IUser | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
+}
+
+const issueService = new IssueService();
+
+export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  spacingLeft = 10,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+  handleUpdateIssue,
+}) => {
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issueService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      : null
+  );
+
+  useEffect(() => {
+    if (isLoading) {
+      handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+    } else {
+      if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
+        handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
+
+  return (
+    <div className="relative">
+      {issues &&
+        issues.sub_issues &&
+        issues.sub_issues.length > 0 &&
+        issues.sub_issues.map((issue: IIssue) => (
+          <SubIssues
+            key={`${issue?.id}`}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            parentIssue={parentIssue}
+            issue={issue}
+            spacingLeft={spacingLeft}
+            user={user}
+            editable={editable}
+            removeIssueFromSubIssues={removeIssueFromSubIssues}
+            issuesLoader={issuesLoader}
+            handleIssuesLoader={handleIssuesLoader}
+            copyText={copyText}
+            handleIssueCrudOperation={handleIssueCrudOperation}
+            handleUpdateIssue={handleUpdateIssue}
+          />
+        ))}
+
+      <div
+        className={`absolute top-0 bottom-0  ${spacingLeft > 10 ? `border-l border-custom-border-100` : ``}`}
+        style={{ left: `${spacingLeft - 12}px` }}
+      />
+    </div>
+  );
+};
diff --git a/web/components/issues/sub-issues/progressbar.tsx b/web/components/issues/sub-issues/progressbar.tsx
new file mode 100644
index 00000000000..dee91263b2b
--- /dev/null
+++ b/web/components/issues/sub-issues/progressbar.tsx
@@ -0,0 +1,25 @@
+export interface IProgressBar {
+  total: number;
+  done: number;
+}
+
+export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
+  const calPercentage = (doneValue: number, totalValue: number): string => {
+    if (doneValue === 0 || totalValue === 0) return (0).toFixed(0);
+    return ((100 * doneValue) / totalValue).toFixed(0);
+  };
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <div className="w-full">
+        <div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
+          <div
+            className="bg-green-500 h-[6px] rounded-full transition-all"
+            style={{ width: `${calPercentage(done, total)}%` }}
+          />
+        </div>
+      </div>
+      <div className="flex-shrink-0 text-xs font-medium">{calPercentage(done, total)}% Done</div>
+    </div>
+  );
+};
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
new file mode 100644
index 00000000000..faf593efb46
--- /dev/null
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -0,0 +1,178 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueService } from "services/issue";
+import { TrackEventService } from "services/track_event.service";
+// components
+import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
+import { PrioritySelect } from "components/project";
+// types
+import { IUser, IIssue, IState } from "types";
+// fetch-keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+import { IssuePropertyAssignee, IssuePropertyState } from "../issue-layouts/properties";
+
+export interface IIssueProperty {
+  workspaceSlug: string;
+  parentIssue: IIssue;
+  issue: IIssue;
+  user: IUser | undefined;
+  editable: boolean;
+}
+
+// services
+const issueService = new IssueService();
+const trackEventService = new TrackEventService();
+
+export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
+  const { workspaceSlug, parentIssue, issue, user, editable } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const displayProperties = issueFilterStore.userDisplayProperties ?? {};
+
+  const handlePriorityChange = (data: any) => {
+    partialUpdateIssue({ priority: data });
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_PRIORITY",
+      user as IUser
+    );
+  };
+
+  const handleStateChange = (data: IState) => {
+    partialUpdateIssue({
+      state: data.id,
+      state_detail: data,
+    });
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_STATE",
+      user as IUser
+    );
+  };
+
+  const handleAssigneeChange = (data: string[]) => {
+    partialUpdateIssue({ assignees: data });
+
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
+      user as IUser
+    );
+  };
+
+  const partialUpdateIssue = async (data: Partial<IIssue>) => {
+    mutate(
+      workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
+      (elements: any) => {
+        const _elements = { ...elements };
+        const _issues = _elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? { ...element, ...data } : element
+        );
+        _elements["sub_issues"] = [..._issues];
+        return _elements;
+      },
+      false
+    );
+
+    const issueResponse = await issueService.patchIssue(workspaceSlug as string, issue.project, issue.id, data, user);
+
+    mutate(
+      SUB_ISSUES(parentIssue.id),
+      (elements: any) => {
+        const _elements = elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? issueResponse : element
+        );
+        elements["sub_issues"] = _elements;
+        return elements;
+      },
+      true
+    );
+  };
+
+  return (
+    <div className="relative flex items-center gap-1">
+      {displayProperties.priority && (
+        <div className="flex-shrink-0">
+          <PrioritySelect
+            value={issue.priority}
+            onChange={handlePriorityChange}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {displayProperties.state && (
+        <div className="flex-shrink-0">
+          <IssuePropertyState
+            projectId={issue?.project_detail?.id || null}
+            value={issue?.state_detail || null}
+            onChange={(data) => handleStateChange(data)}
+            disabled={false}
+            hideDropdownArrow={true}
+          />
+        </div>
+      )}
+
+      {displayProperties.start_date && issue.start_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          <ViewStartDateSelect
+            issue={issue}
+            onChange={(val) => partialUpdateIssue({ start_date: val })}
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {displayProperties.due_date && issue.target_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          {user && (
+            <ViewDueDateSelect
+              issue={issue}
+              onChange={(val) => partialUpdateIssue({ target_date: val })}
+              disabled={!editable}
+            />
+          )}
+        </div>
+      )}
+
+      {displayProperties.assignee && (
+        <div className="flex-shrink-0">
+          <IssuePropertyAssignee
+            projectId={issue?.project_detail?.id || null}
+            value={issue?.assignees || null}
+            hideDropdownArrow={true}
+            onChange={(val) => handleAssigneeChange(val)}
+            disabled={false}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
new file mode 100644
index 00000000000..3e8a345f864
--- /dev/null
+++ b/web/components/issues/sub-issues/root.tsx
@@ -0,0 +1,370 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR, { mutate } from "swr";
+import { Plus, ChevronRight, ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { SubIssuesRootList } from "./issues-list";
+import { ProgressBar } from "./progressbar";
+// ui
+import { CustomMenu } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IUser, IIssue, ISearchIssueResponse } from "types";
+// services
+import { IssueService } from "services/issue";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRoot {
+  parentIssue: IIssue;
+  user: IUser | undefined;
+}
+
+export interface ISubIssuesRootLoaders {
+  visibility: string[];
+  delete: string[];
+  sub_issues: string[];
+}
+export interface ISubIssuesRootLoadersHandler {
+  key: "visibility" | "delete" | "sub_issues";
+  issueId: string;
+}
+
+const issueService = new IssueService();
+
+export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
+  const { parentIssue, user } = props;
+
+  const { user: userStore, issue: issueStore, issueDetail: issueDetailStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issueService.subIssues(workspaceSlug.toString(), projectId.toString(), parentIssue.id)
+      : null
+  );
+
+  const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
+    visibility: [parentIssue?.id],
+    delete: [],
+    sub_issues: [],
+  });
+  const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
+    setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
+      ...previousData,
+      [key]: previousData[key].includes(issueId)
+        ? previousData[key].filter((i: string) => i !== issueId)
+        : [...previousData[key], issueId],
+    }));
+  };
+
+  const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
+    create: { toggle: boolean; issueId: string | null };
+    existing: { toggle: boolean; issueId: string | null };
+    edit: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+    delete: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+  }>({
+    create: {
+      toggle: false,
+      issueId: null,
+    },
+    existing: {
+      toggle: false,
+      issueId: null,
+    },
+    edit: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+    delete: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+  });
+  const handleIssueCrudOperation = (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string | null,
+    issue: IIssue | null = null
+  ) => {
+    setIssueCrudOperation({
+      ...issueCrudOperation,
+      [key]: {
+        toggle: !issueCrudOperation[key].toggle,
+        issueId: issueId,
+        issue: issue,
+      },
+    });
+  };
+
+  const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
+    const issueId = issueCrudOperation?.existing?.issueId;
+    const payload = {
+      sub_issue_ids: data.map((i) => i.id),
+    };
+    await issueService.addSubIssues(workspaceSlug.toString(), projectId.toString(), issueId, payload).finally(() => {
+      if (issueId) mutate(SUB_ISSUES(issueId));
+    });
+  };
+
+  const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
+    if (!workspaceSlug || !projectId || !parentIssue || !issue?.id) return;
+    issueService
+      .patchIssue(workspaceSlug.toString(), projectId.toString(), issue.id, { parent: null }, user)
+      .then(async () => {
+        if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "success",
+          title: `Issue removed!`,
+          message: `Issue removed successfully.`,
+        });
+      })
+      .catch(() => {
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "warning",
+          title: `Error!`,
+          message: `Error, Please try again later.`,
+        });
+      });
+  };
+
+  const copyText = (text: string) => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${text}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleUpdateIssue = useCallback(
+    (issue: IIssue, data: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !user) return;
+
+      const payload = {
+        ...issue,
+        ...data,
+      };
+
+      issueStore.updateIssueStructure(null, null, payload);
+      issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
+    },
+    [issueStore, issueDetailStore, projectId, user, workspaceSlug]
+  );
+
+  const isEditable = userRole === 5 || userRole === 10 ? false : true;
+
+  const mutateSubIssues = (parentIssueId: string | null) => {
+    if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
+  };
+
+  return (
+    <div className="w-full h-full space-y-2">
+      {!issues && isLoading ? (
+        <div className="py-3 text-center text-sm  text-custom-text-300 font-medium">Loading...</div>
+      ) : (
+        <>
+          {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
+            <>
+              {/* header */}
+              <div className="relative flex items-center gap-4 text-xs">
+                <div
+                  className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })}
+                >
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
+                      <ChevronDown width={16} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                  <div>Sub-issues</div>
+                  <div>({issues?.sub_issues?.length || 0})</div>
+                </div>
+
+                <div className="w-full max-w-[250px] select-none">
+                  <ProgressBar
+                    total={issues?.sub_issues?.length || 0}
+                    done={(issues?.state_distribution?.cancelled || 0) + (issues?.state_distribution?.completed || 0)}
+                  />
+                </div>
+
+                {isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
+                  <div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                    >
+                      Add sub-issue
+                    </div>
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                    >
+                      Add an existing issue
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* issues */}
+              {issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
+                <div className="border border-b-0 border-custom-border-100">
+                  <SubIssuesRootList
+                    workspaceSlug={workspaceSlug.toString()}
+                    projectId={projectId.toString()}
+                    parentIssue={parentIssue}
+                    user={undefined}
+                    editable={isEditable}
+                    removeIssueFromSubIssues={removeIssueFromSubIssues}
+                    issuesLoader={issuesLoader}
+                    handleIssuesLoader={handleIssuesLoader}
+                    copyText={copyText}
+                    handleIssueCrudOperation={handleIssueCrudOperation}
+                    handleUpdateIssue={handleUpdateIssue}
+                  />
+                </div>
+              )}
+
+              <div>
+                <CustomMenu
+                  label={
+                    <>
+                      <Plus className="h-3 w-3" />
+                      Add sub-issue
+                    </>
+                  }
+                  buttonClassName="whitespace-nowrap"
+                  // position="left"
+                  noBorder
+                  noChevron
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      mutateSubIssues(parentIssue?.id);
+                      handleIssueCrudOperation("create", parentIssue?.id);
+                    }}
+                  >
+                    Create new
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      mutateSubIssues(parentIssue?.id);
+                      handleIssueCrudOperation("existing", parentIssue?.id);
+                    }}
+                  >
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </>
+          ) : (
+            isEditable && (
+              <div className="flex justify-between items-center">
+                <div className="text-xs py-2 text-custom-text-300 italic">No Sub-Issues yet</div>
+                <div>
+                  <CustomMenu
+                    label={
+                      <>
+                        <Plus className="h-3 w-3" />
+                        Add sub-issue
+                      </>
+                    }
+                    buttonClassName="whitespace-nowrap"
+                    // position="left"
+                    noBorder
+                    noChevron
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("create", parentIssue?.id);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("existing", parentIssue?.id);
+                      }}
+                    >
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            )
+          )}
+          {isEditable && issueCrudOperation?.create?.toggle && (
+            <CreateUpdateIssueModal
+              isOpen={issueCrudOperation?.create?.toggle}
+              prePopulateData={{
+                parent: issueCrudOperation?.create?.issueId,
+              }}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.create?.issueId);
+                handleIssueCrudOperation("create", null);
+              }}
+            />
+          )}
+          {isEditable && issueCrudOperation?.existing?.toggle && issueCrudOperation?.existing?.issueId && (
+            <ExistingIssuesListModal
+              isOpen={issueCrudOperation?.existing?.toggle}
+              handleClose={() => handleIssueCrudOperation("existing", null)}
+              searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
+              handleOnSubmit={addAsSubIssueFromExistingIssues}
+              workspaceLevelToggle
+            />
+          )}
+          {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+            <>
+              <CreateUpdateIssueModal
+                isOpen={issueCrudOperation?.edit?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.edit?.issueId);
+                  handleIssueCrudOperation("edit", null, null);
+                }}
+                data={issueCrudOperation?.edit?.issue}
+              />
+            </>
+          )}
+          {isEditable &&
+            issueCrudOperation?.delete?.toggle &&
+            issueCrudOperation?.delete?.issueId &&
+            issueCrudOperation?.delete?.issue && (
+              <DeleteIssueModal
+                isOpen={issueCrudOperation?.delete?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.delete?.issueId);
+                  handleIssueCrudOperation("delete", null, null);
+                }}
+                data={issueCrudOperation?.delete?.issue}
+              />
+            )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
new file mode 100644
index 00000000000..f7dc4e09b2e
--- /dev/null
+++ b/web/components/issues/view-select/due-date.tsx
@@ -0,0 +1,64 @@
+// ui
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
+// helpers
+import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (date: string | null) => void;
+  handleOnOpen?: () => void;
+  handleOnClose?: () => void;
+  tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
+  noBorder?: boolean;
+  disabled: boolean;
+};
+
+export const ViewDueDateSelect: React.FC<Props> = ({
+  issue,
+  onChange,
+  handleOnOpen,
+  handleOnClose,
+  tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
+  noBorder = false,
+  disabled,
+}) => {
+  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
+  return (
+    <Tooltip
+      tooltipHeading="Due date"
+      tooltipContent={issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"}
+      position={tooltipPosition}
+    >
+      <div
+        className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
+          issue.target_date === null
+            ? ""
+            : issue.target_date < new Date().toISOString()
+            ? "text-red-600"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+        }`}
+      >
+        <CustomDatePicker
+          placeholder="Due date"
+          value={issue?.target_date}
+          onChange={onChange}
+          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
+          minDate={minDate ?? undefined}
+          noBorder={noBorder}
+          handleOnOpen={handleOnOpen}
+          handleOnClose={handleOnClose}
+          disabled={disabled}
+        />
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
new file mode 100644
index 00000000000..b161eb59818
--- /dev/null
+++ b/web/components/issues/view-select/estimate.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
+// ui
+import { CustomSelect, Tooltip } from "@plane/ui";
+// icons
+import { Triangle } from "lucide-react";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (data: number) => void;
+  tooltipPosition?: "top" | "bottom";
+  customButton?: boolean;
+  disabled: boolean;
+};
+
+export const ViewEstimateSelect: React.FC<Props> = ({
+  issue,
+  onChange,
+  tooltipPosition = "top",
+  customButton = false,
+  disabled,
+}) => {
+  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
+
+  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
+
+  const estimateLabels = (
+    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
+      <div className="flex items-center gap-1 text-custom-text-200">
+        <Triangle className="h-3 w-3" />
+        {estimateValue ?? "None"}
+      </div>
+    </Tooltip>
+  );
+
+  if (!isEstimateActive) return null;
+
+  return (
+    <CustomSelect
+      value={issue.estimate_point}
+      onChange={onChange}
+      {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
+      maxHeight="md"
+      noChevron
+      disabled={disabled}
+      width="w-full min-w-[8rem]"
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <Triangle className="h-3 w-3" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints?.map((estimate) => (
+        <CustomSelect.Option key={estimate.id} value={estimate.key}>
+          <>
+            <Triangle className="h-3 w-3" />
+            {estimate.value}
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/web/components/issues/view-select/index.ts b/web/components/issues/view-select/index.ts
new file mode 100644
index 00000000000..8eb88cb0dee
--- /dev/null
+++ b/web/components/issues/view-select/index.ts
@@ -0,0 +1,3 @@
+export * from "./due-date";
+export * from "./estimate";
+export * from "./start-date";
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
new file mode 100644
index 00000000000..e5858b18fa5
--- /dev/null
+++ b/web/components/issues/view-select/start-date.tsx
@@ -0,0 +1,56 @@
+// ui
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  onChange: (date: string | null) => void;
+  handleOnOpen?: () => void;
+  handleOnClose?: () => void;
+  tooltipPosition?: "top" | "bottom";
+  className?: string;
+  buttonClassName?: string;
+  noBorder?: boolean;
+  disabled: boolean;
+};
+
+export const ViewStartDateSelect: React.FC<Props> = ({
+  issue,
+  onChange,
+  handleOnOpen,
+  handleOnClose,
+  tooltipPosition = "top",
+  className = "",
+  buttonClassName = "",
+  noBorder = false,
+  disabled,
+}) => {
+  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <Tooltip
+      tooltipHeading="Start date"
+      tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
+      position={tooltipPosition}
+    >
+      <div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
+        <CustomDatePicker
+          placeholder="Start date"
+          value={issue?.start_date}
+          onChange={onChange}
+          className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
+          maxDate={maxDate ?? undefined}
+          noBorder={noBorder}
+          handleOnOpen={handleOnOpen}
+          handleOnClose={handleOnClose}
+          disabled={disabled}
+        />
+      </div>
+    </Tooltip>
+  );
+};
diff --git a/apps/app/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
similarity index 76%
rename from apps/app/components/labels/create-label-modal.tsx
rename to web/components/labels/create-label-modal.tsx
index 7c6aab96fd3..7f42f009538 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -1,25 +1,19 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // types
-import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
+import type { IIssueLabels, IState } from "types";
 // constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 
 // types
@@ -28,7 +22,6 @@ type Props = {
   projectId: string;
   handleClose: () => void;
   onSuccess?: (response: IIssueLabels) => void;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -36,18 +29,16 @@ const defaultValues: Partial<IState> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateLabelModal: React.FC<Props> = ({
-  isOpen,
-  projectId,
-  handleClose,
-  user,
-  onSuccess,
-}) => {
+export const CreateLabelModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose, onSuccess } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
@@ -70,14 +61,9 @@ export const CreateLabelModal: React.FC<Props> = ({
   const onSubmit = async (formData: IIssueLabels) => {
     if (!workspaceSlug) return;
 
-    await issuesService
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+    await projectLabelStore
+      .createLabel(workspaceSlug.toString(), projectId.toString(), formData)
       .then((res) => {
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
         onClose();
         if (onSuccess) onSuccess(res);
       })
@@ -115,11 +101,8 @@ export const CreateLabelModal: React.FC<Props> = ({
               <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
-                      创建标签
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
                       <Popover className="relative">
@@ -138,7 +121,7 @@ export const CreateLabelModal: React.FC<Props> = ({
                                   }}
                                 />
                               )}
-                              <ChevronDownIcon
+                              <ChevronDown
                                 className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
@@ -176,27 +159,36 @@ export const CreateLabelModal: React.FC<Props> = ({
                         )}
                       </Popover>
                       <div className="flex w-full flex-col gap-0.5 justify-center">
-                        <Input
-                          type="text"
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          placeholder="Label title"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          width="full"
-                          validations={{
-                            required: "标签标题是必填项",
+                          rules={{
+                            required: "Label title is required",
                           }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Label title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
                         />
                       </div>
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "创建标签中..." : "创建标签"}
-                    </PrimaryButton>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Creating Label..." : "Create Label"}
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
@@ -206,4 +198,4 @@ export const CreateLabelModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
new file mode 100644
index 00000000000..16cab89ed31
--- /dev/null
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -0,0 +1,189 @@
+import React, { forwardRef, useEffect } from "react";
+import { useRouter } from "next/router";
+import { TwitterPicker } from "react-color";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+
+// stores
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+// fetch-keys
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
+
+type Props = {
+  labelForm: boolean;
+  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
+  isUpdating: boolean;
+  labelToUpdate: IIssueLabels | null;
+  onClose?: () => void;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  name: "",
+  color: "rgb(var(--color-text-200))",
+};
+
+export const CreateUpdateLabelInline = observer(
+  forwardRef<HTMLFormElement, Props>(function CreateUpdateLabelInline(props, ref) {
+    const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
+
+    // router
+    const router = useRouter();
+    const { workspaceSlug, projectId } = router.query;
+
+    // store
+    const { projectLabel: projectLabelStore } = useMobxStore();
+
+    const {
+      handleSubmit,
+      control,
+      reset,
+      formState: { errors, isSubmitting },
+      watch,
+      setValue,
+      setFocus,
+    } = useForm<IIssueLabels>({
+      defaultValues,
+    });
+
+    const handleClose = () => {
+      setLabelForm(false);
+      reset(defaultValues);
+      if (onClose) onClose();
+    };
+
+    const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
+      if (!workspaceSlug || !projectId || isSubmitting) return;
+
+      await projectLabelStore.createLabel(workspaceSlug.toString(), projectId.toString(), formData).then(() => {
+        handleClose();
+        reset(defaultValues);
+      });
+    };
+
+    const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+      if (!workspaceSlug || !projectId || isSubmitting) return;
+
+      await projectLabelStore
+        .updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData)
+        .then(() => {
+          reset(defaultValues);
+          handleClose();
+        });
+    };
+
+    /**
+     * For settings focus on name input
+     */
+    useEffect(() => {
+      setFocus("name");
+    }, [setFocus, labelForm]);
+
+    useEffect(() => {
+      if (!labelToUpdate) return;
+
+      setValue("name", labelToUpdate.name);
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+    }, [labelToUpdate, setValue]);
+
+    useEffect(() => {
+      if (labelToUpdate) {
+        setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+        return;
+      }
+
+      setValue("color", getRandomLabelColor());
+    }, [labelToUpdate, setValue]);
+
+    return (
+      <form
+        ref={ref}
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
+        }}
+        className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
+          labelForm ? "" : "hidden"
+        }`}
+      >
+        <div className="flex-shrink-0">
+          <Popover className="relative z-10 flex h-full w-full items-center justify-center">
+            {({ open }) => (
+              <>
+                <Popover.Button
+                  className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                    open ? "text-custom-text-100" : "text-custom-text-200"
+                  }`}
+                >
+                  <span
+                    className="h-4 w-4 rounded-full"
+                    style={{
+                      backgroundColor: watch("color"),
+                    }}
+                  />
+                </Popover.Button>
+
+                <Transition
+                  as={React.Fragment}
+                  enter="transition ease-out duration-200"
+                  enterFrom="opacity-0 translate-y-1"
+                  enterTo="opacity-100 translate-y-0"
+                  leave="transition ease-in duration-150"
+                  leaveFrom="opacity-100 translate-y-0"
+                  leaveTo="opacity-0 translate-y-1"
+                >
+                  <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                    <Controller
+                      name="color"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <TwitterPicker
+                          colors={LABEL_COLOR_OPTIONS}
+                          color={value}
+                          onChange={(value) => onChange(value.hex)}
+                        />
+                      )}
+                    />
+                  </Popover.Panel>
+                </Transition>
+              </>
+            )}
+          </Popover>
+        </div>
+        <div className="flex flex-1 flex-col justify-center">
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "Label title is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="labelName"
+                name="name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Label title"
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+        <Button variant="neutral-primary" onClick={() => handleClose()}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
+        </Button>
+      </form>
+    );
+  })
+);
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
new file mode 100644
index 00000000000..b70e28dda1d
--- /dev/null
+++ b/web/components/labels/delete-label-modal.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { AlertTriangle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IIssueLabels } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IIssueLabels | null;
+};
+
+export const DeleteLabelModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    setIsDeleteLoading(true);
+
+    await projectLabelStore
+      .deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        setIsDeleteLoading(false);
+
+        const error = err?.error || "Label could not be deleted. Please try again.";
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: error,
+        });
+      });
+  };
+
+  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 bg-opacity-50 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 border border-custom-border-200 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete Label
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete label-{" "}
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>? The label will be
+                          removed from all the issues.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/labels/index.ts b/web/components/labels/index.ts
new file mode 100644
index 00000000000..c7316b037af
--- /dev/null
+++ b/web/components/labels/index.ts
@@ -0,0 +1,8 @@
+export * from "./create-label-modal";
+export * from "./create-update-label-inline";
+export * from "./delete-label-modal";
+export * from "./label-select";
+export * from "./labels-list-modal";
+export * from "./project-setting-label-group";
+export * from "./project-setting-label-list-item";
+export * from "./project-setting-label-list";
diff --git a/web/components/labels/label-select.tsx b/web/components/labels/label-select.tsx
new file mode 100644
index 00000000000..162c78b9647
--- /dev/null
+++ b/web/components/labels/label-select.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  value: string[];
+  onChange: (data: string[]) => void;
+  labels: IIssueLabels[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  maxRender?: number;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const LabelSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    labels,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    maxRender = 2,
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = labels?.map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center justify-start gap-2">
+        <span
+          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color,
+          }}
+        />
+        <span>{label.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      multiple
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button ref={setReferenceElement} type="button" className="h-full w-full">
+          {value.length > 0 ? (
+            value.length <= maxRender ? (
+              <div className="flex items-center gap-2 px-4 overflow-x-scroll">
+                {labels
+                  ?.filter((l) => value.includes(l.id))
+                  .map((label) => (
+                    <div
+                      key={label.id}
+                      className="flex items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
+                    >
+                      <div className="flex items-center gap-1.5 text-custom-text-200">
+                        <span
+                          className="h-2 w-2 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: label?.color ?? "#000000",
+                          }}
+                        />
+                        {label.name}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            ) : (
+              <div
+                className={`h-full flex items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-4 text-xs ${buttonClassName}`}
+              >
+                <Tooltip
+                  position="top"
+                  tooltipHeading="Labels"
+                  tooltipContent={labels
+                    ?.filter((l) => value.includes(l.id))
+                    .map((l) => l.name)
+                    .join(", ")}
+                >
+                  <div className="h-full flex 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>
+            )
+          ) : (
+            <div
+              className={`flex items-center justify-between gap-1 w-full text-xs px-4 ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }  ${buttonClassName}`}
+            >
+              Select labels
+            </div>
+          )}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+
+      <Combobox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className={`h-3.5 w-3.5`} />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
similarity index 80%
rename from apps/app/components/labels/labels-list-modal.tsx
rename to web/components/labels/labels-list-modal.tsx
index e6d3ad4886b..650745caa7b 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@@ -1,40 +1,48 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
+import useSWR from "swr";
+import { Combobox, Dialog, Transition } from "@headlessui/react";
 
-import useSWR, { mutate } from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 // icons
-import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
+import { LayerStackIcon } from "@plane/ui";
+import { Search } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssueLabels } from "types";
-// constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IIssueLabels } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   parent: IIssueLabels | undefined;
-  user: ICurrentUserResponse | undefined;
 };
 
-export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
-  const [query, setQuery] = useState("");
+export const LabelsListModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, parent } = props;
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+  // store
+  const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
+
+  // states
+  const [query, setQuery] = useState("");
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
   const filteredLabels: IIssueLabels[] =
     query === ""
       ? issueLabels ?? []
@@ -48,27 +56,9 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
   const addChildLabel = async (label: IIssueLabels) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(
-      (prevData: any) =>
-        prevData?.map((l: any) => {
-          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
-
-          return l;
-        }),
-      false
-    );
-
-    await issuesService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
-        label.id,
-        {
-          parent: parent?.id ?? "",
-        },
-        user
-      )
-      .then(() => mutate());
+    await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: parent?.id!,
+    });
   };
 
   return (
@@ -99,7 +89,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
             <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
               <Combobox>
                 <div className="relative m-1">
-                  <MagnifyingGlassIcon
+                  <Search
                     className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                     aria-hidden="true"
                   />
@@ -114,9 +104,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                   {filteredLabels.length > 0 && (
                     <li className="p-2">
                       {query === "" && (
-                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
-                          标签
-                        </h2>
+                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">Labels</h2>
                       )}
                       <ul className="text-sm text-gray-700">
                         {filteredLabels.map((label) => {
@@ -125,7 +113,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                           if (
                             (label.parent === "" || label.parent === null) && // issue does not have any other parent
                             label.id !== parent?.id && // issue is not itself
-                            children?.length === 0 // issue doesn't have any othe children
+                            children?.length === 0 // issue doesn't have any other children
                           )
                             return (
                               <Combobox.Option
@@ -160,7 +148,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
 
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
-                    <RectangleStackIcon
+                    <LayerStackIcon
                       className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -176,4 +164,4 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
new file mode 100644
index 00000000000..a9949bb0025
--- /dev/null
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Disclosure, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { CustomMenu } from "@plane/ui";
+// icons
+import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  label: IIssueLabels;
+  labelChildren: IIssueLabels[];
+  handleLabelDelete: () => void;
+  editLabel: (label: IIssueLabels) => void;
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
+};
+
+export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
+  const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
+  const removeFromGroup = (label: IIssueLabels) => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: null,
+    });
+  };
+
+  return (
+    <Disclosure
+      as="div"
+      className="rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
+      defaultOpen
+    >
+      {({ open }) => (
+        <>
+          <div className="flex cursor-pointer items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Component className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
+              <h6>{label.name}</h6>
+            </div>
+            <div className="flex items-center gap-2">
+              <CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
+                <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Plus className="h-4 w-4" />
+                    <span>Add more labels</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Pencil className="h-4 w-4" />
+                    <span>Edit label</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleLabelDelete}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-4 w-4" />
+                    <span>Delete label</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+              <Disclosure.Button>
+                <span>
+                  <ChevronDown
+                    className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
+                  />
+                </span>
+              </Disclosure.Button>
+            </div>
+          </div>
+          <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="mt-2.5 ml-6">
+                {labelChildren.map((child) => (
+                  <div
+                    key={child.id}
+                    className="group flex items-center justify-between border-b border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
+                  >
+                    <h5 className="flex items-center gap-3">
+                      <span
+                        className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+                        style={{
+                          backgroundColor: child.color && child.color !== "" ? child.color : "#000000",
+                        }}
+                      />
+                      {child.name}
+                    </h5>
+                    <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
+                      <div className="h-4 w-4">
+                        <CustomMenu
+                          customButton={
+                            <div className="h-4 w-4">
+                              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+                            </div>
+                          }
+                        >
+                          <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
+                            <span className="flex items-center justify-start gap-2">
+                              <X className="h-4 w-4" />
+                              <span>Remove from group</span>
+                            </span>
+                          </CustomMenu.MenuItem>
+                          <CustomMenu.MenuItem onClick={() => editLabel(child)}>
+                            <span className="flex items-center justify-start gap-2">
+                              <Pencil className="h-4 w-4" />
+                              <span>Edit label</span>
+                            </span>
+                          </CustomMenu.MenuItem>
+                        </CustomMenu>
+                      </div>
+
+                      <div className="flex items-center">
+                        <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
+                          <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
+    </Disclosure>
+  );
+});
diff --git a/web/components/labels/project-setting-label-list-item.tsx b/web/components/labels/project-setting-label-list-item.tsx
new file mode 100644
index 00000000000..1729a6d8b1b
--- /dev/null
+++ b/web/components/labels/project-setting-label-list-item.tsx
@@ -0,0 +1,73 @@
+import React, { useRef, useState } from "react";
+
+//hook
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// ui
+import { CustomMenu } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+//icons
+import { Component, X, Pencil } from "lucide-react";
+
+type Props = {
+  label: IIssueLabels;
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: () => void;
+};
+
+export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
+  const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
+
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
+      <div className="flex items-center gap-3">
+        <span
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color && label.color !== "" ? label.color : "#000",
+          }}
+        />
+        <h6 className="text-sm">{label.name}</h6>
+      </div>
+
+      <div
+        ref={actionSectionRef}
+        className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
+          isMenuActive ? "opacity-100" : ""
+        }`}
+      >
+        <CustomMenu
+          customButton={
+            <div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+            </div>
+          }
+        >
+          <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+              <span>Convert to group</span>
+            </span>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <Pencil className="h-4 w-4" />
+              <span>Edit label</span>
+            </span>
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+        <div className="py-0.5">
+          <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={handleLabelDelete}>
+            <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
new file mode 100644
index 00000000000..42ebb417d5c
--- /dev/null
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -0,0 +1,166 @@
+import React, { useState, useRef } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  CreateUpdateLabelInline,
+  DeleteLabelModal,
+  LabelsListModal,
+  ProjectSettingLabelItem,
+  ProjectSettingLabelGroup,
+} from "components/labels";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// images
+import emptyLabel from "public/empty-state/label.svg";
+// types
+import { IIssueLabels } from "types";
+
+export const ProjectSettingsLabelList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [labelForm, setLabelForm] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [labelsListModal, setLabelsListModal] = useState(false);
+  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
+  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
+
+  // ref
+  const scrollToRef = useRef<HTMLFormElement>(null);
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
+  const newLabel = () => {
+    setIsUpdating(false);
+    setLabelForm(true);
+  };
+
+  const addLabelToGroup = (parentLabel: IIssueLabels) => {
+    setLabelsListModal(true);
+    setParentLabel(parentLabel);
+  };
+
+  const editLabel = (label: IIssueLabels) => {
+    setLabelForm(true);
+    setIsUpdating(true);
+    setLabelToUpdate(label);
+  };
+
+  return (
+    <>
+      <LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
+
+      <div className="flex items-center py-3.5 border-b border-custom-border-200 justify-between">
+        <h3 className="text-xl font-medium">Labels</h3>
+        <Button variant="primary" onClick={newLabel} size="sm">
+          Add label
+        </Button>
+      </div>
+      <div className="space-y-3 py-6 h-full w-full">
+        {labelForm && (
+          <CreateUpdateLabelInline
+            labelForm={labelForm}
+            setLabelForm={setLabelForm}
+            isUpdating={isUpdating}
+            labelToUpdate={labelToUpdate}
+            ref={scrollToRef}
+            onClose={() => {
+              setLabelForm(false);
+              setIsUpdating(false);
+              setLabelToUpdate(null);
+            }}
+          />
+        )}
+
+        {/* labels */}
+        {issueLabels &&
+          issueLabels.map((label) => {
+            const children = issueLabels?.filter((l) => l.parent === label.id);
+
+            if (children && children.length === 0) {
+              if (!label.parent)
+                return (
+                  <ProjectSettingLabelItem
+                    key={label.id}
+                    label={label}
+                    addLabelToGroup={() => addLabelToGroup(label)}
+                    editLabel={(label) => {
+                      editLabel(label);
+                      scrollToRef.current?.scrollIntoView({
+                        behavior: "smooth",
+                      });
+                    }}
+                    handleLabelDelete={() => setSelectDeleteLabel(label)}
+                  />
+                );
+            } else {
+              return (
+                <ProjectSettingLabelGroup
+                  key={label.id}
+                  label={label}
+                  labelChildren={children}
+                  addLabelToGroup={addLabelToGroup}
+                  editLabel={(label) => {
+                    editLabel(label);
+                    scrollToRef.current?.scrollIntoView({
+                      behavior: "smooth",
+                    });
+                  }}
+                  handleLabelDelete={() => setSelectDeleteLabel(label)}
+                />
+              );
+            }
+          })}
+
+        {/* loading state */}
+        {!issueLabels && (
+          <Loader className="space-y-5">
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+          </Loader>
+        )}
+
+        {/* empty state */}
+        {issueLabels && issueLabels.length === 0 && (
+          <EmptyState
+            title="No labels yet"
+            description="Create labels to help organize and filter issues in you project"
+            image={emptyLabel}
+            primaryButton={{
+              text: "Add label",
+              onClick: () => newLabel(),
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
new file mode 100644
index 00000000000..3cb5942ee8a
--- /dev/null
+++ b/web/components/modules/delete-module-modal.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { AlertTriangle } from "lucide-react";
+// types
+import type { IModule } from "types";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type Props = {
+  data: IModule;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteModuleModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { module: moduleStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsDeleteLoading(true);
+
+    await moduleStore
+      .deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete Module
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete module-{" "}
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the module will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
new file mode 100644
index 00000000000..c26926ff8a1
--- /dev/null
+++ b/web/components/modules/form.tsx
@@ -0,0 +1,201 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// components
+import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
+// ui
+import { DateSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
+// types
+import { IModule } from "types";
+import { IssueProjectSelect } from "components/issues/select";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead: null,
+  members: [],
+};
+
+export const ModuleForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  projectId,
+  setActiveProject,
+  data,
+}) => {
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues: {
+      project: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      status: data?.status || "backlog",
+      lead: data?.lead || null,
+      members: data?.members || [],
+    },
+  });
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  const startDate = watch("start_date");
+  const targetDate = watch("target_date");
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5">
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Module Title"
+                  className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
+                />
+              )}
+            />
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  onChange={onChange}
+                  placeholder="Description..."
+                  className="h-24 w-full resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Start date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                  }}
+                  maxDate={maxDate ?? undefined}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="target_date"
+              render={({ field: { value, onChange } }) => (
+                <DateSelect
+                  label="Target date"
+                  value={value}
+                  onChange={(val) => {
+                    onChange(val);
+                  }}
+                  minDate={minDate ?? undefined}
+                />
+              )}
+            />
+            <ModuleStatusSelect control={control} error={errors.status} />
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value, onChange } }) => <ModuleLeadSelect value={value} onChange={onChange} />}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value, onChange } }) => <ModuleMembersSelect value={value} onChange={onChange} />}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200">
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Module..."
+              : "Update Module"
+            : isSubmitting
+            ? "Creating Module..."
+            : "Create Module"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
new file mode 100644
index 00000000000..5b527073a7e
--- /dev/null
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -0,0 +1,53 @@
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip, ModuleStatusIcon } from "@plane/ui";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative flex items-center w-full h-full rounded"
+      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
+    >
+      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
+      <Tooltip
+        tooltipContent={
+          <div className="space-y-1">
+            <h5>{data?.name}</h5>
+            <div>
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
+            </div>
+          </div>
+        }
+        position="top-left"
+      >
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div
+      className="relative w-full flex items-center gap-2 h-full"
+      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
+    >
+      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
+    </div>
+  );
+};
diff --git a/web/components/modules/gantt-chart/index.ts b/web/components/modules/gantt-chart/index.ts
new file mode 100644
index 00000000000..72eb6bfc543
--- /dev/null
+++ b/web/components/modules/gantt-chart/index.ts
@@ -0,0 +1,2 @@
+export * from "./blocks";
+export * from "./modules-list-layout";
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
new file mode 100644
index 00000000000..693aec3a53d
--- /dev/null
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -0,0 +1,57 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
+// types
+import { IModule } from "types";
+
+export const ModulesListGanttChartView: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore, module: moduleStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  const modules = moduleStore.projectModules;
+
+  const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
+    if (!workspaceSlug) return;
+
+    moduleStore.updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
+  };
+
+  const blockFormat = (blocks: IModule[]) =>
+    blocks && blocks.length > 0
+      ? blocks
+          .filter((b) => b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date))
+          .map((block) => ({
+            data: block,
+            id: block.id,
+            sort_order: block.sort_order,
+            start_date: new Date(block.start_date ?? ""),
+            target_date: new Date(block.target_date ?? ""),
+          }))
+      : [];
+
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
+
+  return (
+    <div className="w-full h-full overflow-y-auto">
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blocks={modules ? blockFormat(modules) : null}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        sidebarBlockToRender={ModuleGanttSidebarBlock}
+        blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed}
+      />
+    </div>
+  );
+});
diff --git a/web/components/modules/index.ts b/web/components/modules/index.ts
new file mode 100644
index 00000000000..c87ea79d26a
--- /dev/null
+++ b/web/components/modules/index.ts
@@ -0,0 +1,11 @@
+export * from "./select";
+export * from "./sidebar-select";
+export * from "./delete-module-modal";
+export * from "./form";
+export * from "./gantt-chart";
+export * from "./modal";
+export * from "./modules-list-view";
+export * from "./sidebar";
+export * from "./module-card-item";
+export * from "./module-list-item";
+export * from "./module-peek-overview";
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
new file mode 100644
index 00000000000..452fd89a254
--- /dev/null
+++ b/web/components/modules/modal.tsx
@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ModuleForm } from "components/modules";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import type { IModule } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data?: IModule;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead: null,
+  members: [],
+};
+
+export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, workspaceSlug, projectId } = props;
+
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const { project: projectStore, module: moduleStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
+  const { reset } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const createModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await moduleStore
+      .createModule(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "成功!",
+          message: "模块创建成功。",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "无法创建模块。请重试",
+        });
+      });
+  };
+
+  const updateModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    await moduleStore
+      .updateModuleDetails(workspaceSlug.toString(), projectId.toString(), data.id, payload)
+      .then(() => {
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "成功!",
+          message: "模块更新成功。",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "模块无法更新,请重试。",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IModule> = {
+      ...formData,
+    };
+
+    if (!data) await createModule(payload);
+    else await updateModule(payload);
+  };
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
+  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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={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 rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <ModuleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
new file mode 100644
index 00000000000..0129b82279a
--- /dev/null
+++ b/web/components/modules/module-card-item.tsx
@@ -0,0 +1,244 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// ui
+import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
+// icons
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  module: IModule;
+};
+
+export const ModuleCardItem: React.FC<Props> = observer((props) => {
+  const { module } = props;
+
+  const [editModal, setEditModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { module: moduleStore } = useMobxStore();
+
+  const moduleTotalIssues =
+    module.backlog_issues +
+    module.unstarted_issues +
+    module.started_issues +
+    module.completed_issues +
+    module.cancelled_issues;
+
+  const completionPercentage = (module.completed_issues / moduleTotalIssues) * 100;
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const issueCount =
+    moduleTotalIssues === 0
+      ? "0 Issue"
+      : moduleTotalIssues === module.completed_issues
+      ? moduleTotalIssues > 1
+        ? `${moduleTotalIssues} Issues`
+        : `${moduleTotalIssues} Issue`
+      : `${module.completed_issues}/${moduleTotalIssues} Issues`;
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the module to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditModal(true);
+  };
+
+  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateModuleModal
+          isOpen={editModal}
+          onClose={() => setEditModal(false)}
+          data={module}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={module.name} position="top">
+                <span className="text-base font-medium truncate">{module.name}</span>
+              </Tooltip>
+              <div className="flex items-center gap-2">
+                {moduleStatus && (
+                  <span
+                    className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                  >
+                    {moduleStatus.label}
+                  </span>
+                )}
+                <button onClick={openModuleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-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>
+              </div>
+              {module.members_detail.length > 0 && (
+                <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+                  <div className="flex items-center gap-1 cursor-default">
+                    <AvatarGroup showTooltip={false}>
+                      {module.members_detail.map((member) => (
+                        <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+
+            <Tooltip
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex items-center w-full">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+              <div className="flex items-center gap-1.5 z-10">
+                {module.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                )}
+                <CustomMenu width="auto" ellipsis className="z-10">
+                  <CustomMenu.MenuItem onClick={handleEditModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Edit module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3 w-3" />
+                      <span>Copy module link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+});
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
new file mode 100644
index 00000000000..997ece953e7
--- /dev/null
+++ b/web/components/modules/module-list-item.tsx
@@ -0,0 +1,224 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// ui
+import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
+// icons
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  module: IModule;
+};
+
+export const ModuleListItem: React.FC<Props> = observer((props) => {
+  const { module } = props;
+
+  const [editModal, setEditModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { module: moduleStore } = useMobxStore();
+
+  const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
+  const renderDate = module.start_date || module.target_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues;
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the module to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditModal(true);
+  };
+
+  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDeleteModal(true);
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateModuleModal
+          isOpen={editModal}
+          onClose={() => setEditModal(false)}
+          data={module}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <DeleteModuleModal data={module} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-5 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {completedModuleCheck ? (
+                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                  ) : progress === 100 ? (
+                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+              <Tooltip tooltipContent={module.name} position="top">
+                <span className="text-base font-medium truncate">{module.name}</span>
+              </Tooltip>
+            </div>
+            <button onClick={openModuleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {moduleStatus && (
+                <span
+                  className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                >
+                  {moduleStatus.label}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {module.members_detail.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {module.members_detail.map((member) => (
+                      <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                    ))}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {module.is_favorite ? (
+              <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+                <Star className="h-3.5 w-3.5 text-custom-text-300" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+              <CustomMenu.MenuItem onClick={handleEditModule}>
+                <span className="flex items-center justify-start gap-2">
+                  <Pencil className="h-3 w-3" />
+                  <span>Edit module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                <span className="flex items-center justify-start gap-2">
+                  <Trash2 className="h-3 w-3" />
+                  <span>Delete module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleCopyText}>
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy module link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+});
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx
new file mode 100644
index 00000000000..c7d2630cb51
--- /dev/null
+++ b/web/components/modules/module-peek-overview.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ModuleDetailsSidebar } from "./sidebar";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+  const router = useRouter();
+  const { peekModule } = router.query;
+
+  const ref = React.useRef(null);
+
+  const { module: moduleStore } = useMobxStore();
+  const { fetchModuleDetails } = moduleStore;
+
+  const handleClose = () => {
+    delete router.query.peekModule;
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  };
+
+  useEffect(() => {
+    if (!peekModule) return;
+
+    fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
+  }, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekModule && (
+        <div
+          ref={ref}
+          className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <ModuleDetailsSidebar moduleId={peekModule?.toString() ?? ""} handleClose={handleClose} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
new file mode 100644
index 00000000000..457f43524fb
--- /dev/null
+++ b/web/components/modules/modules-list-view.tsx
@@ -0,0 +1,99 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
+import { EmptyState } from "components/common";
+// ui
+import { Loader } from "@plane/ui";
+// assets
+import emptyModule from "public/empty-state/module.svg";
+
+export const ModulesListView: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekModule } = router.query;
+
+  const { module: moduleStore } = useMobxStore();
+
+  const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
+
+  const modulesList = moduleStore.projectModules;
+
+  if (!modulesList)
+    return (
+      <Loader className="grid grid-cols-3 gap-4 p-8">
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+      </Loader>
+    );
+
+  return (
+    <>
+      {modulesList.length > 0 ? (
+        <>
+          {modulesView === "list" && (
+            <div className="h-full overflow-y-auto">
+              <div className="flex justify-between h-full w-full">
+                <div className="flex flex-col h-full w-full overflow-y-auto">
+                  {modulesList.map((module) => (
+                    <ModuleListItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          )}
+          {modulesView === "grid" && (
+            <div className="h-full w-full">
+              <div className="flex justify-between h-full w-full">
+                <div
+                  className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
+                    peekModule
+                      ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                      : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+                  } auto-rows-max transition-all `}
+                >
+                  {modulesList.map((module) => (
+                    <ModuleCardItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          )}
+          {modulesView === "gantt_chart" && <ModulesListGanttChartView />}
+        </>
+      ) : (
+        <EmptyState
+          title="Manage your project with modules"
+          description="Modules are smaller, focused projects that help you group and organize issues."
+          image={emptyModule}
+          primaryButton={{
+            icon: <Plus className="h-4 w-4" />,
+            text: "New Module",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "m",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/app/components/modules/select/index.ts b/web/components/modules/select/index.ts
similarity index 100%
rename from apps/app/components/modules/select/index.ts
rename to web/components/modules/select/index.ts
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
new file mode 100644
index 00000000000..9e12e2017bf
--- /dev/null
+++ b/web/components/modules/select/lead.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, CustomSearchSelect } from "@plane/ui";
+// icons
+import { UserCircle } from "lucide-react";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string | null;
+  onChange: () => void;
+};
+
+const projectService = new ProjectService();
+
+export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <CustomSearchSelect
+      options={options}
+      value={value}
+      label={
+        <div className="flex items-center gap-2">
+          {selectedOption ? (
+            <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
+          ) : (
+            <UserCircle className="h-4 w-4 text-custom-text-200" />
+          )}
+          {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
+        </div>
+      }
+      onChange={onChange}
+      noChevron
+    />
+  );
+};
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
new file mode 100644
index 00000000000..94c74f05bb8
--- /dev/null
+++ b/web/components/modules/select/members.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[];
+  onChange: () => void;
+};
+
+const projectService = new ProjectService();
+
+export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-custom-text-200">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="flex items-center justify-center gap-2">
+              <AvatarGroup>
+                {value.map((assigneeId) => {
+                  const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                  if (!member) return null;
+
+                  return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                })}
+              </AvatarGroup>
+              <span className="text-custom-text-200">{value.length} Assignees</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <span className="text-custom-text-200">Assignee</span>
+            </div>
+          )}
+        </div>
+      }
+      options={options}
+      onChange={onChange}
+      maxHeight="md"
+      multiple
+      noChevron
+    />
+  );
+};
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
new file mode 100644
index 00000000000..c4bc6ea6095
--- /dev/null
+++ b/web/components/modules/select/status.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+// react hook form
+import { Controller, FieldError, Control } from "react-hook-form";
+// ui
+import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
+// types
+import type { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  control: Control<IModule, any>;
+  error?: FieldError;
+};
+
+export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
+  <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 ${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}
+        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>
+    )}
+  />
+);
diff --git a/apps/app/components/modules/sidebar-select/index.ts b/web/components/modules/sidebar-select/index.ts
similarity index 100%
rename from apps/app/components/modules/sidebar-select/index.ts
rename to web/components/modules/sidebar-select/index.ts
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
new file mode 100644
index 00000000000..5d7e5f41900
--- /dev/null
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@@ -0,0 +1,77 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, CustomSearchSelect } from "@plane/ui";
+// icons
+import { ChevronDown, UserCircle2 } from "lucide-react";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string | null | undefined;
+  onChange: (val: string) => void;
+};
+
+const projectService = new ProjectService();
+
+export const SidebarLeadSelect: FC<Props> = (props) => {
+  const { value, onChange } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // fetch project members
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <div className="flex items-center justify-start gap-1">
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserCircle2 className="h-4 w-4" />
+        <span className="text-base">Lead</span>
+      </div>
+      <div className="flex items-center w-1/2 rounded-sm">
+        <CustomSearchSelect
+          className="w-full rounded-sm"
+          value={value}
+          customButtonClassName="rounded-sm"
+          customButton={
+            selectedOption ? (
+              <div className="flex items-center justify-start gap-2 p-0.5 w-full">
+                <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
+                <span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No lead</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
+          }
+          options={options}
+          maxHeight="md"
+          onChange={onChange}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
new file mode 100644
index 00000000000..98a57692c80
--- /dev/null
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { ProjectService } from "services/project";
+// ui
+import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
+// icons
+import { ChevronDown } from "lucide-react";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[] | undefined;
+  onChange: (val: string[]) => void;
+};
+
+// services
+const projectService = new ProjectService();
+
+export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  return (
+    <div className="flex items-center justify-start gap-1">
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserGroupIcon className="h-4 w-4" />
+        <span className="text-base">Members</span>
+      </div>
+      <div className="flex items-center w-1/2 rounded-sm ">
+        <CustomSearchSelect
+          className="w-full rounded-sm"
+          value={value ?? []}
+          customButtonClassName="rounded-sm"
+          customButton={
+            value && value.length > 0 && Array.isArray(value) ? (
+              <div className="px-1">
+                <AvatarGroup showTooltip={false}>
+                  {value.map((assigneeId) => {
+                    const member = members?.find((m) => m.member.id === assigneeId)?.member;
+
+                    if (!member) return null;
+
+                    return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+                  })}
+                </AvatarGroup>
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No members</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
+          }
+          options={options}
+          onChange={onChange}
+          maxHeight="md"
+          multiple
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
similarity index 75%
rename from apps/app/components/modules/sidebar-select/select-status.tsx
rename to web/components/modules/sidebar-select/select-status.tsx
index f67f402228b..9a1a31c34fa 100644
--- a/apps/app/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -3,9 +3,7 @@ import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
 // ui
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { CustomSelect } from "components/ui";
-// icons
+import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
 import { IModule } from "types";
 // common
@@ -21,7 +19,7 @@ type Props = {
 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">
-      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
       <p>Status</p>
     </div>
     <div className="sm:basis-1/2">
@@ -31,11 +29,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
         render={({ field: { value } }) => (
           <CustomSelect
             label={
-              <span
-                className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-custom-text-100"
-                }`}
-              >
+              <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={{
@@ -53,10 +47,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
             {MODULE_STATUS.map((option) => (
               <CustomSelect.Option key={option.value} value={option.value}>
                 <>
-                  <span
-                    className="h-2 w-2 flex-shrink-0 rounded-full"
-                    style={{ backgroundColor: option.color }}
-                  />
+                  <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
                   {option.label}
                 </>
               </CustomSelect.Option>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
new file mode 100644
index 00000000000..825a8cf617f
--- /dev/null
+++ b/web/components/modules/sidebar.tsx
@@ -0,0 +1,514 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+import { Controller, useForm } from "react-hook-form";
+import { Disclosure, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ModuleService } from "services/module.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
+import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
+import ProgressChart from "components/core/sidebar/progress-chart";
+// ui
+import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon } from "@plane/ui";
+// icon
+import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
+// helpers
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
+// types
+import { linkDetails, IModule, ModuleLink } from "types";
+// fetch-keys
+import { MODULE_DETAILS } from "constants/fetch-keys";
+// constant
+import { MODULE_STATUS } from "constants/module";
+
+const defaultValues: Partial<IModule> = {
+  lead: "",
+  members: [],
+  start_date: null,
+  target_date: null,
+  status: "backlog",
+};
+
+type Props = {
+  moduleId: string;
+  handleClose: () => void;
+};
+
+// services
+const moduleService = new ModuleService();
+
+// TODO: refactor this component
+export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { moduleId, handleClose } = props;
+
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+  const [moduleLinkModal, setModuleLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekModule } = router.query;
+
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser ?? undefined;
+  const userRole = userStore.currentProjectRole;
+  const moduleDetails = moduleStore.moduleDetails[moduleId] ?? undefined;
+
+  const { setToastAlert } = useToast();
+
+  const { reset, control } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = (data: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    mutate<IModule>(
+      MODULE_DETAILS(moduleId as string),
+      (prevData) => ({
+        ...(prevData as IModule),
+        ...data,
+      }),
+      false
+    );
+
+    moduleService
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, data, user)
+      .then(() => mutate(MODULE_DETAILS(moduleId as string)))
+      .catch((e) => console.log(e));
+  };
+
+  const handleCreateLink = async (formData: ModuleLink) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    await moduleService
+      .createModuleLink(workspaceSlug as string, projectId as string, moduleId as string, payload)
+      .then(() => mutate(MODULE_DETAILS(moduleId as string)))
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "This URL already exists for this module.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    const payload = { metadata: {}, ...formData };
+
+    const updatedLinks = moduleDetails.link_module.map((l) =>
+      l.id === linkId
+        ? {
+            ...l,
+            title: formData.title,
+            url: formData.url,
+          }
+        : l
+    );
+
+    mutate<IModule>(
+      MODULE_DETAILS(module.id),
+      (prevData) => ({ ...(prevData as IModule), link_module: updatedLinks }),
+      false
+    );
+
+    await moduleService
+      .updateModuleLink(workspaceSlug as string, projectId as string, module.id, linkId, payload)
+      .then(() => {
+        mutate(MODULE_DETAILS(module.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !module) return;
+
+    const updatedLinks = moduleDetails.link_module.filter((l) => l.id !== linkId);
+
+    mutate<IModule>(
+      MODULE_DETAILS(module.id),
+      (prevData) => ({ ...(prevData as IModule), link_module: updatedLinks }),
+      false
+    );
+
+    await moduleService
+      .deleteModuleLink(workspaceSlug as string, projectId as string, module.id, linkId)
+      .then(() => {
+        mutate(MODULE_DETAILS(module.id));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleCopyText = () => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Link copied",
+          message: "Module link copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred",
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (moduleDetails)
+      reset({
+        ...moduleDetails,
+      });
+  }, [moduleDetails, reset]);
+
+  const isStartValid = new Date(`${moduleDetails?.start_date}`) <= new Date();
+  const isEndValid = new Date(`${moduleDetails?.target_date}`) >= new Date(`${moduleDetails?.start_date}`);
+
+  const progressPercentage = moduleDetails
+    ? Math.round((moduleDetails.completed_issues / moduleDetails.total_issues) * 100)
+    : null;
+
+  const handleEditLink = (link: linkDetails) => {
+    console.log("link", link);
+    setSelectedLinkToUpdate(link);
+    setModuleLinkModal(true);
+  };
+
+  if (!moduleDetails) return null;
+
+  const startDate = new Date(moduleDetails.start_date ?? "");
+  const endDate = new Date(moduleDetails.target_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount =
+    moduleDetails.total_issues === 0
+      ? "0 Issue"
+      : moduleDetails.total_issues === moduleDetails.completed_issues
+      ? moduleDetails.total_issues > 1
+        ? `${moduleDetails.total_issues}`
+        : `${moduleDetails.total_issues}`
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+
+  return (
+    <>
+      <LinkModal
+        isOpen={moduleLinkModal}
+        handleClose={() => {
+          setModuleLinkModal(false);
+          setSelectedLinkToUpdate(null);
+        }}
+        data={selectedLinkToUpdate}
+        status={selectedLinkToUpdate ? true : false}
+        createIssueLink={handleCreateLink}
+        updateIssueLink={handleUpdateLink}
+      />
+      <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
+      {module ? (
+        <>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              <button
+                className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                onClick={() => handleClose()}
+              >
+                <ChevronRight className="h-3 w-3 text-white stroke-2" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3.5">
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+              <CustomMenu width="lg" ellipsis>
+                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-4 w-4" />
+                    <span>Delete</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
+            <div className="flex items-center gap-5">
+              <Controller
+                control={control}
+                name="status"
+                render={({ field: { value } }) => (
+                  <CustomSelect
+                    customButton={
+                      <span
+                        className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus?.textColor} ${moduleStatus?.bgColor}`}
+                      >
+                        {moduleStatus?.label ?? "Backlog"}
+                      </span>
+                    }
+                    value={value}
+                    onChange={(value: any) => {
+                      submitChanges({ status: value });
+                    }}
+                  >
+                    {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>
+                )}
+              />
+
+              <span className="text-sm text-custom-text-300 font-mediu cursor-default">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            </div>
+          </div>
+
+          {moduleDetails.description && (
+            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+              {moduleDetails.description}
+            </span>
+          )}
+
+          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value } }) => (
+                <SidebarLeadSelect
+                  value={value}
+                  onChange={(val: string) => {
+                    submitChanges({ lead: val });
+                  }}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value } }) => (
+                <SidebarMembersSelect
+                  value={value}
+                  onChange={(val: string[]) => {
+                    submitChanges({ members: val });
+                  }}
+                />
+              )}
+            />
+
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <LayersIcon className="h-4 w-4" />
+                <span className="text-base">Issues</span>
+              </div>
+              <div className="flex items-center w-1/2">
+                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Progress</span>
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        {progressPercentage ? (
+                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
+                            {progressPercentage ? `${progressPercentage}%` : ""}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                        {isStartValid && isEndValid ? (
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        ) : (
+                          <div className="flex items-center gap-1">
+                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                            <span className="text-xs italic text-custom-text-200">
+                              Invalid date. Please enter valid date.
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </Disclosure.Button>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        <div className="flex flex-col gap-3">
+                          {isStartValid && isEndValid ? (
+                            <div className=" h-full w-full pt-4">
+                              <div className="flex  items-start  gap-4 py-2 text-xs">
+                                <div className="flex items-center gap-3 text-custom-text-100">
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <span>Ideal</span>
+                                  </div>
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                    <span>Current</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="relative h-40 w-80">
+                                <ProgressChart
+                                  distribution={moduleDetails.distribution.completion_chart}
+                                  startDate={moduleDetails.start_date ?? ""}
+                                  endDate={moduleDetails.target_date ?? ""}
+                                  totalIssues={moduleDetails.total_issues}
+                                />
+                              </div>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                          {moduleDetails.total_issues > 0 && (
+                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
+                              <SidebarProgressStats
+                                distribution={moduleDetails.distribution}
+                                groupedIssues={{
+                                  backlog: moduleDetails.backlog_issues,
+                                  unstarted: moduleDetails.unstarted_issues,
+                                  started: moduleDetails.started_issues,
+                                  completed: moduleDetails.completed_issues,
+                                  cancelled: moduleDetails.cancelled_issues,
+                                }}
+                                totalIssues={moduleDetails.total_issues}
+                                module={moduleDetails}
+                                isPeekView={Boolean(peekModule)}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Links</span>
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        <ChevronDown
+                          className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
+                          aria-hidden="true"
+                        />
+                      </div>
+                    </Disclosure.Button>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
+                          {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                            <>
+                              <div className="flex items-center justify-end w-full">
+                                <button
+                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                  Add link
+                                </button>
+                              </div>
+
+                              <LinksList
+                                links={moduleDetails.link_module}
+                                handleEditLink={handleEditLink}
+                                handleDeleteLink={handleDeleteLink}
+                                userAuth={{
+                                  isGuest: userRole === 5,
+                                  isViewer: userRole === 10,
+                                  isMember: userRole === 15,
+                                  isOwner: userRole === 20,
+                                }}
+                              />
+                            </>
+                          ) : (
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="flex items-center gap-2">
+                                <Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
+                                <span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
+                              </div>
+                              <button
+                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                onClick={() => setModuleLinkModal(true)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                Add link
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5">
+          <div className="space-y-2">
+            <Loader.Item height="15px" width="50%" />
+            <Loader.Item height="15px" width="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/apps/app/components/notifications/index.ts b/web/components/notifications/index.ts
similarity index 100%
rename from apps/app/components/notifications/index.ts
rename to web/components/notifications/index.ts
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
new file mode 100644
index 00000000000..978d13f0ae3
--- /dev/null
+++ b/web/components/notifications/notification-card.tsx
@@ -0,0 +1,250 @@
+import React from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
+// constants
+import { snoozeOptions } from "constants/notification";
+// helper
+import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
+import {
+  formatDateDistance,
+  render12HourFormatTime,
+  renderLongDateFormat,
+  renderShortDate,
+  renderShortDateWithYearFormat,
+} from "helpers/date-time.helper";
+// type
+import type { IUserNotification } from "types";
+
+type NotificationCardProps = {
+  notification: IUserNotification;
+  isSnoozedTabOpen: boolean;
+  markNotificationReadStatus: (notificationId: string) => Promise<void>;
+  markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
+  markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
+  setSelectedNotificationForSnooze: (notificationId: string) => void;
+  markSnoozeNotification: (notificationId: string, dateTime?: Date | undefined) => Promise<void>;
+};
+
+export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
+  const {
+    notification,
+    isSnoozedTabOpen,
+    markNotificationReadStatus,
+    markNotificationReadStatusToggle,
+    markNotificationArchivedStatus,
+    setSelectedNotificationForSnooze,
+    markSnoozeNotification,
+  } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
+
+  return (
+    <div
+      onClick={() => {
+        markNotificationReadStatus(notification.id);
+        router.push(
+          `/${workspaceSlug}/projects/${notification.project}/${
+            notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues"
+          }/${notification.data.issue.id}`
+        );
+      }}
+      className={`group w-full flex items-center gap-4 p-3 pl-6 relative cursor-pointer ${
+        notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
+      }`}
+    >
+      {notification.read_at === null && (
+        <span className="absolute top-1/2 left-2 -translate-y-1/2 w-1.5 h-1.5 bg-custom-primary-100 rounded-full" />
+      )}
+      <div className="relative w-12 h-12 rounded-full">
+        {notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (
+          <div className="h-12 w-12 rounded-full">
+            <Image
+              src={notification.triggered_by_details.avatar}
+              alt="Profile Image"
+              layout="fill"
+              objectFit="cover"
+              className="rounded-full"
+            />
+          </div>
+        ) : (
+          <div className="w-12 h-12 bg-custom-background-80 rounded-full flex justify-center items-center">
+            <span className="text-custom-text-100 font-medium text-lg">
+              {notification.triggered_by_details.is_bot ? (
+                notification.triggered_by_details.first_name?.[0]?.toUpperCase()
+              ) : notification.triggered_by_details.display_name?.[0] ? (
+                notification.triggered_by_details.display_name?.[0]?.toUpperCase()
+              ) : (
+                <User2 className="h-4 w-4" />
+              )}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="space-y-2.5 w-full overflow-hidden">
+        {!notification.message ? (
+          <div className="text-sm w-full break-words">
+            <span className="font-semibold">
+              {notification.triggered_by_details.is_bot
+                ? notification.triggered_by_details.first_name
+                : notification.triggered_by_details.display_name}{" "}
+            </span>
+            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
+            {notification.data.issue_activity.field === "comment"
+              ? "commented"
+              : notification.data.issue_activity.field === "None"
+              ? null
+              : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
+            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
+              ? "to"
+              : ""}
+            <span className="font-semibold">
+              {" "}
+              {notification.data.issue_activity.field !== "None" ? (
+                notification.data.issue_activity.field !== "comment" ? (
+                  notification.data.issue_activity.field === "target_date" ? (
+                    renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
+                  ) : notification.data.issue_activity.field === "attachment" ? (
+                    "the issue"
+                  ) : notification.data.issue_activity.field === "description" ? (
+                    stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+                  ) : (
+                    notification.data.issue_activity.new_value
+                  )
+                ) : (
+                  <span>
+                    {`"`}
+                    {notification.data.issue_activity.new_value.length > 55
+                      ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
+                      : notification.data.issue_activity.issue_comment}
+                    {`"`}
+                  </span>
+                )
+              ) : (
+                "the issue and assigned it to you."
+              )}
+            </span>
+          </div>
+        ) : (
+          <div className="text-sm w-full break-words">
+            <span className="semi-bold">{notification.message}</span>
+          </div>
+        )}
+
+        <div className="flex justify-between gap-2 text-xs">
+          <p className="text-custom-text-300">
+            {truncateText(
+              `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
+              50
+            )}
+          </p>
+          {notification.snoozed_till ? (
+            <p className="text-custom-text-300 flex items-center justify-end gap-x-1 flex-shrink-0">
+              <Clock className="h-4 w-4" />
+              <span>
+                Till {renderShortDate(notification.snoozed_till)}, {render12HourFormatTime(notification.snoozed_till)}
+              </span>
+            </p>
+          ) : (
+            <p className="text-custom-text-300 flex-shrink-0">{formatDateDistance(notification.created_at)}</p>
+          )}
+        </div>
+      </div>
+      <div className="absolute py-1 gap-x-3 right-3 top-3 hidden group-hover:flex">
+        {[
+          {
+            id: 1,
+            name: notification.read_at ? "Mark as unread" : "Mark as read",
+            icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
+            onClick: () => {
+              markNotificationReadStatusToggle(notification.id).then(() => {
+                setToastAlert({
+                  title: notification.read_at ? "Notification marked as unread" : "Notification marked as read",
+                  type: "success",
+                });
+              });
+            },
+          },
+          {
+            id: 2,
+            name: notification.archived_at ? "Unarchive" : "Archive",
+            icon: notification.archived_at ? (
+              <ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
+            ) : (
+              <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
+            ),
+            onClick: () => {
+              markNotificationArchivedStatus(notification.id).then(() => {
+                setToastAlert({
+                  title: notification.archived_at ? "Notification un-archived" : "Notification archived",
+                  type: "success",
+                });
+              });
+            },
+          },
+        ].map((item) => (
+          <Tooltip tooltipContent={item.name}>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                item.onClick();
+              }}
+              key={item.id}
+              className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded outline-none"
+            >
+              {item.icon}
+            </button>
+          </Tooltip>
+        ))}
+
+        <Tooltip tooltipContent="Snooze">
+          <CustomMenu
+            className="flex items-center"
+            menuButtonOnClick={(e: { stopPropagation: () => void }) => {
+              e.stopPropagation();
+            }}
+            customButton={
+              <div className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded">
+                <Clock className="h-3.5 w-3.5 text-custom-text-300" />
+              </div>
+            }
+            optionsClassName="!z-20"
+          >
+            {snoozeOptions.map((item) => (
+              <CustomMenu.MenuItem
+                key={item.label}
+                onClick={(e) => {
+                  e.stopPropagation();
+
+                  if (!item.value) {
+                    setSelectedNotificationForSnooze(notification.id);
+                    return;
+                  }
+
+                  markSnoozeNotification(notification.id, item.value).then(() => {
+                    setToastAlert({
+                      title: `Notification snoozed till ${renderLongDateFormat(item.value)}`,
+                      type: "success",
+                    });
+                  });
+                }}
+              >
+                {item.label}
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
similarity index 88%
rename from apps/app/components/notifications/notification-header.tsx
rename to web/components/notifications/notification-header.tsx
index 0d181da985b..44bce904900 100644
--- a/apps/app/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-
-// components
-import { CustomMenu, Icon, Tooltip } from "components/ui";
+import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
+// ui
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
-
 // type
 import type { NotificationType, NotificationCount } from "types";
 
@@ -75,7 +74,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 notificationMutate();
               }}
             >
-              <Icon iconName="refresh" className={`${isRefreshing ? "animate-spin" : ""}`} />
+              <RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? "animate-spin" : ""}`} />
             </button>
           </Tooltip>
           <Tooltip tooltipContent="Unread notifications">
@@ -87,24 +86,23 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setReadNotification((prev) => !prev);
               }}
             >
-              <Icon iconName="filter_list" />
+              <ListFilter className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
           <CustomMenu
             customButton={
               <div className="grid place-items-center ">
-                <Icon iconName="more_vert" />
+                <MoreVertical className="h-3.5 w-3.5" />
               </div>
             }
           >
-            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
+            <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
               <div className="flex items-center gap-2">
-                <Icon iconName="done_all" />
+                <CheckCheck className="h-3.5 w-3.5" />
                 Mark all as read
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
@@ -112,12 +110,11 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="schedule" />
+                <Clock className="h-3.5 w-3.5" />
                 Show snoozed
               </div>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
-              renderAs="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
@@ -125,14 +122,14 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="archive" />
+                <ArchiveIcon className="h-3.5 w-3.5" />
                 Show archived
               </div>
             </CustomMenu.MenuItem>
           </CustomMenu>
           <Tooltip tooltipContent="Close">
             <button type="button" onClick={() => closePopover()}>
-              <Icon iconName="close" />
+              <X className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
         </div>
@@ -148,7 +145,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
             }}
           >
             <h4 className="flex items-center gap-2 pb-4">
-              <Icon iconName="arrow_back" />
+              <ArrowLeft className="h-3.5 w-3.5" />
               <span className="ml-2 font-medium">
                 {snoozed
                   ? "Snoozed Notifications"
diff --git a/apps/app/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
similarity index 87%
rename from apps/app/components/notifications/notification-popover.tsx
rename to web/components/notifications/notification-popover.tsx
index 3eadc909622..dc6f84198bc 100644
--- a/apps/app/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -1,22 +1,13 @@
 import React, { Fragment } from "react";
-
-// hooks
-import useTheme from "hooks/use-theme";
-
 import { Popover, Transition } from "@headlessui/react";
-
+import { Bell } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import useUserNotification from "hooks/use-user-notifications";
-
 // components
-import { Loader, EmptyState, Tooltip } from "components/ui";
-import {
-  SnoozeNotificationModal,
-  NotificationCard,
-  NotificationHeader,
-} from "components/notifications";
-// icons
-import { NotificationsOutlined } from "@mui/icons-material";
+import { EmptyState } from "components/common";
+import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
+import { Loader, Tooltip } from "@plane/ui";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
@@ -24,8 +15,8 @@ import { getNumberCount } from "helpers/string.helper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export const NotificationPopover = () => {
-  const store: any = useMobxStore();
+export const NotificationPopover = observer(() => {
+  const { theme: themeStore } = useMobxStore();
 
   const {
     notifications,
@@ -54,8 +45,7 @@ export const NotificationPopover = () => {
     markAllNotificationsAsRead,
   } = useUserNotification();
 
-  // theme context
-  const { collapsed: sidebarCollapse } = useTheme();
+  const isSidebarCollapsed = themeStore.sidebarCollapsed;
 
   return (
     <>
@@ -63,11 +53,7 @@ export const NotificationPopover = () => {
         isOpen={selectedNotificationForSnooze !== null}
         onClose={() => setSelectedNotificationForSnooze(null)}
         onSubmit={markSnoozeNotification}
-        notification={
-          notifications?.find(
-            (notification) => notification.id === selectedNotificationForSnooze
-          ) || null
-        }
+        notification={notifications?.find((notification) => notification.id === selectedNotificationForSnooze) || null}
         onSuccess={() => {
           setSelectedNotificationForSnooze(null);
         }}
@@ -78,23 +64,18 @@ export const NotificationPopover = () => {
 
           return (
             <>
-              <Tooltip
-                tooltipContent="Notifications"
-                position="right"
-                className="ml-2"
-                disabled={!store?.theme?.sidebarCollapsed}
-              >
+              <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <Popover.Button
                   className={`relative group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                  } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
+                  } ${isSidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  <NotificationsOutlined fontSize="small" />
-                  {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
+                  <Bell className="h-4 w-4" />
+                  {isSidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
-                    store?.theme?.sidebarCollapsed ? (
+                    isSidebarCollapsed ? (
                       <span className="absolute right-3.5 top-2 h-2 w-2 bg-custom-primary-300 rounded-full" />
                     ) : (
                       <span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
@@ -137,6 +118,7 @@ export const NotificationPopover = () => {
                           {notifications.map((notification) => (
                             <NotificationCard
                               key={notification.id}
+                              isSnoozedTabOpen={snoozed}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}
@@ -189,7 +171,6 @@ export const NotificationPopover = () => {
                           title="您将收到所有最新通知"
                           description="您已阅读所有通知"
                           image={emptyNotification}
-                          isFullScreen={false}
                         />
                       </div>
                     )
@@ -210,4 +191,4 @@ export const NotificationPopover = () => {
       </Popover>
     </>
   );
-};
+});
diff --git a/apps/app/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
similarity index 86%
rename from apps/app/components/notifications/select-snooze-till-modal.tsx
rename to web/components/notifications/select-snooze-till-modal.tsx
index ded583be558..4cc13a50d89 100644
--- a/apps/app/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -1,28 +1,15 @@
-import React, { Fragment } from "react";
-
-// next
+import { Fragment, FC } from "react";
 import { useRouter } from "next/router";
-
-// react hook form
 import { useForm, Controller } from "react-hook-form";
-
-import { Transition, Dialog, Listbox } from "@headlessui/react";
-
+import { Transition, Dialog } from "@headlessui/react";
+import { X } from "lucide-react";
 // date helper
 import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
-
 // hooks
 import useToast from "hooks/use-toast";
-
-// components
-import {
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  CustomDatePicker,
-  CustomSelect,
-} from "components/ui";
-
+// ui
+import { Button, CustomSelect } from "@plane/ui";
+import { CustomDatePicker } from "components/ui";
 // types
 import type { IUserNotification } from "types";
 
@@ -48,7 +35,7 @@ const defaultValues: FormValues = {
 
 const timeStamps = getAllTimeIn30MinutesInterval();
 
-export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
+export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
   const { isOpen, onClose, notification, onSuccess, onSubmit: handleSubmitSnooze } = props;
 
   const router = useRouter();
@@ -114,8 +101,8 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
       handleClose();
       onSuccess();
       setToastAlert({
-        title: "通知已忽略",
-        message: "通知已成功忽略",
+        title: "Notification snoozed",
+        message: "Notification snoozed successfully",
         type: "success",
       });
     });
@@ -130,10 +117,10 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -147,7 +134,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex items-center justify-center min-h-full p-4 text-center">
             <Transition.Child
-              as={React.Fragment}
+              as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -158,25 +145,20 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex justify-between items-center">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
-                      自定义打盹时间
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      Customize Snooze Time
                     </Dialog.Title>
 
                     <div>
                       <button type="button" onClick={handleClose}>
-                        <Icon iconName="close" className="w-5 h-5 text-custom-text-100" />
+                        <X className="w-5 h-5 text-custom-text-100" />
                       </button>
                     </div>
                   </div>
 
                   <div className="mt-5 flex items-center gap-3">
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a date
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a date</h6>
                       <Controller
                         name="date"
                         control={control}
@@ -190,6 +172,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                               onChange(val);
                             }}
                             className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
                           />
@@ -197,9 +180,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                       />
                     </div>
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a time
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a time</h6>
                       <Controller
                         control={control}
                         name="time"
@@ -215,9 +196,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                     {value} {watch("period").toLowerCase()}
                                   </span>
                                 ) : (
-                                  <span className="text-custom-text-400 text-sm">
-                                    Select a time
-                                  </span>
+                                  <span className="text-custom-text-400 text-sm">Select a time</span>
                                 )}
                               </div>
                             }
@@ -259,9 +238,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                 </CustomSelect.Option>
                               ))
                             ) : (
-                              <p className="text-custom-text-200 text-center p-3">
-                                No available time for this date.
-                              </p>
+                              <p className="text-custom-text-200 text-center p-3">No available time for this date.</p>
                             )}
                           </CustomSelect>
                         )}
@@ -271,10 +248,12 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <div className="w-full flex items-center gap-2 justify-end">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Submitting..." : "Submit"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/apps/app/components/onboarding/index.ts b/web/components/onboarding/index.ts
similarity index 100%
rename from apps/app/components/onboarding/index.ts
rename to web/components/onboarding/index.ts
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
new file mode 100644
index 00000000000..08617ca711b
--- /dev/null
+++ b/web/components/onboarding/invite-members.tsx
@@ -0,0 +1,271 @@
+import React, { useEffect, useRef, useState } from "react";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// react-hook-form
+import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Input } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// icons
+import { Check, ChevronDown, Plus, X } from "lucide-react";
+// types
+import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
+// constants
+import { ROLE } from "constants/workspace";
+
+type Props = {
+  finishOnboarding: () => Promise<void>;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  user: IUser | undefined;
+  workspace: IWorkspace | undefined;
+};
+
+type EmailRole = {
+  email: string;
+  role: TUserWorkspaceRole;
+};
+
+type FormValues = {
+  emails: EmailRole[];
+};
+
+type InviteMemberFormProps = {
+  index: number;
+  remove: UseFieldArrayRemove;
+  control: Control<FormValues, any>;
+  field: FieldArrayWithId<FormValues, "emails", "id">;
+  fields: FieldArrayWithId<FormValues, "emails", "id">[];
+  errors: any;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
+  const { control, index, fields, remove, errors } = props;
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
+
+  return (
+    <div className="group relative grid grid-cols-11 gap-4">
+      <div className="col-span-7">
+        <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="text-xs sm:text-sm w-full"
+            />
+          )}
+        />
+      </div>
+      <div className="col-span-3">
+        <Controller
+          control={control}
+          name={`emails.${index}.role`}
+          rules={{ required: true }}
+          render={({ field: { value, onChange } }) => (
+            <Listbox
+              as="div"
+              value={value}
+              onChange={(val) => {
+                onChange(val);
+                setIsDropdownOpen(false);
+              }}
+              className="flex-shrink-0 text-left w-full"
+            >
+              <Listbox.Button
+                type="button"
+                ref={buttonRef}
+                onClick={() => setIsDropdownOpen((prev) => !prev)}
+                className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
+              >
+                <span className="text-xs sm:text-sm">{ROLE[value]}</span>
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+              </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 w-36 z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
+                >
+                  <div className="space-y-1 p-2">
+                    {Object.entries(ROLE).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-custom-background-80" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">{value}</div>
+                            {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
+              </Transition>
+            </Listbox>
+          )}
+        />
+      </div>
+      {fields.length > 1 && (
+        <button
+          type="button"
+          className="hidden group-hover:grid self-center place-items-center rounded -ml-3"
+          onClick={() => remove(index)}
+        >
+          <X className="h-3.5 w-3.5 text-custom-text-200" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export const InviteMembers: React.FC<Props> = (props) => {
+  const { finishOnboarding, stepChange, user, workspace } = props;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const nextStep = async () => {
+    const payload: Partial<TOnboardingSteps> = {
+      workspace_invite: true,
+      workspace_join: true,
+    };
+
+    await stepChange(payload);
+    await finishOnboarding();
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspace) return;
+
+    const payload = { ...formData };
+
+    await workspaceService
+      .inviteWorkspace(workspace.slug, payload, user)
+      .then(async () => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+
+        await nextStep();
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const appendField = () => {
+    append({ email: "", role: 15 });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append([
+        { email: "", role: 15 },
+        { email: "", role: 15 },
+        { email: "", role: 15 },
+      ]);
+    }
+  }, [fields, append]);
+
+  return (
+    <form
+      className="w-full space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(e) => {
+        if (e.code === "Enter") e.preventDefault();
+      }}
+    >
+      <h2 className="text-xl sm:text-2xl font-semibold">Invite people to collaborate</h2>
+      <div className="md:w-3/5 text-sm h-full max-h-[40vh] flex flex-col overflow-hidden">
+        <div className="grid grid-cols-11 gap-x-4 mb-1 text-sm">
+          <h6 className="col-span-7">Co-workers Email</h6>
+          <h6 className="col-span-4">Role</h6>
+        </div>
+        <div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
+          {fields.map((field, index) => (
+            <InviteMemberForm
+              control={control}
+              errors={errors}
+              field={field}
+              fields={fields}
+              index={index}
+              remove={remove}
+              key={field.id}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3"
+          onClick={appendField}
+        >
+          <Plus className="h-3 w-3" />
+          Add another
+        </button>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
+          {isSubmitting ? "Sending..." : "Send Invite"}
+        </Button>
+        <Button variant="neutral-primary" size="md" onClick={nextStep}>
+          Skip this step
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
new file mode 100644
index 00000000000..d846614ddd8
--- /dev/null
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { CheckCircle } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types";
+// fetch-keys
+import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+type Props = {
+  finishOnboarding: () => Promise<void>;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  updateLastWorkspace: () => Promise<void>;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+
+  const { user } = useUser();
+
+  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  const handleNextStep = async () => {
+    if (!user) return;
+
+    await stepChange({ workspace_join: true });
+
+    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
+  };
+
+  const submitInvitations = async () => {
+    if (invitationsRespond.length <= 0) return;
+
+    setIsJoiningWorkspaces(true);
+
+    await workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(async () => {
+        await mutateInvitations();
+        await mutate(USER_WORKSPACES);
+        await updateLastWorkspace();
+
+        await handleNextStep();
+      })
+      .finally(() => setIsJoiningWorkspaces(false));
+  };
+
+  return (
+    <div className="w-full space-y-7 sm:space-y-10">
+      <h5 className="sm:text-lg">We see that someone has invited you to</h5>
+      <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
+      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
+        {invitations &&
+          invitations.map((invitation) => {
+            const isSelected = invitationsRespond.includes(invitation.id);
+
+            return (
+              <div
+                key={invitation.id}
+                className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
+                  isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80"
+                }`}
+                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+              >
+                <div className="flex-shrink-0">
+                  <div className="grid place-items-center h-9 w-9 rounded">
+                    {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                      <img
+                        src={invitation.workspace.logo}
+                        height="100%"
+                        width="100%"
+                        className="rounded"
+                        alt={invitation.workspace.name}
+                      />
+                    ) : (
+                      <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
+                        {invitation.workspace.name[0]}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
+                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                </div>
+                <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
+                  <CheckCircle className="h-5 w-5" />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant="primary"
+          type="submit"
+          size="md"
+          onClick={submitInvitations}
+          disabled={invitationsRespond.length === 0}
+          loading={isJoiningWorkspaces}
+        >
+          Accept & Join
+        </Button>
+        <Button variant="neutral-primary" size="md" onClick={handleNextStep}>
+          Skip for now
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/onboarding/tour/index.ts b/web/components/onboarding/tour/index.ts
similarity index 100%
rename from apps/app/components/onboarding/tour/index.ts
rename to web/components/onboarding/tour/index.ts
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
new file mode 100644
index 00000000000..713c1140ec3
--- /dev/null
+++ b/web/components/onboarding/tour/root.tsx
@@ -0,0 +1,173 @@
+import { useState } from "react";
+import Image from "next/image";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { TourSidebar } from "components/onboarding";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { X } from "lucide-react";
+// assets
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
+import IssuesTour from "public/onboarding/issues.webp";
+import CyclesTour from "public/onboarding/cycles.webp";
+import ModulesTour from "public/onboarding/modules.webp";
+import ViewsTour from "public/onboarding/views.webp";
+import PagesTour from "public/onboarding/pages.webp";
+
+type Props = {
+  onComplete: () => void;
+};
+
+export type TTourSteps = "welcome" | "issues" | "cycles" | "modules" | "views" | "pages";
+
+const TOUR_STEPS: {
+  key: TTourSteps;
+  title: string;
+  description: string;
+  image: any;
+  prevStep?: TTourSteps;
+  nextStep?: TTourSteps;
+}[] = [
+  {
+    key: "issues",
+    title: "Plan with issues",
+    description:
+      "The issue is the building block of the Plane. Most concepts in Plane are either associated with issues and their properties.",
+    image: IssuesTour,
+    nextStep: "cycles",
+  },
+  {
+    key: "cycles",
+    title: "Move with cycles",
+    description:
+      "Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
+    image: CyclesTour,
+    prevStep: "issues",
+    nextStep: "modules",
+  },
+  {
+    key: "modules",
+    title: "Break into modules",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
+    image: ModulesTour,
+    prevStep: "cycles",
+    nextStep: "views",
+  },
+  {
+    key: "views",
+    title: "Views",
+    description:
+      "Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.",
+    image: ViewsTour,
+    prevStep: "modules",
+    nextStep: "pages",
+  },
+  {
+    key: "pages",
+    title: "Document with pages",
+    description: "Use Pages to quickly jot down issues when you're in a meeting or starting a day.",
+    image: PagesTour,
+    prevStep: "views",
+  },
+];
+
+export const TourRoot: React.FC<Props> = observer((props) => {
+  const { onComplete } = props;
+  // states
+  const [step, setStep] = useState<TTourSteps>("welcome");
+
+  const { user: userStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
+  const currentStep = TOUR_STEPS[currentStepIndex];
+
+  return (
+    <>
+      {step === "welcome" ? (
+        <div className="w-4/5 md:w-1/2 lg:w-2/5 h-3/4 bg-custom-background-100 rounded-[10px] overflow-hidden">
+          <div className="h-full overflow-hidden">
+            <div className="h-3/5 bg-custom-primary-100 grid place-items-center">
+              <Image src={PlaneWhiteLogo} alt="Plane White Logo" />
+            </div>
+            <div className="h-2/5 flex flex-col overflow-y-auto p-6">
+              <h3 className="font-semibold sm:text-xl">
+                Welcome to Plane, {user?.first_name} {user?.last_name}
+              </h3>
+              <p className="text-custom-text-200 text-sm mt-3">
+                We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
+                started by creating a project.
+              </p>
+              <div className="flex items-end h-full">
+                <div className="flex items-center gap-6 mt-8">
+                  <Button variant="primary" onClick={() => setStep("issues")}>
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
+                    onClick={onComplete}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="relative w-4/5 md:w-1/2 lg:w-3/5 h-3/5 sm:h-3/4 bg-custom-background-100 rounded-[10px] grid grid-cols-10 overflow-hidden">
+          <button
+            type="button"
+            className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
+            onClick={onComplete}
+          >
+            <X className="h-3 w-3 text-custom-text-100" />
+          </button>
+          <TourSidebar step={step} setStep={setStep} />
+          <div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
+            <div
+              className={`flex items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
+              <Image src={currentStep?.image} alt={currentStep?.title} />
+            </div>
+            <div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto">
+              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
+              <p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p>
+              <div className="h-full flex items-end justify-between gap-4 mt-3">
+                <div className="flex items-center gap-4">
+                  {currentStep?.prevStep && (
+                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                      Back
+                    </Button>
+                  )}
+                  {currentStep?.nextStep && (
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "issues")}>
+                      Next
+                    </Button>
+                  )}
+                </div>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      onComplete();
+                      commandPaletteStore.toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create my first project
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
new file mode 100644
index 00000000000..dbabab4f567
--- /dev/null
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -0,0 +1,62 @@
+// icons
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { FileText } from "lucide-react";
+// types
+import { TTourSteps } from "./root";
+
+const sidebarOptions: {
+  key: TTourSteps;
+  Icon: any;
+}[] = [
+  {
+    key: "issues",
+    Icon: LayersIcon,
+  },
+  {
+    key: "cycles",
+    Icon: ContrastIcon,
+  },
+  {
+    key: "modules",
+    Icon: DiceIcon,
+  },
+  {
+    key: "views",
+    Icon: PhotoFilterIcon,
+  },
+  {
+    key: "pages",
+    Icon: FileText,
+  },
+];
+
+type Props = {
+  step: TTourSteps;
+  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
+};
+
+export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
+  <div className="hidden lg:block col-span-3 p-8 bg-custom-background-90">
+    <h3 className="font-medium text-lg">
+      Let{"'"}s get started!
+      <br />
+      Get more out of Plane.
+    </h3>
+    <div className="mt-8 space-y-5">
+      {sidebarOptions.map((option) => (
+        <h5
+          key={option.key}
+          className={`pr-2 py-0.5 pl-3 flex items-center gap-2 capitalize font-medium text-sm border-l-[3px] cursor-pointer ${
+            step === option.key
+              ? "text-custom-primary-100 border-custom-primary-100"
+              : "text-custom-text-200 border-transparent"
+          }`}
+          onClick={() => setStep(option.key)}
+        >
+          <option.Icon className="h-4 w-4" aria-hidden="true" />
+          {option.key}
+        </h5>
+      ))}
+    </div>
+  </div>
+);
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
new file mode 100644
index 00000000000..3e59668c689
--- /dev/null
+++ b/web/components/onboarding/user-details.tsx
@@ -0,0 +1,192 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
+// types
+import { IUser } from "types";
+// helpers
+import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
+// constants
+import { USER_ROLES } from "constants/workspace";
+import { TIME_ZONES } from "constants/timezones";
+
+const defaultValues: Partial<IUser> = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: IUser;
+};
+
+const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
+  value: timeZone.value,
+  query: timeZone.label + " " + timeZone.value,
+  content: timeZone.label,
+}));
+
+export const UserDetails: React.FC<Props> = observer((props) => {
+  const { user } = props;
+
+  const { user: userStore } = useMobxStore();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IUser>({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: IUser) => {
+    if (!user) return;
+
+    const payload: Partial<IUser> = {
+      ...formData,
+      onboarding_step: {
+        ...user.onboarding_step,
+        profile_complete: true,
+      },
+    };
+
+    await userStore.updateCurrentUser(payload);
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+        user_timezone: getUserTimeZoneFromWindow(),
+      });
+    }
+  }, [user, reset]);
+
+  return (
+    <form
+      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="relative sm:text-lg">
+        <div className="text-custom-primary-100 absolute -top-1 -left-3">{'"'}</div>
+        <h5>Hey there 👋🏻</h5>
+        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
+        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
+      </div>
+
+      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="firstName">First Name</label>
+          <Controller
+            control={control}
+            name="first_name"
+            rules={{
+              required: "First name is required",
+              maxLength: {
+                value: 24,
+                message: "First name cannot exceed the limit of 24 characters",
+              },
+            }}
+            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"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="lastName">Last Name</label>
+          <Controller
+            control={control}
+            name="last_name"
+            rules={{
+              required: "Last name is required",
+              maxLength: {
+                value: 24,
+                message: "Last name cannot exceed the limit of 24 characters",
+              },
+            }}
+            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"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What{"'"}s your role?</span>
+          <div className="w-full">
+            <Controller
+              name="role"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={(val: any) => onChange(val)}
+                  label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
+                  input
+                  width="w-full"
+                >
+                  {USER_ROLES.map((item) => (
+                    <CustomSelect.Option key={item.value} value={item.value}>
+                      {item.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+          </div>
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What time zone are you in? </span>
+          <div className="w-full">
+            <Controller
+              name="user_timezone"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSearchSelect
+                  value={value}
+                  label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
+                  options={timeZoneOptions}
+                  onChange={onChange}
+                  optionsClassName="w-full"
+                  input
+                />
+              )}
+            />
+            {errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
+          </div>
+        </div>
+      </div>
+
+      <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        {isSubmitting ? "Updating..." : "Continue"}
+      </Button>
+    </form>
+  );
+});
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
new file mode 100644
index 00000000000..916c91f5db2
--- /dev/null
+++ b/web/components/onboarding/workspace.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { IUser, IWorkspace, TOnboardingSteps } from "types";
+// constants
+import { CreateWorkspaceForm } from "components/workspace";
+
+type Props = {
+  finishOnboarding: () => Promise<void>;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  updateLastWorkspace: () => Promise<void>;
+  user: IUser | undefined;
+  workspaces: IWorkspace[] | undefined;
+};
+
+export const Workspace: React.FC<Props> = (props) => {
+  const { finishOnboarding, stepChange, updateLastWorkspace, user, workspaces } = props;
+
+  const [defaultValues, setDefaultValues] = useState({
+    name: "",
+    slug: "",
+    organization_size: "",
+  });
+
+  const completeStep = async () => {
+    if (!user) return;
+
+    const payload: Partial<TOnboardingSteps> = {
+      workspace_create: true,
+    };
+
+    await stepChange(payload);
+    await updateLastWorkspace();
+  };
+
+  const secondaryButtonAction = async () => {
+    if (workspaces && workspaces.length > 0) {
+      await stepChange({ workspace_create: true, workspace_invite: true, workspace_join: true });
+      await finishOnboarding();
+    } else await stepChange({ profile_complete: false, workspace_join: false });
+  };
+
+  return (
+    <div className="w-full space-y-7 sm:space-y-10">
+      <h4 className="text-xl sm:text-2xl font-semibold">Create your workspace</h4>
+      <div className="sm:w-3/4 md:w-2/5">
+        <CreateWorkspaceForm
+          onSubmit={completeStep}
+          defaultValues={defaultValues}
+          setDefaultValues={setDefaultValues}
+          primaryButtonText={{
+            loading: "Creating...",
+            default: "Continue",
+          }}
+          secondaryButton={
+            workspaces ? (
+              <Button variant="neutral-primary" onClick={secondaryButtonAction}>
+                {workspaces.length > 0 ? "Skip & continue" : "Back"}
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/page-views/index.ts b/web/components/page-views/index.ts
new file mode 100644
index 00000000000..93928bede3f
--- /dev/null
+++ b/web/components/page-views/index.ts
@@ -0,0 +1,2 @@
+export * from "./signin";
+export * from "./workspace-dashboard";
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
new file mode 100644
index 00000000000..ccaa7d2c3c9
--- /dev/null
+++ b/web/components/page-views/signin.tsx
@@ -0,0 +1,245 @@
+import { useState, useEffect, useCallback } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { AuthService } from "services/auth.service";
+import { AppConfigService } from "services/app_config.service";
+// components
+import {
+  GoogleLoginButton,
+  GithubLoginButton,
+  EmailCodeForm,
+  EmailPasswordForm,
+  EmailPasswordFormValues,
+} from "components/account";
+// ui
+import { Loader, Spinner } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
+import { IUser, IUserSettings } from "types";
+
+const appConfigService = new AppConfigService();
+const authService = new AuthService();
+
+export const SignInView = observer(() => {
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { next: next_url } = router.query as { next: string };
+  // states
+  const [isLoading, setLoading] = useState(false);
+  // toast
+  const { setToastAlert } = useToast();
+  // fetch app config
+  const { data, error: appConfigError } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
+  // computed
+  const enableEmailPassword =
+    data &&
+    (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
+
+  const handleLoginRedirection = useCallback(
+    (user: IUser) => {
+      // if the user is not onboarded, redirect them to the onboarding page
+      if (!user.is_onboarded) {
+        router.push("/onboarding");
+        return;
+      }
+      // if next_url is provided, redirect the user to that url
+      if (next_url) {
+        router.push(next_url);
+        return;
+      }
+
+      // if the user is onboarded, fetch their last workspace details
+      fetchCurrentUserSettings()
+        .then((userSettings: IUserSettings) => {
+          const workspaceSlug =
+            userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+          if (workspaceSlug) router.push(`/${workspaceSlug}`);
+          else if (userSettings.workspace.invites > 0) router.push("/invitations");
+          else router.push("/create-workspace");
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    },
+    [fetchCurrentUserSettings, router, next_url]
+  );
+
+  const mutateUserInfo = useCallback(() => {
+    fetchCurrentUser().then((user) => {
+      handleLoginRedirection(user);
+    });
+  }, [fetchCurrentUser, handleLoginRedirection]);
+
+  useEffect(() => {
+    mutateUserInfo();
+  }, [mutateUserInfo]);
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      setLoading(true);
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authService.socialAuth(socialAuthPayload);
+        if (response) {
+          mutateUserInfo();
+        }
+      } else {
+        setLoading(false);
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        title: "Error signing in!",
+        type: "error",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      setLoading(true);
+      if (data && data.github && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: data.github,
+        };
+        const response = await authService.socialAuth(socialAuthPayload);
+        if (response) {
+          mutateUserInfo();
+        }
+      } else {
+        setLoading(false);
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        title: "Error signing in!",
+        type: "error",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  const handlePasswordSignIn = (formData: EmailPasswordFormValues) => {
+    setLoading(true);
+    return authService
+      .emailLogin(formData)
+      .then(() => {
+        mutateUserInfo();
+      })
+      .catch((err) => {
+        setLoading(false);
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+        });
+      });
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      setLoading(true);
+      if (response) {
+        mutateUserInfo();
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="grid place-items-center h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <>
+            <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+            <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+              <div className="grid place-items-center bg-custom-background-100">
+                <div className="h-[30px] w-[30px]">
+                  <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+                </div>
+              </div>
+            </div>
+          </>
+          <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+            <div>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+
+              {!data && !appConfigError ? (
+                <div className="pt-10 w-ful">
+                  <Loader className="space-y-4 w-full pb-4">
+                    <Loader.Item height="46px" width="360px" />
+                    <Loader.Item height="46px" width="360px" />
+                  </Loader>
+
+                  <Loader className="space-y-4 w-full pt-4">
+                    <Loader.Item height="46px" width="360px" />
+                    <Loader.Item height="46px" width="360px" />
+                  </Loader>
+                </div>
+              ) : (
+                <>
+                  <>
+                    {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+                    {data?.magic_login && (
+                      <div className="flex flex-col divide-y divide-custom-border-200">
+                        <div className="pb-7">
+                          <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                        </div>
+                      </div>
+                    )}
+                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                      {data?.google && <GoogleLoginButton clientId={data?.google} handleSignIn={handleGoogleSignIn} />}
+                      {data?.github && <GithubLoginButton clientId={data?.github} handleSignIn={handleGitHubSignIn} />}
+                    </div>
+                  </>
+                  <p className="pt-16 text-custom-text-200 text-sm text-center">
+                    By signing up, you agree to the{" "}
+                    <a
+                      href="https://plane.so/terms-and-conditions"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="font-medium underline"
+                    >
+                      Terms & Conditions
+                    </a>
+                  </p>
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+});
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
new file mode 100644
index 00000000000..5ed28b00b7e
--- /dev/null
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { TourRoot } from "components/onboarding";
+import { UserGreetingsView } from "components/user";
+import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
+import { Button } from "@plane/ui";
+// images
+import emptyDashboard from "public/empty-state/dashboard.svg";
+
+export const WorkspaceDashboardView = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+  const workspaceDashboardInfo = userStore.dashboardInfo;
+  // states
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+  // fetch user dashboard info
+  useSWR(
+    workspaceSlug ? `USER_WORKSPACE_DASHBOARD_${workspaceSlug}_${month}` : null,
+    workspaceSlug ? () => userStore.fetchUserDashboardInfo(workspaceSlug.toString(), month) : null
+  );
+
+  const handleTourCompleted = () => {
+    userStore.updateTourCompleted();
+  };
+
+  return (
+    <>
+      {/* {isProductUpdatesModalOpen && (
+        <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
+      )} */}
+      {user && !user.is_tour_completed && (
+        <div className="fixed top-0 left-0 h-full w-full bg-custom-backdrop bg-opacity-50 transition-opacity z-20 grid place-items-center">
+          <TourRoot onComplete={handleTourCompleted} />
+        </div>
+      )}
+      <div className="p-8 space-y-8">
+        {user && <UserGreetingsView user={user} />}
+
+        {projects ? (
+          projects.length > 0 ? (
+            <div className="flex flex-col gap-8">
+              <IssuesStats data={workspaceDashboardInfo} />
+              <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                <IssuesList issues={workspaceDashboardInfo?.overdue_issues} type="overdue" />
+                <IssuesList issues={workspaceDashboardInfo?.upcoming_issues} type="upcoming" />
+                <IssuesPieChart groupedIssues={workspaceDashboardInfo?.state_distribution} />
+                <CompletedIssuesGraph
+                  issues={workspaceDashboardInfo?.completed_issues}
+                  month={month}
+                  setMonth={setMonth}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
+              <div className="p-5 md:p-8 pr-0">
+                <h5 className="text-xl font-semibold">Create a project</h5>
+                <p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p>
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "p",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  Create Project
+                </Button>
+              </div>
+              <div className="hidden md:block self-end overflow-hidden pt-8">
+                <Image src={emptyDashboard} alt="Empty Dashboard" />
+              </div>
+            </div>
+          )
+        ) : null}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/pages/create-block.tsx b/web/components/pages/create-block.tsx
new file mode 100644
index 00000000000..7f216f0ad9d
--- /dev/null
+++ b/web/components/pages/create-block.tsx
@@ -0,0 +1,123 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+import { SendHorizonal } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+// services
+import { PageService } from "services/page.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { TextArea } from "@plane/ui";
+// types
+import { IUser, IPageBlock } from "types";
+// fetch-keys
+import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+
+const defaultValues = {
+  name: "",
+};
+
+type Props = {
+  user: IUser | undefined;
+};
+
+const pageService = new PageService();
+
+export const CreateBlock: FC<Props> = ({ user }) => {
+  // const [blockTitle, setBlockTitle] = useState("");
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm<IPageBlock>({
+    defaultValues,
+  });
+
+  const createPageBlock = async () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    await pageService
+      .createPageBlock(
+        workspaceSlug as string,
+        projectId as string,
+        pageId as string,
+        {
+          name: watch("name"),
+        },
+        user
+      )
+      .then((res) => {
+        mutate<IPageBlock[]>(
+          PAGE_BLOCKS_LIST(pageId as string),
+          (prevData) => [...(prevData as IPageBlock[]), res],
+          false
+        );
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "页面无法创建。请重试。",
+        });
+      });
+
+    reset();
+  };
+
+  const handleKeyDown = (e: any) => {
+    const keyCombination = ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
+
+    if (e.key === "Enter" && !keyCombination) {
+      if (watch("name") && watch("name") !== "") {
+        e.preventDefault();
+        createPageBlock();
+        reset();
+      }
+    }
+  };
+
+  return (
+    <div className="relative">
+      <form
+        className="relative flex flex-col items-center justify-between h-32 rounded border-2 border-custom-border-200 p-2"
+        onSubmit={handleSubmit(createPageBlock)}
+      >
+        <div className="flex min-h-full w-full">
+          <Controller
+            name="name"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Title"
+                role="textbox"
+                onKeyDown={handleKeyDown}
+                maxLength={255}
+                onChange={onChange}
+                className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent !px-1 !py-1 text-sm font-medium"
+                hasError={Boolean(errors?.name)}
+              />
+            )}
+          />
+        </div>
+
+        <div className="absolute right-2 bottom-2 flex items-center p-1">
+          <button type="submit">
+            <SendHorizonal className="h-5 w-5 text-custom-text-100" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
similarity index 77%
rename from apps/app/components/pages/create-update-block-inline.tsx
rename to web/components/pages/create-update-block-inline.tsx
index cee9fe8e30d..b838da0c9e8 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -1,30 +1,32 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, FC, Dispatch, SetStateAction, useRef } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
-import { SparklesIcon } from "@heroicons/react/24/outline";
+import { Sparkle } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 // services
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.service";
-import aiService from "services/ai.service";
+import { PageService } from "services/page.service";
+import { IssueService } from "services/issue/issue.service";
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-import { TipTapEditor } from "components/tiptap";
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, TextArea } from "@plane/ui";
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 // types
-import { ICurrentUserResponse, IPageBlock } from "types";
+import { IUser, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   handleClose: () => void;
   data?: IPageBlock;
   handleAiAssistance?: (response: string) => void;
-  setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSyncing?: Dispatch<SetStateAction<boolean>>;
   focus?: keyof IPageBlock;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues = {
@@ -33,7 +35,12 @@ const defaultValues = {
   description_html: null,
 };
 
-export const CreateUpdateBlockInline: React.FC<Props> = ({
+const aiService = new AIService();
+const pagesService = new PageService();
+const issueService = new IssueService();
+const fileService = new FileService();
+
+export const CreateUpdateBlockInline: FC<Props> = ({
   handleClose,
   data,
   handleAiAssistance,
@@ -44,22 +51,23 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
 
-  const editorRef = React.useRef<any>(null);
+  const editorRef = useRef<any>(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
 
+  const editorSuggestion = useEditorSuggestions();
+
   const { setToastAlert } = useToast();
 
   const {
     handleSubmit,
-    register,
     control,
     watch,
     setValue,
     setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -140,7 +148,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           mutate(PAGE_BLOCKS_LIST(pageId as string));
           editorRef.current?.setEditorValue(res.description_html);
           if (data.issue && data.sync)
-            issuesService
+            issueService
               .patchIssue(
                 workspaceSlug as string,
                 projectId as string,
@@ -195,8 +203,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -262,14 +269,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       >
         <div className="pt-2">
           <div className="flex justify-between">
-            <TextArea
-              id="name"
+            <Controller
               name="name"
-              placeholder="Title"
-              register={register}
-              className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
-              autoComplete="off"
-              maxLength={255}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="name"
+                  name="name"
+                  value={value}
+                  placeholder="Title"
+                  onChange={onChange}
+                  className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
+                  autoComplete="off"
+                  maxLength={255}
+                  hasError={Boolean(errors?.name)}
+                />
+              )}
             />
           </div>
           <div className="page-block-section relative -mt-2 text-custom-text-200">
@@ -279,8 +294,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TipTapEditor
-                      workspaceSlug={workspaceSlug as string}
+                    <RichTextEditorWithRef
+                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                      deleteFile={fileService.deleteImage}
                       ref={editorRef}
                       value={"<p></p>"}
                       debouncedUpdatesEnabled={false}
@@ -291,16 +307,17 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                         onChange(description_html);
                         setValue("description", description);
                       }}
+                      mentionHighlights={editorSuggestion.mentionHighlights}
+                      mentionSuggestions={editorSuggestion.mentionSuggestions}
                     />
                   );
                 else if (!value || !watch("description_html"))
-                  return (
-                    <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
-                  );
+                  return <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />;
 
                 return (
-                  <TipTapEditor
-                    workspaceSlug={workspaceSlug as string}
+                  <RichTextEditorWithRef
+                    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                    deleteFile={fileService.deleteImage}
                     ref={editorRef}
                     value={
                       value && value !== "" && Object.keys(value).length > 0
@@ -332,7 +349,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   "Generating response..."
                 ) : (
                   <>
-                    <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                    <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                   </>
                 )}
               </button>
@@ -342,23 +359,19 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80"
                 onClick={() => setGptAssistantModal(true)}
               >
-                <SparklesIcon className="h-4 w-4" />
+                <Sparkle className="h-4 w-4" />
                 AI
               </button>
             </div>
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 p-4">
-          <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-          <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
-            {data
-              ? isSubmitting
-                ? "Updating..."
-                : "Update block"
-              : isSubmitting
-              ? "Adding..."
-              : "Add block"}
-          </PrimaryButton>
+          <Button variant="neutral-primary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
+            {data ? (isSubmitting ? "Updating..." : "Update block") : isSubmitting ? "Adding..." : "Add block"}
+          </Button>
         </div>
       </form>
       <GptAssistantModal
@@ -371,9 +384,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         onResponse={(response) => {
           if (data && handleAiAssistance) {
             handleAiAssistance(response);
-            editorRef.current?.setEditorValue(
-              `${watch("description_html")}<p>${response}</p>` ?? ""
-            );
+            editorRef.current?.setEditorValue(`${watch("description_html")}<p>${response}</p>` ?? "");
           } else {
             setValue("description", {});
             setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
similarity index 90%
rename from apps/app/components/pages/create-update-page-modal.tsx
rename to web/components/pages/create-update-page-modal.tsx
index da608acfae3..6604b9b3751 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -7,31 +7,32 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { PageForm } from "./page-form";
 // types
-import { ICurrentUserResponse, IPage } from "types";
+import { IUser, IPage } from "types";
 // fetch-keys
-import {
-  ALL_PAGES_LIST,
-  FAVORITE_PAGES_LIST,
-  MY_PAGES_LIST,
-  RECENT_PAGES_LIST,
-} from "constants/fetch-keys";
+import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, RECENT_PAGES_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IPage | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
+  workspaceSlug: string;
+  projectId: string;
 };
 
-export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
+// services
+const pageService = new PageService();
+
+export const CreateUpdatePageModal: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, data, user, workspaceSlug, projectId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -40,7 +41,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
   };
 
   const createPage = async (payload: IPage) => {
-    await pagesService
+    await pageService
       .createPage(workspaceSlug as string, projectId as string, payload, user)
       .then((res) => {
         mutate(RECENT_PAGES_LIST(projectId as string));
@@ -82,7 +83,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
   };
 
   const updatePage = async (payload: IPage) => {
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, data?.id ?? "", payload, user)
       .then((res) => {
         mutate(RECENT_PAGES_LIST(projectId as string));
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
new file mode 100644
index 00000000000..f66f178c17f
--- /dev/null
+++ b/web/components/pages/delete-page-modal.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { PageService } from "services/page.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { AlertTriangle } from "lucide-react";
+// types
+import type { IUser, IPage } from "types";
+// fetch-keys
+import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, RECENT_PAGES_LIST } from "constants/fetch-keys";
+
+type TConfirmPageDeletionProps = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IPage | null;
+  user: IUser | undefined;
+};
+
+// services
+const pageService = new PageService();
+
+export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !workspaceSlug || !projectId) return;
+
+    await pageService
+      .deletePage(workspaceSlug as string, data.project, data.id, user)
+      .then(() => {
+        mutate(RECENT_PAGES_LIST(projectId as string));
+        mutate<IPage[]>(
+          MY_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          ALL_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        mutate<IPage[]>(
+          FAVORITE_PAGES_LIST(projectId as string),
+          (prevData) => (prevData ?? []).filter((page) => page.id !== data?.id),
+          false
+        );
+        handleClose();
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete Page
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete Page-{" "}
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the page will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/pages/index.ts b/web/components/pages/index.ts
similarity index 100%
rename from apps/app/components/pages/index.ts
rename to web/components/pages/index.ts
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
new file mode 100644
index 00000000000..c432bb82fee
--- /dev/null
+++ b/web/components/pages/page-form.tsx
@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IPage } from "types";
+
+type Props = {
+  handleFormSubmit: (values: IPage) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IPage | null;
+};
+
+const defaultValues = {
+  name: "",
+  description: "",
+};
+
+export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IPage>({
+    defaultValues,
+  });
+
+  const handleCreateUpdatePage = async (formData: IPage) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Page</h3>
+        <div className="space-y-3">
+          <div>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Page..."
+              : "Update Page"
+            : isSubmitting
+            ? "Creating Page..."
+            : "Create Page"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/pages/pages-list/all-pages-list.tsx b/web/components/pages/pages-list/all-pages-list.tsx
similarity index 76%
rename from apps/app/components/pages/pages-list/all-pages-list.tsx
rename to web/components/pages/pages-list/all-pages-list.tsx
index f25d00fd5cd..22460f734ba 100644
--- a/apps/app/components/pages/pages-list/all-pages-list.tsx
+++ b/web/components/pages/pages-list/all-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { ALL_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,7 +21,7 @@ export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? ALL_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "all")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "all")
       : null
   );
 
diff --git a/apps/app/components/pages/pages-list/favorite-pages-list.tsx b/web/components/pages/pages-list/favorite-pages-list.tsx
similarity index 76%
rename from apps/app/components/pages/pages-list/favorite-pages-list.tsx
rename to web/components/pages/pages-list/favorite-pages-list.tsx
index 2faa4bf7223..ef50f296a9d 100644
--- a/apps/app/components/pages/pages-list/favorite-pages-list.tsx
+++ b/web/components/pages/pages-list/favorite-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { FAVORITE_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,8 +21,7 @@ export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? FAVORITE_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () =>
-          pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "favorite")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "favorite")
       : null
   );
 
diff --git a/apps/app/components/pages/pages-list/index.ts b/web/components/pages/pages-list/index.ts
similarity index 100%
rename from apps/app/components/pages/pages-list/index.ts
rename to web/components/pages/pages-list/index.ts
diff --git a/web/components/pages/pages-list/my-pages-list.tsx b/web/components/pages/pages-list/my-pages-list.tsx
new file mode 100644
index 00000000000..889ffa3b6be
--- /dev/null
+++ b/web/components/pages/pages-list/my-pages-list.tsx
@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { PageService } from "services/page.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { MY_PAGES_LIST } from "constants/fetch-keys";
+
+// services
+const pageService = new PageService();
+
+export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? MY_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_me")
+      : null
+  );
+
+  return <PagesView pages={pages} viewType={viewType} />;
+};
diff --git a/web/components/pages/pages-list/other-pages-list.tsx b/web/components/pages/pages-list/other-pages-list.tsx
new file mode 100644
index 00000000000..176bd6cf5ca
--- /dev/null
+++ b/web/components/pages/pages-list/other-pages-list.tsx
@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { PageService } from "services/page.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { OTHER_PAGES_LIST } from "constants/fetch-keys";
+
+// services
+const pageService = new PageService();
+
+export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? OTHER_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_other")
+      : null
+  );
+
+  return <PagesView pages={pages} viewType={viewType} />;
+};
diff --git a/apps/app/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
similarity index 80%
rename from apps/app/components/pages/pages-list/recent-pages-list.tsx
rename to web/components/pages/pages-list/recent-pages-list.tsx
index 33df8e863b7..e4bc46c66cc 100644
--- a/apps/app/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -5,13 +5,14 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // helpers
@@ -22,15 +23,16 @@ import { RecentPagesResponse } from "types";
 // fetch-keys
 import { RECENT_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => pageService.getRecentPages(workspaceSlug as string, projectId as string) : null
   );
 
   const isEmpty = pages && Object.keys(pages).every((key) => pages[key].length === 0);
@@ -43,7 +45,7 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             if (pages[key].length === 0) return null;
 
             return (
-              <div key={key} className="h-full overflow-hidden">
+              <div key={key} className="h-full overflow-hidden pb-9">
                 <h2 className="text-xl font-semibold capitalize mb-2">
                   {replaceUnderscoreIfSnakeCase(key)}
                 </h2>
@@ -57,8 +59,8 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             description="You can think of Pages as an AI-powered notepad."
             image={emptyPage}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
-              text: "新页面",
+              icon: <Plus className="h-4 w-4" />,
+              text: "New Page",
               onClick: () => {
                 const e = new KeyboardEvent("keydown", {
                   key: "d",
diff --git a/apps/app/components/pages/pages-list/types.ts b/web/components/pages/pages-list/types.ts
similarity index 100%
rename from apps/app/components/pages/pages-list/types.ts
rename to web/components/pages/pages-list/types.ts
diff --git a/apps/app/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
similarity index 79%
rename from apps/app/components/pages/pages-view.tsx
rename to web/components/pages/pages-view.tsx
index 0262243f260..699cbb58276 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -4,22 +4,18 @@ import useSWR, { mutate } from "swr";
 import { useRouter } from "next/router";
 
 // services
-import pagesService from "services/pages.service";
-import projectService from "services/project.service";
+import { PageService } from "services/page.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import {
-  CreateUpdatePageModal,
-  DeletePageModal,
-  SinglePageDetailedItem,
-  SinglePageListItem,
-} from "components/pages";
+import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // types
@@ -37,16 +33,20 @@ type Props = {
   viewType: TPageViewProps;
 };
 
+// services
+const pageService = new PageService();
+const projectService = new ProjectService();
+
 export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
   const [selectedPageToUpdate, setSelectedPageToUpdate] = useState<IPage | null>(null);
-
   const [deletePageModal, setDeletePageModal] = useState(false);
   const [selectedPageToDelete, setSelectedPageToDelete] = useState<IPage | null>(null);
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
   const { user } = useUserAuth();
 
   const { setToastAlert } = useToast();
@@ -54,7 +54,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
+      ? () => projectService.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
@@ -91,13 +91,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         }),
       false
     );
-    mutate<IPage[]>(
-      FAVORITE_PAGES_LIST(projectId.toString()),
-      (prevData) => [page, ...(prevData ?? [])],
-      false
-    );
+    mutate<IPage[]>(FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => [page, ...(prevData ?? [])], false);
 
-    pagesService
+    pageService
       .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
         page: page.id,
       })
@@ -105,15 +101,15 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         mutate(RECENT_PAGES_LIST(projectId.toString()));
         setToastAlert({
           type: "success",
-          title: "成功!",
-          message: "成功将页面添加到收藏夹",
+          title: "Success!",
+          message: "Successfully added the page to favorites.",
         });
       })
       .catch(() => {
         setToastAlert({
           type: "error",
-          title: "错误!",
-          message: "无法将页面添加到收藏夹。请重试",
+          title: "Error!",
+          message: "Couldn't add the page to favorites. Please try again.",
         });
       });
   };
@@ -147,21 +143,21 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
 
-    pagesService
+    pageService
       .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
       .then(() => {
         mutate(RECENT_PAGES_LIST(projectId.toString()));
         setToastAlert({
           type: "success",
-          title: "成功!",
-          message: "成功将页面从收藏夹中删除",
+          title: "Success!",
+          message: "Successfully removed the page from favorites.",
         });
       })
       .catch(() => {
         setToastAlert({
           type: "error",
-          title: "错误!",
-          message: "无法从收藏夹中删除该页面。请重试。",
+          title: "Error!",
+          message: "Couldn't remove the page from favorites. Please try again.",
         });
       });
   };
@@ -185,27 +181,32 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
 
-    pagesService
-      .patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user)
-      .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId.toString()));
-      });
+    pageService.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user).then(() => {
+      mutate(RECENT_PAGES_LIST(projectId.toString()));
+    });
   };
 
   return (
     <>
-      <CreateUpdatePageModal
-        isOpen={createUpdatePageModal}
-        handleClose={() => setCreateUpdatePageModal(false)}
-        data={selectedPageToUpdate}
-        user={user}
-      />
-      <DeletePageModal
-        isOpen={deletePageModal}
-        setIsOpen={setDeletePageModal}
-        data={selectedPageToDelete}
-        user={user}
-      />
+      {workspaceSlug && projectId && (
+        <>
+          <CreateUpdatePageModal
+            isOpen={createUpdatePageModal}
+            handleClose={() => setCreateUpdatePageModal(false)}
+            data={selectedPageToUpdate}
+            user={user}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+          />
+          <DeletePageModal
+            isOpen={deletePageModal}
+            setIsOpen={setDeletePageModal}
+            data={selectedPageToDelete}
+            user={user}
+          />
+        </>
+      )}
+
       {pages ? (
         <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
@@ -261,8 +262,8 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               description="You can think of Pages as an AI-powered notepad."
               image={emptyPage}
               primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "新页面",
+                icon: <Plus className="h-4 w-4" />,
+                text: "New Page",
                 onClick: () => {
                   const e = new KeyboardEvent("keydown", {
                     key: "d",
diff --git a/apps/app/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
similarity index 81%
rename from apps/app/components/pages/single-page-block.tsx
rename to web/components/pages/single-page-block.tsx
index de63c73988d..b0c66623263 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -1,60 +1,47 @@
 import React, { useEffect, useState, useRef } from "react";
-
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
-// react-beautiful-dnd
-import { Draggable } from "react-beautiful-dnd";
+import { Draggable } from "@hello-pangea/dnd";
 // services
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.service";
-import aiService from "services/ai.service";
+import { PageService } from "services/page.service";
+import { IssueService } from "services/issue/issue.service";
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
-import { TipTapEditor } from "components/tiptap";
+import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
-import { CustomMenu, TextArea } from "components/ui";
+import { CustomMenu, LayersIcon, TextArea } from "@plane/ui";
 // icons
-import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
-import {
-  BoltIcon,
-  CheckIcon,
-  EllipsisVerticalIcon,
-  PencilIcon,
-  SparklesIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
+import { IUser, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   block: IPageBlock;
   projectDetails: IProject | undefined;
   showBlockDetails: boolean;
   index: number;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const SinglePageBlock: React.FC<Props> = ({
-  block,
-  projectDetails,
-  showBlockDetails,
-  index,
-  user,
-}) => {
+const aiService = new AIService();
+const pageService = new PageService();
+const issueService = new IssueService();
+const fileService = new FileService();
+
+export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBlockDetails, index, user }) => {
   const [isSyncing, setIsSyncing] = useState(false);
   const [createBlockForm, setCreateBlockForm] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
@@ -69,7 +56,7 @@ export const SinglePageBlock: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { handleSubmit, watch, reset, setValue, register } = useForm<IPageBlock>({
+  const { handleSubmit, watch, reset, setValue } = useForm<IPageBlock>({
     defaultValues: {
       name: "",
       description: {},
@@ -77,6 +64,8 @@ export const SinglePageBlock: React.FC<Props> = ({
     },
   });
 
+  const editorSuggestion = useEditorSuggestions();
+
   const updatePageBlock = async (formData: Partial<IPageBlock>) => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
@@ -95,7 +84,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    await pagesService
+    await pageService
       .patchPageBlock(
         workspaceSlug as string,
         projectId as string,
@@ -111,7 +100,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       .then((res) => {
         mutate(PAGE_BLOCKS_LIST(pageId as string));
         if (block.issue && block.sync)
-          issuesService
+          issueService
             .patchIssue(
               workspaceSlug as string,
               projectId as string,
@@ -130,14 +119,8 @@ export const SinglePageBlock: React.FC<Props> = ({
   const pushBlockIntoIssues = async () => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
-    await pagesService
-      .convertPageBlockToIssue(
-        workspaceSlug as string,
-        projectId as string,
-        pageId as string,
-        block.id,
-        user
-      )
+    await pageService
+      .convertPageBlockToIssue(workspaceSlug as string, projectId as string, pageId as string, block.id, user)
       .then((res: IIssue) => {
         mutate<IPageBlock[]>(
           PAGE_BLOCKS_LIST(pageId as string),
@@ -156,7 +139,7 @@ export const SinglePageBlock: React.FC<Props> = ({
           message: "页面区块成功转换为任务",
         });
       })
-      .catch((res) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "错误!",
@@ -174,14 +157,8 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    await pagesService
-      .deletePageBlock(
-        workspaceSlug as string,
-        projectId as string,
-        pageId as string,
-        block.id,
-        user
-      )
+    await pageService
+      .deletePageBlock(workspaceSlug as string, projectId as string, pageId as string, block.id, user)
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -221,8 +198,7 @@ export const SinglePageBlock: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -270,7 +246,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -283,12 +259,9 @@ export const SinglePageBlock: React.FC<Props> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -332,8 +305,8 @@ export const SinglePageBlock: React.FC<Props> = ({
                 className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
-                <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
+                <MoreVertical className="h-4" />
+                <MoreVertical className="-ml-5 h-4" />
               </button>
               <div
                 ref={actionSectionRef}
@@ -343,11 +316,7 @@ export const SinglePageBlock: React.FC<Props> = ({
               >
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
-                    {isSyncing ? (
-                      <ArrowPathIcon className="h-3 w-3 animate-spin" />
-                    ) : (
-                      <CheckIcon className="h-3 w-3" />
-                    )}
+                    {isSyncing ? <RefreshCw className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
                     {isSyncing ? "Syncing..." : "Synced"}
                   </div>
                 )}
@@ -363,7 +332,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                     "Generating response..."
                   ) : (
                     <>
-                      <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                      <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                     </>
                   )}
                 </button>
@@ -372,7 +341,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
-                  <SparklesIcon className="h-4 w-4" />
+                  <Sparkle className="h-4 w-4" />
                   AI
                 </button>
                 <button
@@ -380,23 +349,23 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  <PencilIcon className="h-3.5 w-3.5" />
+                  <Pencil className="h-3.5 w-3.5" />
                 </button>
                 <CustomMenu
                   customButton={
-                    <button
+                    <div
                       className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-custom-background-90"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
-                      <BoltIcon className="h-4.5 w-3.5" />
-                    </button>
+                      <Zap className="h-3.5 w-3.5" />
+                    </div>
                   }
                 >
                   {block.issue ? (
                     <>
                       <CustomMenu.MenuItem onClick={handleBlockSync}>
                         <span className="flex items-center gap-1">
-                          <ArrowPathIcon className="h-4 w-4" />
+                          <RefreshCw className="h-4 w-4" />
                           <span>Turn sync {block.sync ? "off" : "on"}</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -410,14 +379,14 @@ export const SinglePageBlock: React.FC<Props> = ({
                   ) : (
                     <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
                       <span className="flex items-center gap-1">
-                        <LayerDiagonalIcon className="h-4 w-4" />
+                        <LayersIcon className="h-4 w-4" />
                         Push into issues
                       </span>
                     </CustomMenu.MenuItem>
                   )}
                   <CustomMenu.MenuItem onClick={deletePageBlock}>
                     <span className="flex items-center gap-1">
-                      <TrashIcon className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                       Delete block
                     </span>
                   </CustomMenu.MenuItem>
@@ -431,32 +400,34 @@ export const SinglePageBlock: React.FC<Props> = ({
                   <div className="flex items-center">
                     {block.issue && (
                       <div className="mr-1.5 flex">
-                        <Link
-                          href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
-                        >
+                        <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
                           <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
-                            <LayerDiagonalIcon height="16" width="16" />
+                            <LayersIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
                       </div>
                     )}
                     <TextArea
+                      id="blockName"
                       name="blockName"
                       value={block.name}
-                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100"
-                      noPadding
+                      placeholder="Title"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100 !p-0"
                     />
                   </div>
 
                   {showBlockDetails
                     ? block.description_html.length > 7 && (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
+                        <RichTextEditor
+                          uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                          deleteFile={fileService.deleteImage}
                           value={block.description_html}
                           customClassName="text-sm min-h-[150px]"
                           noBorder
                           borderOnFocus={false}
+                          mentionSuggestions={editorSuggestion.mentionSuggestions}
+                          mentionHighlights={editorSuggestion.mentionHighlights}
                         />
                       )
                     : block.description_stripped.length > 0 && (
diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
similarity index 77%
rename from apps/app/components/pages/single-page-detailed-item.tsx
rename to web/components/pages/single-page-detailed-item.tsx
index 094d7adbde5..0f3cafb2d52 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -7,24 +7,12 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, Tooltip } from "components/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
-import {
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import {
-  render24HourFormatTime,
-  renderShortDate,
-  renderLongDateFormat,
-} from "helpers/date-time.helper";
+import { render24HourFormatTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -55,11 +43,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   const { setToastAlert } = useToast();
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "链接已复制！",
@@ -81,16 +66,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     key={label.id}
                     className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs"
                     style={{
-                      backgroundColor: `${
-                        label?.color && label.color !== "" ? label.color : "#000000"
-                      }20`,
+                      backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"}20`,
                     }}
                   >
                     <span
                       className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                       style={{
-                        backgroundColor:
-                          label?.color && label.color !== "" ? label.color : "#000000",
+                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
                       }}
                     />
                     {label.name}
@@ -105,9 +87,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
                 } on ${renderShortDate(page.updated_at)}`}
               >
-                <p className="text-sm text-custom-text-200">
-                  {render24HourFormatTime(page.updated_at)}
-                </p>
+                <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
               </Tooltip>
               {page.is_favorite ? (
                 <button
@@ -119,7 +99,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                 </button>
               ) : (
                 <button
@@ -131,7 +111,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                 </button>
               )}
               {page.created_by === user?.id && (
@@ -151,9 +131,9 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     }}
                   >
                     {page.access ? (
-                      <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     ) : (
-                      <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     )}
                   </button>
                 </Tooltip>
@@ -161,12 +141,11 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               <Tooltip
                 position="top-right"
                 tooltipContent={`Created by ${
-                  people?.find((person) => person.member.id === page.created_by)?.member
-                    .display_name ?? ""
+                  people?.find((person) => person.member.id === page.created_by)?.member.display_name ?? ""
                 } on ${renderLongDateFormat(`${page.created_at}`)}`}
               >
                 <span>
-                  <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                  <AlertCircle className="h-4 w-4 text-custom-text-200" />
                 </span>
               </Tooltip>
               <CustomMenu verticalEllipsis>
@@ -178,7 +157,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-3.5 w-3.5" />
+                    <Pencil className="h-3.5 w-3.5" />
                     <span>Edit Page</span>
                   </span>
                 </CustomMenu.MenuItem>
@@ -190,7 +169,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" />
                     <span>Delete Page</span>
                   </span>
                 </CustomMenu.MenuItem>
@@ -210,9 +189,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
             </div>
           </div>
           <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
-            {page.blocks.length > 0
-              ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
-              : null}
+            {page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
           </div>
         </a>
       </Link>
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
similarity index 80%
rename from apps/app/components/pages/single-page-list-item.tsx
rename to web/components/pages/single-page-list-item.tsx
index 0f145dc511f..d8ce72f7e1e 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -7,25 +7,12 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, Tooltip } from "components/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
-import {
-  DocumentTextIcon,
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import {
-  renderLongDateFormat,
-  renderShortDate,
-  render24HourFormatTime,
-} from "helpers/date-time.helper";
+import { renderLongDateFormat, renderShortDate, render24HourFormatTime } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -56,11 +43,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
   const { setToastAlert } = useToast();
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "链接已复制！",
@@ -76,10 +60,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
-                <DocumentTextIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm text-custom-text-100">
-                  {truncateText(page.name, 75)}
-                </p>
+                <FileText className="h-4 w-4" />
+                <p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
@@ -102,13 +84,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
                   <Tooltip
-                    tooltipContent={`Last updated at ${render24HourFormatTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(page.updated_at)} on ${renderShortDate(
                       page.updated_at
-                    )} on ${renderShortDate(page.updated_at)}`}
+                    )}`}
                   >
-                    <p className="text-sm text-custom-text-200">
-                      {render24HourFormatTime(page.updated_at)}
-                    </p>
+                    <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
                   </Tooltip>
                   {page.is_favorite ? (
                     <button
@@ -119,7 +99,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleRemoveFromFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -130,7 +110,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   {page.created_by === user?.id && (
@@ -150,9 +130,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         {page.access ? (
-                          <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         ) : (
-                          <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         )}
                       </button>
                     </Tooltip>
@@ -160,12 +140,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                   <Tooltip
                     position="top-right"
                     tooltipContent={`Created by ${
-                      people?.find((person) => person.member.id === page.created_by)?.member
-                        .display_name ?? ""
+                      people?.find((person) => person.member.id === page.created_by)?.member.display_name ?? ""
                     } on ${renderLongDateFormat(`${page.created_at}`)}`}
                   >
                     <span>
-                      <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                      <AlertCircle className="h-4 w-4 text-custom-text-200" />
                     </span>
                   </Tooltip>
 
@@ -178,7 +157,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <PencilIcon className="h-3.5 w-3.5" />
+                        <Pencil className="h-3.5 w-3.5" />
                         <span>Edit Page</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -190,7 +169,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <TrashIcon className="h-3.5 w-3.5" />
+                        <Trash2 className="h-3.5 w-3.5" />
                         <span>Delete Page</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/components/profile/index.ts b/web/components/profile/index.ts
new file mode 100644
index 00000000000..ffd05c5a5f5
--- /dev/null
+++ b/web/components/profile/index.ts
@@ -0,0 +1,5 @@
+export * from "./overview";
+export * from "./navbar";
+export * from "./sidebar";
+
+export * from "./profile-issues-filter";
diff --git a/apps/app/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
similarity index 79%
rename from apps/app/components/profile/navbar.tsx
rename to web/components/profile/navbar.tsx
index 9795a284a5e..fba16225b55 100644
--- a/apps/app/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -4,12 +4,11 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // components
-import { ProfileIssuesViewOptions } from "components/profile";
-// types
-import { UserAuth } from "types";
+import { ProfileIssuesFilter } from "components/profile";
 
 type Props = {
-  memberRole: UserAuth;
+  isAuthorized: boolean;
+  showProfileIssuesFilter?: boolean;
 };
 
 const viewerTabs = [
@@ -38,14 +37,13 @@ const adminTabs = [
   },
 ];
 
-export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
+export const ProfileNavbar: React.FC<Props> = (props) => {
+  const { isAuthorized, showProfileIssuesFilter } = props;
+
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const tabsList =
-    memberRole.isOwner || memberRole.isMember || memberRole.isViewer
-      ? [...viewerTabs, ...adminTabs]
-      : viewerTabs;
+  const tabsList = isAuthorized ? [...viewerTabs, ...adminTabs] : viewerTabs;
 
   return (
     <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">
@@ -64,7 +62,7 @@ export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
           </Link>
         ))}
       </div>
-      <ProfileIssuesViewOptions />
+      {showProfileIssuesFilter && <ProfileIssuesFilter />}
     </div>
   );
 };
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
new file mode 100644
index 00000000000..8a0a2069fc6
--- /dev/null
+++ b/web/components/profile/overview/activity.tsx
@@ -0,0 +1,102 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { UserService } from "services/user.service";
+// components
+import { ActivityMessage } from "components/core";
+// ui
+import { ProfileEmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
+import { Rocket } from "lucide-react";
+// image
+import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// fetch-keys
+import { USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
+
+// services
+const userService = new UserService();
+
+export const ProfileActivity = () => {
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { data: userProfileActivity } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId
+      ? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
+      : null
+  );
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-lg font-medium">最近活动</h3>
+      <div className="border border-custom-border-100 rounded p-6">
+        {userProfileActivity ? (
+          userProfileActivity.results.length > 0 ? (
+            <div className="space-y-5">
+              {userProfileActivity.results.map((activity) => (
+                <div key={activity.id} className="flex gap-3">
+                  <div className="flex-shrink-0">
+                    {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
+                      <img
+                        src={activity.actor_detail.avatar}
+                        alt={activity.actor_detail.display_name}
+                        height={24}
+                        width={24}
+                        className="rounded"
+                      />
+                    ) : (
+                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
+                        {activity.actor_detail.display_name?.charAt(0)}
+                      </div>
+                    )}
+                  </div>
+                  <div className="-mt-1 w-4/5 break-words">
+                    <p className="text-sm text-custom-text-200">
+                      <span className="font-medium text-custom-text-100">{activity.actor_detail.display_name} </span>
+                      {activity.field ? (
+                        <ActivityMessage activity={activity} showIssue />
+                      ) : (
+                        <span>
+                          created this{" "}
+                          <a
+                            href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+                          >
+                            Issue
+                            <Rocket className="h-3 w-3" />
+                          </a>
+                        </span>
+                      )}
+                    </p>
+                    <p className="text-xs text-custom-text-200">{timeAgo(activity.created_at)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <ProfileEmptyState
+              title="暂无数据"
+              description="我们找不到数据，请查看您的输入"
+              image={recentActivityEmptyState}
+            />
+          )
+        ) : (
+          <Loader className="space-y-5">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/profile/overview/index.ts b/web/components/profile/overview/index.ts
similarity index 100%
rename from apps/app/components/profile/overview/index.ts
rename to web/components/profile/overview/index.ts
diff --git a/apps/app/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
similarity index 96%
rename from apps/app/components/profile/overview/priority-distribution.tsx
rename to web/components/profile/overview/priority-distribution.tsx
index f306105ea03..c503a72785a 100644
--- a/apps/app/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -1,5 +1,6 @@
 // ui
-import { BarGraph, ProfileEmptyState, Loader } from "components/ui";
+import { BarGraph, ProfileEmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // image
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // helpers
diff --git a/apps/app/components/profile/overview/state-distribution.tsx b/web/components/profile/overview/state-distribution.tsx
similarity index 100%
rename from apps/app/components/profile/overview/state-distribution.tsx
rename to web/components/profile/overview/state-distribution.tsx
diff --git a/apps/app/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
similarity index 88%
rename from apps/app/components/profile/overview/stats.tsx
rename to web/components/profile/overview/stats.tsx
index 66e36561be8..ef2da647d59 100644
--- a/apps/app/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Icon, Loader } from "components/ui";
+import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
+import { UserCircle2 } from "lucide-react";
 // types
 import { IUserProfileData } from "types";
 
@@ -16,19 +17,19 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
 
   const overviewCards = [
     {
-      icon: "new_window",
+      icon: CreateIcon,
       route: "created",
       title: "Issues created",
       value: userProfile?.created_issues ?? "...",
     },
     {
-      icon: "account_circle",
+      icon: UserCircle2,
       route: "assigned",
       title: "Issues assigned",
       value: userProfile?.assigned_issues ?? "...",
     },
     {
-      icon: "subscriptions",
+      icon: LayerStackIcon,
       route: "subscribed",
       title: "Issues subscribed",
       value: userProfile?.subscribed_issues ?? "...",
@@ -44,7 +45,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
               <a className="flex items-center gap-3 p-4 rounded border border-custom-border-100 whitespace-nowrap">
                 <div className="h-11 w-11 bg-custom-background-90 rounded grid place-items-center">
-                  <Icon iconName={card.icon} className="!text-xl" />
+                  <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
                   <p className="text-custom-text-400 text-sm">{card.title}</p>
diff --git a/apps/app/components/profile/overview/workload.tsx b/web/components/profile/overview/workload.tsx
similarity index 100%
rename from apps/app/components/profile/overview/workload.tsx
rename to web/components/profile/overview/workload.tsx
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
new file mode 100644
index 00000000000..28bc2259da1
--- /dev/null
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -0,0 +1,78 @@
+import { observer } from "mobx-react-lite";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProfileIssuesFilter = observer(() => {
+  const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
+
+  const handleLayoutChange = (_layout: string) => {
+    const payload = {
+      layout: _layout,
+      group_by: profileIssueFiltersStore.userDisplayFilters.group_by
+        ? profileIssueFiltersStore.userDisplayFilters.group_by
+        : "state_detail.group",
+    };
+
+    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", payload);
+  };
+
+  const handleFilters = (key: any, value: any) => {
+    let updatesFilters: any = profileIssueFiltersStore?.userFilters;
+    updatesFilters = updatesFilters[key] || [];
+    if (updatesFilters && updatesFilters.length > 0 && updatesFilters.includes(value))
+      updatesFilters = updatesFilters.filter((item: any) => item !== value);
+    else updatesFilters.push(value);
+    profileIssueFiltersStore.handleIssueFilters("userFilters", { [key]: updatesFilters });
+  };
+
+  const handleDisplayFilters = (value: any) => profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", value);
+
+  const handleDisplayProperties = (value: any) =>
+    profileIssueFiltersStore.handleIssueFilters("userDisplayProperties", value);
+
+  const states = undefined;
+  const labels = workspaceStore.workspaceLabels || undefined;
+  const members = undefined;
+
+  const activeLayout = profileIssueFiltersStore?.userDisplayFilters?.layout;
+
+  return (
+    <div className="relative flex items-center justify-end gap-2">
+      <LayoutSelection
+        layouts={["list", "kanban"]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+
+      <FiltersDropdown title="Filters" placement="bottom-end">
+        <FilterSelection
+          filters={profileIssueFiltersStore.userFilters}
+          handleFiltersUpdate={handleFilters}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+          states={states}
+          labels={labels}
+          members={members}
+        />
+      </FiltersDropdown>
+
+      <FiltersDropdown title="Display" placement="bottom-end">
+        <DisplayFiltersSelection
+          displayFilters={profileIssueFiltersStore.userDisplayFilters}
+          displayProperties={profileIssueFiltersStore.userDisplayProperties}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
+          layoutDisplayFiltersOptions={
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+          }
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
new file mode 100644
index 00000000000..9d2b7126c52
--- /dev/null
+++ b/web/components/profile/sidebar.tsx
@@ -0,0 +1,259 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+import useSWR from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import { UserService } from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Loader, Tooltip } from "@plane/ui";
+// icons
+import { ChevronDown, Pencil } from "lucide-react";
+// helpers
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// fetch-keys
+import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
+
+// services
+const userService = new UserService();
+
+export const ProfileSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { user } = useUser();
+
+  const { data: userProjectsData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      : null
+  );
+
+  // Create a date object for the current time in the specified timezone
+  const currentTime = new Date();
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: userProjectsData?.user_data.user_timezone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const timeString = formatter.format(currentTime);
+
+  const userDetails = [
+    {
+      label: "Joined on",
+      value: renderLongDetailDateFormat(userProjectsData?.user_data.date_joined ?? ""),
+    },
+    {
+      label: "Timezone",
+      value: (
+        <span>
+          {timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex-shrink-0 md:h-full w-full md:w-80 overflow-y-auto shadow-custom-shadow-sm">
+      {userProjectsData ? (
+        <>
+          <div className="relative h-32">
+            {user?.id === userId && (
+              <div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
+                <Link href={`/${workspaceSlug}/me/profile`}>
+                  <a className="grid place-items-center text-black">
+                    <Pencil className="h-3 w-3" />
+                  </a>
+                </Link>
+              </div>
+            )}
+            <img
+              src={
+                userProjectsData.user_data.cover_image ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+              }
+              alt={userProjectsData.user_data.display_name}
+              className="h-32 w-full object-cover"
+            />
+            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
+              {userProjectsData.user_data.avatar && userProjectsData.user_data.avatar !== "" ? (
+                <img
+                  src={userProjectsData.user_data.avatar}
+                  alt={userProjectsData.user_data.display_name}
+                  className="rounded h-full w-full object-cover"
+                />
+              ) : (
+                <div className="bg-custom-background-90 flex justify-center items-center w-[52px] h-[52px] rounded text-custom-text-100">
+                  {userProjectsData.user_data.display_name?.[0]}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="px-5">
+            <div className="mt-[38px]">
+              <h4 className="text-lg font-semibold">
+                {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
+              </h4>
+              <h6 className="text-custom-text-200 text-sm">({userProjectsData.user_data.display_name})</h6>
+            </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="flex-shrink-0 text-custom-text-200 w-2/5">{detail.label}</div>
+                  <div className="font-medium w-3/5 break-words">{detail.value}</div>
+                </div>
+              ))}
+            </div>
+            <div className="mt-9 divide-y divide-custom-border-100">
+              {userProjectsData.project_data.map((project, index) => {
+                const totalIssues =
+                  project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
+
+                const completedIssuePercentage =
+                  project.assigned_issues === 0
+                    ? 0
+                    : Math.round((project.completed_issues / project.assigned_issues) * 100);
+
+                return (
+                  <Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
+                    {({ open }) => (
+                      <div className="w-full">
+                        <Disclosure.Button className="flex items-center justify-between gap-2 w-full">
+                          <div className="flex items-center gap-2 w-3/4">
+                            {project.emoji ? (
+                              <div className="flex-shrink-0 grid h-7 w-7 place-items-center">
+                                {renderEmoji(project.emoji)}
+                              </div>
+                            ) : project.icon_prop ? (
+                              <div className="flex-shrink-0 h-7 w-7 grid place-items-center">
+                                {renderEmoji(project.icon_prop)}
+                              </div>
+                            ) : (
+                              <div className="flex-shrink-0 grid place-items-center h-7 w-7 rounded bg-custom-background-90 uppercase text-custom-text-100 text-xs">
+                                {project?.name.charAt(0)}
+                              </div>
+                            )}
+                            <div className="text-sm font-medium truncate break-words">{project.name}</div>
+                          </div>
+                          <div className="flex-shrink-0 flex items-center gap-2">
+                            {project.assigned_issues > 0 && (
+                              <Tooltip tooltipContent="Completion percentage" position="left">
+                                <div
+                                  className={`px-1 py-0.5 text-xs font-medium rounded ${
+                                    completedIssuePercentage <= 35
+                                      ? "bg-red-500/10 text-red-500"
+                                      : completedIssuePercentage <= 70
+                                      ? "bg-yellow-500/10 text-yellow-500"
+                                      : "bg-green-500/10 text-green-500"
+                                  }`}
+                                >
+                                  {completedIssuePercentage}%
+                                </div>
+                              </Tooltip>
+                            )}
+                            <ChevronDown className="h-4 w-4" />
+                          </div>
+                        </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 className="pl-9 mt-5">
+                            {totalIssues > 0 && (
+                              <div className="flex items-center gap-0.5">
+                                <div
+                                  className="h-1 rounded"
+                                  style={{
+                                    backgroundColor: "#203b80",
+                                    width: `${(project.created_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded"
+                                  style={{
+                                    backgroundColor: "#3f76ff",
+                                    width: `${(project.assigned_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded"
+                                  style={{
+                                    backgroundColor: "#f59e0b",
+                                    width: `${(project.pending_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded"
+                                  style={{
+                                    backgroundColor: "#16a34a",
+                                    width: `${(project.completed_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                              </div>
+                            )}
+                            <div className="mt-7 space-y-5 text-sm text-custom-text-200">
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-2.5 w-2.5 bg-[#203b80] rounded-sm" />
+                                  Created
+                                </div>
+                                <div className="font-medium">{project.created_issues} 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 bg-[#3f76ff] rounded-sm" />
+                                  Assigned
+                                </div>
+                                <div className="font-medium">{project.assigned_issues} 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 bg-[#f59e0b] rounded-sm" />
+                                  Due
+                                </div>
+                                <div className="font-medium">{project.pending_issues} 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 bg-[#16a34a] rounded-sm" />
+                                  Completed
+                                </div>
+                                <div className="font-medium">{project.completed_issues} Issues</div>
+                              </div>
+                            </div>
+                          </Disclosure.Panel>
+                        </Transition>
+                      </div>
+                    )}
+                  </Disclosure>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5 space-y-7">
+          <Loader.Item height="130px" />
+          <div className="space-y-5">
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+          </div>
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
new file mode 100644
index 00000000000..37432e367d5
--- /dev/null
+++ b/web/components/project/card-list.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectCard } from "components/project";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
+// images
+import emptyProject from "public/empty-state/project.svg";
+// icons
+import { Plus } from "lucide-react";
+
+export interface IProjectCardList {
+  workspaceSlug: string;
+}
+
+export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
+  const { workspaceSlug } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  if (!projects) {
+    return (
+      <Loader className="grid grid-cols-3 gap-4">
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+      </Loader>
+    );
+  }
+
+  return (
+    <>
+      {projects.length > 0 ? (
+        <div className="h-full p-8 overflow-y-auto">
+          <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+            {projectStore.searchedProjects.map((project) => (
+              <ProjectCard key={project.id} project={project} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <EmptyState
+          image={emptyProject}
+          title="No projects yet"
+          description="Get started by creating your first project"
+          primaryButton={{
+            icon: <Plus className="h-4 w-4" />,
+            text: "New Project",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
new file mode 100644
index 00000000000..533e94ede7d
--- /dev/null
+++ b/web/components/project/card.tsx
@@ -0,0 +1,230 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// icons
+import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteProjectModal, JoinProjectModal } from "components/project";
+// ui
+import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import type { IProject } from "types";
+
+export type ProjectCardProps = {
+  project: IProject;
+};
+
+export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
+  const { project } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+  const [joinProjectModalOpen, setJoinProjectModal] = useState(false);
+
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const isOwner = project.member_role === 20;
+  const isMember = project.member_role === 15;
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !project) return;
+
+    projectStore.removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  const projectMembersIds = project.members.map((member) => member.member_id);
+
+  return (
+    <>
+      {/* Delete Project Modal  */}
+      <DeleteProjectModal
+        project={project}
+        isOpen={deleteProjectModalOpen}
+        onClose={() => setDeleteProjectModal(false)}
+      />
+      {/* Join Project Modal */}
+      {workspaceSlug && (
+        <JoinProjectModal
+          workspaceSlug={workspaceSlug?.toString()}
+          project={project}
+          isOpen={joinProjectModalOpen}
+          handleClose={() => setJoinProjectModal(false)}
+        />
+      )}
+
+      {/* Card Information */}
+      <div
+        onClick={() => {
+          if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`);
+          else setJoinProjectModal(true);
+        }}
+        className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200 cursor-pointer"
+      >
+        <div className="relative h-[118px] w-full rounded-t ">
+          <div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+
+          <img
+            src={
+              project.cover_image ??
+              "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+            }
+            alt={project.name}
+            className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
+          />
+
+          <div className="absolute h-10 w-full bottom-4 z-10 flex items-center justify-between px-4">
+            <div className="flex items-center gap-2.5 flex-grow truncate">
+              <div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
+                <span className="flex items-center justify-center">
+                  {project.emoji
+                    ? renderEmoji(project.emoji)
+                    : project.icon_prop
+                    ? renderEmoji(project.icon_prop)
+                    : null}
+                </span>
+              </div>
+
+              <div className="flex flex-col gap-0.5 justify-between w-full truncate">
+                <h3 className="text-white font-semibold truncate">{project.name}</h3>
+                <span className="flex items-center gap-1.5">
+                  <p className="text-xs font-medium text-white">{project.identifier} </p>
+                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center h-full gap-2 flex-shrink-0">
+              <button
+                className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleCopyText();
+                }}
+              >
+                <LinkIcon className="h-3 w-3 text-white" />
+              </button>
+              <button
+                className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
+                onClick={(e) => {
+                  if (project.is_favorite) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemoveFromFavorites();
+                  } else {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleAddToFavorites();
+                  }
+                }}
+              >
+                <Star
+                  className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
+          <p className="text-sm text-custom-text-300 font-medium break-words line-clamp-2">{project.description}</p>
+          <div className="flex item-center justify-between">
+            <Tooltip
+              tooltipHeading="Members"
+              tooltipContent={
+                project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
+              }
+              position="top"
+            >
+              {projectMembersIds.length > 0 ? (
+                <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
+                  <AvatarGroup showTooltip={false}>
+                    {projectMembersIds.map((memberId) => {
+                      const member = project.members?.find((m) => m.member_id === memberId);
+
+                      if (!member) return null;
+
+                      return <Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />;
+                    })}
+                  </AvatarGroup>
+                </div>
+              ) : (
+                <span className="text-sm italic text-custom-text-400">No Member Yet</span>
+              )}
+            </Tooltip>
+            {(isOwner || isMember) && (
+              <button
+                className="flex items-center justify-center p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200 rounded"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  router.push(`/${workspaceSlug}/projects/${project.id}/settings`);
+                }}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+            )}
+
+            {!project.is_member ? (
+              <div className="flex items-center">
+                <Button
+                  variant="link-primary"
+                  className="!p-0 font-semibold"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setJoinProjectModal(true);
+                  }}
+                >
+                  Join
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
new file mode 100644
index 00000000000..128ea2233a8
--- /dev/null
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  handleDelete: () => void;
+  data?: any;
+};
+
+export const ConfirmProjectMemberRemove: React.FC<Props> = (props) => {
+  const { isOpen, onClose, data, handleDelete } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    handleDelete();
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Remove {data?.display_name}?
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to remove member-{" "}
+                          <span className="font-bold">{data?.display_name}</span>? They will no longer have access to
+                          this project. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Removing..." : "Remove"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
new file mode 100644
index 00000000000..6be880dcbfb
--- /dev/null
+++ b/web/components/project/create-project-modal.tsx
@@ -0,0 +1,398 @@
+import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// icons
+import { X } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
+import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
+// ui
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
+// components
+import { WorkspaceMemberSelect } from "components/workspace";
+import { ImagePickerPopover } from "components/core";
+import EmojiIconPicker from "components/emoji-icon-picker";
+// helpers
+import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
+// types
+import { IWorkspaceMember } from "types";
+// constants
+import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+};
+
+interface IIsGuestCondition {
+  onClose: () => void;
+}
+
+const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    onClose();
+    setToastAlert({
+      title: "Error",
+      type: "error",
+      message: "You don't have permission to create project.",
+    });
+  }, [onClose, setToastAlert]);
+
+  return null;
+};
+
+export interface ICreateProjectForm {
+  name: string;
+  identifier: string;
+  description: string;
+  emoji_and_icon: string;
+  network: number;
+  project_lead_member: IWorkspaceMember;
+  project_lead: string;
+  cover_image: string;
+  icon_prop: any;
+  emoji: string;
+}
+
+export const CreateProjectModal: FC<Props> = observer((props) => {
+  const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
+  // store
+  const { project: projectStore, workspace: workspaceStore } = useMobxStore();
+  const workspaceMembers = workspaceStore.members[workspaceSlug] || [];
+  // states
+  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
+  // toast
+  const { setToastAlert } = useToast();
+  // form info
+  const cover_image = PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)];
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    control,
+    watch,
+    setValue,
+  } = useForm<ICreateProjectForm>({
+    defaultValues: {
+      cover_image,
+      description: "",
+      emoji_and_icon: getRandomEmoji(),
+      identifier: "",
+      name: "",
+      network: 2,
+      project_lead: undefined,
+    },
+    reValidateMode: "onChange",
+  });
+
+  const { memberDetails } = useWorkspaceMyMembership();
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  if (memberDetails && isOpen) if (memberDetails.role <= 10) return <IsGuestCondition onClose={onClose} />;
+
+  const handleClose = () => {
+    onClose();
+    setIsChangeInIdentifierRequired(true);
+    reset();
+  };
+
+  const handleAddToFavorites = (projectId: string) => {
+    if (!workspaceSlug) return;
+
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const onSubmit = async (formData: ICreateProjectForm) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { emoji_and_icon, project_lead_member, ...payload } = formData;
+
+    if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
+    else payload.emoji = formData.emoji_and_icon;
+
+    payload.project_lead = formData.project_lead_member?.member.id;
+
+    return projectStore
+      .createProject(workspaceSlug.toString(), payload)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project created successfully.",
+        });
+        if (setToFavorite) {
+          handleAddToFavorites(res.id);
+        }
+        handleClose();
+      })
+      .catch((err) => {
+        Object.keys(err.data).map((key) =>
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: err.data[key],
+          })
+        );
+      });
+  };
+
+  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isChangeInIdentifierRequired) {
+      onChange(e);
+      return;
+    }
+    if (e.target.value === "") setValue("identifier", "");
+    else
+      setValue(
+        "identifier",
+        e.target.value
+          .replace(/[^a-zA-Z0-9]/g, "")
+          .toUpperCase()
+          .substring(0, 5)
+      );
+    onChange(e);
+  };
+
+  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
+    setIsChangeInIdentifierRequired(false);
+    onChange(alphanumericValue.toUpperCase());
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
+                <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
+                  {watch("cover_image") !== null && (
+                    <img
+                      src={watch("cover_image")!}
+                      className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
+                      alt="Cover Image"
+                    />
+                  )}
+
+                  <div className="absolute right-2 top-2 p-2">
+                    <button type="button" onClick={handleClose}>
+                      <X className="h-5 w-5 text-white" />
+                    </button>
+                  </div>
+                  <div className="absolute bottom-2 right-2">
+                    <ImagePickerPopover
+                      label="Change Cover"
+                      onChange={(image) => {
+                        setValue("cover_image", image);
+                      }}
+                      control={control}
+                      value={watch("cover_image")}
+                    />
+                  </div>
+                  <div className="absolute -bottom-[22px] left-3">
+                    <Controller
+                      name="emoji_and_icon"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <EmojiIconPicker
+                          label={
+                            <div className="h-[44px] w-[44px] grid place-items-center rounded-md bg-custom-background-80 outline-none text-lg">
+                              {value ? renderEmoji(value) : "Icon"}
+                            </div>
+                          }
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                </div>
+                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-custom-border-100 px-3">
+                  <div className="mt-9 space-y-6 pb-5">
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
+                      <div className="md:col-span-3">
+                        <Controller
+                          control={control}
+                          name="name"
+                          rules={{
+                            required: "Title is required",
+                            maxLength: {
+                              value: 255,
+                              message: "Title should be less than 255 characters",
+                            },
+                          }}
+                          render={({ field: { value, onChange } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              tabIndex={1}
+                              onChange={handleNameChange(onChange)}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Project Title"
+                              className="w-full"
+                            />
+                          )}
+                        />
+                        <span className="text-xs text-red-500">{errors?.name?.message}</span>
+                      </div>
+                      <div>
+                        <Controller
+                          control={control}
+                          name="identifier"
+                          rules={{
+                            required: "Identifier is required",
+                            validate: (value) =>
+                              /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
+                            minLength: {
+                              value: 1,
+                              message: "Identifier must at least be of 1 character",
+                            },
+                            maxLength: {
+                              value: 12,
+                              message: "Identifier must at most be of 12 characters",
+                            },
+                          }}
+                          render={({ field: { value, onChange } }) => (
+                            <Input
+                              id="identifier"
+                              name="identifier"
+                              type="text"
+                              value={value}
+                              tabIndex={2}
+                              onChange={handleIdentifierChange(onChange)}
+                              hasError={Boolean(errors.identifier)}
+                              placeholder="Identifier"
+                              className="text-xs w-full"
+                            />
+                          )}
+                        />
+                        <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
+                      </div>
+                      <div className="md:col-span-4">
+                        <Controller
+                          name="description"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              tabIndex={3}
+                              placeholder="Description..."
+                              onChange={onChange}
+                              className="text-sm !h-24"
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <div className="flex-shrink-0" tabIndex={4}>
+                        <Controller
+                          name="network"
+                          control={control}
+                          render={({ field: { onChange, value } }) => (
+                            <CustomSelect
+                              value={value}
+                              onChange={onChange}
+                              buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
+                              label={
+                                <div className="flex items-center gap-2 text-custom-text-300">
+                                  {currentNetwork ? (
+                                    <>
+                                      <currentNetwork.icon className="h-[18px] w-[18px]" />
+                                      {currentNetwork.label}
+                                    </>
+                                  ) : (
+                                    <span className="text-custom-text-400">Select Network</span>
+                                  )}
+                                </div>
+                              }
+                              noChevron
+                            >
+                              {NETWORK_CHOICES.map((network) => (
+                                <CustomSelect.Option
+                                  key={network.key}
+                                  value={network.key}
+                                  className="flex items-center gap-1"
+                                >
+                                  <network.icon className="h-4 w-4" />
+                                  {network.label}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div className="flex-shrink-0" tabIndex={5}>
+                        <Controller
+                          name="project_lead_member"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <WorkspaceMemberSelect
+                              value={value}
+                              onChange={onChange}
+                              options={workspaceMembers}
+                              placeholder="Select Lead"
+                            />
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end gap-2 pt-5">
+                    <Button variant="neutral-primary" onClick={handleClose} tabIndex={6}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
+                      {isSubmitting ? "Creating..." : "Create Project"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
new file mode 100644
index 00000000000..a40e3740395
--- /dev/null
+++ b/web/components/project/delete-project-modal.tsx
@@ -0,0 +1,180 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import type { IProject } from "types";
+// fetch-keys
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type DeleteProjectModal = {
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
+};
+
+const defaultValues = {
+  projectName: "",
+  confirmDelete: "",
+};
+
+export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
+  const { isOpen, project, onClose } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({ defaultValues });
+
+  const canDelete = watch("projectName") === project?.name && watch("confirmDelete") === "delete my project";
+
+  const handleClose = () => {
+    const timer = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timer);
+    }, 350);
+
+    onClose();
+  };
+
+  const onSubmit = async () => {
+    if (!workspaceSlug || !canDelete) return;
+
+    await projectStore
+      .deleteProject(workspaceSlug.toString(), project.id)
+      .then(() => {
+        if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again later.",
+        });
+      });
+  };
+
+  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 bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl 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 Project</h3>
+                    </span>
+                  </div>
+                  <span>
+                    <p className="text-sm leading-7 text-custom-text-200">
+                      Are you sure you want to delete project{" "}
+                      <span className="break-words font-semibold">{project?.name}</span>? All of the data related to the
+                      project will be permanently removed. This action cannot be undone
+                    </p>
+                  </span>
+                  <div className="text-custom-text-200">
+                    <p className="break-words text-sm ">
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
+                      to continue:
+                    </p>
+                    <Controller
+                      control={control}
+                      name="projectName"
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id="projectName"
+                          name="projectName"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Project name"
+                          className="mt-2 w-full"
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="text-custom-text-200">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium text-custom-text-100">delete my project</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 project'"
+                          className="mt-2 w-full"
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
+                      {isSubmitting ? "Deleting..." : "Delete Project"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/project/form-loader.tsx b/web/components/project/form-loader.tsx
new file mode 100644
index 00000000000..039cdd25f6f
--- /dev/null
+++ b/web/components/project/form-loader.tsx
@@ -0,0 +1,62 @@
+import { FC } from "react";
+// components
+import { Loader } from "@plane/ui";
+
+export interface IProjectDetailsFormLoader {}
+
+export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
+  <>
+    <div className="relative h-44 w-full mt-6">
+      <Loader>
+        <Loader.Item height="auto" width="46px" />
+      </Loader>
+      <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+        <div className="flex gap-3 flex-grow truncate">
+          <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+            <Loader>
+              <Loader.Item height="46px" width="46px" />
+            </Loader>
+          </div>
+        </div>
+        <div className="flex justify-center flex-shrink-0">
+          <Loader>
+            <Loader.Item height="32px" width="108px" />
+          </Loader>
+        </div>
+      </div>
+    </div>
+    <div className="flex flex-col gap-8 my-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Project Name</h4>
+        <Loader>
+          <Loader.Item height="46px" width="100%" />
+        </Loader>
+      </div>
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Description</h4>
+        <Loader className="w-full">
+          <Loader.Item height="102px" width="full" />
+        </Loader>
+      </div>
+      <div className="flex items-center justify-between gap-10 w-full">
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Identifier</h4>
+          <Loader>
+            <Loader.Item height="36px" width="100%" />
+          </Loader>
+        </div>
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Network</h4>
+          <Loader className="w-full">
+            <Loader.Item height="46px" width="100%" />
+          </Loader>
+        </div>
+      </div>
+      <div className="flex items-center justify-between py-2">
+        <Loader className="mt-2 w-full">
+          <Loader.Item height="34px" width="100px" />
+        </Loader>
+      </div>
+    </div>
+  </>
+);
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
new file mode 100644
index 00000000000..1bc942fe142
--- /dev/null
+++ b/web/components/project/form.tsx
@@ -0,0 +1,285 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// components
+import EmojiIconPicker from "components/emoji-icon-picker";
+import { ImagePickerPopover } from "components/core";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
+// types
+import { IProject, IWorkspace } from "types";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+// services
+import { ProjectService } from "services/project";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IProjectDetailsForm {
+  project: IProject;
+  workspaceSlug: string;
+  isAdmin: boolean;
+}
+
+const projectService = new ProjectService();
+
+export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
+  const { project, workspaceSlug, isAdmin } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues: {
+      ...project,
+      emoji_and_icon: project.emoji ?? project.icon_prop,
+      workspace: (project.workspace as IWorkspace).id,
+    },
+  });
+
+  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
+    const formattedValue = alphanumericValue.toUpperCase();
+
+    setValue("identifier", formattedValue);
+  };
+
+  const updateProject = async (payload: Partial<IProject>) => {
+    if (!workspaceSlug || !project) return;
+
+    return projectStore
+      .updateProject(workspaceSlug.toString(), project.id, payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((error) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: error?.error ?? "Project could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug) return;
+
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      cover_image: formData.cover_image,
+    };
+
+    if (typeof formData.emoji_and_icon === "object") {
+      payload.emoji = null;
+      payload.icon_prop = formData.emoji_and_icon;
+    } else {
+      payload.emoji = formData.emoji_and_icon;
+      payload.icon_prop = null;
+    }
+
+    if (project.identifier !== formData.identifier)
+      await projectService
+        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
+        .then(async (res) => {
+          if (res.exists) setError("identifier", { message: "Identifier already exists" });
+          else await updateProject(payload);
+        });
+    else await updateProject(payload);
+  };
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
+  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="relative h-44 w-full mt-6">
+        <div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+
+        <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
+        <div className="flex items-end z-10 justify-between gap-3 absolute bottom-4 w-full px-4">
+          <div className="flex gap-3 flex-grow truncate">
+            <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+              <div className="h-7 w-7 grid place-items-center">
+                <Controller
+                  control={control}
+                  name="emoji_and_icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? renderEmoji(value) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                      disabled={!isAdmin}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 text-white truncate">
+              <span className="text-lg font-semibold truncate">{watch("name")}</span>
+              <span className="flex items-center gap-2 text-sm">
+                <span>
+                  {watch("identifier")} . {currentNetwork?.label}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div className="flex justify-center flex-shrink-0">
+            <div>
+              <Controller
+                control={control}
+                name="cover_image"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover
+                    label={"Change cover"}
+                    control={control}
+                    onChange={onChange}
+                    value={value}
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8 my-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Project Name</h4>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "Name is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                ref={ref}
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.name)}
+                className="!p-3 rounded-md font-medium"
+                placeholder="Project Name"
+                disabled={!isAdmin}
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Description</h4>
+          <Controller
+            name="description"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="description"
+                name="description"
+                value={value}
+                placeholder="Enter project description"
+                onChange={onChange}
+                className="min-h-[102px] text-sm"
+                hasError={Boolean(errors?.description)}
+                disabled={!isAdmin}
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-10 w-full">
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Identifier</h4>
+            <Controller
+              control={control}
+              name="identifier"
+              rules={{
+                required: "Identifier is required",
+                validate: (value) => /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
+                minLength: {
+                  value: 1,
+                  message: "Identifier must at least be of 1 character",
+                },
+                maxLength: {
+                  value: 12,
+                  message: "Identifier must at most be of 5 characters",
+                },
+              }}
+              render={({ field: { value, ref } }) => (
+                <Input
+                  id="identifier"
+                  name="identifier"
+                  type="text"
+                  value={value}
+                  onChange={handleIdentifierChange}
+                  ref={ref}
+                  hasError={Boolean(errors.identifier)}
+                  placeholder="Enter identifier"
+                  className="w-full"
+                  disabled={!isAdmin}
+                />
+              )}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Network</h4>
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={selectedNetwork?.label ?? "Select network"}
+                  className="!border-custom-border-200 !shadow-none"
+                  input
+                  disabled={!isAdmin}
+                  optionsClassName="w-full"
+                >
+                  {NETWORK_CHOICES.map((network) => (
+                    <CustomSelect.Option key={network.key} value={network.key}>
+                      {network.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-2">
+          <>
+            <Button variant="primary" type="submit" loading={isSubmitting} disabled={!isAdmin}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+            <span className="text-sm text-custom-sidebar-text-400 italic">
+              Created on {renderShortDateWithYearFormat(project?.created_at)}
+            </span>
+          </>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
new file mode 100644
index 00000000000..56c5ba38c9b
--- /dev/null
+++ b/web/components/project/index.ts
@@ -0,0 +1,21 @@
+export * from "./publish-project";
+export * from "./settings";
+export * from "./card-list";
+export * from "./card";
+export * from "./create-project-modal";
+export * from "./delete-project-modal";
+export * from "./form-loader";
+export * from "./form";
+export * from "./join-project-modal";
+export * from "./leave-project-modal";
+export * from "./member-select";
+export * from "./members-select";
+export * from "./priority-select";
+export * from "./sidebar-list-item";
+export * from "./sidebar-list";
+export * from "./integration-card";
+export * from "./member-list";
+export * from "./member-list-item";
+export * from "./project-settings-member-defaults";
+export * from "./send-project-invitation-modal";
+export * from "./confirm-project-member-remove";
diff --git a/web/components/project/integration-card.tsx b/web/components/project/integration-card.tsx
new file mode 100644
index 00000000000..198923d4558
--- /dev/null
+++ b/web/components/project/integration-card.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+
+import Image from "next/image";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import { ProjectService } from "services/project";
+// hooks
+import { useRouter } from "next/router";
+import useToast from "hooks/use-toast";
+// components
+import { SelectRepository, SelectChannel } from "components/integration";
+// icons
+import GithubLogo from "public/logos/github-square.png";
+import SlackLogo from "public/services/slack.png";
+// types
+import { IWorkspaceIntegration } from "types";
+// fetch-keys
+import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    description: "Select GitHub repository to enable sync.",
+  },
+  slack: {
+    logo: SlackLogo,
+    description: "Get regular updates and control which notification you want to receive.",
+  },
+};
+
+// services
+const projectService = new ProjectService();
+
+export const IntegrationCard: React.FC<Props> = ({ integration }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: syncedGithubRepository } = useSWR(
+    projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
+    () =>
+      workspaceSlug && projectId && integration
+        ? projectService.getProjectGithubRepository(workspaceSlug as string, projectId as string, integration.id)
+        : null
+  );
+
+  const handleChange = (repo: any) => {
+    if (!workspaceSlug || !projectId || !integration) return;
+
+    const {
+      html_url,
+      owner: { login },
+      id,
+      name,
+    } = repo;
+
+    projectService
+      .syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, {
+        name,
+        owner: login,
+        repository_id: id,
+        url: html_url,
+      })
+      .then(() => {
+        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: `${login}/${name} repository synced with the project successfully.`,
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "版本库无法与项目同步，请重试",
+        });
+      });
+  };
+
+  return (
+    <>
+      {integration && (
+        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
+          <div className="flex items-start gap-4">
+            <div className="h-10 w-10 flex-shrink-0">
+              <Image
+                src={integrationDetails[integration.integration_detail.provider].logo}
+                alt={`${integration.integration_detail.title} Logo`}
+              />
+            </div>
+            <div>
+              <h3 className="flex items-center gap-4 text-sm font-medium">{integration.integration_detail.title}</h3>
+              <p className="text-sm text-custom-text-200 tracking-tight">
+                {integrationDetails[integration.integration_detail.provider].description}
+              </p>
+            </div>
+          </div>
+          {integration.integration_detail.provider === "github" && (
+            <SelectRepository
+              integration={integration}
+              value={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : null
+              }
+              label={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : "Select Repository"
+              }
+              onChange={handleChange}
+            />
+          )}
+          {integration.integration_detail.provider === "slack" && <SelectChannel integration={integration} />}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
new file mode 100644
index 00000000000..9debb0d83a1
--- /dev/null
+++ b/web/components/project/join-project-modal.tsx
@@ -0,0 +1,96 @@
+import { useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { Transition, Dialog } from "@headlessui/react";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IProject } from "types";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// type
+type TJoinProjectModalProps = {
+  isOpen: boolean;
+  workspaceSlug: string;
+  project: IProject;
+  handleClose: () => void;
+};
+
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
+  const { handleClose, isOpen, project, workspaceSlug } = props;
+  // states
+  const [isJoiningLoading, setIsJoiningLoading] = useState(false);
+  // store
+  const { project: projectStore } = useMobxStore();
+  // router
+  const router = useRouter();
+
+  const handleJoin = () => {
+    setIsJoiningLoading(true);
+
+    projectStore
+      .joinProject(workspaceSlug, [project.id])
+      .then(() => {
+        setIsJoiningLoading(false);
+
+        router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+        handleClose();
+      })
+      .catch(() => {
+        setIsJoiningLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 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 sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+                <div className="space-y-5">
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                    Join Project?
+                  </Dialog.Title>
+                  <p>
+                    Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
+                    Please click the &apos;Join Project&apos; button below to continue.
+                  </p>
+                  <div className="space-y-3" />
+                </div>
+                <div className="mt-5 flex justify-end gap-2">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary" type="submit" onClick={handleJoin} loading={isJoiningLoading}>
+                    {isJoiningLoading ? "Joining..." : "Join Project"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
new file mode 100644
index 00000000000..e36fa0ae288
--- /dev/null
+++ b/web/components/project/leave-project-modal.tsx
@@ -0,0 +1,205 @@
+import { FC, Fragment } from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangleIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// ui
+import { Button, Input } from "@plane/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IProject } from "types";
+
+type FormData = {
+  projectName: string;
+  confirmLeave: string;
+};
+
+const defaultValues: FormData = {
+  projectName: "",
+  confirmLeave: "",
+};
+
+export interface ILeaveProjectModal {
+  project: IProject;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
+  const { project, isOpen } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm({ defaultValues });
+
+  const handleClose = () => {
+    reset({ ...defaultValues });
+  };
+
+  const onSubmit = async (data: any) => {
+    if (!workspaceSlug) return;
+
+    if (data) {
+      if (data.projectName === project?.name) {
+        if (data.confirmLeave === "Leave Project") {
+          return projectStore
+            .leaveProject(workspaceSlug.toString(), project.id)
+            .then(() => {
+              handleClose();
+              router.push(`/${workspaceSlug}/projects`);
+            })
+            .catch(() => {
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Something went wrong please try again later.",
+              });
+            });
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Please confirm leaving the project by typing the 'Leave Project'.",
+          });
+        }
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Please enter the project name as shown in the description.",
+        });
+      }
+    } else {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please fill all fields.",
+      });
+    }
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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={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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl 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">
+                      <AlertTriangleIcon 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">Leave Project</h3>
+                    </span>
+                  </div>
+
+                  <span>
+                    <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.
+                    </p>
+                  </span>
+
+                  <div className="text-custom-text-200">
+                    <p className="break-words text-sm ">
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
+                      to continue:
+                    </p>
+                    <Controller
+                      control={control}
+                      name="projectName"
+                      rules={{
+                        required: "Label title is required",
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id="projectName"
+                          name="projectName"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Enter project name"
+                          className="mt-2 w-full"
+                        />
+                      )}
+                    />
+                  </div>
+
+                  <div className="text-custom-text-200">
+                    <p className="text-sm">
+                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
+                    </p>
+                    <Controller
+                      control={control}
+                      name="confirmLeave"
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id="confirmLeave"
+                          name="confirmLeave"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmLeave)}
+                          placeholder="Enter 'leave project'"
+                          className="mt-2 w-full"
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Leaving..." : "Leave Project"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
new file mode 100644
index 00000000000..f6b0e833b1f
--- /dev/null
+++ b/web/components/project/member-list-item.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectInvitationService } from "services/project";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ConfirmProjectMemberRemove } from "components/project";
+// ui
+import { CustomSelect, Tooltip } from "@plane/ui";
+// icons
+import { ChevronDown, XCircle } from "lucide-react";
+// constants
+import { ROLE } from "constants/workspace";
+import { TUserProjectRole } from "types";
+
+// services
+const projectInvitationService = new ProjectInvitationService();
+
+type Props = {
+  member: any;
+};
+
+export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
+  const { member } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<any | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<any | null>(null);
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+  // hooks
+  const { setToastAlert } = useToast();
+  // fetching project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // derived values
+  const user = userStore.currentUser;
+  const { currentProjectMemberInfo, currentProjectRole } = userStore;
+  const isAdmin = currentProjectRole === 20;
+  const projectMembers = projectStore.members?.[projectId?.toString()!];
+  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={selectedRemoveMember ?? selectedInviteRemoveMember}
+        handleDelete={async () => {
+          if (!workspaceSlug || !projectId) return;
+
+          // if the user is a member
+          if (selectedRemoveMember) {
+            await projectStore.removeMemberFromProject(
+              workspaceSlug.toString(),
+              projectId.toString(),
+              selectedRemoveMember.id
+            );
+          }
+          // if the user is an invite
+          if (selectedInviteRemoveMember) {
+            await projectInvitationService.deleteProjectInvitation(
+              workspaceSlug.toString(),
+              projectId.toString(),
+              selectedInviteRemoveMember.id
+            );
+            mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
+          }
+
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+        <div className="flex items-center gap-x-4 gap-y-2">
+          {member.avatar && member.avatar !== "" ? (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+                <img
+                  src={member.avatar}
+                  alt={member.display_name || member.email}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                />
+              </a>
+            </Link>
+          ) : (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+                {(member.display_name ?? member.email ?? "?")[0]}
+              </a>
+            </Link>
+          )}
+
+          <div>
+            {member.member ? (
+              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+                <a className="text-sm font-medium">
+                  {member.first_name} {member.last_name}
+                </a>
+              </Link>
+            ) : (
+              <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
+            )}
+            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs">
+          {!member?.status && (
+            <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
+              <p>Pending</p>
+            </div>
+          )}
+
+          <CustomSelect
+            customButton={
+              <div className="flex item-center gap-1 px-2 py-0.5 rounded">
+                <span
+                  className={`flex items-center text-xs font-medium rounded ${
+                    member.memberId !== currentProjectMemberInfo?.id ? "" : "text-custom-sidebar-text-400"
+                  }`}
+                >
+                  {ROLE[member.role as keyof typeof ROLE]}
+                </span>
+                {member.memberId !== currentProjectMemberInfo?.id && (
+                  <span className="grid place-items-center">
+                    <ChevronDown className="h-3 w-3" />
+                  </span>
+                )}
+              </div>
+            }
+            value={member.role}
+            onChange={(value: TUserProjectRole | undefined) => {
+              if (!workspaceSlug || !projectId) return;
+
+              projectStore
+                .updateMember(workspaceSlug.toString(), projectId.toString(), member.id, {
+                  role: value,
+                })
+                .catch((err) => {
+                  const error = err.error;
+                  const errorString = Array.isArray(error) ? error[0] : error;
+
+                  setToastAlert({
+                    type: "error",
+                    title: "Error!",
+                    message: errorString ?? "An error occurred while updating member role. Please try again.",
+                  });
+                });
+            }}
+            disabled={
+              member.memberId === user?.id ||
+              !member.member ||
+              (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
+            }
+            placement="bottom-end"
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (currentProjectRole && currentProjectRole !== 20 && currentProjectRole < parseInt(key)) return null;
+
+              return (
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          {isAdmin && (
+            <Tooltip
+              tooltipContent={member.memberId === currentProjectMemberInfo?.member ? "Leave project" : "Remove member"}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (member.member) setSelectedRemoveMember(member);
+                  else setSelectedInviteRemoveMember(member);
+                }}
+                className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              >
+                <XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
new file mode 100644
index 00000000000..aea4ccda20a
--- /dev/null
+++ b/web/components/project/member-list.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectInvitationService } from "services/project";
+// hooks
+import useUser from "hooks/use-user";
+// components
+import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
+// ui
+import { Button, Loader } from "@plane/ui";
+// icons
+import { Search } from "lucide-react";
+
+// services
+const projectInvitationService = new ProjectInvitationService();
+
+export const ProjectMemberList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const { user } = useUser();
+
+  const { data: projectInvitations } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_INVITATIONS_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => projectInvitationService.fetchProjectInvitations(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const projectMembers = projectStore.projectMembers;
+
+  const members = [
+    ...(projectMembers?.map((item) => ({
+      id: item.id,
+      memberId: item.member?.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      display_name: item.member?.display_name,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      memberId: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      display_name: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  const searchedMembers = members?.filter((member) => {
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    const displayName = member.display_name.toLowerCase();
+    return displayName.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+  });
+
+  return (
+    <>
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+        user={user}
+        onSuccess={() => {
+          mutate(`PROJECT_INVITATIONS_${projectId?.toString()}`);
+          projectStore.fetchProjectMembers(workspaceSlug?.toString()!, projectId?.toString()!);
+        }}
+      />
+
+      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
+        <h4 className="text-xl font-medium">Members</h4>
+        <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+          <Search className="h-3.5 w-3.5" />
+          <input
+            className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            autoFocus={true}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <Button variant="primary" onClick={() => setInviteModal(true)}>
+          Add Member
+        </Button>
+      </div>
+      {!projectMembers || !projectInvitations ? (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      ) : (
+        <div className="divide-y divide-custom-border-200">
+          {members.length > 0
+            ? searchedMembers.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
+            : null}
+          {searchedMembers.length === 0 && (
+            <h4 className="text-md text-custom-text-400 text-center mt-20">No matching member</h4>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
new file mode 100644
index 00000000000..b7d0112361b
--- /dev/null
+++ b/web/components/project/member-select.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { Ban } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Avatar, CustomSearchSelect } from "@plane/ui";
+
+type Props = {
+  value: any;
+  onChange: (val: string) => void;
+  isDisabled?: boolean;
+};
+
+export const MemberSelect: React.FC<Props> = observer((props) => {
+  const { value, onChange, isDisabled = false } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const members = projectStore.members?.[projectId?.toString()!];
+
+  const options = members?.map((member) => ({
+    value: member.member.id,
+    query: member.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        {member.member.display_name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2">
+          {selectedOption && <Avatar name={selectedOption.display_name} src={selectedOption.avatar} />}
+          {selectedOption ? (
+            selectedOption?.display_name
+          ) : (
+            <div className="flex items-center gap-2">
+              <Ban className="h-3.5 w-3.5 text-custom-sidebar-text-400 rotate-90" />
+              <span className="text-sm py-0.5 text-custom-sidebar-text-400">None</span>
+            </div>
+          )}
+        </div>
+      }
+      buttonClassName="!px-3 !py-2"
+      options={
+        options &&
+        options && [
+          ...options,
+          {
+            value: "none",
+            query: "none",
+            content: (
+              <div className="flex items-center gap-2">
+                <Ban className="h-3.5 w-3.5 text-custom-sidebar-text-400 rotate-90" />
+                <span className="text-sm py-0.5 text-custom-sidebar-text-400">None</span>
+              </div>
+            ),
+          },
+        ]
+      }
+      maxHeight="md"
+      width="w-full"
+      onChange={onChange}
+      disabled={isDisabled}
+    />
+  );
+});
diff --git a/web/components/project/members-select.tsx b/web/components/project/members-select.tsx
new file mode 100644
index 00000000000..457dd7d8039
--- /dev/null
+++ b/web/components/project/members-select.tsx
@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// ui
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  members: IUserLite[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+} & (
+  | {
+      value: string[];
+      onChange: (data: string[]) => void;
+      multiple: true;
+    }
+  | {
+      value: string;
+      onChange: (data: string) => void;
+      multiple: false;
+    }
+);
+
+export const MembersSelect: React.FC<Props> = ({
+  value,
+  onChange,
+  members,
+  className = "",
+  buttonClassName = "",
+  optionsClassName = "",
+  placement,
+  hideDropdownArrow = false,
+  disabled = false,
+  multiple = true,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = members?.map((member) => ({
+    value: member.id,
+    query: member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={member.display_name} src={member.avatar} />
+        {member.display_name}
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <Tooltip
+      tooltipHeading="Assignee"
+      tooltipContent={
+        value && value.length > 0
+          ? members
+              ?.filter((m) => value.includes(m.display_name))
+              .map((m) => m.display_name)
+              .join(", ")
+          : "No Assignee"
+      }
+      position="top"
+    >
+      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
+        {value && value.length > 0 && Array.isArray(value) ? (
+          <AvatarGroup showTooltip={false}>
+            {value.map((assigneeId) => {
+              const member = members?.find((m) => m.id === assigneeId);
+
+              if (!member) return null;
+
+              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
+            })}
+          </AvatarGroup>
+        ) : (
+          <span
+            className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
+          "
+          >
+            <User2 className="h-3 w-3" />
+          </span>
+        )}
+      </div>
+    </Tooltip>
+  );
+
+  const comboboxProps: any = { value, onChange, disabled };
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox as="div" className={`flex-shrink-0 text-left ${className}`} {...comboboxProps}>
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className={`h-3.5 w-3.5`} />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
new file mode 100644
index 00000000000..8863d860d0d
--- /dev/null
+++ b/web/components/project/priority-select.tsx
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { PriorityIcon, Tooltip } from "@plane/ui";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// types
+import { TIssuePriorities } from "types";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+type Props = {
+  value: TIssuePriorities;
+  onChange: (data: TIssuePriorities) => void;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  showTitle?: boolean;
+  highlightUrgentPriority?: boolean;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const PrioritySelect: React.FC<Props> = ({
+  value,
+  onChange,
+  className = "",
+  buttonClassName = "",
+  optionsClassName = "",
+  placement,
+  showTitle = false,
+  highlightUrgentPriority = true,
+  hideDropdownArrow = false,
+  disabled = false,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = ISSUE_PRIORITIES?.map((priority) => ({
+    value: priority.key,
+    query: priority.key,
+    content: (
+      <div className="flex items-center gap-2">
+        <PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />
+        {priority.title}
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedOption = value ? capitalizeFirstLetter(value) : "None";
+
+  const label = (
+    <Tooltip tooltipHeading="Priority" tooltipContent={selectedOption} position="top">
+      <div className="flex items-center gap-2">
+        <PriorityIcon
+          priority={value}
+          className={`h-3.5 w-3.5 ${
+            value === "high"
+              ? "text-orange-500"
+              : value === "medium"
+              ? "text-yellow-500"
+              : value === "low"
+              ? "text-green-500"
+              : "text-custom-text-200"
+          } ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
+        />
+        {showTitle && <span className="capitalize text-xs">{value}</span>}
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded border-[0.5px] ${
+            value === "urgent"
+              ? highlightUrgentPriority
+                ? "border-red-500/20 bg-red-500"
+                : "border-custom-border-300"
+              : "border-custom-border-300"
+          } ${!disabled ? "hover:bg-custom-background-80" : ""} ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/project/project-settings-member-defaults.tsx b/web/components/project/project-settings-member-defaults.tsx
new file mode 100644
index 00000000000..a8d8fc0c8ff
--- /dev/null
+++ b/web/components/project/project-settings-member-defaults.tsx
@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import { Controller, useForm } from "react-hook-form";
+
+import { MemberSelect } from "components/project";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IProject, IUserLite, IWorkspace } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  const { currentProjectRole } = userStore;
+  const isAdmin = currentProjectRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+  // form info
+  const { reset, control } = useForm<IProject>({ defaultValues });
+  // fetching user members
+  useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useEffect(() => {
+    if (!currentProjectDetails) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee: currentProjectDetails.default_assignee?.id ?? currentProjectDetails.default_assignee,
+      project_lead: (currentProjectDetails.project_lead as IUserLite)?.id ?? currentProjectDetails.project_lead,
+      workspace: (currentProjectDetails.workspace as IWorkspace).id,
+    });
+  }, [currentProjectDetails, reset]);
+
+  const submitChanges = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee: currentProjectDetails?.default_assignee?.id ?? currentProjectDetails?.default_assignee,
+      project_lead: (currentProjectDetails?.project_lead as IUserLite)?.id ?? currentProjectDetails?.project_lead,
+      ...formData,
+    });
+
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
+        default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
+        project_lead: formData.project_lead === "none" ? null : formData.project_lead,
+      })
+      .then(() => {
+        projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Defaults</h3>
+      </div>
+
+      <div className="flex flex-col gap-2 pb-4 w-full">
+        <div className="flex items-center py-8 gap-4 w-full">
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Project Lead</h4>
+            <div className="">
+              {currentProjectDetails ? (
+                <Controller
+                  control={control}
+                  name="project_lead"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ project_lead: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Default Assignee</h4>
+            <div className="">
+              {currentProjectDetails ? (
+                <Controller
+                  control={control}
+                  name="default_assignee"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ default_assignee: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/publish-project/index.tsx b/web/components/project/publish-project/index.tsx
new file mode 100644
index 00000000000..6bebc086cf5
--- /dev/null
+++ b/web/components/project/publish-project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./popover";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
new file mode 100644
index 00000000000..fe31dfe65ca
--- /dev/null
+++ b/web/components/project/publish-project/modal.tsx
@@ -0,0 +1,494 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui components
+import { Button, Loader, ToggleSwitch } from "@plane/ui";
+import { Check, CircleDot, Globe2 } from "lucide-react";
+import { CustomPopover } from "./popover";
+import { IProjectPublishSettings, TProjectPublishViews } from "store/project";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IProject } from "types";
+
+type Props = {
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
+};
+
+type FormData = {
+  id: string | null;
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  inbox: string | null;
+  views: TProjectPublishViews[];
+};
+
+const defaultValues: FormData = {
+  id: null,
+  comments: false,
+  reactions: false,
+  votes: false,
+  inbox: null,
+  views: ["list", "kanban"],
+};
+
+const viewOptions: {
+  key: TProjectPublishViews;
+  label: string;
+}[] = [
+  { key: "list", label: "List" },
+  { key: "kanban", label: "Kanban" },
+  // { key: "calendar", label: "Calendar" },
+  // { key: "gantt", label: "Gantt" },
+  // { key: "spreadsheet", label: "Spreadsheet" },
+];
+
+export const PublishProjectModal: React.FC<Props> = observer((props) => {
+  const { isOpen, project, onClose } = props;
+
+  const [isUnpublishing, setIsUnpublishing] = useState(false);
+  const [isUpdateRequired, setIsUpdateRequired] = useState(false);
+
+  let plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL;
+
+  if (typeof window !== "undefined" && !plane_deploy_url)
+    plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { projectPublish: projectPublishStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    getValues,
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({
+    defaultValues,
+  });
+
+  const handleClose = () => {
+    onClose();
+
+    setIsUpdateRequired(false);
+    reset({ ...defaultValues });
+  };
+
+  // prefill form with the saved settings if the project is already published
+  useEffect(() => {
+    if (
+      projectPublishStore.projectPublishSettings &&
+      projectPublishStore.projectPublishSettings !== "not-initialized"
+    ) {
+      let userBoards: TProjectPublishViews[] = [];
+
+      if (projectPublishStore.projectPublishSettings?.views) {
+        const savedViews = projectPublishStore.projectPublishSettings?.views;
+
+        if (!savedViews) return;
+
+        if (savedViews.list) userBoards.push("list");
+        if (savedViews.kanban) userBoards.push("kanban");
+        if (savedViews.calendar) userBoards.push("calendar");
+        if (savedViews.gantt) userBoards.push("gantt");
+        if (savedViews.spreadsheet) userBoards.push("spreadsheet");
+
+        userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"];
+      }
+
+      const updatedData = {
+        id: projectPublishStore.projectPublishSettings?.id || null,
+        comments: projectPublishStore.projectPublishSettings?.comments || false,
+        reactions: projectPublishStore.projectPublishSettings?.reactions || false,
+        votes: projectPublishStore.projectPublishSettings?.votes || false,
+        inbox: projectPublishStore.projectPublishSettings?.inbox || null,
+        views: userBoards,
+      };
+
+      reset({ ...updatedData });
+    }
+  }, [reset, projectPublishStore.projectPublishSettings]);
+
+  // fetch publish settings
+  useEffect(() => {
+    if (!workspaceSlug || !isOpen) return;
+
+    if (projectPublishStore.projectPublishSettings === "not-initialized") {
+      projectPublishStore.getProjectSettingsAsync(workspaceSlug.toString(), project.id);
+    }
+  }, [isOpen, workspaceSlug, project, projectPublishStore]);
+
+  const handlePublishProject = async (payload: IProjectPublishSettings) => {
+    if (!workspaceSlug) return;
+
+    return projectPublishStore
+      .publishProject(workspaceSlug.toString(), project.id, payload)
+      .then((res) => {
+        handleClose();
+        // window.open(`${plane_deploy_url}/${workspaceSlug}/${project.id}`, "_blank");
+        return res;
+      })
+      .catch((err) => err);
+  };
+
+  const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
+    if (!workspaceSlug) return;
+
+    await projectPublishStore
+      .updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Publish settings updated successfully!",
+        });
+
+        handleClose();
+        return res;
+      })
+      .catch((error) => {
+        console.log("error", error);
+        return error;
+      });
+  };
+
+  const handleUnpublishProject = async (publishId: string) => {
+    if (!workspaceSlug || !publishId) return;
+
+    setIsUnpublishing(true);
+
+    await projectPublishStore
+      .unPublishProject(workspaceSlug.toString(), project.id, publishId)
+      .then((res) => {
+        handleClose();
+        return res;
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while unpublishing the project.",
+        })
+      )
+      .finally(() => setIsUnpublishing(false));
+  };
+
+  const CopyLinkToClipboard = ({ copy_link }: { copy_link: string }) => {
+    const [status, setStatus] = useState(false);
+
+    const copyText = () => {
+      navigator.clipboard.writeText(copy_link);
+      setStatus(true);
+      setTimeout(() => {
+        setStatus(false);
+      }, 1000);
+    };
+
+    return (
+      <div
+        className="border border-custom-border-100 bg-custom-background-100 text-xs px-2 min-w-[30px] h-[30px] rounded flex justify-center items-center hover:bg-custom-background-90 cursor-pointer"
+        onClick={() => copyText()}
+      >
+        {status ? "Copied" : "Copy Link"}
+      </div>
+    );
+  };
+
+  const handleFormSubmit = async (formData: FormData) => {
+    if (!formData.views || formData.views.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one view layout to publish the project.",
+      });
+      return;
+    }
+
+    const payload = {
+      comments: formData.comments,
+      reactions: formData.reactions,
+      votes: formData.votes,
+      inbox: formData.inbox,
+      views: {
+        list: formData.views.includes("list"),
+        kanban: formData.views.includes("kanban"),
+        calendar: formData.views.includes("calendar"),
+        gantt: formData.views.includes("gantt"),
+        spreadsheet: formData.views.includes("spreadsheet"),
+      },
+    };
+
+    if (project.is_deployed) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
+    else await handlePublishProject(payload);
+  };
+
+  // check if an update is required or not
+  const checkIfUpdateIsRequired = () => {
+    if (!projectPublishStore.projectPublishSettings || projectPublishStore.projectPublishSettings === "not-initialized")
+      return;
+
+    const currentSettings = projectPublishStore.projectPublishSettings as IProjectPublishSettings;
+    const newSettings = getValues();
+
+    if (
+      currentSettings.comments !== newSettings.comments ||
+      currentSettings.reactions !== newSettings.reactions ||
+      currentSettings.votes !== newSettings.votes
+    ) {
+      setIsUpdateRequired(true);
+      return;
+    }
+
+    let viewCheckFlag = 0;
+    viewOptions.forEach((option) => {
+      if (currentSettings.views[option.key] !== newSettings.views.includes(option.key)) viewCheckFlag++;
+    });
+
+    if (viewCheckFlag !== 0) {
+      setIsUpdateRequired(true);
+      return;
+    }
+
+    setIsUpdateRequired(false);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-200"
+              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-100"
+              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="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
+                <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
+                  {/* heading */}
+                  <div className="px-6 pt-4 flex items-center justify-between gap-2">
+                    <h5 className="font-semibold text-xl inline-block">Publish</h5>
+                    {project.is_deployed && (
+                      <Button
+                        variant="danger"
+                        onClick={() => handleUnpublishProject(watch("id") ?? "")}
+                        loading={isUnpublishing}
+                      >
+                        {isUnpublishing ? "Unpublishing..." : "Unpublish"}
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* content */}
+                  {projectPublishStore.fetchSettingsLoader ? (
+                    <Loader className="px-6 space-y-4">
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                    </Loader>
+                  ) : (
+                    <div className="px-6">
+                      {project.is_deployed && (
+                        <>
+                          <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
+                            <div className="truncate flex-grow text-sm">
+                              {`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
+                            </div>
+                            <div className="flex-shrink-0 relative flex items-center gap-1">
+                              <CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
+                            <div className="w-5 h-5 overflow-hidden flex items-center">
+                              <CircleDot className="h-5 w-5" />
+                            </div>
+                            <div className="text-sm">This project is live on web</div>
+                          </div>
+                        </>
+                      )}
+
+                      <div className="space-y-4 mt-6">
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Views</div>
+                          <Controller
+                            control={control}
+                            name="views"
+                            render={({ field: { onChange, value } }) => (
+                              <CustomPopover
+                                label={
+                                  value.length > 0
+                                    ? viewOptions
+                                        .filter((v) => value.includes(v.key))
+                                        .map((v) => v.label)
+                                        .join(", ")
+                                    : ``
+                                }
+                                placeholder="Select views"
+                              >
+                                <>
+                                  {viewOptions.map((option) => (
+                                    <div
+                                      key={option.key}
+                                      className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
+                                        value.includes(option.key)
+                                          ? "bg-custom-background-80 text-custom-text-100"
+                                          : "hover:bg-custom-background-80 hover:text-custom-text-100"
+                                      }`}
+                                      onClick={() => {
+                                        const _views =
+                                          value.length > 0
+                                            ? value.includes(option.key)
+                                              ? value.filter((_o: string) => _o !== option.key)
+                                              : [...value, option.key]
+                                            : [option.key];
+
+                                        if (_views.length === 0) return;
+
+                                        onChange(_views);
+                                        checkIfUpdateIsRequired();
+                                      }}
+                                    >
+                                      <div className="text-sm">{option.label}</div>
+                                      <div className={`w-4 h-4 relative flex justify-center items-center`}>
+                                        {value.length > 0 && value.includes(option.key) && (
+                                          <Check className="h-5 w-5" />
+                                        )}
+                                      </div>
+                                    </div>
+                                  ))}
+                                </>
+                              </CustomPopover>
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow comments</div>
+                          <Controller
+                            control={control}
+                            name="comments"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow reactions</div>
+                          <Controller
+                            control={control}
+                            name="reactions"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow voting</div>
+                          <Controller
+                            control={control}
+                            name="votes"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+
+                        {/* toggle inbox */}
+                        {/* <div className="relative flex justify-between items-center gap-2">
+                      <div className="text-sm">Allow issue proposals</div>
+                      <Controller
+                        control={control}
+                        name="inbox"
+                        render={({ field: { onChange, value } }) => (
+                          <ToggleSwitch value={value} onChange={onChange} size="sm" />
+                        )}
+                      />
+                    </div> */}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* modal handlers */}
+                  <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
+                    <div className="flex items-center gap-1 text-custom-text-400 text-sm">
+                      <Globe2 className="h-4 w-4" />
+                      <div className="text-sm">Anyone with the link can access</div>
+                    </div>
+                    {!projectPublishStore.fetchSettingsLoader && (
+                      <div className="relative flex items-center gap-2">
+                        <Button variant="neutral-primary" onClick={handleClose}>
+                          Cancel
+                        </Button>
+                        {project.is_deployed ? (
+                          <>
+                            {isUpdateRequired && (
+                              <Button variant="primary" type="submit" loading={isSubmitting}>
+                                {isSubmitting ? "Updating..." : "Update settings"}
+                              </Button>
+                            )}
+                          </>
+                        ) : (
+                          <Button variant="primary" type="submit" loading={isSubmitting}>
+                            {isSubmitting ? "Publishing..." : "Publish"}
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/project/publish-project/popover.tsx b/web/components/project/publish-project/popover.tsx
new file mode 100644
index 00000000000..b116ea3dc31
--- /dev/null
+++ b/web/components/project/publish-project/popover.tsx
@@ -0,0 +1,47 @@
+import React, { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export const CustomPopover = ({
+  children,
+  label,
+  placeholder = "Select",
+}: {
+  children: React.ReactNode;
+  label?: string;
+  placeholder?: string;
+}) => (
+  <div className="relative">
+    <Popover className="relative">
+      {({ open }) => (
+        <>
+          <Popover.Button className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}>
+            <div className="text-sm">{label ?? placeholder}</div>
+            <div className="w-5 h-5 grid place-items-center">
+              {!open ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
+            </div>
+          </Popover.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute right-0 z-10 mt-1 min-w-[150px]">
+              <div className="overflow-hidden rounded border border-custom-border-300 mt-1 overflow-y-auto bg-custom-background-90 shadow-custom-shadow-2xs focus:outline-none">
+                {children}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  </div>
+);
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
new file mode 100644
index 00000000000..755d7ec4f95
--- /dev/null
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -0,0 +1,311 @@
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+import { ChevronDown, Plus, X } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
+// services
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IUser, TUserProjectRole } from "types";
+// fetch-keys
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  members: any[];
+  user: IUser | undefined;
+  onSuccess: () => void;
+};
+
+type member = {
+  role: TUserProjectRole;
+  member_id: string;
+};
+
+type FormValues = {
+  members: member[];
+};
+
+const defaultValues: FormValues = {
+  members: [
+    {
+      role: 5,
+      member_id: "",
+    },
+  ],
+};
+
+// services
+const projectService = new ProjectService();
+const workspaceService = new WorkspaceService();
+
+export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
+  const { isOpen, setIsOpen, members, user, onSuccess } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { user: userStore } = useMobxStore();
+  const userRole = userStore.currentProjectRole;
+
+  const { data: people } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
+  );
+
+  const {
+    formState: { errors, isSubmitting },
+    reset,
+    handleSubmit,
+    control,
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "members",
+  });
+
+  const uninvitedPeople = people?.filter((person) => {
+    const isInvited = members?.find((member) => member.memberId === person.member.id);
+
+    return !isInvited;
+  });
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    const payload = { ...formData };
+
+    await projectService
+      .bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload, user)
+      .then(() => {
+        setIsOpen(false);
+        setToastAlert({
+          title: "成功",
+          type: "success",
+          message: "成功添加成员",
+        });
+        onSuccess();
+      })
+      .catch((error) => {
+        console.log(error);
+      })
+      .finally(() => {
+        reset(defaultValues);
+      });
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  const appendField = () => {
+    append({
+      role: 5,
+      member_id: "",
+    });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append([
+        {
+          role: 5,
+          member_id: "",
+        },
+      ]);
+    }
+  }, [fields, append]);
+
+  const options = uninvitedPeople?.map((person) => ({
+    value: person.member.id,
+    query: person.member.display_name,
+    content: (
+      <div className="flex items-center gap-2">
+        <Avatar name={person.member?.display_name} src={person.member?.avatar} />
+        {person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
+      </div>
+    ),
+  }));
+
+  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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex items-center justify-center min-h-full 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 transform rounded-lg border border-custom-border-200 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <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
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>
+                    </div>
+
+                    <div className="space-y-4 mb-3">
+                      {fields.map((field, index) => (
+                        <div key={field.id} className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start">
+                          <div className="flex flex-col gap-1 col-span-7">
+                            <Controller
+                              control={control}
+                              name={`members.${index}.member_id`}
+                              rules={{ required: "Please select a member" }}
+                              render={({ field: { value, onChange } }) => {
+                                const selectedMember = people?.find((p) => p.member.id === value)?.member;
+
+                                return (
+                                  <CustomSearchSelect
+                                    value={value}
+                                    customButton={
+                                      <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
+                                        {value && value !== "" ? (
+                                          <div className="flex items-center gap-2">
+                                            <Avatar name={selectedMember?.display_name} src={selectedMember?.avatar} />
+                                            {selectedMember?.display_name}
+                                          </div>
+                                        ) : (
+                                          <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
+                                        )}
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                      </button>
+                                    }
+                                    onChange={(val: string) => {
+                                      onChange(val);
+                                    }}
+                                    options={options}
+                                    width="w-full min-w-[12rem]"
+                                  />
+                                );
+                              }}
+                            />
+                            {errors.members && errors.members[index]?.member_id && (
+                              <span className="text-sm px-1 text-red-500">
+                                {errors.members[index]?.member_id?.message}
+                              </span>
+                            )}
+                          </div>
+
+                          <div className="flex items-center justify-between gap-2 col-span-5">
+                            <div className="flex flex-col gap-1 w-full">
+                              <Controller
+                                name={`members.${index}.role`}
+                                control={control}
+                                rules={{ required: "Select Role" }}
+                                render={({ field }) => (
+                                  <CustomSelect
+                                    {...field}
+                                    customButton={
+                                      <div className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2.5 text-sm text-left">
+                                        <span className="capitalize">
+                                          {field.value ? ROLE[field.value] : "Select role"}
+                                        </span>
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                      </div>
+                                    }
+                                    input
+                                    width="w-full"
+                                  >
+                                    {Object.entries(ROLE).map(([key, label]) => {
+                                      if (parseInt(key) > (userRole ?? 5)) return null;
+
+                                      return (
+                                        <CustomSelect.Option key={key} value={key}>
+                                          {label}
+                                        </CustomSelect.Option>
+                                      );
+                                    })}
+                                  </CustomSelect>
+                                )}
+                              />
+                              {errors.members && errors.members[index]?.role && (
+                                <span className="text-sm px-1 text-red-500">
+                                  {errors.members[index]?.role?.message}
+                                </span>
+                              )}
+                            </div>
+                            <div className="flex flex-item w-6">
+                              {fields.length > 1 && (
+                                <button
+                                  type="button"
+                                  className="self-center place-items-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 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
+                      onClick={appendField}
+                    >
+                      <Plus className="h-4 w-4" />
+                      Add more
+                    </button>
+                    <div className="flex items-center gap-2">
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
+                        {isSubmitting
+                          ? `${fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."}`
+                          : `${fields && fields.length > 1 ? "Add Members" : "Add Member"}`}
+                      </Button>
+                    </div>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/project/settings/delete-project-section.tsx b/web/components/project/settings/delete-project-section.tsx
new file mode 100644
index 00000000000..44d4d7f8fbf
--- /dev/null
+++ b/web/components/project/settings/delete-project-section.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+// ui
+import { Disclosure, Transition } from "@headlessui/react";
+import { Button, Loader } from "@plane/ui";
+// icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+// types
+import { IProject } from "types";
+
+export interface IDeleteProjectSection {
+  projectDetails: IProject;
+  handleDelete: () => void;
+}
+
+export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) => {
+  const { projectDetails, handleDelete } = props;
+
+  return (
+    <Disclosure as="div" className="border-t border-custom-border-400">
+      {({ open }) => (
+        <div className="w-full">
+          <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
+            <span className="text-xl tracking-tight">Delete Project</span>
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+          </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">
+                  The danger zone of the project delete page is a critical area that requires careful consideration and
+                  attention. When deleting a project, all of the data and resources within that project will be
+                  permanently removed and cannot be recovered.
+                </span>
+                <div>
+                  {projectDetails ? (
+                    <div>
+                      <Button variant="danger" onClick={handleDelete}>
+                        Delete my project
+                      </Button>
+                    </div>
+                  ) : (
+                    <Loader className="mt-2 w-full">
+                      <Loader.Item height="38px" width="144px" />
+                    </Loader>
+                  )}
+                </div>
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
new file mode 100644
index 00000000000..6e4e727c45d
--- /dev/null
+++ b/web/components/project/settings/features-list.tsx
@@ -0,0 +1,133 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
+import { DiceIcon, ToggleSwitch } from "@plane/ui";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { MiscellaneousEventType, TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IProject } from "types";
+
+type Props = {};
+
+const PROJECT_FEATURES_LIST = [
+  {
+    title: "Cycles",
+    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    icon: <ContrastIcon className="h-4 w-4 text-purple-500 flex-shrink-0 rotate-180" />,
+    property: "cycle_view",
+  },
+  {
+    title: "Modules",
+    description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <DiceIcon width={16} height={16} className="flex-shrink-0" />,
+    property: "module_view",
+  },
+  {
+    title: "Views",
+    description: "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <Layers className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
+    property: "issue_views_view",
+  },
+  {
+    title: "Pages",
+    description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    icon: <FileText className="h-4 w-4 text-red-400 flex-shrink-0" />,
+    property: "page_view",
+  },
+  {
+    title: "Inbox",
+    description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
+    icon: <Inbox className="h-4 w-4 text-fuchsia-500 flex-shrink-0" />,
+    property: "inbox_view",
+  },
+];
+
+const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType => {
+  switch (feature) {
+    case "Cycles":
+      return toggle ? "TOGGLE_CYCLE_ON" : "TOGGLE_CYCLE_OFF";
+    case "Modules":
+      return toggle ? "TOGGLE_MODULE_ON" : "TOGGLE_MODULE_OFF";
+    case "Views":
+      return toggle ? "TOGGLE_VIEW_ON" : "TOGGLE_VIEW_OFF";
+    case "Pages":
+      return toggle ? "TOGGLE_PAGES_ON" : "TOGGLE_PAGES_OFF";
+    case "Inbox":
+      return toggle ? "TOGGLE_INBOX_ON" : "TOGGLE_INBOX_OFF";
+    default:
+      throw new Error("Invalid feature");
+  }
+};
+
+// services
+const trackEventService = new TrackEventService();
+
+export const ProjectFeaturesList: FC<Props> = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { project: projectStore, user: userStore } = useMobxStore();
+  const { currentUser, currentProjectRole } = userStore;
+  const { currentProjectDetails } = projectStore;
+  const isAdmin = currentProjectRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId || !currentProjectDetails) return;
+    setToastAlert({
+      type: "success",
+      title: "Success!",
+      message: "Project feature updated successfully.",
+    });
+    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), formData);
+  };
+
+  if (!currentUser) return <></>;
+
+  return (
+    <div>
+      {PROJECT_FEATURES_LIST.map((feature) => (
+        <div
+          key={feature.property}
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
+        >
+          <div className="flex items-start gap-3">
+            <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">{feature.icon}</div>
+            <div className="">
+              <h4 className="text-sm font-medium">{feature.title}</h4>
+              <p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p>
+            </div>
+          </div>
+          <ToggleSwitch
+            value={currentProjectDetails?.[feature.property as keyof IProject]}
+            onChange={() => {
+              trackEventService.trackMiscellaneousEvent(
+                {
+                  workspaceId: (currentProjectDetails?.workspace as any)?.id,
+                  workspaceSlug,
+                  projectId,
+                  projectIdentifier: currentProjectDetails?.identifier,
+                  projectName: currentProjectDetails?.name,
+                },
+                getEventType(feature.title, !currentProjectDetails?.[feature.property as keyof IProject]),
+                currentUser
+              );
+              handleSubmit({
+                [feature.property]: !currentProjectDetails?.[feature.property as keyof IProject],
+              });
+            }}
+            disabled={!isAdmin}
+            size="sm"
+          />
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/project/settings/index.ts b/web/components/project/settings/index.ts
new file mode 100644
index 00000000000..0bf79ec17cc
--- /dev/null
+++ b/web/components/project/settings/index.ts
@@ -0,0 +1,2 @@
+export * from "./delete-project-section";
+export * from "./features-list";
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
new file mode 100644
index 00000000000..44c248114e3
--- /dev/null
+++ b/web/components/project/sidebar-list-item.tsx
@@ -0,0 +1,343 @@
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// icons
+import {
+  MoreVertical,
+  PenSquare,
+  LinkIcon,
+  Star,
+  Trash2,
+  FileText,
+  Settings,
+  Share2,
+  LogOut,
+  ChevronDown,
+} from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IProject } from "types";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
+import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project";
+
+type Props = {
+  project: IProject;
+  provided?: DraggableProvided;
+  snapshot?: DraggableStateSnapshot;
+  handleCopyText: () => void;
+  shortContextMenu?: boolean;
+};
+
+const navigation = (workspaceSlug: string, projectId: string) => [
+  {
+    name: "Issues",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    Icon: LayersIcon,
+  },
+  {
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    Icon: ContrastIcon,
+  },
+  {
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    Icon: DiceIcon,
+  },
+  {
+    name: "Views",
+    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    Icon: PhotoFilterIcon,
+  },
+  {
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    Icon: FileText,
+  },
+  {
+    name: "Settings",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    Icon: Settings,
+  },
+];
+
+export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
+  const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
+  // store
+  const { project: projectStore, theme: themeStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+  const [publishModalOpen, setPublishModal] = useState(false);
+
+  const isAdmin = project.member_role === 20;
+  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
+
+  const isCollapsed = themeStore.sidebarCollapsed;
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleLeaveProject = () => {
+    setLeaveProjectModal(true);
+  };
+
+  const handleLeaveProjectModalClose = () => {
+    setLeaveProjectModal(false);
+  };
+
+  const handleDeleteProjectClick = () => {
+    setDeleteProjectModal(true);
+  };
+
+  const handleDeleteProjectModalClose = () => {
+    setDeleteProjectModal(false);
+    router.push(`/${workspaceSlug}/projects`);
+  };
+
+  return (
+    <>
+      <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
+      <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
+      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
+        {({ open }) => (
+          <>
+            <div
+              className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
+                snapshot?.isDragging ? "opacity-60" : ""
+              }`}
+            >
+              {provided && (
+                <Tooltip
+                  tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+                  position="top-right"
+                >
+                  <button
+                    type="button"
+                    className={`absolute top-1/2 -translate-y-1/2 -left-2.5 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
+                      isCollapsed ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
+                    {...provided?.dragHandleProps}
+                  >
+                    <MoreVertical className="h-3.5" />
+                    <MoreVertical className="-ml-5 h-3.5" />
+                  </button>
+                </Tooltip>
+              )}
+              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
+                <Disclosure.Button
+                  as="div"
+                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    isCollapsed ? "justify-center" : `justify-between`
+                  }`}
+                >
+                  <div
+                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                      isCollapsed ? "justify-center" : ""
+                    }`}
+                  >
+                    {project.emoji ? (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                        {renderEmoji(project.emoji)}
+                      </span>
+                    ) : project.icon_prop ? (
+                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                        {renderEmoji(project.icon_prop)}
+                      </div>
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {project?.name.charAt(0)}
+                      </span>
+                    )}
+
+                    {!isCollapsed && (
+                      <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
+                    )}
+                  </div>
+                  {!isCollapsed && (
+                    <ChevronDown
+                      className={`h-4 w-4 flex-shrink-0 ${
+                        open ? "rotate-180" : ""
+                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
+                    />
+                  )}
+                </Disclosure.Button>
+              </Tooltip>
+
+              {!isCollapsed && (
+                <CustomMenu
+                  className="hidden group-hover:block flex-shrink-0"
+                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
+                  ellipsis
+                  placement="bottom-start"
+                >
+                  {!project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Star className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Add to favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  {project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Star className="h-3.5 w-3.5 stroke-[1.5] text-orange-400" fill="#f6ad55" />
+                        <span>Remove from favorites</span>
+                      </span>
+                    </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 project link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                      <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
+                        <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
+                          <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        </div>
+                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+
+                  {project.archive_in > 0 && (
+                    <CustomMenu.MenuItem
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Archived Issues</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${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>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${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>
+                    </div>
+                  </CustomMenu.MenuItem>
+
+                  {/* leave project */}
+                  {isViewerOrGuest && (
+                    <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>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+
+                  {!shortContextMenu && isAdmin && (
+                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
+                      <span className="flex items-center justify-start gap-2 ">
+                        <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>Delete project</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              )}
+            </div>
+
+            <Transition
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Disclosure.Panel className={`space-y-1 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
+                {navigation(workspaceSlug as string, project?.id).map((item) => {
+                  if (
+                    (item.name === "Cycles" && !project.cycle_view) ||
+                    (item.name === "Modules" && !project.module_view) ||
+                    (item.name === "Views" && !project.issue_views_view) ||
+                    (item.name === "Pages" && !project.page_view)
+                  )
+                    return;
+
+                  return (
+                    <Link key={item.name} href={item.href}>
+                      <a className="block w-full">
+                        <Tooltip
+                          tooltipContent={`${project?.name}: ${item.name}`}
+                          position="right"
+                          className="ml-2"
+                          disabled={!isCollapsed}
+                        >
+                          <div
+                            className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
+                              router.asPath.includes(item.href)
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
+                                : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${isCollapsed ? "justify-center" : ""}`}
+                          >
+                            <item.Icon className="h-4 w-4 stroke-[1.5]" />
+                            {!isCollapsed && item.name}
+                          </div>
+                        </Tooltip>
+                      </a>
+                    </Link>
+                  );
+                })}
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
+    </>
+  );
+});
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
new file mode 100644
index 00000000000..98d3cdb02f9
--- /dev/null
+++ b/web/components/project/sidebar-list.tsx
@@ -0,0 +1,271 @@
+import React, { useState, FC, useRef, useEffect } from "react";
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
+import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
+
+// icons
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IProject } from "types";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const ProjectSidebarList: FC = observer(() => {
+  const { theme: themeStore, project: projectStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // states
+  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
+  // refs
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // toast
+  const { setToastAlert } = useToast();
+
+  const joinedProjects = workspaceSlug && projectStore.joinedProjects;
+  const favoriteProjects = workspaceSlug && projectStore.favoriteProjects;
+
+  const orderedJoinedProjects: IProject[] | undefined = joinedProjects
+    ? orderArrayBy(joinedProjects, "sort_order", "ascending")
+    : undefined;
+
+  const orderedFavProjects: IProject[] | undefined = favoriteProjects
+    ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
+    : undefined;
+
+  const handleCopyText = (projectId: string) => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  const onDragEnd = async (result: DropResult) => {
+    const { source, destination, draggableId } = result;
+
+    if (!destination || !workspaceSlug) return;
+
+    if (source.index === destination.index) return;
+
+    const updatedSortOrder = projectStore.orderProjectsWithSortOrder(source.index, destination.index, draggableId);
+
+    projectStore
+      .updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        });
+      });
+  };
+
+  const isCollapsed = themeStore.sidebarCollapsed || false;
+
+  /**
+   * Implementing scroll animation styles based on the scroll length of the container
+   */
+  useEffect(() => {
+    const handleScroll = () => {
+      if (containerRef.current) {
+        const scrollTop = containerRef.current.scrollTop;
+        setIsScrolled(scrollTop > 0);
+      }
+    };
+    const currentContainerRef = containerRef.current;
+    if (currentContainerRef) {
+      currentContainerRef.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (currentContainerRef) {
+        currentContainerRef.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => {
+            setIsProjectModalOpen(false);
+          }}
+          setToFavorite={isFavoriteProjectCreate}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <div
+        ref={containerRef}
+        className={`h-full overflow-y-auto px-4 space-y-2 ${
+          isScrolled ? "border-t border-custom-sidebar-border-300" : ""
+        }`}
+      >
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="favorite-projects">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {orderedFavProjects && orderedFavProjects.length > 0 && (
+                  <Disclosure as="div" className="flex flex-col" defaultOpen>
+                    {({ open }) => (
+                      <>
+                        {!isCollapsed && (
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
+                            <Disclosure.Button
+                              as="button"
+                              type="button"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                            >
+                              Favorites
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
+                            </Disclosure.Button>
+                            <button
+                              className="group-hover:opacity-100 opacity-0"
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(true);
+                                setIsProjectModalOpen(true);
+                              }}
+                            >
+                              <Plus className="h-3 w-3" />
+                            </button>
+                          </div>
+                        )}
+                        <Disclosure.Panel as="div" className="space-y-2">
+                          {orderedFavProjects.map((project, index) => (
+                            <Draggable
+                              key={project.id}
+                              draggableId={project.id}
+                              index={index}
+                              isDragDisabled={!project.is_member}
+                            >
+                              {(provided, snapshot) => (
+                                <div ref={provided.innerRef} {...provided.draggableProps}>
+                                  <ProjectSidebarListItem
+                                    key={project.id}
+                                    project={project}
+                                    provided={provided}
+                                    snapshot={snapshot}
+                                    handleCopyText={() => handleCopyText(project.id)}
+                                    shortContextMenu
+                                  />
+                                </div>
+                              )}
+                            </Draggable>
+                          ))}
+                        </Disclosure.Panel>
+                        {provided.placeholder}
+                      </>
+                    )}
+                  </Disclosure>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="joined-projects">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {orderedJoinedProjects && orderedJoinedProjects.length > 0 && (
+                  <Disclosure as="div" className="flex flex-col" defaultOpen>
+                    {({ open }) => (
+                      <>
+                        {!isCollapsed && (
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
+                            <Disclosure.Button
+                              as="button"
+                              type="button"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                            >
+                              Projects
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
+                            </Disclosure.Button>
+                            <button
+                              className="group-hover:opacity-100 opacity-0"
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(false);
+                                setIsProjectModalOpen(true);
+                              }}
+                            >
+                              <Plus className="h-3 w-3" />
+                            </button>
+                          </div>
+                        )}
+                        <Transition
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform scale-95 opacity-0"
+                          enterTo="transform scale-100 opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform scale-100 opacity-100"
+                          leaveTo="transform scale-95 opacity-0"
+                        >
+                          <Disclosure.Panel as="div" className="space-y-2">
+                            {orderedJoinedProjects.map((project, index) => (
+                              <Draggable key={project.id} draggableId={project.id} index={index}>
+                                {(provided, snapshot) => (
+                                  <div ref={provided.innerRef} {...provided.draggableProps}>
+                                    <ProjectSidebarListItem
+                                      key={project.id}
+                                      project={project}
+                                      provided={provided}
+                                      snapshot={snapshot}
+                                      handleCopyText={() => handleCopyText(project.id)}
+                                    />
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                          </Disclosure.Panel>
+                        </Transition>
+                        {provided.placeholder}
+                      </>
+                    )}
+                  </Disclosure>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+
+        {joinedProjects && joinedProjects.length === 0 && (
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            }}
+          >
+            <Plus className="h-5 w-5" />
+            {!isCollapsed && "Add Project"}
+          </button>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
new file mode 100644
index 00000000000..46e36898d7e
--- /dev/null
+++ b/web/components/states/create-state-modal.tsx
@@ -0,0 +1,265 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { TwitterPicker } from "react-color";
+import { Dialog, Popover, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
+// icons
+import { ChevronDown } from "lucide-react";
+// types
+import type { IState } from "types";
+// constants
+import { GROUP_CHOICES } from "constants/project";
+
+// types
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  handleClose: () => void;
+};
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  description: "",
+  color: "rgb(var(--color-text-200))",
+  group: "backlog",
+};
+
+export const CreateStateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug) return;
+
+    const payload: IState = {
+      ...formData,
+    };
+
+    await projectStateStore
+      .createState(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
+        onClose();
+      })
+      .catch((err) => {
+        const error = err.response;
+
+        if (typeof error === "object") {
+          Object.keys(error).forEach((key) => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
+            });
+          });
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              error ?? err.status === 400
+                ? "Another state exists with the same name. Please try again with another name."
+                : "State could not be created. Please try again.",
+          });
+        }
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <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-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-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-80 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                      Create State
+                    </Dialog.Title>
+                    <div className="mt-2 space-y-3">
+                      <div>
+                        <Controller
+                          control={control}
+                          name="name"
+                          rules={{
+                            required: "Name is required",
+                          }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <>
+                              <label htmlFor="name" className="text-custom-text-200 mb-2">
+                                Name
+                              </label>
+                              <Input
+                                id="name"
+                                name="name"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.name)}
+                                placeholder="Enter name"
+                                className="w-full"
+                              />
+                            </>
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <Controller
+                          control={control}
+                          rules={{ required: true }}
+                          name="group"
+                          render={({ field: { value, onChange } }) => (
+                            <CustomSelect
+                              value={value}
+                              label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
+                              onChange={onChange}
+                              width="w-full"
+                              input
+                            >
+                              {Object.keys(GROUP_CHOICES).map((key) => (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <Popover className="relative">
+                          {({ open }) => (
+                            <>
+                              <Popover.Button
+                                className={`group inline-flex items-center rounded-md bg-custom-background-80 text-base font-medium hover:text-custom-text-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-custom-text-100" : "text-custom-text-200"
+                                }`}
+                              >
+                                <span>Color</span>
+                                {watch("color") && watch("color") !== "" && (
+                                  <span
+                                    className="ml-2 h-4 w-4 rounded"
+                                    style={{
+                                      backgroundColor: watch("color") ?? "black",
+                                    }}
+                                  />
+                                )}
+                                <ChevronDown
+                                  className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
+                                    open ? "text-gray-600" : "text-gray-400"
+                                  }`}
+                                  aria-hidden="true"
+                                />
+                              </Popover.Button>
+
+                              <Transition
+                                as={React.Fragment}
+                                enter="transition ease-out duration-200"
+                                enterFrom="opacity-0 translate-y-1"
+                                enterTo="opacity-100 translate-y-0"
+                                leave="transition ease-in duration-150"
+                                leaveFrom="opacity-100 translate-y-0"
+                                leaveTo="opacity-0 translate-y-1"
+                              >
+                                <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                                  <Controller
+                                    name="color"
+                                    control={control}
+                                    render={({ field: { value, onChange } }) => (
+                                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                                    )}
+                                  />
+                                </Popover.Panel>
+                              </Transition>
+                            </>
+                          )}
+                        </Popover>
+                      </div>
+                      <div>
+                        <label htmlFor="description" className="mb-2 text-custom-text-200">
+                          Description
+                        </label>
+                        <Controller
+                          name="description"
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Enter description"
+                              onChange={onChange}
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Creating State..." : "Create State"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
new file mode 100644
index 00000000000..15a26827221
--- /dev/null
+++ b/web/components/states/create-update-state-inline.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+import { useForm, Controller } from "react-hook-form";
+import { TwitterPicker } from "react-color";
+import { Popover, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
+// types
+import type { IState } from "types";
+// fetch-keys
+import { STATES_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/project";
+
+type Props = {
+  data: IState | null;
+  onClose: () => void;
+  groupLength: number;
+  selectedGroup: StateGroup | null;
+};
+
+export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  description: "",
+  color: "rgb(var(--color-text-200))",
+  group: "backlog",
+};
+
+export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
+  const { data, onClose, selectedGroup, groupLength } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    watch,
+    reset,
+    control,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  /**
+   * @description pre-populate form with data if data is present
+   */
+  useEffect(() => {
+    if (!data) return;
+    reset(data);
+  }, [data, reset]);
+
+  /**
+   * @description pre-populate form with default values if data is not present
+   */
+  useEffect(() => {
+    if (data) return;
+    reset({
+      ...defaultValues,
+      group: selectedGroup ?? "backlog",
+    });
+  }, [selectedGroup, data, reset]);
+
+  const handleClose = () => {
+    onClose();
+    reset({ name: "", color: "#000000", group: "backlog" });
+  };
+
+  const handleCreate = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    await projectStateStore
+      .createState(workspaceSlug.toString(), projectId.toString(), formData)
+      .then(() => {
+        handleClose();
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "State created successfully.",
+        });
+      })
+      .catch((error) => {
+        if (error.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State with that name already exists. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be created. Please try again.",
+          });
+      });
+  };
+
+  const handleUpdate = async (formData: IState) => {
+    if (!workspaceSlug || !projectId || !data || isSubmitting) return;
+
+    await projectStateStore
+      .updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
+      .then(() => {
+        mutate(STATES_LIST(projectId.toString()));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "State updated successfully.",
+        });
+      })
+      .catch((error) => {
+        if (error.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Another state exists with the same name. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be updated. Please try again.",
+          });
+      });
+  };
+
+  const onSubmit = async (formData: IState) => {
+    const payload: IState = {
+      ...formData,
+    };
+
+    if (data) await handleUpdate(payload);
+    else await handleCreate(payload);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex items-center gap-x-2 rounded-[10px] bg-custom-background-100 p-5"
+    >
+      <div className="flex-shrink-0">
+        <Popover className="relative flex h-full w-full items-center justify-center">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
+              >
+                {watch("color") && watch("color") !== "" && (
+                  <span
+                    className="h-5 w-5 rounded"
+                    style={{
+                      backgroundColor: watch("color") ?? "black",
+                    }}
+                  />
+                )}
+              </Popover.Button>
+
+              <Transition
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                    )}
+                  />
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+      </div>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          required: true,
+        }}
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="name"
+            name="name"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.name)}
+            placeholder="Name"
+            className="w-full"
+          />
+        )}
+      />
+      {data && (
+        <Controller
+          name="group"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}>
+              <div>
+                <CustomSelect
+                  disabled={groupLength === 1}
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
+                      ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
+                      : "Select group"
+                  }
+                  input
+                >
+                  {Object.keys(GROUP_CHOICES).map((key) => (
+                    <CustomSelect.Option key={key} value={key}>
+                      {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              </div>
+            </Tooltip>
+          )}
+        />
+      )}
+      <Controller
+        control={control}
+        name="description"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="description"
+            name="description"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.description)}
+            placeholder="Description"
+            className="w-full"
+          />
+        )}
+      />
+      <Button variant="neutral-primary" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button variant="primary" type="submit" loading={isSubmitting}>
+        {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
+      </Button>
+    </form>
+  );
+});
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
new file mode 100644
index 00000000000..b0c60970264
--- /dev/null
+++ b/web/components/states/delete-state-modal.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { AlertTriangle } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import type { IState } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IState | null;
+};
+
+export const DeleteStateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !data) return;
+
+    setIsDeleteLoading(true);
+
+    await projectStateStore
+      .deleteState(workspaceSlug.toString(), data.project, data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "This state contains some issues within it, please move them to some other state to delete this state.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be deleted. Please try again.",
+          });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete State
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete state-{" "}
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>? All of the data
+                          related to the state will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/states/index.ts b/web/components/states/index.ts
new file mode 100644
index 00000000000..f10af487a29
--- /dev/null
+++ b/web/components/states/index.ts
@@ -0,0 +1,6 @@
+export * from "./create-update-state-inline";
+export * from "./create-state-modal";
+export * from "./delete-state-modal";
+export * from "./project-setting-state-list-item";
+export * from "./state-select";
+export * from "./project-setting-state-list";
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
new file mode 100644
index 00000000000..7fc5dfc8836
--- /dev/null
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Tooltip, StateGroupIcon } from "@plane/ui";
+// icons
+import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
+
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IState } from "types";
+
+type Props = {
+  index: number;
+  state: IState;
+  statesList: IState[];
+  handleEditState: () => void;
+  handleDeleteState: () => void;
+};
+
+export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
+  const { index, state, statesList, handleEditState, handleDeleteState } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // derived values
+  const groupStates = statesList.filter((s) => s.group === state.group);
+  const groupLength = groupStates.length;
+
+  const handleMakeDefault = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsSubmitting(true);
+
+    projectStateStore.markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => {
+      setIsSubmitting(false);
+    });
+  };
+
+  const handleMove = (state: IState, direction: "up" | "down") => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectStateStore.moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index);
+  };
+
+  return (
+    <div className="group flex items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-3">
+      <div className="flex items-center gap-3">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+        <div>
+          <h6 className="text-sm font-medium">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-custom-text-200">{state.description}</p>
+        </div>
+      </div>
+      <div className="group flex items-center gap-2.5">
+        {index !== 0 && (
+          <button
+            type="button"
+            className="hidden text-custom-text-200 group-hover:inline-block"
+            onClick={() => handleMove(state, "up")}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </button>
+        )}
+        {!(index === groupLength - 1) && (
+          <button
+            type="button"
+            className="hidden text-custom-text-200 group-hover:inline-block"
+            onClick={() => handleMove(state, "down")}
+          >
+            <ArrowDown className="h-4 w-4" />
+          </button>
+        )}
+
+        <div className=" items-center gap-2.5 hidden group-hover:flex">
+          {state.default ? (
+            <span className="text-xs text-custom-text-200">Default</span>
+          ) : (
+            <button
+              type="button"
+              className="hidden text-xs text-custom-sidebar-text-400 group-hover:inline-block"
+              onClick={handleMakeDefault}
+              disabled={isSubmitting}
+            >
+              Mark as default
+            </button>
+          )}
+          <button
+            type="button"
+            className="grid place-items-center group-hover:opacity-100 opacity-0"
+            onClick={handleEditState}
+          >
+            <Pencil className="h-3.5 w-3.5 text-custom-text-200" />
+          </button>
+
+          <button
+            type="button"
+            className={`group-hover:opacity-100 opacity-0 ${
+              state.default || groupLength === 1 ? "cursor-not-allowed" : ""
+            } grid place-items-center`}
+            onClick={handleDeleteState}
+            disabled={state.default || groupLength === 1}
+          >
+            {state.default ? (
+              <Tooltip tooltipContent="Cannot delete the default state.">
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+              </Tooltip>
+            ) : groupLength === 1 ? (
+              <Tooltip tooltipContent="Cannot have an empty group.">
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+              </Tooltip>
+            ) : (
+              <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
new file mode 100644
index 00000000000..37205f4f904
--- /dev/null
+++ b/web/components/states/project-setting-state-list.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateStateInline, DeleteStateModal, ProjectSettingListItem, StateGroup } from "components/states";
+// ui
+import { Loader } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// helpers
+import { getStatesList, orderStateGroups } from "helpers/state.helper";
+// fetch-keys
+import { STATES_LIST } from "constants/fetch-keys";
+
+export const ProjectSettingStateList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // state
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const states = projectStore.projectStatesByGroups;
+  const orderedStateGroups = orderStateGroups(states!);
+  const statesList = getStatesList(orderedStateGroups);
+
+  return (
+    <>
+      <DeleteStateModal
+        isOpen={!!selectDeleteState}
+        onClose={() => setSelectDeleteState(null)}
+        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
+      />
+
+      <div className="space-y-8 py-6">
+        {states && currentProjectDetails && orderedStateGroups ? (
+          Object.keys(orderedStateGroups || {}).map((key) => {
+            if (orderedStateGroups[key].length !== 0)
+              return (
+                <div key={key} className="flex flex-col gap-2">
+                  <div className="flex w-full justify-between">
+                    <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
+                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="flex flex-col gap-2 rounded">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        data={null}
+                        groupLength={orderedStateGroups[key].length}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
+                    {orderedStateGroups[key].map((state, index) =>
+                      state.id !== selectedState ? (
+                        <ProjectSettingListItem
+                          key={state.id}
+                          index={index}
+                          state={state}
+                          statesList={statesList ?? []}
+                          handleEditState={() => setSelectedState(state.id)}
+                          handleDeleteState={() => setSelectDeleteState(state.id)}
+                        />
+                      ) : (
+                        <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
+                          <CreateUpdateStateInline
+                            onClose={() => {
+                              setActiveGroup(null);
+                              setSelectedState(null);
+                            }}
+                            groupLength={orderedStateGroups[key].length}
+                            data={statesList?.find((state) => state.id === selectedState) ?? null}
+                            selectedGroup={key as keyof StateGroup}
+                          />
+                        </div>
+                      )
+                    )}
+                  </div>
+                </div>
+              );
+          })
+        ) : (
+          <Loader className="space-y-5 md:w-2/3">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
new file mode 100644
index 00000000000..8f1872f190c
--- /dev/null
+++ b/web/components/states/state-select.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
+// ui
+import { StateGroupIcon, Tooltip } from "@plane/ui";
+// types
+import { IState } from "types";
+
+type Props = {
+  value: IState;
+  onChange: (state: IState) => void;
+  states: IState[] | undefined;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  hideDropdownArrow?: boolean;
+  disabled?: boolean;
+};
+
+export const StateSelect: React.FC<Props> = (props) => {
+  const {
+    value,
+    onChange,
+    states,
+    className = "",
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    hideDropdownArrow = false,
+    disabled = false,
+  } = props;
+
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
+      <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
+        {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
+        <span className="truncate">{value?.name ?? "State"}</span>
+      </div>
+    </Tooltip>
+  );
+
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left ${className}`}
+      value={value.id}
+      onChange={(data: string) => {
+        const selectedState = states?.find((state) => state.id === data);
+
+        if (selectedState) onChange(selectedState);
+      }}
+      disabled={disabled}
+    >
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          } ${buttonClassName}`}
+        >
+          {label}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${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
+              className="w-full bg-transparent py-1 px-2 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}
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
+  );
+};
diff --git a/web/components/toast-alert/index.tsx b/web/components/toast-alert/index.tsx
new file mode 100644
index 00000000000..84d596bed2a
--- /dev/null
+++ b/web/components/toast-alert/index.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed top-5 right-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute top-1 right-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <X className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                ? "bg-[#ef476f]"
+                : alert.type === "warning"
+                ? "bg-[#e98601]"
+                : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircle className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <Info className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;
diff --git a/apps/app/components/ui/circular-progress.tsx b/web/components/ui/circular-progress.tsx
similarity index 100%
rename from apps/app/components/ui/circular-progress.tsx
rename to web/components/ui/circular-progress.tsx
diff --git a/web/components/ui/date.tsx b/web/components/ui/date.tsx
new file mode 100644
index 00000000000..31cbdc9fd5d
--- /dev/null
+++ b/web/components/ui/date.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// icons
+import { CalendarDays, X } from "lucide-react";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+  label: string;
+  minDate?: Date;
+  maxDate?: Date;
+  closeOnSelect?: boolean;
+};
+
+export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, maxDate, closeOnSelect = true }) => (
+  <Popover className="relative flex items-center justify-center  rounded-lg">
+    {({ close }) => (
+      <>
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
+            {value ? (
+              <>
+                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
+                <button onClick={() => onChange(null)}>
+                  <X className="h-3 w-3" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDays className="h-4 w-4 flex-shrink-0" />
+                <span>{label}</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+
+                if (closeOnSelect) close();
+              }}
+              dateFormat="dd-MM-yyyy"
+              minDate={minDate}
+              maxDate={maxDate}
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/apps/app/components/ui/datepicker.tsx b/web/components/ui/datepicker.tsx
similarity index 75%
rename from apps/app/components/ui/datepicker.tsx
rename to web/components/ui/datepicker.tsx
index 825e87b1b01..2f4dd96b902 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/web/components/ui/datepicker.tsx
@@ -1,10 +1,8 @@
 // react-datepicker
-import DatePicker , { registerLocale } from "react-datepicker";
+import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
-import zh_CN from 'date-fns/locale/zh-CN'
-registerLocale('zh_CN', zh_CN)
 
 type Props = {
   renderAs?: "input" | "button";
@@ -30,8 +28,7 @@ export const CustomDatePicker: React.FC<Props> = ({
   onChange,
   handleOnOpen,
   handleOnClose,
-  placeholder = "选择日期",
-  displayShortForm = false,
+  placeholder = "Select date",
   error = false,
   noBorder = false,
   wrapperClassName = "",
@@ -43,7 +40,6 @@ export const CustomDatePicker: React.FC<Props> = ({
 }) => (
   <DatePicker
     placeholderText={placeholder}
-    locale={'zh_CN'}
     selected={value ? new Date(value) : null}
     onChange={(val) => {
       if (!val) onChange(null);
@@ -56,16 +52,12 @@ export const CustomDatePicker: React.FC<Props> = ({
       renderAs === "input"
         ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-        ? `px-2 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-custom-background-80"
-          } duration-300`
+        ? `px-2 py-1 text-xs shadow-sm ${disabled ? "" : "hover:bg-custom-background-80"} duration-300`
         : ""
-    } ${error ? "border-red-500 bg-red-100" : ""} ${
-      disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } ${
+    } ${error ? "border-red-500 bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${
       noBorder ? "" : "border border-custom-border-200"
     } w-full rounded-md caret-transparent outline-none ${className}`}
-    dateFormat="yyyy-MM-dd"
+    dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
     disabled={disabled}
     maxDate={maxDate}
diff --git a/apps/app/components/ui/dropdowns/context-menu.tsx b/web/components/ui/dropdowns/context-menu.tsx
similarity index 100%
rename from apps/app/components/ui/dropdowns/context-menu.tsx
rename to web/components/ui/dropdowns/context-menu.tsx
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
new file mode 100644
index 00000000000..46c15ae64d5
--- /dev/null
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// ui
+import { DropdownProps } from "components/ui";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+export type CustomMenuProps = DropdownProps & {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+};
+
+const CustomMenu = ({
+  buttonClassName = "",
+  customButtonClassName = "",
+  placement,
+  children,
+  className = "",
+  customButton,
+  disabled = false,
+  ellipsis = false,
+  label,
+  maxHeight = "md",
+  noBorder = false,
+  noChevron = false,
+  optionsClassName = "",
+  verticalEllipsis = false,
+  width = "auto",
+  menuButtonOnClick,
+}: CustomMenuProps) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={menuButtonOnClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
+                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items>
+            <div
+              className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                maxHeight === "lg"
+                  ? "max-h-60"
+                  : maxHeight === "md"
+                  ? "max-h-48"
+                  : maxHeight === "rg"
+                  ? "max-h-36"
+                  : maxHeight === "sm"
+                  ? "max-h-28"
+                  : ""
+              } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="py-1">{children}</div>
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+type MenuItemProps = {
+  children: React.ReactNode;
+  renderAs?: "button" | "a";
+  href?: string;
+  onClick?: (args?: any) => void;
+  className?: string;
+};
+
+const MenuItem: React.FC<MenuItemProps> = ({ children, renderAs, href, onClick, className = "" }) => (
+  <Menu.Item as="div">
+    {({ active, close }) =>
+      renderAs === "a" ? (
+        <Link href={href ?? ""}>
+          <a
+            className={`inline-block w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+              active ? "bg-custom-background-80" : ""
+            } ${className}`}
+            onClick={close}
+          >
+            {children}
+          </a>
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )
+    }
+  </Menu.Item>
+);
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
diff --git a/web/components/ui/dropdowns/custom-search-select.tsx b/web/components/ui/dropdowns/custom-search-select.tsx
new file mode 100644
index 00000000000..062fd8f7933
--- /dev/null
+++ b/web/components/ui/dropdowns/custom-search-select.tsx
@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { DropdownProps } from "./types";
+
+export type CustomSearchSelectProps = DropdownProps & {
+  footerOption?: JSX.Element;
+  onChange: any;
+  options:
+    | {
+        value: any;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+} & (
+    | { multiple?: false; value: any } // if multiple is false, value can be anything
+    | {
+        multiple?: true;
+        value: any[] | null; // if multiple is true, value should be an array
+      }
+  );
+
+export const CustomSearchSelect = ({
+  customButtonClassName = "",
+  buttonClassName = "",
+  className = "",
+  customButton,
+  placement,
+  disabled = false,
+  footerOption,
+  input = false,
+  label,
+  maxHeight = "md",
+  multiple = false,
+  noChevron = false,
+  onChange,
+  options,
+  onOpen,
+  optionsClassName = "",
+  value,
+  width = "auto",
+}: CustomSearchSelectProps) => {
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const props: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) props.multiple = true;
+
+  return (
+    <Combobox as="div" className={`relative flex-shrink-0 text-left ${className}`} {...props}>
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full text-xs ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+                </button>
+              </Combobox.Button>
+            )}
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                } ${optionsClassName}`}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
+                  <Search className="h-3 w-3 text-custom-text-200" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="键入搜索..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div
+                  className={`mt-2 space-y-1 ${
+                    maxHeight === "lg"
+                      ? "max-h-60"
+                      : maxHeight === "md"
+                      ? "max-h-48"
+                      : maxHeight === "rg"
+                      ? "max-h-36"
+                      : maxHeight === "sm"
+                      ? "max-h-28"
+                      : ""
+                  } overflow-y-scroll`}
+                >
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          value={option.value}
+                          className={({ active, selected }) =>
+                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                              active || selected ? "bg-custom-background-80" : ""
+                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                          }
+                        >
+                          {({ active, selected }) => (
+                            <>
+                              {option.content}
+                              {multiple ? (
+                                <div
+                                  className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
+                                    active || selected ? "opacity-100" : "opacity-0"
+                                  }`}
+                                >
+                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                </div>
+                              ) : (
+                                <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                              )}
+                            </>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <span className="flex items-center gap-2 p-1">
+                        <p className="text-left text-custom-text-200 ">无匹配结果</p>
+                      </span>
+                    )
+                  ) : (
+                    <p className="text-center text-custom-text-200">Loading...</p>
+                  )}
+                </div>
+                {footerOption}
+              </div>
+            </Combobox.Options>
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/web/components/ui/dropdowns/custom-select.tsx b/web/components/ui/dropdowns/custom-select.tsx
new file mode 100644
index 00000000000..422356a95d1
--- /dev/null
+++ b/web/components/ui/dropdowns/custom-select.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown } from "lucide-react";
+// types
+import { DropdownProps } from "./types";
+
+export type CustomSelectProps = DropdownProps & {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+};
+
+const CustomSelect = ({
+  customButtonClassName = "",
+  buttonClassName = "",
+  placement,
+  children,
+  className = "",
+  customButton,
+  disabled = false,
+  input = false,
+  label,
+  maxHeight = "md",
+  noChevron = false,
+  onChange,
+  optionsClassName = "",
+  value,
+  width = "auto",
+}: CustomSelectProps) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
+    >
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full text-xs ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            maxHeight === "lg"
+              ? "max-h-60"
+              : maxHeight === "md"
+              ? "max-h-48"
+              : maxHeight === "rg"
+              ? "max-h-36"
+              : maxHeight === "sm"
+              ? "max-h-28"
+              : ""
+          } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
+
+type OptionProps = {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+};
+
+const Option: React.FC<OptionProps> = ({ children, value, className }) => (
+  <Listbox.Option
+    value={value}
+    className={({ active, selected }) =>
+      `cursor-pointer select-none truncate rounded px-1 py-1.5 ${active || selected ? "bg-custom-background-80" : ""} ${
+        selected ? "text-custom-text-100" : "text-custom-text-200"
+      } ${className}`
+    }
+  >
+    {({ selected }) => (
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">{children}</div>
+        {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+      </div>
+    )}
+  </Listbox.Option>
+);
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/apps/app/components/ui/dropdowns/index.ts b/web/components/ui/dropdowns/index.ts
similarity index 100%
rename from apps/app/components/ui/dropdowns/index.ts
rename to web/components/ui/dropdowns/index.ts
diff --git a/web/components/ui/dropdowns/types.d.ts b/web/components/ui/dropdowns/types.d.ts
new file mode 100644
index 00000000000..4b153e6c1fd
--- /dev/null
+++ b/web/components/ui/dropdowns/types.d.ts
@@ -0,0 +1,18 @@
+import { Placement } from "@popperjs/core";
+
+export type DropdownProps = {
+  customButtonClassName?: string;
+  buttonClassName?: string;
+  customButtonClassName?: string;
+  className?: string;
+  customButton?: JSX.Element;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | JSX.Element;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  width?: "auto" | string;
+  placement?: Placement;
+};
diff --git a/apps/app/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
similarity index 79%
rename from apps/app/components/ui/empty-space.tsx
rename to web/components/ui/empty-space.tsx
index 1a8c5d9a39d..5e5746a541b 100644
--- a/apps/app/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // react
 import React from "react";
 // icons
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronRight } from "lucide-react";
 
 type EmptySpaceProps = {
   title: string;
@@ -24,10 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
 
       <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
       <div className="mt-1 text-sm text-custom-text-200">{description}</div>
-      <ul
-        role="list"
-        className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200"
-      >
+      <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200">
         {children}
       </ul>
       {link ? (
@@ -54,11 +51,7 @@ type EmptySpaceItemProps = {
 const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
   <>
     <li className="cursor-pointer" onClick={action}>
-      <div
-        className={`group relative flex ${
-          description ? "items-start" : "items-center"
-        } space-x-3 py-4`}
-      >
+      <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
         <div className="flex-shrink-0">
           <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -69,10 +62,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
           {description ? <div className="text-sm">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
-          <ChevronRightIcon
-            className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
-            aria-hidden="true"
-          />
+          <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
         </div>
       </div>
     </li>
diff --git a/apps/app/components/ui/graphs/bar-graph.tsx b/web/components/ui/graphs/bar-graph.tsx
similarity index 98%
rename from apps/app/components/ui/graphs/bar-graph.tsx
rename to web/components/ui/graphs/bar-graph.tsx
index ae4154f3636..565ca43e500 100644
--- a/apps/app/components/ui/graphs/bar-graph.tsx
+++ b/web/components/ui/graphs/bar-graph.tsx
@@ -43,7 +43,7 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
       }}
       labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       enableLabel={rest.enableLabel ?? false}
       {...rest}
     />
diff --git a/apps/app/components/ui/graphs/calendar-graph.tsx b/web/components/ui/graphs/calendar-graph.tsx
similarity index 100%
rename from apps/app/components/ui/graphs/calendar-graph.tsx
rename to web/components/ui/graphs/calendar-graph.tsx
diff --git a/apps/app/components/ui/graphs/index.ts b/web/components/ui/graphs/index.ts
similarity index 100%
rename from apps/app/components/ui/graphs/index.ts
rename to web/components/ui/graphs/index.ts
diff --git a/apps/app/components/ui/graphs/line-graph.tsx b/web/components/ui/graphs/line-graph.tsx
similarity index 97%
rename from apps/app/components/ui/graphs/line-graph.tsx
rename to web/components/ui/graphs/line-graph.tsx
index fb082e5fcaf..7adda5a1690 100644
--- a/apps/app/components/ui/graphs/line-graph.tsx
+++ b/web/components/ui/graphs/line-graph.tsx
@@ -30,7 +30,7 @@ export const LineGraph: React.FC<Props & TGraph & LineSvgProps> = ({
           : undefined,
       }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       {...rest}
     />
   </div>
diff --git a/apps/app/components/ui/graphs/pie-graph.tsx b/web/components/ui/graphs/pie-graph.tsx
similarity index 96%
rename from apps/app/components/ui/graphs/pie-graph.tsx
rename to web/components/ui/graphs/pie-graph.tsx
index 6f60afe2f7f..52b56e4926a 100644
--- a/apps/app/components/ui/graphs/pie-graph.tsx
+++ b/web/components/ui/graphs/pie-graph.tsx
@@ -16,7 +16,7 @@ export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "widt
     <ResponsivePie
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate={true}
+      animate
       {...rest}
     />
   </div>
diff --git a/apps/app/components/ui/graphs/scatter-plot-graph.tsx b/web/components/ui/graphs/scatter-plot-graph.tsx
similarity index 96%
rename from apps/app/components/ui/graphs/scatter-plot-graph.tsx
rename to web/components/ui/graphs/scatter-plot-graph.tsx
index 99f42d9584f..a14def58039 100644
--- a/apps/app/components/ui/graphs/scatter-plot-graph.tsx
+++ b/web/components/ui/graphs/scatter-plot-graph.tsx
@@ -11,7 +11,7 @@ export const ScatterPlotGraph: React.FC<
   <div style={{ height, width }}>
     <ResponsiveScatterPlot
       margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
-      animate={true}
+      animate
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
     />
diff --git a/apps/app/components/ui/graphs/types.d.ts b/web/components/ui/graphs/types.d.ts
similarity index 100%
rename from apps/app/components/ui/graphs/types.d.ts
rename to web/components/ui/graphs/types.d.ts
diff --git a/web/components/ui/icon.tsx b/web/components/ui/icon.tsx
new file mode 100644
index 00000000000..418186291b8
--- /dev/null
+++ b/web/components/ui/icon.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  iconName: string;
+  className?: string;
+};
+
+export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
+);
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
new file mode 100644
index 00000000000..e92fbf6f8bd
--- /dev/null
+++ b/web/components/ui/index.ts
@@ -0,0 +1,23 @@
+export * from "./dropdowns";
+export * from "./graphs";
+export * from "./input";
+export * from "./text-area";
+export * from "./date";
+export * from "./datepicker";
+export * from "./empty-space";
+export * from "./icon";
+export * from "./labels-list";
+export * from "./linear-progress-indicator";
+export * from "./loader";
+export * from "./multi-level-dropdown";
+export * from "./multi-level-select";
+export * from "./progress-bar";
+export * from "./spinner";
+export * from "./tooltip";
+export * from "./toggle-switch";
+export * from "./markdown-to-component";
+export * from "./product-updates-modal";
+export * from "./integration-and-import-export-banner";
+export * from "./range-datepicker";
+export * from "./circular-progress";
+export * from "./profile-empty-state";
diff --git a/apps/app/components/ui/input/index.tsx b/web/components/ui/input/index.tsx
similarity index 100%
rename from apps/app/components/ui/input/index.tsx
rename to web/components/ui/input/index.tsx
diff --git a/apps/app/components/ui/input/types.d.ts b/web/components/ui/input/types.d.ts
similarity index 100%
rename from apps/app/components/ui/input/types.d.ts
rename to web/components/ui/input/types.d.ts
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
new file mode 100644
index 00000000000..f1f637efc29
--- /dev/null
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -0,0 +1,18 @@
+import { AlertCircle } from "lucide-react";
+
+type Props = {
+  bannerName: string;
+  description?: string;
+};
+
+export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
+  <div className="flex items-start gap-3 py-3.5 border-b border-custom-border-200">
+    <h3 className="text-xl font-medium">{bannerName}</h3>
+    {description && (
+      <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
+        <AlertCircle className="h-6 w-6 text-custom-text-100" />
+        <p className="leading-5">{description}</p>
+      </div>
+    )}
+  </div>
+);
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
new file mode 100644
index 00000000000..ba054b116aa
--- /dev/null
+++ b/web/components/ui/labels-list.tsx
@@ -0,0 +1,29 @@
+import { FC } from "react";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+
+type IssueLabelsListProps = {
+  labels?: (IIssueLabels | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
+  const { labels } = props;
+  return (
+    <>
+      {labels && (
+        <>
+          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
+            <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              {`${labels.length} Labels`}
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/web/components/ui/linear-progress-indicator.tsx b/web/components/ui/linear-progress-indicator.tsx
new file mode 100644
index 00000000000..ac61f255ff6
--- /dev/null
+++ b/web/components/ui/linear-progress-indicator.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  data: any;
+  noTooltip?: boolean;
+};
+
+export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false }) => {
+  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let progress = 0;
+
+  const bars = data.map((item: any) => {
+    const width = `${(item.value / total) * 100}%`;
+    const style = {
+      width,
+      backgroundColor: item.color,
+    };
+    progress += item.value;
+    if (noTooltip) return <div style={style} />;
+    else
+      return (
+        <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
+          <div style={style} />
+        </Tooltip>
+      );
+  });
+
+  return (
+    <div className="flex h-1 w-full items-center justify-between gap-1">
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-1">{bars}</div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/ui/loader.tsx b/web/components/ui/loader.tsx
new file mode 100644
index 00000000000..b9d13883a7b
--- /dev/null
+++ b/web/components/ui/loader.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Loader = ({ children, className = "" }: Props) => (
+  <div className={`${className} animate-pulse`} role="status">
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+};
+
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div className="rounded-md bg-custom-background-80" style={{ height: height, width: width }} />
+);
+
+Loader.Item = Item;
+
+export { Loader };
diff --git a/apps/app/components/ui/markdown-to-component.tsx b/web/components/ui/markdown-to-component.tsx
similarity index 100%
rename from apps/app/components/ui/markdown-to-component.tsx
rename to web/components/ui/markdown-to-component.tsx
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
similarity index 85%
rename from apps/app/components/ui/multi-level-dropdown.tsx
rename to web/components/ui/multi-level-dropdown.tsx
index 8da8e00d2e4..13ed5c29cbe 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -3,10 +3,9 @@ import { Fragment, useState } from "react";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 
 type MultiLevelDropdownProps = {
   label: string;
@@ -52,7 +51,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                 }`}
               >
                 {label}
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
               </Menu.Button>
             </div>
             <Transition
@@ -94,13 +93,9 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
-                            {direction === "left" && option.hasChildren && (
-                              <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "left" && option.hasChildren && <ChevronLeft className="h-3.5 w-3.5" />}
                             <span>{option.label}</span>
-                            {direction === "right" && option.hasChildren && (
-                              <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "right" && option.hasChildren && <ChevronRight className="h-3.5 w-3.5" />}
                           </div>
                         </>
                       )}
@@ -108,9 +103,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     {option.hasChildren && option.id === openChildFor && (
                       <div
                         className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
-                          direction === "left"
-                            ? "right-full -translate-x-1"
-                            : "left-full translate-x-1"
+                          direction === "left" ? "right-full -translate-x-1" : "left-full translate-x-1"
                         } ${
                           height === "sm"
                             ? "max-h-28"
@@ -126,9 +119,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         {option.children ? (
                           <div className="space-y-1 p-1">
                             {option.children.length === 0 ? (
-                              <p className="text-custom-text-200 text-center px-1 py-1.5">
-                                未找到 {option.label} 
-                              </p> //if no children found, show this message.
+                              <p className="text-custom-text-200 text-center px-1 py-1.5">No {option.label} found</p> //if no children found, show this message.
                             ) : (
                               option.children.map((child) => {
                                 if (child.element) return child.element;
@@ -143,10 +134,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                       } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
                                     >
                                       {child.label}{" "}
-                                      <CheckIcon
-                                        className={`h-3.5 w-3.5 opacity-0 ${
-                                          child.selected ? "opacity-100" : ""
-                                        }`}
+                                      <Check
+                                        className={`h-3.5 w-3.5 opacity-0 ${child.selected ? "opacity-100" : ""}`}
                                       />
                                     </button>
                                   );
diff --git a/apps/app/components/ui/multi-level-select.tsx b/web/components/ui/multi-level-select.tsx
similarity index 87%
rename from apps/app/components/ui/multi-level-select.tsx
rename to web/components/ui/multi-level-select.tsx
index 4d0340604a8..addd6206cb0 100644
--- a/apps/app/components/ui/multi-level-select.tsx
+++ b/web/components/ui/multi-level-select.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronsUpDown } from "lucide-react";
 
 type TSelectOption = {
   id: string;
@@ -52,7 +52,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon className="h-5 w-5 text-custom-text-200" aria-hidden="true" />
+                <ChevronsUpDown className="h-5 w-5 text-custom-text-200" />
               </span>
             </Listbox.Button>
             <Transition
@@ -105,16 +105,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                               >
                                 {({ selected }) => (
                                   <>
-                                    <span
-                                      className={`block truncate ${
-                                        selected ? "font-medium" : "font-normal"
-                                      }`}
-                                    >
+                                    <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                                       {child.label}
                                     </span>
                                     {selected ? (
                                       <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        <Check className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
                                   </>
@@ -131,14 +127,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             />
                           </div>
                         )}
-                        <span
-                          className={`block truncate ${selected ? "font-medium" : "font-normal"}`}
-                        >
+                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                           {option.label}
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            <Check className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
                       </>
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
new file mode 100644
index 00000000000..4cd2bfc562e
--- /dev/null
+++ b/web/components/ui/product-updates-modal.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+
+import useSWR from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { renderLongDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+  const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
+        <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 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
+            <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 overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
+                  <Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
+                              </span>
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/ui/profile-empty-state.tsx b/web/components/ui/profile-empty-state.tsx
similarity index 100%
rename from apps/app/components/ui/profile-empty-state.tsx
rename to web/components/ui/profile-empty-state.tsx
diff --git a/apps/app/components/ui/progress-bar.tsx b/web/components/ui/progress-bar.tsx
similarity index 100%
rename from apps/app/components/ui/progress-bar.tsx
rename to web/components/ui/progress-bar.tsx
diff --git a/apps/app/components/ui/range-datepicker.tsx b/web/components/ui/range-datepicker.tsx
similarity index 100%
rename from apps/app/components/ui/range-datepicker.tsx
rename to web/components/ui/range-datepicker.tsx
diff --git a/web/components/ui/spinner.tsx b/web/components/ui/spinner.tsx
new file mode 100644
index 00000000000..b961880305b
--- /dev/null
+++ b/web/components/ui/spinner.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const Spinner: React.FC = () => (
+  <div role="status">
+    <svg
+      aria-hidden="true"
+      className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
diff --git a/apps/app/components/ui/text-area/index.tsx b/web/components/ui/text-area/index.tsx
similarity index 100%
rename from apps/app/components/ui/text-area/index.tsx
rename to web/components/ui/text-area/index.tsx
diff --git a/apps/app/components/ui/text-area/types.d.ts b/web/components/ui/text-area/types.d.ts
similarity index 100%
rename from apps/app/components/ui/text-area/types.d.ts
rename to web/components/ui/text-area/types.d.ts
diff --git a/web/components/ui/toggle-switch.tsx b/web/components/ui/toggle-switch.tsx
new file mode 100644
index 00000000000..5ad9377de11
--- /dev/null
+++ b/web/components/ui/toggle-switch.tsx
@@ -0,0 +1,43 @@
+import { Switch } from "@headlessui/react";
+
+type Props = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  className?: string;
+};
+
+export const ToggleSwitch: React.FC<Props> = (props) => {
+  const { value, onChange, label, size = "sm", disabled, className } = props;
+
+  return (
+    <Switch
+      checked={value}
+      disabled={disabled}
+      onChange={onChange}
+      className={`relative flex-shrink-0 inline-flex ${
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
+      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-custom-primary-100" : "bg-gray-700"
+      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
+    >
+      <span className="sr-only">{label}</span>
+      <span
+        aria-hidden="true"
+        className={`self-center inline-block ${
+          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
+        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
+          value
+            ? (size === "sm"
+                ? "translate-x-3"
+                : size === "md"
+                ? "translate-x-4"
+                : "translate-x-5") + " bg-white"
+            : "translate-x-0.5 bg-custom-background-90"
+        } ${disabled ? "cursor-not-allowed" : ""}`}
+      />
+    </Switch>
+  );
+};
diff --git a/web/components/ui/tooltip.tsx b/web/components/ui/tooltip.tsx
new file mode 100644
index 00000000000..468f795348d
--- /dev/null
+++ b/web/components/ui/tooltip.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { useTheme } from "next-themes";
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+type Props = {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+};
+
+export const Tooltip: React.FC<Props> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({ ref: eleReference, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      }
+    />
+  );
+};
diff --git a/web/components/user/index.ts b/web/components/user/index.ts
new file mode 100644
index 00000000000..9c2663b18c9
--- /dev/null
+++ b/web/components/user/index.ts
@@ -0,0 +1 @@
+export * from "./user-greetings";
diff --git a/web/components/user/user-greetings.tsx b/web/components/user/user-greetings.tsx
new file mode 100644
index 00000000000..f7d00a48920
--- /dev/null
+++ b/web/components/user/user-greetings.tsx
@@ -0,0 +1,49 @@
+import { FC } from "react";
+import { IUser } from "types";
+
+export interface IUserGreetingsView {
+  user: IUser;
+}
+
+export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
+  const { user } = props;
+
+  const currentTime = new Date();
+
+  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>
+      <h3 className="text-2xl font-semibold">
+        Good {greeting}, {user?.first_name} {user?.last_name}
+      </h3>
+      <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
+        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+        <div>
+          {weekDay}, {date} {timeString}
+        </div>
+      </h6>
+    </div>
+  );
+};
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
new file mode 100644
index 00000000000..5d0f6bd9651
--- /dev/null
+++ b/web/components/views/delete-view-modal.tsx
@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { AlertTriangle } from "lucide-react";
+// types
+import { IProjectView } from "types";
+
+type Props = {
+  data: IProjectView;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeleteView = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsDeleteLoading(true);
+
+    await projectViewsStore
+      .deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
+        });
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
+        })
+      )
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete view-{" "}
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the view will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={handleDeleteView}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
new file mode 100644
index 00000000000..55ccb2fee7b
--- /dev/null
+++ b/web/components/views/form.tsx
@@ -0,0 +1,177 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
+// ui
+import { Button, Input, TextArea } from "@plane/ui";
+// types
+import { IProjectView } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+type Props = {
+  data?: IProjectView | null;
+  handleClose: () => void;
+  handleFormSubmit: (values: IProjectView) => Promise<void>;
+  preLoadedData?: Partial<IProjectView> | null;
+};
+
+const defaultValues: Partial<IProjectView> = {
+  name: "",
+  description: "",
+};
+
+export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, handleClose, data, preLoadedData }) => {
+  const { project: projectStore } = useMobxStore();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+  } = useForm<IProjectView>({
+    defaultValues,
+  });
+
+  const selectedFilters = watch("query_data");
+
+  const handleCreateUpdateView = async (formData: IProjectView) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  const clearAllFilters = () => {
+    if (!selectedFilters) return;
+
+    setValue("query_data", {});
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+      ...data,
+    });
+  }, [data, preLoadedData, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+        <div className="space-y-3">
+          <div>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  id="name"
+                  type="name"
+                  name="name"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl"
+                />
+              )}
+            />
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  placeholder="Description"
+                  className="resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
+            />
+          </div>
+          <div>
+            <Controller
+              control={control}
+              name="query_data"
+              render={({ field: { onChange, value: filters } }) => (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={filters ?? {}}
+                    handleFiltersUpdate={(key, value) => {
+                      const newValues = filters?.[key] ?? [];
+
+                      if (Array.isArray(value)) {
+                        value.forEach((val) => {
+                          if (!newValues.includes(val)) newValues.push(val);
+                        });
+                      } else {
+                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                        else newValues.push(value);
+                      }
+
+                      onChange({
+                        ...filters,
+                        [key]: newValues,
+                      });
+                    }}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.list}
+                    labels={projectStore.projectLabels ?? undefined}
+                    members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
+                    states={projectStore.projectStatesByGroups ?? undefined}
+                  />
+                </FiltersDropdown>
+              )}
+            />
+          </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
+            <div>
+              <AppliedFiltersList
+                appliedFilters={selectedFilters}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={projectStore.projectLabels ?? undefined}
+                members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
+                states={projectStore.projectStatesByGroups ?? undefined}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" type="submit">
+          {data
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/web/components/views/index.ts b/web/components/views/index.ts
new file mode 100644
index 00000000000..b7ebe50817a
--- /dev/null
+++ b/web/components/views/index.ts
@@ -0,0 +1,5 @@
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./modal";
+export * from "./view-list-item";
+export * from "./views-list";
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
new file mode 100644
index 00000000000..fb1e9c2c6bc
--- /dev/null
+++ b/web/components/views/modal.tsx
@@ -0,0 +1,103 @@
+import { FC, Fragment } from "react";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
+// components
+import { ProjectViewForm } from "components/views";
+// types
+import { IProjectView } from "types";
+
+type Props = {
+  data?: IProjectView | null;
+  isOpen: boolean;
+  onClose: () => void;
+  preLoadedData?: Partial<IProjectView> | null;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
+  const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
+  // store
+  const { projectViews: projectViewsStore } = useMobxStore();
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const createView = async (payload: IProjectView) => {
+    await projectViewsStore
+      .createView(workspaceSlug, projectId, payload)
+      .then(() => handleClose())
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const updateView = async (payload: IProjectView) => {
+    await projectViewsStore
+      .updateView(workspaceSlug, projectId, data?.id as string, payload)
+      .then(() => handleClose())
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const handleFormSubmit = async (formData: IProjectView) => {
+    if (!data) await createView(formData);
+    else await updateView(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ProjectViewForm
+                  data={data}
+                  handleClose={handleClose}
+                  handleFormSubmit={handleFormSubmit}
+                  preLoadedData={preLoadedData}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
new file mode 100644
index 00000000000..ea5649c70ea
--- /dev/null
+++ b/web/components/views/view-list-item.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
+// ui
+import { CustomMenu } from "@plane/ui";
+// icons
+import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
+// types
+import { IProjectView } from "types";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { calculateTotalFilters } from "helpers/filter.helper";
+
+type Props = {
+  view: IProjectView;
+};
+
+export const ProjectViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectViewsStore.addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectViewsStore.removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+  };
+
+  const totalFilters = calculateTotalFilters(view.query_data ?? {});
+
+  return (
+    <>
+      {workspaceSlug && projectId && view && (
+        <CreateUpdateProjectViewModal
+          isOpen={createUpdateViewModal}
+          onClose={() => setCreateUpdateViewModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          data={view}
+        />
+      )}
+      <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+          <a className="flex items-center justify-between relative rounded p-4 w-full">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-4">
+                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <Sparkles size={14} strokeWidth={2} />
+                </div>
+                <div className="flex flex-col">
+                  <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                </div>
+              </div>
+              <div className="ml-2 flex flex-shrink-0">
+                <div className="flex items-center gap-4">
+                  <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 hidden group-hover:block">
+                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
+                  </p>
+
+                  {view.is_favorite ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRemoveFromFavorites();
+                      }}
+                      className="grid place-items-center"
+                    >
+                      <StarIcon className="text-orange-400" fill="#f6ad55" size={14} strokeWidth={2} />
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleAddToFavorites();
+                      }}
+                      className="grid place-items-center"
+                    >
+                      <StarIcon size={14} strokeWidth={2} />
+                    </button>
+                  )}
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setCreateUpdateViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon size={14} strokeWidth={2} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon size={14} strokeWidth={2} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
new file mode 100644
index 00000000000..6a5a6705bf8
--- /dev/null
+++ b/web/components/views/views-list.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectViewListItem } from "components/views";
+import { EmptyState } from "components/common";
+// ui
+import { Input, Loader } from "@plane/ui";
+// assets
+import emptyView from "public/empty-state/view.svg";
+// icons
+import { Plus, Search } from "lucide-react";
+
+export const ProjectViewsList = observer(() => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { projectId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
+
+  if (!viewsList)
+    return (
+      <Loader className="space-y-4 p-4">
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+      </Loader>
+    );
+
+  const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <>
+      {viewsList.length > 0 ? (
+        <div className="h-full w-full flex flex-col">
+          <div className="w-full flex flex-col overflow-hidden">
+            <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
+              <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+              <Input
+                className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                mode="true-transparent"
+              />
+            </div>
+          </div>
+          {filteredViewsList.length > 0 ? (
+            filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
+          ) : (
+            <p className="text-custom-text-300 text-sm text-center mt-10">No results found</p>
+          )}
+        </div>
+      ) : (
+        <EmptyState
+          title="Get focused with views"
+          description="Views aid in saving your issues by applying various filters and grouping options."
+          image={emptyView}
+          primaryButton={{
+            icon: <Plus size={14} strokeWidth={2} />,
+            text: "New View",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "v",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/app/components/workspace/activity-graph.tsx b/web/components/workspace/activity-graph.tsx
similarity index 93%
rename from apps/app/components/workspace/activity-graph.tsx
rename to web/components/workspace/activity-graph.tsx
index 50652f686cd..7c819d5ab39 100644
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/web/components/workspace/activity-graph.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -25,14 +25,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
   const fourMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 4, 1);
   const fiveMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
 
-  const recentMonths = [
-    fiveMonthsAgo,
-    fourMonthsAgo,
-    threeMonthsAgo,
-    twoMonthsAgo,
-    lastMonth,
-    today,
-  ];
+  const recentMonths = [fiveMonthsAgo, fourMonthsAgo, threeMonthsAgo, twoMonthsAgo, lastMonth, today];
 
   const getDatesOfMonth = (dateOfMonth: Date) => {
     const month = dateOfMonth.getMonth();
@@ -113,9 +106,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                   }个活动于 ${renderShortDateWithYearFormat(date)}`}
                 >
                   <div
-                    className={`${
-                      date === "" ? "pointer-events-none opacity-0" : ""
-                    } h-4 w-4 rounded ${
+                    className={`${date === "" ? "pointer-events-none opacity-0" : ""} h-4 w-4 rounded ${
                       isActive
                         ? `bg-custom-primary ${activitiesIntensity(isActive.activity_count)}`
                         : "bg-custom-background-80"
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/web/components/workspace/completed-issues-graph.tsx
similarity index 97%
rename from apps/app/components/workspace/completed-issues-graph.tsx
rename to web/components/workspace/completed-issues-graph.tsx
index a7e546803dc..dd780d42304 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/web/components/workspace/completed-issues-graph.tsx
@@ -1,5 +1,6 @@
 // ui
-import { CustomMenu, LineGraph } from "components/ui";
+import { LineGraph } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // constants
 import { MONTHS } from "constants/project";
 
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
new file mode 100644
index 00000000000..4b057f1de9a
--- /dev/null
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+  data?: any;
+};
+
+export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, onSubmit } = props;
+
+  const [isRemoving, setIsRemoving] = useState(false);
+
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  const handleClose = () => {
+    onClose();
+    setIsRemoving(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsRemoving(true);
+
+    await onSubmit();
+
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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-80 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        {user?.id === data?.memberId ? "Leave workspace?" : `Remove ${data?.display_name}?`}
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        {user?.id === data?.memberId ? (
+                          <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.
+                          </p>
+                        ) : (
+                          <p className="text-sm text-custom-text-200">
+                            Are you sure you want to remove member-{" "}
+                            <span className="font-bold">{data?.display_name}</span>? They will no longer have access to
+                            this workspace. This action cannot be undone.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isRemoving}>
+                    {isRemoving ? "Removing..." : "Remove"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
new file mode 100644
index 00000000000..41251dac6a0
--- /dev/null
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -0,0 +1,221 @@
+import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, CustomSelect, Input } from "@plane/ui";
+// types
+import { IWorkspace } from "types";
+// constants
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "constants/workspace";
+
+type Props = {
+  onSubmit?: (res: IWorkspace) => Promise<void>;
+  defaultValues: {
+    name: string;
+    slug: string;
+    organization_size: string;
+  };
+  setDefaultValues: Dispatch<SetStateAction<any>>;
+  secondaryButton?: React.ReactNode;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
+};
+
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspaceForm: FC<Props> = observer((props) => {
+  const {
+    onSubmit,
+    defaultValues,
+    setDefaultValues,
+    secondaryButton,
+    primaryButtonText = {
+      loading: "Creating...",
+      default: "Create Workspace",
+    },
+  } = props;
+
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+
+  const router = useRouter();
+
+  const { workspace: workspaceStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await workspaceService
+      .workspaceSlugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+
+          await workspaceStore
+            .createWorkspace(formData)
+            .then(async (res) => {
+              setToastAlert({
+                type: "success",
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+
+              if (onSubmit) await onSubmit(res);
+            })
+            .catch(() =>
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              })
+            );
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <form className="space-y-6 sm:space-y-9" onSubmit={handleSubmit(handleCreateWorkspace)}>
+      <div className="space-y-6 sm:space-y-7">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="workspaceName">Workspace Name</label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "Workspace name is required",
+              validate: (value) =>
+                /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+              maxLength: {
+                value: 80,
+                message: "Workspace name should not exceed 80 characters",
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <Input
+                id="workspaceName"
+                type="text"
+                value={value}
+                onChange={(e) => {
+                  onChange(e.target.value);
+                  setValue("name", e.target.value);
+                  setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
+                }}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Enter workspace name..."
+                className="w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="workspaceUrl">Workspace URL</label>
+          <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
+            <Controller
+              control={control}
+              name="slug"
+              rules={{
+                required: "Workspace URL is required",
+              }}
+              render={({ field: { onChange, value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder="Enter workspace name..."
+                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full border-none"
+                />
+              )}
+            />
+          </div>
+          {slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
+          {invalidSlug && (
+            <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
+          )}
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What size is your organization?</span>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
+                      <span className="text-custom-text-400">Select organization size</span>
+                    )
+                  }
+                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  input
+                  width="w-full"
+                >
+                  {ORGANIZATION_SIZE.map((item) => (
+                    <CustomSelect.Option key={item} value={item}>
+                      {item}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        {secondaryButton}
+        <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+        </Button>
+        <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
+          Go back
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
new file mode 100644
index 00000000000..7dbbe8173bc
--- /dev/null
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Dialog, Transition } from "@headlessui/react";
+import { AlertTriangle } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import type { IWorkspace } from "types";
+
+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;
+
+  const router = useRouter();
+
+  const { workspace: workspaceStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  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 workspaceStore
+      .deleteWorkspace(data.slug)
+      .then(() => {
+        handleClose();
+
+        router.push("/");
+
+        setToastAlert({
+          type: "success",
+          message: "工作区删除成功",
+          title: "成功",
+        });
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "出错了。请稍后再试。",
+        })
+      );
+  };
+
+  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 bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl 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"
+                        />
+                      )}
+                    />
+                  </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"
+                        />
+                      )}
+                    />
+                  </div>
+
+                  <div className="flex justify-end gap-2">
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" 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/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
new file mode 100644
index 00000000000..87dbbf37308
--- /dev/null
+++ b/web/components/workspace/help-section.tsx
@@ -0,0 +1,165 @@
+import React, { useRef, useState } from "react";
+import Link from "next/link";
+import { Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// icons
+import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
+import { DiscordIcon, GithubIcon } from "@plane/ui";
+// assets
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: FileText,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+  {
+    name: "Chat with us",
+    href: null,
+    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
+    Icon: MessagesSquare,
+  },
+];
+
+export interface WorkspaceHelpSectionProps {
+  setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
+  // store
+  const { theme: themeStore } = useMobxStore();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
+
+  const isCollapsed = themeStore.sidebarCollapsed || false;
+
+  return (
+    <>
+      <div
+        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
+          isCollapsed ? "flex-col" : ""
+        }`}
+      >
+        {!isCollapsed && (
+          <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
+            Free Plan
+          </div>
+        )}
+        <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"}`}>
+          <button
+            type="button"
+            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
+              isCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", {
+                key: "h",
+              });
+              document.dispatchEvent(e);
+            }}
+          >
+            <Zap className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
+              isCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          >
+            <HelpCircle className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
+            onClick={() => themeStore.toggleSidebar()}
+          >
+            <MoveLeft className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
+              isCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => themeStore.toggleSidebar()}
+          >
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </div>
+
+        <div className="relative">
+          <Transition
+            show={isNeedHelpOpen}
+            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"
+          >
+            <div
+              className={`absolute bottom-2 min-w-[10rem] ${
+                isCollapsed ? "left-full" : "-left-[75px]"
+              } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
+              ref={helpOptionsRef}
+            >
+              <div className="space-y-1 pb-2">
+                {helpOptions.map(({ name, Icon, href, onClick }) => {
+                  if (href)
+                    return (
+                      <Link href={href} key={name}>
+                        <a
+                          target="_blank"
+                          className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                        >
+                          <div className="grid place-items-center flex-shrink-0">
+                            <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
+                          </div>
+                          <span className="text-xs">{name}</span>
+                        </a>
+                      </Link>
+                    );
+                  else
+                    return (
+                      <button
+                        key={name}
+                        type="button"
+                        onClick={onClick ?? undefined}
+                        className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                      >
+                        <div className="grid place-items-center flex-shrink-0">
+                          <Icon className="text-custom-text-200 h-3.5 w-3.5" />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </button>
+                    );
+                })}
+              </div>
+              <div className="px-2 pt-2 pb-1 text-[10px]">Version: v{packageJson.version}</div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/index.ts b/web/components/workspace/index.ts
new file mode 100644
index 00000000000..332ea6c609e
--- /dev/null
+++ b/web/components/workspace/index.ts
@@ -0,0 +1,17 @@
+export * from "./settings";
+export * from "./views";
+export * from "./activity-graph";
+export * from "./completed-issues-graph";
+export * from "./confirm-workspace-member-remove";
+export * from "./create-workspace-form";
+export * from "./delete-workspace-modal";
+export * from "./help-section";
+export * from "./issues-list";
+export * from "./issues-pie-chart";
+export * from "./issues-stats";
+export * from "./member-select";
+export * from "./send-workspace-invitation-modal";
+export * from "./sidebar-dropdown";
+export * from "./sidebar-menu";
+export * from "./sidebar-quick-action";
+export * from "./single-invitation";
diff --git a/web/components/workspace/issues-list.tsx b/web/components/workspace/issues-list.tsx
new file mode 100644
index 00000000000..5ec0769af5e
--- /dev/null
+++ b/web/components/workspace/issues-list.tsx
@@ -0,0 +1,97 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// icons
+import { AlertTriangle } from "lucide-react";
+import { LayersIcon, Loader } from "@plane/ui";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import { IIssueLite } from "types";
+
+type Props = {
+  issues: IIssueLite[] | undefined;
+  type: "overdue" | "upcoming";
+};
+
+export const IssuesList: React.FC<Props> = ({ issues, type }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const getDateDifference = (date: Date) => {
+    const today = new Date();
+
+    let diffTime = 0;
+
+    if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf());
+    else diffTime = Math.abs(date.valueOf() - today.valueOf());
+
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    return diffDays;
+  };
+
+  return (
+    <div>
+      <h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
+      {issues ? (
+        <div className="h-[calc(100%-2.25rem)] rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 text-sm">
+          <div
+            className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
+              type === "overdue" ? "bg-red-500/20 bg-opacity-20" : "bg-custom-background-80"
+            }`}
+          >
+            <h4 className="capitalize">{type}</h4>
+            <h4 className="col-span-2">Issue</h4>
+            <h4>{type === "overdue" ? "Due" : "Start"} Date</h4>
+          </div>
+          <div className="max-h-72 overflow-y-scroll">
+            {issues.length > 0 ? (
+              issues.map((issue) => {
+                const date = type === "overdue" ? issue.target_date : issue.start_date;
+
+                const dateDifference = getDateDifference(new Date(date as string));
+
+                return (
+                  <Link href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`} key={issue.id}>
+                    <a>
+                      <div className="grid grid-cols-4 gap-2 px-3 py-2">
+                        <h5
+                          className={`flex cursor-default items-center gap-2 ${
+                            type === "overdue" ? (dateDifference > 6 ? "text-red-500" : "text-yellow-400") : ""
+                          }`}
+                        >
+                          {type === "overdue" && <AlertTriangle className="h-3.5 w-3.5" />}
+                          {dateDifference} {dateDifference > 1 ? "days" : "day"}
+                        </h5>
+                        <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
+                        <h5 className="cursor-default">
+                          {renderShortDateWithYearFormat(new Date(date?.toString() ?? ""))}
+                        </h5>
+                      </div>
+                    </a>
+                  </Link>
+                );
+              })
+            ) : (
+              <div className="grid h-full place-items-center">
+                <div className="my-5 flex flex-col items-center gap-4">
+                  <LayersIcon height={60} width={60} />
+                  <span className="text-custom-text-200">
+                    No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
+                    shortcut to create a new issue
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <Loader>
+          <Loader.Item height="200" />
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/web/components/workspace/issues-pie-chart.tsx
similarity index 94%
rename from apps/app/components/workspace/issues-pie-chart.tsx
rename to web/components/workspace/issues-pie-chart.tsx
index 3c7d7be9db8..9e7aa68b983 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/web/components/workspace/issues-pie-chart.tsx
@@ -1,9 +1,7 @@
 // ui
 import { PieGraph } from "components/ui";
-// helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
-import { IUserStateDistribution } from "types";
+import { IUserStateDistribution, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -23,7 +21,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
                 id: cell.state_group,
                 label: cell.state_group,
                 value: cell.state_count,
-                color: STATE_GROUP_COLORS[cell.state_group.toLowerCase()],
+                color: STATE_GROUP_COLORS[cell.state_group.toLowerCase() as TStateGroups],
               })) ?? []
             }
             height="320px"
diff --git a/web/components/workspace/issues-stats.tsx b/web/components/workspace/issues-stats.tsx
new file mode 100644
index 00000000000..22e966ac835
--- /dev/null
+++ b/web/components/workspace/issues-stats.tsx
@@ -0,0 +1,90 @@
+// components
+import { ActivityGraph } from "components/workspace";
+// ui
+import { Loader, Tooltip } from "@plane/ui";
+// icons
+import { Info } from "lucide-react";
+// types
+import { IUserWorkspaceDashboard } from "types";
+import { useRouter } from "next/router";
+
+type Props = {
+  data: IUserWorkspaceDashboard | undefined;
+};
+
+export const IssuesStats: React.FC<Props> = ({ data }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  return (
+    <div className="grid grid-cols-1 rounded-[10px] border border-custom-border-200 bg-custom-background-100 lg:grid-cols-3">
+      <div className="grid grid-cols-1 divide-y divide-custom-border-200 border-b border-custom-border-200 lg:border-r lg:border-b-0">
+        <div className="flex">
+          <div className="basis-1/2 p-4">
+            <h4 className="text-sm">Issues assigned to you</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                <div className="cursor-pointer" onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}>
+                  {data.assigned_issues_count}
+                </div>
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+          <div className="basis-1/2 border-l border-custom-border-200 p-4">
+            <h4 className="text-sm">Pending issues</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.pending_issues_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+        </div>
+        <div className="flex">
+          <div className="basis-1/2 p-4">
+            <h4 className="text-sm">Completed issues</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.completed_issues_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+          <div className="basis-1/2 border-l border-custom-border-200 p-4">
+            <h4 className="text-sm">Issues due by this week</h4>
+            <h5 className="mt-2 text-2xl font-semibold">
+              {data ? (
+                data.issues_due_week_count
+              ) : (
+                <Loader>
+                  <Loader.Item height="25px" width="50%" />
+                </Loader>
+              )}
+            </h5>
+          </div>
+        </div>
+      </div>
+      <div className="p-4 lg:col-span-2">
+        <h3 className="mb-2 font-semibold capitalize flex items-center gap-2">
+          Activity Graph
+          <Tooltip
+            tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
+            className="w-72 border border-custom-border-200"
+          >
+            <Info className="h-3 w-3" />
+          </Tooltip>
+        </h3>
+        <ActivityGraph activities={data?.issue_activities} />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/workspace/member-select.tsx b/web/components/workspace/member-select.tsx
new file mode 100644
index 00000000000..3ba1cbd899f
--- /dev/null
+++ b/web/components/workspace/member-select.tsx
@@ -0,0 +1,135 @@
+import React, { FC, useState, Fragment } from "react";
+// popper js
+import { usePopper } from "react-popper";
+// ui
+import { Avatar, Input } from "@plane/ui";
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, Search, User2 } from "lucide-react";
+// types
+import { IWorkspaceMember } from "types";
+
+export interface IWorkspaceMemberSelect {
+  value: IWorkspaceMember | undefined;
+  onChange: (value: IWorkspaceMember) => void;
+  options: IWorkspaceMember[];
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
+  const { value, onChange, options, placeholder = "Select Member", disabled = false } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  // const options = workspaceMembers?.map((member: any) => ({
+  //   value: member.member.id,
+  //   query: member.member.display_name,
+  //   content: (
+  //     <div className="flex items-center gap-2">
+  //       <Avatar user={member.member} />
+  //       {member.member.display_name}
+  //     </div>
+  //   ),
+  // }));
+
+  // const selectedOption = workspaceMembers?.find((member) => member.member.id === value);
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
+
+  const label = (
+    <div
+      className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
+            "
+    >
+      {value ? (
+        <>
+          <Avatar name={value?.member.display_name} src={value?.member.avatar} />
+          <span className="text-xs leading-4"> {value?.member.display_name}</span>
+        </>
+      ) : (
+        <>
+          <User2 className="h-[18px] w-[18px]" />
+          <span className="text-xs leading-4">{placeholder}</span>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Listbox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={onChange} disabled={disabled}>
+      <Listbox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+          }`}
+        >
+          {label}
+        </button>
+      </Listbox.Button>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          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" />
+            <Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 border-none focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+            />
+          </div>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                  <Listbox.Option
+                    key={workspaceMember.id}
+                    value={workspaceMember}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        <div className="flex items-center gap-2">
+                          <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
+                          {workspaceMember.member.display_name}
+                        </div>
+                        {selected && <Check className="h-3.5 w-3.5" />}
+                      </>
+                    )}
+                  </Listbox.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-center text-custom-text-200">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
similarity index 76%
rename from apps/app/components/workspace/send-workspace-invitation-modal.tsx
rename to web/components/workspace/send-workspace-invitation-modal.tsx
index d411e216043..242adeac727 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -1,36 +1,33 @@
 import React, { useEffect } from "react";
-
-// swr
 import { mutate } from "swr";
-// react-hook-form
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-// headless
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Plus, X } from "lucide-react";
 // types
-import { ICurrentUserResponse } from "types";
+import { IUser, TUserWorkspaceRole } from "types";
 // constants
 import { ROLE } from "constants/workspace";
+// fetch-keys
 import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  workspace_slug: string;
-  user: ICurrentUserResponse | undefined;
-  onSuccess: () => void;
+  onClose: () => void;
+  workspaceSlug: string;
+  user: IUser | undefined;
+  onSuccess?: () => Promise<void>;
 };
 
 type EmailRole = {
   email: string;
-  role: 5 | 10 | 15 | 20;
+  role: TUserWorkspaceRole;
 };
 
 type FormValues = {
@@ -46,8 +43,11 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
-  const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
+const workspaceService = new WorkspaceService();
+
+export const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose, workspaceSlug, user, onSuccess } = props;
+
   const {
     control,
     reset,
@@ -63,42 +63,38 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
+
     const timeout = setTimeout(() => {
       reset(defaultValues);
       clearTimeout(timeout);
-    }, 500);
+    }, 350);
   };
 
   const onSubmit = async (formData: FormValues) => {
-    if (!workspace_slug) return;
-
-    const payload = { ...formData };
+    if (!workspaceSlug) return;
 
     await workspaceService
-      .inviteWorkspace(workspace_slug, payload, user)
-      .then(async (res) => {
-        setIsOpen(false);
+      .inviteWorkspace(workspaceSlug, formData, user)
+      .then(async () => {
+        if (onSuccess) await onSuccess();
+
         handleClose();
+
         setToastAlert({
           type: "success",
-          title: "成功!",
-          message: "成功邀请了成员",
+          title: "Success!",
+          message: "Invitations sent successfully.",
         });
-        onSuccess();
       })
-      .catch((err) => {
+      .catch((err) =>
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: `${err.error}`,
-        });
-        console.log(err);
-      })
-      .finally(() => {
-        reset(defaultValues);
-        mutate(WORKSPACE_INVITATIONS);
-      });
+          message: `${err.error ?? "Something went wrong. Please try again."}`,
+        })
+      )
+      .finally(() => mutate(WORKSPACE_INVITATIONS));
   };
 
   const appendField = () => {
@@ -106,9 +102,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
   };
 
   useEffect(() => {
-    if (fields.length === 0) {
-      append([{ email: "", role: 15 }]);
-    }
+    if (fields.length === 0) append([{ email: "", role: 15 }]);
   }, [fields, append]);
 
   return (
@@ -145,16 +139,11 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                   }}
                 >
                   <div className="space-y-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
-                      邀请他人合作
+                    <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>
+                      <p className="text-sm text-custom-text-200">Invite members to work on your workspace.</p>
                     </div>
 
                     <div className="space-y-4 mb-3">
@@ -171,12 +160,18 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                                   message: "Invalid Email ID",
                                 },
                               }}
-                              render={({ field }) => (
+                              render={({ field: { value, onChange, ref } }) => (
                                 <>
                                   <Input
-                                    {...field}
-                                    className="text-xs sm:text-sm"
+                                    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="text-xs sm:text-sm w-full"
                                   />
                                   {errors.emails?.[index]?.email && (
                                     <span className="ml-1 text-red-500 text-xs">
@@ -215,7 +210,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                               className="self-center place-items-center rounded -ml-3"
                               onClick={() => remove(index)}
                             >
-                              <XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                              <X className="h-3.5 w-3.5 text-custom-text-200" />
                             </button>
                           )}
                         </div>
@@ -229,14 +224,16 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
@@ -248,5 +245,3 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
     </Transition.Root>
   );
 };
-
-export default SendWorkspaceInvitationModal;
diff --git a/web/components/workspace/settings/index.ts b/web/components/workspace/settings/index.ts
new file mode 100644
index 00000000000..fb7aa7526f8
--- /dev/null
+++ b/web/components/workspace/settings/index.ts
@@ -0,0 +1,3 @@
+export * from "./members-list-item";
+export * from "./members-list";
+export * from "./workspace-details";
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
new file mode 100644
index 00000000000..99c4de08830
--- /dev/null
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -0,0 +1,209 @@
+import { useState, FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ConfirmWorkspaceMemberRemove } from "components/workspace";
+// ui
+import { CustomSelect, Tooltip } from "@plane/ui";
+// icons
+import { ChevronDown, XCircle } from "lucide-react";
+// constants
+import { ROLE } from "constants/workspace";
+import { TUserWorkspaceRole } from "types";
+
+type Props = {
+  member: {
+    id: string;
+    memberId: string;
+    avatar: string;
+    first_name: string;
+    last_name: string;
+    email: string | undefined;
+    display_name: string;
+    role: TUserWorkspaceRole;
+    status: boolean;
+    member: boolean;
+    accountCreated: boolean;
+  };
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const WorkspaceMembersListItem: FC<Props> = (props) => {
+  const { member } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { workspace: workspaceStore, user: userStore } = useMobxStore();
+  const { currentWorkspaceMemberInfo, currentWorkspaceRole } = userStore;
+  const isAdmin = currentWorkspaceRole === 20;
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState(false);
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleRemoveMember = async () => {
+    if (!workspaceSlug) return;
+
+    if (member.member)
+      await workspaceStore.removeMember(workspaceSlug.toString(), member.id).catch((err) => {
+        const error = err?.error;
+        setToastAlert({
+          type: "error",
+          title: "Error",
+          message: error || "Something went wrong",
+        });
+      });
+    else
+      await workspaceService
+        .deleteWorkspaceInvitations(workspaceSlug.toString(), member.id)
+        .then(() => {
+          setToastAlert({
+            type: "success",
+            title: "Success",
+            message: "Member removed successfully",
+          });
+        })
+        .catch((err) => {
+          const error = err?.error;
+
+          setToastAlert({
+            type: "error",
+            title: "Error",
+            message: error || "Something went wrong",
+          });
+        });
+  };
+
+  if (!currentWorkspaceMemberInfo) return null;
+
+  return (
+    <>
+      <ConfirmWorkspaceMemberRemove
+        isOpen={removeMemberModal}
+        onClose={() => setRemoveMemberModal(false)}
+        data={member}
+        onSubmit={handleRemoveMember}
+      />
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+        <div className="flex items-center gap-x-4 gap-y-2">
+          {member.avatar && member.avatar !== "" ? (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+                <img
+                  src={member.avatar}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                  alt={member.display_name || member.email}
+                />
+              </a>
+            </Link>
+          ) : (
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+                {(member.email ?? member.display_name ?? "?")[0]}
+              </a>
+            </Link>
+          )}
+          <div>
+            {member.member ? (
+              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+                <a className="text-sm font-medium">
+                  {member.first_name} {member.last_name}
+                </a>
+              </Link>
+            ) : (
+              <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
+            )}
+            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          {!member?.status && (
+            <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
+              <p>Pending</p>
+            </div>
+          )}
+          {member?.status && !member?.accountCreated && (
+            <div className="flex items-center justify-center rounded bg-blue-500/20 px-2.5 py-1 text-center text-xs text-blue-500 font-medium">
+              <p>Account not created</p>
+            </div>
+          )}
+          <CustomSelect
+            customButton={
+              <div className="flex item-center gap-1 px-2 py-0.5 rounded">
+                <span
+                  className={`flex items-center text-xs font-medium rounded ${
+                    member.memberId !== currentWorkspaceMemberInfo.member ? "" : "text-custom-sidebar-text-400"
+                  }`}
+                >
+                  {ROLE[member.role as keyof typeof ROLE]}
+                </span>
+                {member.memberId !== currentWorkspaceMemberInfo.member && (
+                  <span className="grid place-items-center">
+                    <ChevronDown className="h-3 w-3" />
+                  </span>
+                )}
+              </div>
+            }
+            value={member.role}
+            onChange={(value: TUserWorkspaceRole | undefined) => {
+              if (!workspaceSlug || !value) return;
+
+              workspaceStore
+                .updateMember(workspaceSlug.toString(), member.id, {
+                  role: value,
+                })
+                .catch(() => {
+                  setToastAlert({
+                    type: "error",
+                    title: "Error!",
+                    message: "An error occurred while updating member role. Please try again.",
+                  });
+                });
+            }}
+            disabled={
+              member.memberId === currentWorkspaceMemberInfo.member ||
+              !member.status ||
+              Boolean(currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < member.role)
+            }
+            placement="bottom-end"
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
+                return null;
+
+              return (
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          {isAdmin && (
+            <Tooltip
+              tooltipContent={
+                member.memberId === currentWorkspaceMemberInfo.member ? "Leave workspace" : "Remove member"
+              }
+            >
+              <button
+                type="button"
+                onClick={() => setRemoveMemberModal(true)}
+                className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              >
+                <XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
new file mode 100644
index 00000000000..d09f2558d6c
--- /dev/null
+++ b/web/components/workspace/settings/members-list.tsx
@@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { WorkspaceMembersListItem } from "components/workspace";
+// ui
+import { Loader } from "@plane/ui";
+
+const workspaceService = new WorkspaceService();
+export const WorkspaceMembersList: React.FC<{ searchQuery: string }> = observer(({ searchQuery }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { workspace: workspaceStore, user: userStore } = useMobxStore();
+  const workspaceMembers = workspaceStore.workspaceMembers;
+  const user = userStore.currentWorkspaceMemberInfo;
+  // fetching workspace invitations
+  const { data: workspaceInvitations } = useSWR(
+    workspaceSlug ? `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug.toString()) : null
+  );
+
+  const members = [
+    ...(workspaceInvitations?.map((item) => ({
+      id: item.id,
+      memberId: item.id,
+      avatar: "",
+      first_name: item.email,
+      last_name: "",
+      email: item.email,
+      display_name: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+      accountCreated: item.accepted,
+    })) || []),
+    ...(workspaceMembers?.map((item) => ({
+      id: item.id,
+      memberId: item.member?.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      display_name: item.member?.display_name,
+      role: item.role,
+      status: true,
+      member: true,
+      accountCreated: true,
+    })) || []),
+  ];
+  const searchedMembers = members?.filter((member) => {
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    const displayName = member.display_name.toLowerCase();
+    return displayName.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+  });
+
+  if (!workspaceMembers || !workspaceInvitations || !user)
+    return (
+      <Loader className="space-y-5">
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+      </Loader>
+    );
+
+  return (
+    <div className="divide-y-[0.5px] divide-custom-border-200">
+      {members.length > 0
+        ? searchedMembers.map((member) => <WorkspaceMembersListItem key={member.id} member={member} />)
+        : null}
+      {searchedMembers.length === 0 && (
+        <h4 className="text-md text-custom-text-400 text-center mt-20">No matching member</h4>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
new file mode 100644
index 00000000000..0251df6c0a4
--- /dev/null
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -0,0 +1,308 @@
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { Disclosure, Transition } from "@headlessui/react";
+import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { FileService } from "services/file.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { DeleteWorkspaceModal } from "components/workspace";
+import { ImageUploadModal } from "components/core";
+// ui
+import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
+// types
+import { IWorkspace } from "types";
+// constants
+import { ORGANIZATION_SIZE } from "constants/workspace";
+
+const defaultValues: Partial<IWorkspace> = {
+  name: "",
+  url: "",
+  organization_size: "2-10",
+  logo: null,
+};
+
+// services
+const fileService = new FileService();
+
+export const WorkspaceDetails: React.FC = observer(() => {
+  // states
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const [isImageRemoving, setIsImageRemoving] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store
+  const { workspace: workspaceStore, user: userStore } = useMobxStore();
+  const activeWorkspace = workspaceStore.currentWorkspace;
+  const { currentWorkspaceRole } = userStore;
+  const isAdmin = currentWorkspaceRole === 20;
+  // hooks
+  const { setToastAlert } = useToast();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<IWorkspace>({
+    defaultValues: { ...defaultValues, ...activeWorkspace },
+  });
+
+  const onSubmit = async (formData: IWorkspace) => {
+    if (!activeWorkspace) return;
+
+    const payload: Partial<IWorkspace> = {
+      logo: formData.logo,
+      name: formData.name,
+      organization_size: formData.organization_size,
+    };
+
+    await workspaceStore
+      .updateWorkspace(activeWorkspace.slug, payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Workspace updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!activeWorkspace || !url) return;
+
+    setIsImageRemoving(true);
+
+    fileService.deleteFile(activeWorkspace.id, url).then(() => {
+      workspaceStore
+        .updateWorkspace(activeWorkspace.slug, { logo: "" })
+        .then(() => {
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Workspace picture removed successfully.",
+          });
+          setIsImageUploadModalOpen(false);
+        })
+        .catch(() => {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "There was some error in deleting your profile picture. Please try again.",
+          });
+        })
+        .finally(() => setIsImageRemoving(false));
+    });
+  };
+
+  useEffect(() => {
+    if (activeWorkspace) reset({ ...activeWorkspace });
+  }, [activeWorkspace, reset]);
+
+  if (!activeWorkspace)
+    return (
+      <div className="grid place-items-center h-full w-full px-4 sm:px-0">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <DeleteWorkspaceModal
+        isOpen={deleteWorkspaceModal}
+        onClose={() => setDeleteWorkspaceModal(false)}
+        data={activeWorkspace}
+      />
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        isRemoving={isImageRemoving}
+        handleDelete={() => handleDelete(activeWorkspace?.logo)}
+        onSuccess={(imageUrl) => {
+          setIsImageUploading(true);
+          setValue("logo", imageUrl);
+          setIsImageUploadModalOpen(false);
+          handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
+        }}
+        value={watch("logo")}
+      />
+      <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+        <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
+          <div className="flex flex-col gap-1">
+            <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
+              {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
+                <div className="relative mx-auto flex h-14 w-14">
+                  <img
+                    src={watch("logo")!}
+                    className="absolute top-0 left-0 h-full w-full object-cover rounded-md"
+                    alt="Workspace Logo"
+                  />
+                </div>
+              ) : (
+                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                  {activeWorkspace?.name?.charAt(0) ?? "N"}
+                </div>
+              )}
+            </button>
+          </div>
+          <div className="flex flex-col gap-1">
+            <h3 className="text-lg font-semibold leading-6">{watch("name")}</h3>
+            <span className="text-sm tracking-tight">{`${
+              typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
+            }/${activeWorkspace.slug}`}</span>
+            <div className="flex item-center gap-2.5">
+              <button
+                className="flex items-center gap-1.5 text-xs text-left text-custom-primary-100 font-medium"
+                onClick={() => setIsImageUploadModalOpen(true)}
+                disabled={!isAdmin}
+              >
+                {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
+                  <>
+                    <Pencil className="h-3 w-3" />
+                    Edit logo
+                  </>
+                ) : (
+                  "Upload logo"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-8 my-10">
+          <div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
+            <div className="flex flex-col gap-1 ">
+              <h4 className="text-sm">Workspace Name</h4>
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: "Name is required",
+                  maxLength: {
+                    value: 80,
+                    message: "Workspace name should not exceed 80 characters",
+                  },
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Name"
+                    className="rounded-md font-medium w-full"
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1 ">
+              <h4 className="text-sm">Company Size</h4>
+              <Controller
+                name="organization_size"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
+                    width="w-full"
+                    buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                    input
+                    disabled={!isAdmin}
+                  >
+                    {ORGANIZATION_SIZE.map((item) => (
+                      <CustomSelect.Option key={item} value={item}>
+                        {item}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1 ">
+              <h4 className="text-sm">Workspace URL</h4>
+              <Controller
+                control={control}
+                name="url"
+                render={({ field: { onChange, ref } }) => (
+                  <Input
+                    id="url"
+                    name="url"
+                    type="url"
+                    value={`${
+                      typeof window !== "undefined" &&
+                      window.location.origin.replace("http://", "").replace("https://", "")
+                    }/${activeWorkspace.slug}`}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.url)}
+                    className="w-full"
+                    disabled
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between py-2">
+            <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
+              {isSubmitting ? "Updating..." : "Update Workspace"}
+            </Button>
+          </div>
+        </div>
+        {isAdmin && (
+          <Disclosure as="div" className="border-t border-custom-border-200">
+            {({ open }) => (
+              <div className="w-full">
+                <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
+                  <span className="text-lg tracking-tight">Delete Workspace</span>
+                  {/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
+                  {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+                </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">
+                        The danger zone of the workspace delete page is a critical area that requires careful
+                        consideration and attention. When deleting a workspace, all of the data and resources within
+                        that workspace will be permanently removed and cannot be recovered.
+                      </span>
+                      <div>
+                        <Button variant="danger" onClick={() => setDeleteWorkspaceModal(true)}>
+                          Delete my workspace
+                        </Button>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
new file mode 100644
index 00000000000..75a57143bba
--- /dev/null
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -0,0 +1,276 @@
+import { Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { Menu, Transition } from "@headlessui/react";
+import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { AuthService } from "services/auth.service";
+// ui
+import { Avatar, Loader } from "@plane/ui";
+// types
+import { IWorkspace } from "types";
+
+// Static Data
+const userLinks = (workspaceSlug: string, userId: string) => [
+  {
+    name: "Workspace Settings",
+    href: `/${workspaceSlug}/settings`,
+  },
+  {
+    name: "Workspace Invites",
+    href: "/invitations",
+  },
+  {
+    name: "My Profile",
+    href: `/${workspaceSlug}/profile/${userId}`,
+  },
+];
+
+const profileLinks = (workspaceSlug: string, userId: string) => [
+  {
+    name: "View profile",
+    icon: UserCircle2,
+    link: `/${workspaceSlug}/profile/${userId}`,
+  },
+  {
+    name: "Settings",
+    icon: Settings,
+    link: `/${workspaceSlug}/me/profile`,
+  },
+];
+
+const authService = new AuthService();
+
+export const WorkspaceSidebarDropdown = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { theme: themeStore, workspace: workspaceStore, user: userStore } = useMobxStore();
+  const { workspaces, currentWorkspace: activeWorkspace } = workspaceStore;
+  const user = userStore.currentUser;
+
+  const { setToastAlert } = useToast();
+
+  const handleWorkspaceNavigation = (workspace: IWorkspace) => {
+    userStore
+      .updateCurrentUser({
+        last_workspace_id: workspace?.id,
+      })
+      .then(() => {
+        router.push(`/${workspace.slug}/`);
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to navigate to the workspace. Please try again.",
+        })
+      );
+  };
+
+  const handleSignOut = async () => {
+    await authService
+      .signOut()
+      .then(() => {
+        router.push("/");
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="flex items-center gap-2 px-4 pt-4">
+      <Menu as="div" className="relative col-span-4 text-left flex-grow truncate">
+        <Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full truncate">
+          <div
+            className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
+              themeStore.sidebarCollapsed ? "justify-center" : ""
+            }`}
+          >
+            <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white flex-shrink-0">
+              {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
+                <img
+                  src={activeWorkspace.logo}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                  alt="Workspace Logo"
+                />
+              ) : (
+                activeWorkspace?.name?.charAt(0) ?? "..."
+              )}
+            </div>
+
+            {!themeStore.sidebarCollapsed && (
+              <h4 className="text-custom-text-100 truncate">
+                {activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
+              </h4>
+            )}
+          </div>
+        </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="fixed left-4 z-20 mt-1 flex flex-col w-full max-w-[17rem] origin-top-left rounded-md
+          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 shadow-lg outline-none"
+          >
+            <div className="flex flex-col items-start justify-start gap-3 p-3">
+              <span className="text-sm font-medium text-custom-sidebar-text-200">Workspace</span>
+              {workspaces ? (
+                <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
+                  {workspaces.length > 0 ? (
+                    workspaces.map((workspace: IWorkspace) => (
+                      <Menu.Item key={workspace.id}>
+                        {() => (
+                          <button
+                            type="button"
+                            onClick={() => handleWorkspaceNavigation(workspace)}
+                            className="flex w-full items-center justify-between gap-1 p-1 rounded-md 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 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white flex-shrink-0">
+                                {workspace?.logo && workspace.logo !== "" ? (
+                                  <img
+                                    src={workspace.logo}
+                                    className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                                    alt="Workspace Logo"
+                                  />
+                                ) : (
+                                  workspace?.name?.charAt(0) ?? "..."
+                                )}
+                              </span>
+
+                              <h5
+                                className={`text-sm truncate ${
+                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                }`}
+                              >
+                                {workspace.name}
+                              </h5>
+                            </div>
+                            {workspace.id === activeWorkspace?.id && (
+                              <span className="p-1 flex-shrink-0">
+                                <Check className="h-3 w-3.5 text-custom-sidebar-text-100" />
+                              </span>
+                            )}
+                          </button>
+                        )}
+                      </Menu.Item>
+                    ))
+                  ) : (
+                    <p>No workspace found!</p>
+                  )}
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    onClick={() => {
+                      router.push("/create-workspace");
+                    }}
+                    className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                  >
+                    <Plus className="h-4 w-4" />
+                    Create Workspace
+                  </Menu.Item>
+                </div>
+              ) : (
+                <div className="w-full">
+                  <Loader className="space-y-2">
+                    <Loader.Item height="30px" />
+                    <Loader.Item height="30px" />
+                  </Loader>
+                </div>
+              )}
+            </div>
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-custom-sidebar-border-200 px-3 py-2 text-sm">
+              {userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
+                <Menu.Item
+                  key={index}
+                  as="div"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                >
+                  <Link href={link.href}>
+                    <a className="w-full">{link.name}</a>
+                  </Link>
+                </Menu.Item>
+              ))}
+            </div>
+            <div className="w-full border-t border-t-custom-sidebar-border-100 px-3 py-2">
+              <Menu.Item
+                as="button"
+                type="button"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80"
+                onClick={handleSignOut}
+              >
+                Sign out
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+
+      {!themeStore.sidebarCollapsed && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
+          </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-20 mt-1.5 flex flex-col w-52  origin-top-left rounded-md
+          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
+            >
+              <div className="flex flex-col gap-2.5 pb-2">
+                <span className="px-2 text-custom-sidebar-text-200">{user?.email}</span>
+                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
+                  <Menu.Item key={index} as="button" type="button">
+                    <Link href={link.link}>
+                      <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                        <link.icon className="h-4 w-4 stroke-[1.5]" />
+                        {link.name}
+                      </a>
+                    </Link>
+                  </Menu.Item>
+                ))}
+              </div>
+              <div className="pt-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="h-4 w-4 stroke-[1.5]" />
+                  Sign out
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
new file mode 100644
index 00000000000..360277d5ab8
--- /dev/null
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// components
+import { NotificationPopover } from "components/notifications";
+import { Tooltip } from "@plane/ui";
+// icons
+import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+const workspaceLinks = (workspaceSlug: string) => [
+  {
+    Icon: LayoutGrid,
+    name: "Dashboard",
+    href: `/${workspaceSlug}`,
+  },
+  {
+    Icon: BarChart2,
+    name: "Analytics",
+    href: `/${workspaceSlug}/analytics`,
+  },
+  {
+    Icon: Briefcase,
+    name: "Projects",
+    href: `/${workspaceSlug}/projects`,
+  },
+  {
+    Icon: CheckCircle,
+    name: "All Issues",
+    href: `/${workspaceSlug}/workspace-views/all-issues`,
+  },
+];
+
+export const WorkspaceSidebarMenu = observer(() => {
+  const { theme: themeStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="w-full cursor-pointer space-y-1 p-4">
+      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+        const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
+
+        return (
+          <Link key={index} href={link.href}>
+            <a className="block w-full">
+              <Tooltip
+                tooltipContent={link.name}
+                position="right"
+                className="ml-2"
+                disabled={!themeStore?.sidebarCollapsed}
+              >
+                <div
+                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                    isActive
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+                >
+                  {<link.Icon className="h-4 w-4" />}
+                  {!themeStore?.sidebarCollapsed && link.name}
+                </div>
+              </Tooltip>
+            </a>
+          </Link>
+        );
+      })}
+
+      <NotificationPopover />
+    </div>
+  );
+});
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
new file mode 100644
index 00000000000..b09496cc468
--- /dev/null
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+
+// ui
+import { ChevronDown, PenSquare, Search } from "lucide-react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { CreateUpdateDraftIssueModal } from "components/issues";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const WorkspaceSidebarQuickAction = () => {
+  const store: any = useMobxStore();
+
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+
+  const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
+
+  return (
+    <>
+      <CreateUpdateDraftIssueModal
+        isOpen={isDraftIssueModalOpen}
+        handleClose={() => setIsDraftIssueModalOpen(false)}
+        prePopulateData={storedValue ? JSON.parse(storedValue) : {}}
+        onSubmit={() => {
+          localStorage.removeItem("draftedIssue");
+          clearValue();
+        }}
+        fieldsToShow={["all"]}
+      />
+
+      <div
+        className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
+          store?.theme?.sidebarCollapsed ? "flex-col gap-1" : "gap-2"
+        }`}
+      >
+        <div
+          className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
+            store?.theme?.sidebarCollapsed
+              ? "px-2 hover:bg-custom-sidebar-background-80"
+              : "px-3 shadow border-[0.5px] border-custom-border-300"
+          }`}
+        >
+          <button
+            type="button"
+            className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 ${
+              store?.theme?.sidebarCollapsed ? "justify-center" : ""
+            }`}
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "c" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
+            {!store?.theme?.sidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
+          </button>
+
+          {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
+            <>
+              <div
+                className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${
+                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
+                }`}
+              />
+
+              <button
+                type="button"
+                className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${
+                  store?.theme?.sidebarCollapsed ? "hidden" : "block"
+                }`}
+              >
+                <ChevronDown
+                  size={16}
+                  className="!text-custom-sidebar-text-300 transform transition-transform duration-300 group-hover:rotate-180 rotate-0"
+                />
+              </button>
+
+              <div
+                className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${
+                  store?.theme?.sidebarCollapsed ? "top-[5.5rem]" : "top-24"
+                }`}
+              >
+                <div className="w-full h-full">
+                  <button
+                    onClick={() => setIsDraftIssueModalOpen(true)}
+                    className="w-full flex text-sm items-center rounded flex-shrink-0 py-[10px] px-3 bg-custom-background-100 shadow border-[0.5px] border-custom-border-300 text-custom-text-300"
+                  >
+                    <PenSquare size={16} className="!text-lg !leading-4 text-custom-sidebar-text-300 mr-2" />
+                    Last Drafted Issue
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        <button
+          className={`flex items-center justify-center rounded flex-shrink-0 p-2 ${
+            store?.theme?.sidebarCollapsed
+              ? "hover:bg-custom-sidebar-background-80"
+              : "shadow border-[0.5px] border-custom-border-300"
+          }`}
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "k", ctrlKey: true, metaKey: true });
+            document.dispatchEvent(e);
+          }}
+        >
+          <Search className="h-4 w-4 text-custom-sidebar-text-300" />
+        </button>
+      </div>
+    </>
+  );
+};
diff --git a/apps/app/components/workspace/single-invitation.tsx b/web/components/workspace/single-invitation.tsx
similarity index 98%
rename from apps/app/components/workspace/single-invitation.tsx
rename to web/components/workspace/single-invitation.tsx
index 02b3d72b77e..0621c64b3f2 100644
--- a/apps/app/components/workspace/single-invitation.tsx
+++ b/web/components/workspace/single-invitation.tsx
@@ -52,7 +52,7 @@ const SingleInvitation: React.FC<Props> = ({
               ? "bg-custom-background-80 text-custom-text-200"
               : "bg-custom-primary text-white"
           } text-sm px-4 py-2 border border-custom-border-200 rounded-3xl`}
-          onClick={(e) => {
+          onClick={() => {
             handleInvitation(
               invitation,
               invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
diff --git a/web/components/workspace/views/default-view-list-item.tsx b/web/components/workspace/views/default-view-list-item.tsx
new file mode 100644
index 00000000000..e3298daeef7
--- /dev/null
+++ b/web/components/workspace/views/default-view-list-item.tsx
@@ -0,0 +1,36 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+
+// icons
+import { Sparkles } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+
+type Props = { view: { key: string; label: string } };
+
+export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+      <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
+        <a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-4">
+              <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                <Sparkles size={14} strokeWidth={2} />
+              </div>
+              <div className="flex flex-col">
+                <p className="truncate text-sm leading-4 font-medium">{truncateText(view.label, 75)}</p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+});
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
new file mode 100644
index 00000000000..432eba165f9
--- /dev/null
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { AlertTriangle } from "lucide-react";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+
+type Props = {
+  data: IWorkspaceView;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug) return;
+
+    setIsDeleteLoading(true);
+
+    await globalViewsStore
+      .deleteGlobalView(workspaceSlug.toString(), data.id)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while deleting the view. Please try again.",
+        })
+      )
+      .finally(() => {
+        setIsDeleteLoading(false);
+        handleClose();
+      });
+
+    // remove filters from local storage
+    localStorage.removeItem(`global_view_filters/${data.id}`);
+  };
+
+  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 bg-opacity-50 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 border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete view-{" "}
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the view will be permanently removed. This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
new file mode 100644
index 00000000000..8b5112eb9dd
--- /dev/null
+++ b/web/components/workspace/views/form.tsx
@@ -0,0 +1,183 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
+// ui
+import { Button, Input, TextArea } from "@plane/ui";
+// types
+import { IWorkspaceView } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
+  handleClose: () => void;
+  data?: IWorkspaceView;
+  preLoadedData?: Partial<IWorkspaceView>;
+};
+
+const defaultValues: Partial<IWorkspaceView> = {
+  name: "",
+  description: "",
+};
+
+export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
+  const { handleFormSubmit, handleClose, data, preLoadedData } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspace: workspaceStore, project: projectStore } = useMobxStore();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+    setValue,
+    watch,
+  } = useForm({
+    defaultValues,
+  });
+
+  const handleCreateUpdateView = async (formData: Partial<IWorkspaceView>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+      ...data,
+    });
+  }, [data, preLoadedData, reset]);
+
+  const selectedFilters = watch("query_data")?.filters;
+
+  const clearAllFilters = () => {
+    if (!selectedFilters) return;
+
+    setValue("query_data.filters", {});
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
+        <div className="space-y-3">
+          <div>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="name"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
+            />
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
+            />
+          </div>
+          <div>
+            <Controller
+              control={control}
+              name="query_data.filters"
+              render={({ field: { onChange, value: filters } }) => (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={filters ?? {}}
+                    handleFiltersUpdate={(key, value) => {
+                      const newValues = filters?.[key] ?? [];
+
+                      if (Array.isArray(value)) {
+                        value.forEach((val) => {
+                          if (!newValues.includes(val)) newValues.push(val);
+                        });
+                      } else {
+                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                        else newValues.push(value);
+                      }
+
+                      onChange({
+                        ...filters,
+                        [key]: newValues,
+                      });
+                    }}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
+            />
+          </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
+            <div>
+              <AppliedFiltersList
+                appliedFilters={selectedFilters}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={workspaceStore.workspaceLabels ?? undefined}
+                members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined}
+                states={undefined}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
new file mode 100644
index 00000000000..6406a994d79
--- /dev/null
+++ b/web/components/workspace/views/header.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// icon
+import { Plus } from "lucide-react";
+// constants
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+
+export const GlobalViewsHeader: React.FC = observer(() => {
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  // bring the active view to the centre of the header
+  useEffect(() => {
+    if (!globalViewId) return;
+
+    const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
+
+    if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
+  }, [globalViewId]);
+
+  const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="group flex items-center px-4 w-full overflow-x-scroll relative border-b border-custom-border-200">
+        {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
+          <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
+            <a
+              className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+                isTabSelected(tab.key)
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+              }`}
+            >
+              {tab.label}
+            </a>
+          </Link>
+        ))}
+
+        {globalViewsStore.globalViewsList?.map((view) => (
+          <Link key={view.id} href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+            <a
+              id={`global-view-${view.id}`}
+              className={`border-b-2 p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+                view.id === globalViewId
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+              }`}
+            >
+              {view.name}
+            </a>
+          </Link>
+        ))}
+
+        <button
+          type="button"
+          className="flex items-center justify-center flex-shrink-0 sticky -right-4 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
+          onClick={() => setCreateViewModal(true)}
+        >
+          <Plus className="h-4 w-4 text-custom-primary-200" />
+        </button>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/views/index.ts b/web/components/workspace/views/index.ts
new file mode 100644
index 00000000000..7d0547f649c
--- /dev/null
+++ b/web/components/workspace/views/index.ts
@@ -0,0 +1,7 @@
+export * from "./default-view-list-item";
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./header";
+export * from "./modal";
+export * from "./view-list-item";
+export * from "./views-list";
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
new file mode 100644
index 00000000000..37027ad1f38
--- /dev/null
+++ b/web/components/workspace/views/modal.tsx
@@ -0,0 +1,143 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { WorkspaceViewForm } from "components/workspace";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+
+type Props = {
+  data?: IWorkspaceView;
+  isOpen: boolean;
+  onClose: () => void;
+  preLoadedData?: Partial<IWorkspaceView>;
+};
+
+export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, preLoadedData } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const createView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
+      ...payload,
+      query: {
+        ...payload.query_data?.filters,
+      },
+    };
+
+    await globalViewsStore
+      .createGlobalView(workspaceSlug.toString(), payloadData)
+      .then((res) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View created successfully.",
+        });
+
+        router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be created. Please try again.",
+        })
+      );
+  };
+
+  const updateView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug || !data) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
+      ...payload,
+      query: {
+        ...payload.query_data?.filters,
+      },
+    };
+
+    await globalViewsStore
+      .updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
+        })
+      )
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
+        })
+      );
+  };
+
+  const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug) return;
+
+    if (!data) await createView(formData);
+    else await updateView(formData);
+
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 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 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 rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <WorkspaceViewForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  data={data}
+                  preLoadedData={preLoadedData}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
new file mode 100644
index 00000000000..b6b62a4288b
--- /dev/null
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -0,0 +1,87 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
+// ui
+import { CustomMenu } from "@plane/ui";
+// icons
+import { Pencil, Sparkles, Trash2 } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { calculateTotalFilters } from "helpers/filter.helper";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+
+type Props = { view: IWorkspaceView };
+
+export const GlobalViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const totalFilters = calculateTotalFilters(view.query_data.filters ?? {});
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+        <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+          <a className="flex items-center justify-between relative rounded p-4 w-full">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-4">
+                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <Sparkles size={14} strokeWidth={2} />
+                </div>
+                <div className="flex flex-col">
+                  <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                </div>
+              </div>
+              <div className="ml-2 flex flex-shrink-0">
+                <div className="flex items-center gap-4">
+                  <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 hidden group-hover:block">
+                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
+                  </p>
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setUpdateViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <Pencil size={14} strokeWidth={2} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <Trash2 size={14} strokeWidth={2} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/views/views-list.tsx b/web/components/workspace/views/views-list.tsx
new file mode 100644
index 00000000000..98b186a16fd
--- /dev/null
+++ b/web/components/workspace/views/views-list.tsx
@@ -0,0 +1,50 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewListItem } from "components/workspace";
+// ui
+import { Loader } from "@plane/ui";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const GlobalViewsList: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { searchQuery } = props;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  const viewsList = globalViewsStore.globalViewsList;
+
+  if (!viewsList)
+    return (
+      <Loader className="space-y-4 p-4">
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+      </Loader>
+    );
+
+  const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {filteredViewsList.map((view) => (
+        <GlobalViewListItem key={view.id} view={view} />
+      ))}
+    </>
+  );
+});
diff --git a/apps/app/constants/analytics.ts b/web/constants/analytics.ts
similarity index 79%
rename from apps/app/constants/analytics.ts
rename to web/constants/analytics.ts
index 709b5938abe..8bf3f08ccd2 100644
--- a/apps/app/constants/analytics.ts
+++ b/web/constants/analytics.ts
@@ -1,9 +1,14 @@
 // types
 import { TXAxisValues, TYAxisValues } from "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__name",
+    value: "state_id",
     label: "State name",
   },
   {
@@ -15,7 +20,7 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
     label: "Priority",
   },
   {
-    value: "labels__name",
+    value: "labels__id",
     label: "Label",
   },
   {
@@ -27,11 +32,11 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
     label: "Estimate point",
   },
   {
-    value: "issue_cycle__cycle__name",
+    value: "issue_cycle__cycle_id",
     label: "Cycle",
   },
   {
-    value: "issue_module__module__name",
+    value: "issue_module__module_id",
     label: "Module",
   },
   {
diff --git a/web/constants/calendar.ts b/web/constants/calendar.ts
new file mode 100644
index 00000000000..4c4070ec145
--- /dev/null
+++ b/web/constants/calendar.ts
@@ -0,0 +1,109 @@
+import { TCalendarLayouts } from "types";
+
+export const MONTHS_LIST: {
+  [monthNumber: number]: {
+    shortTitle: string;
+    title: string;
+  };
+} = {
+  1: {
+    shortTitle: "Jan",
+    title: "January",
+  },
+  2: {
+    shortTitle: "Feb",
+    title: "February",
+  },
+  3: {
+    shortTitle: "Mar",
+    title: "March",
+  },
+  4: {
+    shortTitle: "Apr",
+    title: "April",
+  },
+  5: {
+    shortTitle: "May",
+    title: "May",
+  },
+  6: {
+    shortTitle: "Jun",
+    title: "June",
+  },
+  7: {
+    shortTitle: "Jul",
+    title: "July",
+  },
+  8: {
+    shortTitle: "Aug",
+    title: "August",
+  },
+  9: {
+    shortTitle: "Sep",
+    title: "September",
+  },
+  10: {
+    shortTitle: "Oct",
+    title: "October",
+  },
+  11: {
+    shortTitle: "Nov",
+    title: "November",
+  },
+  12: {
+    shortTitle: "Dec",
+    title: "December",
+  },
+};
+
+export const DAYS_LIST: {
+  [dayIndex: number]: {
+    shortTitle: string;
+    title: string;
+  };
+} = {
+  1: {
+    shortTitle: "Sun",
+    title: "Sunday",
+  },
+  2: {
+    shortTitle: "Mon",
+    title: "Monday",
+  },
+  3: {
+    shortTitle: "Tue",
+    title: "Tuesday",
+  },
+  4: {
+    shortTitle: "Wed",
+    title: "Wednesday",
+  },
+  5: {
+    shortTitle: "Thu",
+    title: "Thursday",
+  },
+  6: {
+    shortTitle: "Fri",
+    title: "Friday",
+  },
+  7: {
+    shortTitle: "Sat",
+    title: "Saturday",
+  },
+};
+
+export const CALENDAR_LAYOUTS: {
+  [layout in TCalendarLayouts]: {
+    key: TCalendarLayouts;
+    title: string;
+  };
+} = {
+  month: {
+    key: "month",
+    title: "Month layout",
+  },
+  week: {
+    key: "week",
+    title: "Week layout",
+  },
+};
diff --git a/apps/app/constants/crisp.tsx b/web/constants/crisp.tsx
similarity index 76%
rename from apps/app/constants/crisp.tsx
rename to web/constants/crisp.tsx
index 8c50893dcdf..d89aaea3171 100644
--- a/apps/app/constants/crisp.tsx
+++ b/web/constants/crisp.tsx
@@ -1,5 +1,7 @@
-import useUser from "hooks/use-user";
 import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 
 declare global {
   interface Window {
@@ -8,16 +10,14 @@ declare global {
   }
 }
 
-const Crisp = () => {
-  const { user } = useUser();
+const Crisp = observer(() => {
+  const { user: userStore } = useMobxStore();
+  const { currentUser } = userStore;
 
   const validateCurrentUser = useCallback(() => {
-    const currentUser = user ? user : null;
-
-    if (currentUser && currentUser.email) return currentUser.email;
-
+    if (currentUser) return currentUser.email;
     return null;
-  }, [user]);
+  }, [currentUser]);
 
   useEffect(() => {
     if (typeof window && validateCurrentUser()) {
@@ -40,5 +40,5 @@ const Crisp = () => {
   }, [validateCurrentUser]);
 
   return <></>;
-};
+});
 export default Crisp;
diff --git a/web/constants/cycle.tsx b/web/constants/cycle.tsx
new file mode 100644
index 00000000000..697dc36608c
--- /dev/null
+++ b/web/constants/cycle.tsx
@@ -0,0 +1,79 @@
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+
+export const CYCLE_TAB_LIST = [
+  {
+    key: "all",
+    name: "All",
+  },
+  {
+    key: "active",
+    name: "Active",
+  },
+  {
+    key: "upcoming",
+    name: "Upcoming",
+  },
+  {
+    key: "completed",
+    name: "Completed",
+  },
+  {
+    key: "draft",
+    name: "Drafts",
+  },
+];
+
+export const CYCLE_VIEW_LAYOUTS = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "board",
+    icon: LayoutGrid,
+    title: "Grid layout",
+  },
+  {
+    key: "gantt",
+    icon: GanttChartSquare,
+    title: "Gantt layout",
+  },
+];
+
+export const CYCLE_STATUS: {
+  label: string;
+  value: "current" | "upcoming" | "completed" | "draft";
+  color: string;
+  textColor: string;
+  bgColor: string;
+}[] = [
+  {
+    label: "day left",
+    value: "current",
+    color: "#F59E0B",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    label: "Yet to start",
+    value: "upcoming",
+    color: "#3F76FF",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    label: "Completed",
+    value: "completed",
+    color: "#16A34A",
+    textColor: "text-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    label: "Draft",
+    value: "draft",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+];
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
new file mode 100644
index 00000000000..9ee4f630d1e
--- /dev/null
+++ b/web/constants/fetch-keys.ts
@@ -0,0 +1,302 @@
+import { objToQueryParams } from "helpers/string.helper";
+import { IAnalyticsParams, IJiraMetadata, INotificationParams } from "types";
+
+const paramsToKey = (params: any) => {
+  const {
+    state,
+    state_group,
+    priority,
+    mentions,
+    assignees,
+    created_by,
+    labels,
+    start_date,
+    target_date,
+    sub_issue,
+    start_target_date,
+    project,
+    layout,
+    subscriber,
+  } = params;
+
+  let projectKey = project ? project.split(",") : [];
+  let stateKey = state ? state.split(",") : [];
+  let stateGroupKey = state_group ? state_group.split(",") : [];
+  let priorityKey = priority ? priority.split(",") : [];
+  let mentionsKey = mentions ? mentions.split(",") : [];
+  let assigneesKey = assignees ? assignees.split(",") : [];
+  let createdByKey = created_by ? created_by.split(",") : [];
+  let labelsKey = labels ? labels.split(",") : [];
+  let subscriberKey = subscriber ? subscriber.split(",") : [];
+  const startTargetDate = start_target_date ? `${start_target_date}`.toUpperCase() : "FALSE";
+  const startDateKey = start_date ?? "";
+  const targetDateKey = target_date ?? "";
+  const type = params.type ? params.type.toUpperCase() : "NULL";
+  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
+  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
+  const layoutKey = layout ? layout.toUpperCase() : "";
+
+  // sorting each keys in ascending order
+  projectKey = projectKey.sort().join("_");
+  stateKey = stateKey.sort().join("_");
+  stateGroupKey = stateGroupKey.sort().join("_");
+  priorityKey = priorityKey.sort().join("_");
+  assigneesKey = assigneesKey.sort().join("_");
+  mentionsKey = mentionsKey.sort().join("_");
+  createdByKey = createdByKey.sort().join("_");
+  labelsKey = labelsKey.sort().join("_");
+  subscriberKey = subscriberKey.sort().join("_");
+
+  return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${mentionsKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}_${subscriberKey}`;
+};
+
+const myIssuesParamsToKey = (params: any) => {
+  const { assignees, created_by, labels, priority, state_group, subscriber, start_date, target_date } = params;
+
+  let assigneesKey = assignees ? assignees.split(",") : [];
+  let createdByKey = created_by ? created_by.split(",") : [];
+  let stateGroupKey = state_group ? state_group.split(",") : [];
+  let subscriberKey = subscriber ? subscriber.split(",") : [];
+  let priorityKey = priority ? priority.split(",") : [];
+  let labelsKey = labels ? labels.split(",") : [];
+  const startDateKey = start_date ?? "";
+  const targetDateKey = target_date ?? "";
+  const type = params.type ? params.type.toUpperCase() : "NULL";
+  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
+  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
+
+  // sorting each keys in ascending order
+  assigneesKey = assigneesKey.sort().join("_");
+  createdByKey = createdByKey.sort().join("_");
+  stateGroupKey = stateGroupKey.sort().join("_");
+  subscriberKey = subscriberKey.sort().join("_");
+  priorityKey = priorityKey.sort().join("_");
+  labelsKey = labelsKey.sort().join("_");
+
+  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}`;
+};
+
+export const CURRENT_USER = "CURRENT_USER";
+export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
+export const USER_WORKSPACES = "USER_WORKSPACES";
+
+export const WORKSPACE_DETAILS = (workspaceSlug: string) => `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) => `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_INVITATIONS = (workspaceSlug: string) => `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`;
+export const WORKSPACE_INVITATION = (invitationId: string) => `WORKSPACE_INVITATION_${invitationId}`;
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
+
+export const PROJECTS_LIST = (
+  workspaceSlug: string,
+  params: {
+    is_favorite: "all" | boolean;
+  }
+) => {
+  if (!params) return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}`;
+
+  return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}_${params.is_favorite.toString().toUpperCase()}`;
+};
+export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId.toUpperCase()}`;
+
+export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId.toUpperCase()}`;
+export const PROJECT_INVITATIONS = (projectId: string) => `PROJECT_INVITATIONS_${projectId.toString()}`;
+
+export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
+  `PROJECT_ISSUES_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
+  if (!params) return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`;
+};
+export const PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
+  if (!params) return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`;
+};
+
+export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?: any) => {
+  if (!params) return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}_${paramsKey}`;
+};
+
+export const GLOBAL_VIEWS_LIST = (workspaceSlug: string) => `GLOBAL_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
+export const GLOBAL_VIEW_DETAILS = (globalViewId: string) => `GLOBAL_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
+export const GLOBAL_VIEW_ISSUES = (globalViewId: string) => `GLOBAL_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
+
+export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_ACTIVITY = (issueId: string) => `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`;
+export const WORKSPACE_LABELS = (workspaceSlug: string) => `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`;
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
+
+// cycles
+export const CYCLES_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
+export const INCOMPLETE_CYCLES_LIST = (projectId: string) => `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const CURRENT_CYCLE_LIST = (projectId: string) => `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`;
+export const UPCOMING_CYCLES_LIST = (projectId: string) => `UPCOMING_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const DRAFT_CYCLES_LIST = (projectId: string) => `DRAFT_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const COMPLETED_CYCLES_LIST = (projectId: string) => `COMPLETED_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId.toUpperCase()}`;
+export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
+  if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
+export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAILS_${cycleId.toUpperCase()}`;
+
+export const STATES_LIST = (projectId: string) => `STATES_LIST_${projectId.toUpperCase()}`;
+
+export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug.toUpperCase()}`;
+export const USER_ISSUES = (workspaceSlug: string, params: any) => {
+  const paramsKey = myIssuesParamsToKey(params);
+
+  return `USER_ISSUES_${workspaceSlug.toUpperCase()}_${paramsKey}`;
+};
+export const USER_ACTIVITY = "USER_ACTIVITY";
+export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
+  `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`;
+export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
+
+export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId.toUpperCase()}`;
+export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId.toUpperCase()}`;
+export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
+  if (!params) return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
+export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAILS_${moduleId.toUpperCase()}`;
+
+export const VIEWS_LIST = (projectId: string) => `VIEWS_LIST_${projectId.toUpperCase()}`;
+export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId.toUpperCase()}`;
+export const VIEW_ISSUES = (viewId: string, params: any) => {
+  if (!params) return `VIEW_ISSUES_${viewId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
+
+// Issues
+export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
+export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;
+export const ISSUE_ATTACHMENTS = (issueId: string) => `ISSUE_ATTACHMENTS_${issueId.toUpperCase()}`;
+export const ARCHIVED_ISSUE_DETAILS = (issueId: string) => `ARCHIVED_ISSUE_DETAILS_${issueId.toUpperCase()}`;
+
+// integrations
+export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
+export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
+  `WORKSPACE_INTEGRATIONS_${workspaceSlug.toUpperCase()}`;
+
+export const JIRA_IMPORTER_DETAIL = (workspaceSlug: string, params: IJiraMetadata) => {
+  const { api_token, cloud_hostname, email, project_key } = params;
+
+  return `JIRA_IMPORTER_DETAIL_${workspaceSlug.toUpperCase()}_${api_token}_${cloud_hostname}_${email}_${project_key}`;
+};
+
+//import-export
+export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
+  `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`;
+
+//export
+export const EXPORT_SERVICES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
+  `EXPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
+
+// github-importer
+export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
+  `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
+
+// slack-project-integration
+export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
+  `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
+
+// Pages
+export const RECENT_PAGES_LIST = (projectId: string) => `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
+export const ALL_PAGES_LIST = (projectId: string) => `ALL_PAGES_LIST_${projectId.toUpperCase()}`;
+export const FAVORITE_PAGES_LIST = (projectId: string) => `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`;
+export const MY_PAGES_LIST = (projectId: string) => `MY_PAGES_LIST_${projectId.toUpperCase()}`;
+export const OTHER_PAGES_LIST = (projectId: string) => `OTHER_PAGES_LIST_${projectId.toUpperCase()}`;
+export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId.toUpperCase()}`;
+export const PAGE_BLOCKS_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`;
+export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`;
+
+// estimates
+export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
+export const ESTIMATE_DETAILS = (estimateId: string) => `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
+
+// analytics
+export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
+  `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${
+    params.segment
+  }_${params.project?.toString()}`;
+export const DEFAULT_ANALYTICS = (workspaceSlug: string, params?: Partial<IAnalyticsParams>) =>
+  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${params?.cycle}_${params?.module}`;
+
+// notifications
+export const USER_WORKSPACE_NOTIFICATIONS = (workspaceSlug: string, params: INotificationParams) => {
+  const { type, snoozed, archived, read } = params;
+
+  return `USER_WORKSPACE_NOTIFICATIONS_${workspaceSlug?.toUpperCase()}_TYPE_${(
+    type ?? "assigned"
+  )?.toUpperCase()}_SNOOZED_${snoozed}_ARCHIVED_${archived}_READ_${read}`;
+};
+
+export const USER_WORKSPACE_NOTIFICATIONS_DETAILS = (workspaceSlug: string, notificationId: string) =>
+  `USER_WORKSPACE_NOTIFICATIONS_DETAILS_${workspaceSlug?.toUpperCase()}_${notificationId?.toUpperCase()}`;
+
+export const UNREAD_NOTIFICATIONS_COUNT = (workspaceSlug: string) =>
+  `UNREAD_NOTIFICATIONS_COUNT_${workspaceSlug?.toUpperCase()}`;
+
+export const getPaginatedNotificationKey = (index: number, prevData: any, workspaceSlug: string, params: any) => {
+  if (prevData && !prevData?.results?.length) return null;
+
+  if (index === 0)
+    return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams({
+      ...params,
+      cursor: "30:0:0",
+    })}`;
+
+  const cursor = prevData?.next_cursor;
+  const nextPageResults = prevData?.next_page_results;
+
+  if (!nextPageResults) return null;
+
+  return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams({
+    ...params,
+    cursor,
+  })}`;
+};
+
+// profile
+export const USER_PROFILE_DATA = (workspaceSlug: string, userId: string) =>
+  `USER_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
+export const USER_PROFILE_ACTIVITY = (workspaceSlug: string, userId: string) =>
+  `USER_WORKSPACE_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
+export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId: string) =>
+  `USER_PROFILE_PROJECT_SEGREGATION_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
+export const USER_PROFILE_ISSUES = (workspaceSlug: string, userId: string, params: any) => {
+  const paramsKey = myIssuesParamsToKey(params);
+
+  return `USER_PROFILE_ISSUES_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${paramsKey}`;
+};
+
+// reactions
+export const ISSUE_REACTION_LIST = (workspaceSlug: string, projectId: string, issueId: string) =>
+  `ISSUE_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${issueId.toUpperCase()}`;
+export const COMMENT_REACTION_LIST = (workspaceSlug: string, projectId: string, commendId: string) =>
+  `COMMENT_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${commendId.toUpperCase()}`;
diff --git a/web/constants/filters.ts b/web/constants/filters.ts
new file mode 100644
index 00000000000..e4131e451a4
--- /dev/null
+++ b/web/constants/filters.ts
@@ -0,0 +1,18 @@
+export const DATE_FILTER_OPTIONS = [
+  {
+    name: "1 week from now",
+    value: "1_weeks;after;fromnow",
+  },
+  {
+    name: "2 weeks from now",
+    value: "2_weeks;after;fromnow",
+  },
+  {
+    name: "1 month from now",
+    value: "1_months;after;fromnow",
+  },
+  {
+    name: "2 months from now",
+    value: "2_months;after;fromnow",
+  },
+];
diff --git a/apps/app/constants/graph.ts b/web/constants/graph.ts
similarity index 100%
rename from apps/app/constants/graph.ts
rename to web/constants/graph.ts
diff --git a/apps/app/constants/inbox.ts b/web/constants/inbox.ts
similarity index 100%
rename from apps/app/constants/inbox.ts
rename to web/constants/inbox.ts
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
new file mode 100644
index 00000000000..144cad190c1
--- /dev/null
+++ b/web/constants/issue.ts
@@ -0,0 +1,491 @@
+import { v4 as uuidv4 } from "uuid";
+// icons
+import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
+// types
+import {
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueExtraOptions,
+  TIssueGroupByOptions,
+  TIssueLayouts,
+  TIssueOrderByOptions,
+  TIssuePriorities,
+  TIssueTypeFilters,
+  TStateGroups,
+  IIssue,
+  IProject,
+  IWorkspace,
+} from "types";
+
+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 issuePriorityByKey = (key: string) => ISSUE_PRIORITIES.find((item) => item.key === key) || null;
+
+export const ISSUE_STATE_GROUPS: {
+  key: TStateGroups;
+  title: string;
+}[] = [
+  { key: "backlog", title: "Backlog" },
+  { key: "unstarted", title: "Unstarted" },
+  { key: "started", title: "Started" },
+  { key: "completed", title: "Completed" },
+  { key: "cancelled", title: "Cancelled" },
+];
+
+export const issueStateGroupByKey = (key: string) => ISSUE_STATE_GROUPS.find((item) => item.key === key) || null;
+
+export const ISSUE_START_DATE_OPTIONS = [
+  { key: "last_week", title: "Last Week" },
+  { key: "2_weeks_from_now", title: "2 weeks from now" },
+  { key: "1_month_from_now", title: "1 month from now" },
+  { key: "2_months_from_now", title: "2 months from now" },
+  { key: "custom", title: "Custom" },
+];
+
+export const ISSUE_DUE_DATE_OPTIONS = [
+  { key: "last_week", title: "Last Week" },
+  { key: "2_weeks_from_now", title: "2 weeks from now" },
+  { key: "1_month_from_now", title: "1 month from now" },
+  { key: "2_months_from_now", title: "2 months from now" },
+  { key: "custom", title: "Custom" },
+];
+
+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: "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: TIssueTypeFilters;
+  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: {
+  key: keyof IIssueDisplayProperties;
+  title: string;
+}[] = [
+  { key: "assignee", title: "Assignee" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+  { key: "key", title: "ID" },
+  { 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" },
+];
+
+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 states" }, // filter on front-end
+];
+
+export const ISSUE_LAYOUTS: {
+  key: TIssueLayouts;
+  title: string;
+  icon: any;
+}[] = [
+  { key: "list", title: "List Layout", icon: List },
+  { key: "kanban", title: "Kanban Layout", icon: Kanban },
+  { key: "calendar", title: "Calendar Layout", icon: Calendar },
+  { key: "spreadsheet", title: "Spreadsheet Layout", icon: Sheet },
+  { key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChartSquare },
+];
+
+export const ISSUE_LIST_FILTERS = [
+  { key: "mentions", title: "Mentions" },
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
+
+export const ISSUE_KANBAN_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
+
+export const ISSUE_CALENDER_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+];
+
+export const ISSUE_SPREADSHEET_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
+
+export const ISSUE_GANTT_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
+
+export const ISSUE_LIST_DISPLAY_FILTERS = [
+  { key: "group_by", title: "Group By" },
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+  { key: "show_empty_groups", title: "Show Empty Groups" },
+];
+
+export const ISSUE_KANBAN_DISPLAY_FILTERS = [
+  { key: "group_by", title: "Group By" },
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+  { key: "show_empty_groups", title: "Show Empty Groups" },
+];
+
+export const ISSUE_CALENDER_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
+
+export const ISSUE_SPREADSHEET_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
+
+export const ISSUE_GANTT_DISPLAY_FILTERS = [
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+];
+
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  display_properties: boolean;
+  display_filters: {
+    group_by?: TIssueGroupByOptions[];
+    sub_group_by?: TIssueGroupByOptions[];
+    order_by?: TIssueOrderByOptions[];
+    type?: TIssueTypeFilters[];
+  };
+  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: true,
+      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"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      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"],
+      },
+    },
+  },
+  archived_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      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"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      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"],
+      },
+    },
+  },
+  draft_issues: {
+    list: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      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"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      display_properties: true,
+      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"],
+      },
+    },
+  },
+  my_issues: {
+    spreadsheet: {
+      filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: false,
+        values: [],
+      },
+    },
+  },
+  issues: {
+    list: {
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state", "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", "sub_issue"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state", "priority", "labels", "assignees", "created_by"],
+        sub_group_by: ["state", "priority", "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", "assignees", "mentions", "created_by", "labels", "start_date"],
+      display_properties: true,
+      display_filters: {
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+    spreadsheet: {
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: false,
+        values: [],
+      },
+    },
+    gantt_chart: {
+      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      display_properties: false,
+      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 getValueFromObject = (object: Object, key: string): string | number | boolean | null => {
+  const keys = key ? key.split(".") : [];
+
+  let value: any = object;
+  if (!value || keys.length === 0) return null;
+
+  for (const _key of keys) value = value?.[_key];
+  return value;
+};
+
+// 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;
+};
+
+/**
+ *
+ * @param workspaceDetail workspace detail to be added in the issue payload
+ * @param projectDetail project detail to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+
+export const createIssuePayload: (
+  workspaceDetail: IWorkspace,
+  projectDetail: IProject,
+  formData: Partial<IIssue>
+) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
+  const payload = {
+    archived_at: null,
+    assignees: [],
+    assignee_details: [],
+    attachment_count: 0,
+    attachments: [],
+    issue_relations: [],
+    related_issues: [],
+    bridge_id: null,
+    completed_at: new Date(),
+    created_at: "",
+    created_by: "",
+    cycle: null,
+    cycle_id: null,
+    cycle_detail: null,
+    description: {},
+    description_html: "",
+    description_stripped: "",
+    estimate_point: null,
+    issue_cycle: null,
+    issue_link: [],
+    issue_module: null,
+    labels: [],
+    label_details: [],
+    is_draft: false,
+    links_list: [],
+    link_count: 0,
+    module: null,
+    module_id: null,
+    name: "",
+    parent: null,
+    parent_detail: null,
+    priority: "none",
+    project: projectDetail.id,
+    project_detail: projectDetail,
+    sequence_id: 0,
+    sort_order: 0,
+    sprints: null,
+    start_date: null,
+    state: projectDetail.default_state,
+    state_detail: {} as any,
+    sub_issues_count: 0,
+    target_date: null,
+    updated_at: "",
+    updated_by: "",
+    workspace: workspaceDetail.id,
+    workspace_detail: workspaceDetail,
+    id: uuidv4(),
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+  } as IIssue;
+
+  return payload;
+};
diff --git a/web/constants/kanban-helpers.ts b/web/constants/kanban-helpers.ts
new file mode 100644
index 00000000000..b6c4927e1fe
--- /dev/null
+++ b/web/constants/kanban-helpers.ts
@@ -0,0 +1,19 @@
+export const sortArrayByDate = (_array: any[], _key: string): any[] => {
+  console.log("date sorting");
+  // return _array.sort((a, b) => {
+  //   const x = new Date(a[_key]);
+  //   const y = new Date(b[_key]);
+  //   return x > y ? -1 : x < y ? 1 : 0;
+  // });
+  return _array;
+};
+
+export const sortArrayByPriority = (_array: any[], _key: string): any[] => {
+  console.log("priority sorting");
+  // return _array.sort((a, b) => {
+  //   const x = new Date(a[_key]);
+  //   const y = new Date(b[_key]);
+  //   return x > y ? -1 : x < y ? 1 : 0;
+  // });
+  return _array;
+};
diff --git a/apps/app/constants/label.ts b/web/constants/label.ts
similarity index 100%
rename from apps/app/constants/label.ts
rename to web/constants/label.ts
diff --git a/web/constants/module.ts b/web/constants/module.ts
new file mode 100644
index 00000000000..84997408439
--- /dev/null
+++ b/web/constants/module.ts
@@ -0,0 +1,72 @@
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+// types
+import { TModuleStatus } from "types";
+
+export const MODULE_STATUS: {
+  label: string;
+  value: TModuleStatus;
+  color: string;
+  textColor: string;
+  bgColor: string;
+}[] = [
+  {
+    label: "Backlog",
+    value: "backlog",
+    color: "#a3a3a2",
+    textColor: "text-custom-text-400",
+    bgColor: "bg-custom-background-80",
+  },
+  {
+    label: "Planned",
+    value: "planned",
+    color: "#3f76ff",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    label: "In Progress",
+    value: "in-progress",
+    color: "#f39e1f",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    label: "Paused",
+    value: "paused",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+  {
+    label: "Completed",
+    value: "completed",
+    color: "#16a34a",
+    textColor: "text-green-600",
+    bgColor: "bg-green-100",
+  },
+  {
+    label: "Cancelled",
+    value: "cancelled",
+    color: "#ef4444",
+    textColor: "text-red-500",
+    bgColor: "bg-red-50",
+  },
+];
+
+export const MODULE_VIEW_LAYOUTS: { key: "list" | "grid" | "gantt_chart"; icon: any; title: string }[] = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "grid",
+    icon: LayoutGrid,
+    title: "Grid layout",
+  },
+  {
+    key: "gantt_chart",
+    icon: GanttChartSquare,
+    title: "Gantt layout",
+  },
+];
diff --git a/apps/app/constants/notification.ts b/web/constants/notification.ts
similarity index 100%
rename from apps/app/constants/notification.ts
rename to web/constants/notification.ts
diff --git a/web/constants/page.ts b/web/constants/page.ts
new file mode 100644
index 00000000000..424f1b59c67
--- /dev/null
+++ b/web/constants/page.ts
@@ -0,0 +1,37 @@
+import { LayoutGrid, List } from "lucide-react";
+
+export const PAGE_VIEW_LAYOUTS = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "detailed",
+    icon: LayoutGrid,
+    title: "Detailed layout",
+  },
+];
+
+export const PAGE_TABS_LIST: { key: string; title: string }[] = [
+  {
+    key: "recent",
+    title: "Recent",
+  },
+  {
+    key: "all",
+    title: "All",
+  },
+  {
+    key: "favorites",
+    title: "Favorites",
+  },
+  {
+    key: "created-by-me",
+    title: "Created by me",
+  },
+  {
+    key: "created-by-others",
+    title: "Created by others",
+  },
+];
diff --git a/web/constants/project.ts b/web/constants/project.ts
new file mode 100644
index 00000000000..f8508ad455b
--- /dev/null
+++ b/web/constants/project.ts
@@ -0,0 +1,71 @@
+import { Globe2, Lock, LucideIcon } from "lucide-react";
+import { TIssuePriorities } from "types";
+
+export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: LucideIcon }[] = [
+  {
+    key: 0,
+    label: "Private",
+    icon: Lock,
+  },
+  {
+    key: 2,
+    label: "Public",
+    icon: Globe2,
+  },
+];
+
+export const GROUP_CHOICES = {
+  backlog: "Backlog",
+  unstarted: "Unstarted",
+  started: "Started",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};
+
+export const STATE_GROUP = ["Backlog", "Unstarted", "Started", "Completed", "Cancelled"];
+
+export const PRIORITIES: TIssuePriorities[] = ["urgent", "high", "medium", "low", "none"];
+
+export const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+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 },
+];
+
+export const PROJECT_UNSPLASH_COVERS = [
+  "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1693027407934-e3aa8a54c7ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1464925257126-6450e871c667?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1606768666853-403c90a981ad?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1643330683233-ff2ac89b002c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1542202229-7d93c33f5d07?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1475738972911-5b44ce984c42?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1673393058808-50e9baaf4d2c?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1696643830146-44a8755f1905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
+  "https://images.unsplash.com/photo-1693868769698-6c7440636a09?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+  "https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
+];
diff --git a/apps/app/constants/seo-variables.ts b/web/constants/seo-variables.ts
similarity index 100%
rename from apps/app/constants/seo-variables.ts
rename to web/constants/seo-variables.ts
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
new file mode 100644
index 00000000000..603e280f5b2
--- /dev/null
+++ b/web/constants/spreadsheet.ts
@@ -0,0 +1,96 @@
+import { TIssueOrderByOptions } from "types";
+
+export const SPREADSHEET_PROPERTY_DETAILS: {
+  [key: string]: {
+    title: string;
+    ascendingOrderKey: TIssueOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TIssueOrderByOptions;
+    descendingOrderTitle: string;
+  };
+} = {
+  assignee: {
+    title: "Assignees",
+    ascendingOrderKey: "assignees__first_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-assignees__first_name",
+    descendingOrderTitle: "Z",
+  },
+  created_on: {
+    title: "Created on",
+    ascendingOrderKey: "-created_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "created_at",
+    descendingOrderTitle: "Old",
+  },
+  due_date: {
+    title: "Due date",
+    ascendingOrderKey: "-target_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "target_date",
+    descendingOrderTitle: "Old",
+  },
+  estimate: {
+    title: "Estimate",
+    ascendingOrderKey: "estimate_point",
+    ascendingOrderTitle: "Low",
+    descendingOrderKey: "-estimate_point",
+    descendingOrderTitle: "High",
+  },
+  labels: {
+    title: "Labels",
+    ascendingOrderKey: "labels__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-labels__name",
+    descendingOrderTitle: "Z",
+  },
+  priority: {
+    title: "Priority",
+    ascendingOrderKey: "priority",
+    ascendingOrderTitle: "None",
+    descendingOrderKey: "-priority",
+    descendingOrderTitle: "Urgent",
+  },
+  start_date: {
+    title: "Start date",
+    ascendingOrderKey: "-start_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "start_date",
+    descendingOrderTitle: "Old",
+  },
+  state: {
+    title: "State",
+    ascendingOrderKey: "state__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-state__name",
+    descendingOrderTitle: "Z",
+  },
+  updated_on: {
+    title: "Updated on",
+    ascendingOrderKey: "-updated_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "updated_at",
+    descendingOrderTitle: "Old",
+  },
+  link: {
+    title: "Link",
+    ascendingOrderKey: "-link_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "link_count",
+    descendingOrderTitle: "Least",
+  },
+  attachment_count: {
+    title: "Attachment",
+    ascendingOrderKey: "-attachment_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "attachment_count",
+    descendingOrderTitle: "Least",
+  },
+  sub_issue_count: {
+    title: "Sub-issue",
+    ascendingOrderKey: "-sub_issues_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "sub_issues_count",
+    descendingOrderTitle: "Least",
+  },
+};
diff --git a/web/constants/state.ts b/web/constants/state.ts
new file mode 100644
index 00000000000..13e8506ee81
--- /dev/null
+++ b/web/constants/state.ts
@@ -0,0 +1,11 @@
+import { TStateGroups } from "types";
+
+export const STATE_GROUP_COLORS: {
+  [key in TStateGroups]: string;
+} = {
+  backlog: "#d9d9d9",
+  unstarted: "#3f76ff",
+  started: "#f59e0b",
+  completed: "#16a34a",
+  cancelled: "#dc2626",
+};
diff --git a/apps/app/constants/themes.ts b/web/constants/themes.ts
similarity index 84%
rename from apps/app/constants/themes.ts
rename to web/constants/themes.ts
index 74b74caba8b..96ece0600d8 100644
--- a/apps/app/constants/themes.ts
+++ b/web/constants/themes.ts
@@ -1,6 +1,17 @@
 export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
 
-export const THEMES_OBJ = [
+export interface I_THEME_OPTION {
+  value: string;
+  label: string;
+  type: string;
+  icon: {
+    border: string;
+    color1: string;
+    color2: string;
+  };
+}
+
+export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     value: "system",
     label: "System Preference",
diff --git a/apps/app/constants/timezones.ts b/web/constants/timezones.ts
similarity index 100%
rename from apps/app/constants/timezones.ts
rename to web/constants/timezones.ts
diff --git a/web/constants/workspace.ts b/web/constants/workspace.ts
new file mode 100644
index 00000000000..c83c31a67e8
--- /dev/null
+++ b/web/constants/workspace.ts
@@ -0,0 +1,108 @@
+// services images
+import GithubLogo from "public/services/github.png";
+import JiraLogo from "public/services/jira.png";
+import CSVLogo from "public/services/csv.svg";
+import ExcelLogo from "public/services/excel.svg";
+import JSONLogo from "public/services/json.svg";
+import { TStaticViewTypes } from "types";
+
+export const ROLE = {
+  5: "Guest",
+  10: "Viewer",
+  15: "Member",
+  20: "Admin",
+};
+
+export const ORGANIZATION_SIZE = ["只有我自己", "2-10", "11-50", "51-200", "201-500", "500+"];
+
+export const USER_ROLES = [
+  { value: "Product / Project Manager", label: "产品经理/项目经理" },
+  { value: "Development / Engineering", label: "开发者/工程师" },
+  { value: "Founder / Executive", label: "创始人/执行官" },
+  { value: "Freelancer / Consultant", label: "自由职业者/顾问" },
+  { value: "Marketing / Growth", label: "市场营销" },
+  { value: "Sales / Business Development", label: "销售/业务开发" },
+  { value: "Support / Operations", label: "支持/运营" },
+  { value: "Student / Professor", label: "学生/教授" },
+  { value: "Human Resources", label: "人力资源" },
+  { value: "Other", label: "其他" },
+];
+
+export const IMPORTERS_EXPORTERS_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",
+  },
+];
+
+export const RESTRICTED_URLS = [
+  "api",
+  "installations",
+  "404",
+  "create-workspace",
+  "error",
+  "invitations",
+  "magic-sign-in",
+  "onboarding",
+  "profile",
+  "reset-password",
+  "sign-up",
+  "spaces",
+  "workspace-member-invitation",
+];
diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx
new file mode 100644
index 00000000000..7807523e445
--- /dev/null
+++ b/web/contexts/issue-view.context.tsx
@@ -0,0 +1,503 @@
+import { createContext, useCallback, useEffect, useReducer } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+// components
+import ToastAlert from "components/toast-alert";
+// services
+import { ProjectService } from "services/project";
+import { CycleService } from "services/cycle.service";
+import { ModuleService } from "services/module.service";
+import { ViewService } from "services/view.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// types
+import { IIssueFilterOptions, IProjectMember, IUser, IIssueDisplayFilterOptions, IProjectViewProps } from "types";
+// fetch-keys
+import { CYCLE_DETAILS, MODULE_DETAILS, USER_PROJECT_VIEW, VIEW_DETAILS } from "constants/fetch-keys";
+
+const projectService = new ProjectService();
+const cycleService = new CycleService();
+const moduleService = new ModuleService();
+const viewService = new ViewService();
+
+export const issueViewContext = createContext<ContextType>({} as ContextType);
+
+type ReducerActionType = {
+  type: "REHYDRATE_THEME" | "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "RESET_TO_DEFAULT";
+  payload?: Partial<IProjectViewProps>;
+};
+
+type ContextType = IProjectViewProps & {
+  setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
+  resetFilterToDefault: () => void;
+  setNewFilterDefaultView: () => void;
+};
+
+type StateType = IProjectViewProps;
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  display_filters: {
+    group_by: null,
+    layout: "list",
+    order_by: "-created_at",
+    show_empty_groups: true,
+    sub_issue: true,
+  },
+  filters: {
+    priority: null,
+    assignees: null,
+    labels: null,
+    state: null,
+    state_group: null,
+    mentions: null,
+    subscriber: null,
+    created_by: null,
+    start_date: null,
+    target_date: null,
+  },
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "REHYDRATE_THEME": {
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+
+      return { ...initialState, ...payload, collapsed };
+    }
+
+    case "SET_DISPLAY_FILTERS": {
+      const newState = {
+        ...state,
+        display_filters: {
+          ...state.display_filters,
+          ...payload,
+        },
+        issueView: payload?.display_filters?.layout || "list",
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_FILTERS": {
+      const newState = {
+        ...state,
+        filters: {
+          ...state.filters,
+          ...payload?.filters,
+        },
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "RESET_TO_DEFAULT": {
+      return {
+        ...initialState,
+        ...payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};
+
+const saveDataToServer = async (workspaceSlug: string, projectId: string, state: IProjectViewProps) => {
+  mutate<IProjectMember>(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    (prevData) => {
+      if (!prevData) return prevData;
+
+      return {
+        ...prevData,
+        view_props: state,
+      };
+    },
+    false
+  );
+
+  await projectService.setProjectView(workspaceSlug, projectId, {
+    view_props: state,
+  });
+};
+
+const saveCycleFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  cycleId: string,
+  state: any,
+  user: IUser | undefined
+) => {
+  await cycleService.patchCycle(
+    workspaceSlug,
+    projectId,
+    cycleId,
+    {
+      ...state,
+    },
+    user
+  );
+};
+
+const saveModuleFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  moduleId: string,
+  state: any,
+  user: IUser | undefined
+) => {
+  await moduleService.patchModule(
+    workspaceSlug,
+    projectId,
+    moduleId,
+    {
+      ...state,
+    },
+    user
+  );
+};
+
+const saveViewFilters = async (
+  workspaceSlug: string,
+  projectId: string,
+  viewId: string,
+  state: any,
+  user: IUser | undefined
+) => {
+  await viewService.patchView(
+    workspaceSlug,
+    projectId,
+    viewId,
+    {
+      ...state,
+    },
+    user
+  );
+};
+
+const setNewDefault = async (workspaceSlug: string, projectId: string, state: any) => {
+  mutate<IProjectMember>(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    (prevData) => {
+      if (!prevData) return prevData;
+
+      return {
+        ...prevData,
+        view_props: state,
+      };
+    },
+    false
+  );
+
+  await projectService.setProjectView(workspaceSlug, projectId, {
+    view_props: state,
+    default_props: state,
+  });
+};
+
+export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+  const { user } = useUserAuth();
+
+  const { data: myViewProps, mutate: mutateMyViewProps } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: viewDetails, mutate: mutateViewDetails } = useSWR(
+    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+    workspaceSlug && projectId && viewId
+      ? () => viewService.getViewDetails(workspaceSlug as string, projectId as string, viewId as string)
+      : null
+  );
+
+  const { data: cycleDetails, mutate: mutateCycleDetails } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () => cycleService.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
+      : null
+  );
+
+  const { data: moduleDetails, mutate: mutateModuleDetails } = useSWR(
+    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
+    workspaceSlug && projectId && moduleId
+      ? () => moduleService.getModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
+      : null
+  );
+
+  const setDisplayFilters = useCallback(
+    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      dispatch({
+        type: "SET_DISPLAY_FILTERS",
+        payload: {
+          display_filters: {
+            ...state.display_filters,
+            ...displayFilter,
+          },
+        },
+      });
+
+      const additionalProperties: Partial<IIssueDisplayFilterOptions> = {
+        group_by: displayFilter.group_by ?? state.display_filters?.group_by,
+        order_by: displayFilter.order_by ?? state.display_filters?.order_by,
+      };
+
+      if (displayFilter.layout && displayFilter.layout === "kanban" && state.display_filters?.group_by === null) {
+        additionalProperties.group_by = "state";
+        dispatch({
+          type: "SET_DISPLAY_FILTERS",
+          payload: {
+            display_filters: {
+              group_by: "state",
+            },
+          },
+        });
+      }
+      if (displayFilter.layout && displayFilter.layout === "calendar") {
+        additionalProperties.group_by = null;
+        dispatch({
+          type: "SET_DISPLAY_FILTERS",
+          payload: {
+            display_filters: {
+              group_by: null,
+            },
+          },
+        });
+      }
+      if (displayFilter.layout && displayFilter.layout === "gantt_chart") {
+        additionalProperties.order_by = "sort_order";
+        dispatch({
+          type: "SET_DISPLAY_FILTERS",
+          payload: {
+            display_filters: {
+              order_by: "sort_order",
+            },
+          },
+        });
+      }
+
+      if (!workspaceSlug || !projectId) return;
+
+      saveDataToServer(workspaceSlug as string, projectId as string, {
+        ...state,
+        display_filters: {
+          ...state.display_filters,
+          ...displayFilter,
+          ...additionalProperties,
+        },
+      });
+    },
+    [workspaceSlug, projectId, state]
+  );
+
+  const setFilters = useCallback(
+    (property: Partial<IIssueFilterOptions>, saveToServer = true) => {
+      Object.keys(property).forEach((key) => {
+        if (property[key as keyof typeof property]?.length === 0) property[key as keyof typeof property] = null;
+      });
+
+      dispatch({
+        type: "SET_FILTERS",
+        payload: {
+          filters: {
+            ...state.filters,
+            ...property,
+          },
+        },
+      });
+
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId) {
+        mutateCycleDetails((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveCycleFilters(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          cycleId.toString(),
+          {
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          },
+          user
+        );
+      } else if (moduleId) {
+        mutateModuleDetails((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveModuleFilters(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          moduleId.toString(),
+          {
+            view_props: {
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          },
+          user
+        );
+      } else if (viewId) {
+        mutateViewDetails((prevData: any) => {
+          if (!prevData) return prevData;
+          return {
+            ...prevData,
+            query_data: {
+              ...state.filters,
+              ...property,
+            },
+          };
+        }, false);
+        if (saveToServer)
+          saveViewFilters(
+            workspaceSlug as string,
+            projectId as string,
+            viewId as string,
+            {
+              query_data: {
+                ...state.filters,
+                ...property,
+              },
+            },
+            user
+          );
+      } else {
+        mutateMyViewProps((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            view_props: {
+              ...state,
+              filters: {
+                ...state.filters,
+                ...property,
+              },
+            },
+          };
+        }, false);
+
+        saveDataToServer(workspaceSlug as string, projectId as string, {
+          ...state,
+          filters: {
+            ...state.filters,
+            ...property,
+          },
+        });
+      }
+    },
+    [
+      projectId,
+      workspaceSlug,
+      state,
+      mutateMyViewProps,
+      cycleId,
+      mutateCycleDetails,
+      moduleId,
+      mutateModuleDetails,
+      viewId,
+      mutateViewDetails,
+      user,
+    ]
+  );
+
+  const setNewDefaultView = useCallback(() => {
+    if (!workspaceSlug || !projectId) return;
+
+    setNewDefault(workspaceSlug as string, projectId as string, state).then(() => {
+      mutateMyViewProps();
+    });
+  }, [projectId, workspaceSlug, state, mutateMyViewProps]);
+
+  const resetToDefault = useCallback(() => {
+    dispatch({
+      type: "RESET_TO_DEFAULT",
+      payload: myViewProps?.default_props,
+    });
+
+    if (!workspaceSlug || !projectId || !myViewProps) return;
+
+    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps.default_props);
+  }, [projectId, workspaceSlug, myViewProps]);
+
+  useEffect(() => {
+    dispatch({
+      type: "REHYDRATE_THEME",
+      payload: {
+        ...myViewProps?.view_props,
+        filters: {
+          ...(cycleId
+            ? cycleDetails?.view_props.filters
+            : moduleId
+            ? moduleDetails?.view_props.filters
+            : viewId
+            ? viewDetails?.query_data
+            : myViewProps?.view_props?.filters),
+        } as any,
+      },
+    });
+  }, [myViewProps, cycleId, cycleDetails, moduleId, moduleDetails, viewId, viewDetails]);
+
+  return (
+    <issueViewContext.Provider
+      value={{
+        display_filters: state.display_filters,
+        setDisplayFilters,
+        filters: state.filters,
+        setFilters,
+        resetFilterToDefault: resetToDefault,
+        setNewFilterDefaultView: setNewDefaultView,
+      }}
+    >
+      <ToastAlert />
+      {children}
+    </issueViewContext.Provider>
+  );
+};
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
new file mode 100644
index 00000000000..44c17b50a16
--- /dev/null
+++ b/web/contexts/profile-issues-context.tsx
@@ -0,0 +1,203 @@
+import { createContext, useCallback, useReducer } from "react";
+
+// components
+import ToastAlert from "components/toast-alert";
+// types
+import {
+  IIssueFilterOptions,
+  Properties,
+  IWorkspaceViewProps,
+  IIssueDisplayFilterOptions,
+} from "types";
+
+export const profileIssuesContext = createContext<ContextType>({} as ContextType);
+
+type ReducerActionType = {
+  type: "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "SET_PROPERTIES" | "RESET_TO_DEFAULT";
+  payload?: Partial<IWorkspaceViewProps>;
+};
+
+type ContextType = IWorkspaceViewProps & {
+  setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  setFilters: (filters: Partial<IIssueFilterOptions>) => void;
+  setProperties: (key: keyof Properties) => void;
+};
+
+type StateType = IWorkspaceViewProps;
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  display_filters: {
+    group_by: null,
+    layout: "list",
+    order_by: "-created_at",
+    show_empty_groups: true,
+    sub_issue: true,
+  },
+  filters: {
+    priority: null,
+    assignees: null,
+    labels: null,
+    state: null,
+    state_group: null,
+    subscriber: null,
+    created_by: null,
+    start_date: null,
+    target_date: null,
+  },
+  display_properties: {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    key: true,
+    labels: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    attachment_count: true,
+    link: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  },
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_DISPLAY_FILTERS": {
+      const newState = {
+        ...state,
+        display_filters: {
+          ...state.display_filters,
+          ...payload?.display_filters,
+        },
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_FILTERS": {
+      const newState = {
+        ...state,
+        filters: {
+          ...state.filters,
+          ...payload?.filters,
+        },
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    case "SET_PROPERTIES": {
+      const newState = {
+        ...state,
+        display_properties: {
+          ...state.display_properties,
+          ...payload?.display_properties,
+        },
+      };
+
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const setDisplayFilters = useCallback(
+    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      dispatch({
+        type: "SET_DISPLAY_FILTERS",
+        payload: {
+          display_filters: {
+            ...displayFilter,
+          },
+        },
+      });
+
+      if (
+        displayFilter.layout &&
+        displayFilter.layout === "kanban" &&
+        state.display_filters?.group_by === null
+      ) {
+        dispatch({
+          type: "SET_DISPLAY_FILTERS",
+          payload: {
+            display_filters: {
+              group_by: "state_detail.group",
+            },
+          },
+        });
+      }
+    },
+    [state]
+  );
+
+  const setFilters = useCallback(
+    (property: Partial<IIssueFilterOptions>) => {
+      Object.keys(property).forEach((key) => {
+        if (property[key as keyof typeof property]?.length === 0)
+          property[key as keyof typeof property] = null;
+      });
+
+      dispatch({
+        type: "SET_FILTERS",
+        payload: {
+          filters: {
+            ...state.filters,
+            ...property,
+          },
+        },
+      });
+    },
+    [state]
+  );
+
+  const setProperties = useCallback(
+    (key: keyof Properties) => {
+      dispatch({
+        type: "SET_PROPERTIES",
+        payload: {
+          display_properties: {
+            [key]: !state.display_properties[key],
+          },
+        },
+      });
+    },
+    [state]
+  );
+
+  return (
+    <profileIssuesContext.Provider
+      value={{
+        display_filters: state.display_filters,
+        setDisplayFilters,
+        filters: state.filters,
+        setFilters,
+        display_properties: state.display_properties,
+        setProperties,
+      }}
+    >
+      <ToastAlert />
+      {children}
+    </profileIssuesContext.Provider>
+  );
+};
diff --git a/apps/app/contexts/toast.context.tsx b/web/contexts/toast.context.tsx
similarity index 100%
rename from apps/app/contexts/toast.context.tsx
rename to web/contexts/toast.context.tsx
diff --git a/apps/app/contexts/user-notification-context.tsx b/web/contexts/user-notification-context.tsx
similarity index 85%
rename from apps/app/contexts/user-notification-context.tsx
rename to web/contexts/user-notification-context.tsx
index 32e93842e65..831777d4abd 100644
--- a/apps/app/contexts/user-notification-context.tsx
+++ b/web/contexts/user-notification-context.tsx
@@ -1,18 +1,16 @@
 import { createContext, useCallback, useEffect, useReducer } from "react";
 
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import userNotificationServices from "services/notifications.service";
-
+import { NotificationService } from "services/notification.service";
 // fetch-keys
 import { UNREAD_NOTIFICATIONS_COUNT, USER_WORKSPACE_NOTIFICATIONS } from "constants/fetch-keys";
-
 // type
 import type { NotificationType, NotificationCount, IUserNotification } from "types";
 
+const notificationService = new NotificationService();
+
 export const userNotificationContext = createContext<ContextType>({} as ContextType);
 
 type UserNotificationProps = {
@@ -104,17 +102,12 @@ const UserNotificationContextProvider: React.FC<{
 
   const { data: notifications, mutate: notificationsMutate } = useSWR(
     workspaceSlug ? USER_WORKSPACE_NOTIFICATIONS(workspaceSlug.toString(), params) : null,
-    workspaceSlug
-      ? () => userNotificationServices.getUserNotifications(workspaceSlug.toString(), params)
-      : null
+    workspaceSlug ? () => notificationService.getUserNotifications(workspaceSlug.toString(), params) : null
   );
 
   const { data: notificationCount, mutate: mutateNotificationCount } = useSWR(
     workspaceSlug ? UNREAD_NOTIFICATIONS_COUNT(workspaceSlug.toString()) : null,
-    () =>
-      workspaceSlug
-        ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString())
-        : null
+    () => (workspaceSlug ? notificationService.getUnreadNotificationsCount(workspaceSlug.toString()) : null)
   );
 
   const handleReadMutation = (action: "read" | "unread") => {
@@ -124,11 +117,7 @@ const UserNotificationContextProvider: React.FC<{
       if (!prev) return prev;
 
       const notificationType: keyof NotificationCount =
-        selectedTab === "assigned"
-          ? "my_issues"
-          : selectedTab === "created"
-          ? "created_issues"
-          : "watching_issues";
+        selectedTab === "assigned" ? "my_issues" : selectedTab === "created" ? "created_issues" : "watching_issues";
 
       return {
         ...prev,
@@ -139,15 +128,12 @@ const UserNotificationContextProvider: React.FC<{
 
   const markNotificationReadStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     notificationsMutate(
       (previousNotifications: any) =>
         previousNotifications?.map((notification: any) =>
-          notification.id === notificationId
-            ? { ...notification, read_at: isRead ? null : new Date() }
-            : notification
+          notification.id === notificationId ? { ...notification, read_at: isRead ? null : new Date() } : notification
         ),
       false
     );
@@ -155,7 +141,7 @@ const UserNotificationContextProvider: React.FC<{
     handleReadMutation(isRead ? "unread" : "read");
 
     if (isRead) {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -165,7 +151,7 @@ const UserNotificationContextProvider: React.FC<{
           mutateNotificationCount();
         });
     } else {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -179,16 +165,14 @@ const UserNotificationContextProvider: React.FC<{
 
   const markNotificationArchivedStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isArchived =
-      notifications?.find((notification) => notification.id === notificationId)?.archived_at !==
-      null;
+    const isArchived = notifications?.find((notification) => notification.id === notificationId)?.archived_at !== null;
 
     if (!isArchived) {
       handleReadMutation("read");
     }
 
     if (isArchived) {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsUnarchived(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -199,11 +183,10 @@ const UserNotificationContextProvider: React.FC<{
         });
     } else {
       notificationsMutate(
-        (prev: any) =>
-          prev?.filter((prevNotification: any) => prevNotification.id !== notificationId),
+        (prev: any) => prev?.filter((prevNotification: any) => prevNotification.id !== notificationId),
         false
       );
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsArchived(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -218,9 +201,7 @@ const UserNotificationContextProvider: React.FC<{
   const markSnoozeNotification = async (notificationId: string, dateTime?: Date) => {
     if (!workspaceSlug) return;
 
-    const isSnoozed =
-      notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !==
-      null;
+    const isSnoozed = notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !== null;
 
     notificationsMutate(
       (previousNotifications: any) =>
@@ -233,7 +214,7 @@ const UserNotificationContextProvider: React.FC<{
     );
 
     if (isSnoozed) {
-      await userNotificationServices
+      await notificationService
         .patchUserNotification(workspaceSlug.toString(), notificationId, {
           snoozed_till: null,
         })
@@ -241,7 +222,7 @@ const UserNotificationContextProvider: React.FC<{
           notificationsMutate();
         });
     } else {
-      await userNotificationServices
+      await notificationService
         .patchUserNotification(workspaceSlug.toString(), notificationId, {
           snoozed_till: dateTime,
         })
diff --git a/web/contexts/user.context.tsx b/web/contexts/user.context.tsx
new file mode 100644
index 00000000000..aeca99900e3
--- /dev/null
+++ b/web/contexts/user.context.tsx
@@ -0,0 +1,40 @@
+import React, { createContext, ReactElement } from "react";
+import useSWR, { KeyedMutator } from "swr";
+// services
+import { UserService } from "services/user.service";
+// constants
+import { CURRENT_USER } from "constants/fetch-keys";
+// types
+import type { IUser } from "types";
+
+interface IUserContextProps {
+  user?: IUser;
+  isUserLoading: boolean;
+  mutateUser: KeyedMutator<IUser>;
+  assignedIssuesLength?: number;
+  workspaceInvitesLength?: number;
+}
+
+// services
+const userService = new UserService();
+
+export const UserContext = createContext<IUserContextProps>({} as IUserContextProps);
+
+export const UserProvider = ({ children }: { children: ReactElement }) => {
+  // API to fetch user information
+  const { data, error, mutate } = useSWR(CURRENT_USER, () => userService.currentUser(), {
+    shouldRetryOnError: false,
+  });
+
+  return (
+    <UserContext.Provider
+      value={{
+        user: error ? undefined : data,
+        isUserLoading: Boolean(data === undefined && error === undefined),
+        mutateUser: mutate,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
diff --git a/apps/app/contexts/workspace-member.context.tsx b/web/contexts/workspace-member.context.tsx
similarity index 83%
rename from apps/app/contexts/workspace-member.context.tsx
rename to web/contexts/workspace-member.context.tsx
index 5f34bd28b23..e08e0939935 100644
--- a/apps/app/contexts/workspace-member.context.tsx
+++ b/web/contexts/workspace-member.context.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import { IWorkspaceMember } from "types";
 // fetch-keys
@@ -23,6 +23,10 @@ type Props = {
   children: React.ReactNode;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
+// TODO: remove this context
 export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
   const { children } = props;
 
@@ -37,7 +41,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
   const loading = !memberDetails && !error;
 
   return (
-    <WorkspaceMemberContext.Provider value={{ loading, memberDetails, error }}>
+    <WorkspaceMemberContext.Provider value={{ loading, memberDetails: undefined, error }}>
       {children}
     </WorkspaceMemberContext.Provider>
   );
@@ -46,8 +50,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
 export const useWorkspaceMyMembership = () => {
   const context = useContext(WorkspaceMemberContext);
 
-  if (context === undefined)
-    throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
+  if (context === undefined) throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
 
   return {
     ...context,
diff --git a/apps/app/google.d.ts b/web/google.d.ts
similarity index 100%
rename from apps/app/google.d.ts
rename to web/google.d.ts
diff --git a/web/helpers/analytics.helper.ts b/web/helpers/analytics.helper.ts
new file mode 100644
index 00000000000..4e809cc6022
--- /dev/null
+++ b/web/helpers/analytics.helper.ts
@@ -0,0 +1,141 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// helpers
+import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
+// types
+import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse, TStateGroups } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+import { MONTHS_LIST } from "constants/calendar";
+import { DATE_KEYS } from "constants/analytics";
+
+export const convertResponseToBarGraphData = (
+  response: IAnalyticsData | undefined,
+  params: IAnalyticsParams
+): { data: BarDatum[]; xAxisKeys: string[] } => {
+  if (!response || !(typeof response === "object") || Object.keys(response).length === 0)
+    return { data: [], xAxisKeys: [] };
+
+  const data: BarDatum[] = [];
+
+  let xAxisKeys: string[] = [];
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
+
+  Object.keys(response).forEach((key) => {
+    const segments: { [key: string]: number } = {};
+
+    if (params.segment) {
+      response[key].map((item: any) => {
+        segments[item.segment ?? "None"] = item[yAxisKey] ?? 0;
+
+        // store the segment in the xAxisKeys array
+        if (!xAxisKeys.includes(item.segment ?? "None")) xAxisKeys.push(item.segment ?? "None");
+      });
+
+      data.push({
+        name: DATE_KEYS.includes(params.x_axis)
+          ? renderMonthAndYear(key)
+          : params.x_axis === "priority" || params.x_axis === "state__group"
+          ? capitalizeFirstLetter(key)
+          : key,
+        ...segments,
+      });
+    } else {
+      xAxisKeys = [yAxisKey];
+
+      const item = response[key][0];
+
+      data.push({
+        name: DATE_KEYS.includes(params.x_axis)
+          ? renderMonthAndYear(item.dimension)
+          : params.x_axis === "priority" || params.x_axis === "state__group"
+          ? capitalizeFirstLetter(item.dimension ?? "None")
+          : item.dimension ?? "None",
+        [yAxisKey]: item[yAxisKey] ?? 0,
+      });
+    }
+  });
+
+  return { data, xAxisKeys };
+};
+
+export const generateBarColor = (
+  value: string,
+  analytics: IAnalyticsResponse,
+  params: IAnalyticsParams,
+  type: "x_axis" | "segment"
+): string => {
+  let color: string | undefined = generateRandomColor(value);
+
+  if (!analytics) return color;
+
+  if (params[type] === "state_id")
+    color = analytics?.extras.state_details.find((s) => s.state_id === value)?.state__color;
+
+  if (params[type] === "labels__id")
+    color = analytics?.extras.label_details.find((l) => l.labels__id === value)?.labels__color ?? undefined;
+
+  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase() as TStateGroups];
+
+  if (params[type] === "priority") {
+    const priority = value.toLowerCase();
+
+    color =
+      priority === "urgent"
+        ? "#ef4444"
+        : priority === "high"
+        ? "#f97316"
+        : priority === "medium"
+        ? "#eab308"
+        : priority === "low"
+        ? "#22c55e"
+        : "#ced4da";
+  }
+
+  return color ?? generateRandomColor(value);
+};
+
+export const generateDisplayName = (
+  value: string,
+  analytics: IAnalyticsResponse,
+  params: IAnalyticsParams,
+  type: "x_axis" | "segment"
+): string => {
+  let displayName = addSpaceIfCamelCase(value);
+
+  if (!analytics) return displayName;
+
+  if (params[type] === "assignees__id")
+    displayName =
+      analytics?.extras.assignee_details.find((a) => a.assignees__id === value)?.assignees__display_name ??
+      "No assignee";
+
+  if (params[type] === "issue_cycle__cycle_id")
+    displayName =
+      analytics?.extras.cycle_details.find((c) => c.issue_cycle__cycle_id === value)?.issue_cycle__cycle__name ??
+      "None";
+
+  if (params[type] === "issue_module__module_id")
+    displayName =
+      analytics?.extras.module_details.find((m) => m.issue_module__module_id === value)?.issue_module__module__name ??
+      "None";
+
+  if (params[type] === "labels__id")
+    displayName = analytics?.extras.label_details.find((l) => l.labels__id === value)?.labels__name ?? "None";
+
+  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);
+
+  return displayName;
+};
+
+export const renderMonthAndYear = (date: string | number | null): string => {
+  if (!date || date === "") return "";
+
+  const monthNumber = parseInt(`${date}`.split("-")[1], 10);
+  const year = `${date}`.split("-")[0];
+
+  return (MONTHS_LIST[monthNumber]?.shortTitle ?? "None") + ` ${year}` ?? "";
+};
diff --git a/apps/app/helpers/array.helper.ts b/web/helpers/array.helper.ts
similarity index 89%
rename from apps/app/helpers/array.helper.ts
rename to web/helpers/array.helper.ts
index bcadbe3c8cc..a682b0a1c12 100644
--- a/apps/app/helpers/array.helper.ts
+++ b/web/helpers/array.helper.ts
@@ -38,10 +38,13 @@ export const orderArrayBy = (
 
 export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
 
-export const findStringWithMostCharacters = (strings: string[]) =>
-  strings.reduce((longestString, currentString) =>
+export const findStringWithMostCharacters = (strings: string[]): string => {
+  if (!strings || strings.length === 0) return "";
+
+  return strings.reduce((longestString, currentString) =>
     currentString.length > longestString.length ? currentString : longestString
   );
+};
 
 export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
   if (!arr1 || !arr2) return false;
diff --git a/apps/app/helpers/attachment.helper.ts b/web/helpers/attachment.helper.ts
similarity index 100%
rename from apps/app/helpers/attachment.helper.ts
rename to web/helpers/attachment.helper.ts
diff --git a/web/helpers/calendar.helper.ts b/web/helpers/calendar.helper.ts
new file mode 100644
index 00000000000..b00668894f8
--- /dev/null
+++ b/web/helpers/calendar.helper.ts
@@ -0,0 +1,92 @@
+// helpers
+import { getWeekNumberOfDate, renderDateFormat } from "helpers/date-time.helper";
+// types
+import { ICalendarDate, ICalendarPayload } from "components/issues";
+
+export const formatDate = (date: Date, format: string): string => {
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+  const monthsOfYear = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const formattedDate = format
+    .replace("dd", day.toString().padStart(2, "0"))
+    .replace("d", day.toString())
+    .replace("eee", daysOfWeek[date.getDay()])
+    .replace("Month", monthsOfYear[month - 1])
+    .replace("yyyy", year.toString())
+    .replace("yyy", year.toString().slice(-3))
+    .replace("hh", hours.toString().padStart(2, "0"))
+    .replace("mm", minutes.toString().padStart(2, "0"))
+    .replace("ss", seconds.toString().padStart(2, "0"));
+
+  return formattedDate;
+};
+
+/**
+ * @returns {ICalendarPayload} calendar payload to render the calendar
+ * @param {ICalendarPayload | null} currentStructure current calendar payload
+ * @param {Date} startDate date of the month to render
+ * @description Returns calendar payload to render the calendar, if currentStructure is null, it will generate the payload for the month of startDate, else it will construct the payload for the month of startDate and append it to the currentStructure
+ */
+export const generateCalendarData = (currentStructure: ICalendarPayload | null, startDate: Date): ICalendarPayload => {
+  const calendarData: ICalendarPayload = currentStructure ?? {};
+
+  const startMonth = startDate.getMonth();
+  const startYear = startDate.getFullYear();
+
+  const currentDate = new Date(startYear, startMonth, 1);
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+  const totalDaysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDayOfMonth = new Date(year, month, 1).getDay(); // Sunday is 0, Monday is 1, ..., Saturday is 6
+
+  calendarData[`y-${year}`] ||= {};
+  calendarData[`y-${year}`][`m-${month}`] ||= {};
+
+  const numWeeks = Math.ceil((totalDaysInMonth + firstDayOfMonth) / 7);
+
+  for (let week = 0; week < numWeeks; week++) {
+    const currentWeekObject: { [date: string]: ICalendarDate } = {};
+
+    const weekNumber = getWeekNumberOfDate(new Date(year, month, week * 7 - firstDayOfMonth + 1));
+
+    for (let i = 0; i < 7; i++) {
+      const dayNumber = week * 7 + i - firstDayOfMonth;
+
+      const date = new Date(year, month, dayNumber + 1);
+
+      currentWeekObject[renderDateFormat(date)] = {
+        date,
+        year,
+        month,
+        day: dayNumber + 1,
+        week: weekNumber,
+        is_current_month: date.getMonth() === month,
+        is_current_week: getWeekNumberOfDate(date) === getWeekNumberOfDate(new Date()),
+        is_today: date.toDateString() === new Date().toDateString(),
+      };
+    }
+
+    calendarData[`y-${year}`][`m-${month}`][`w-${weekNumber}`] = currentWeekObject;
+  }
+
+  return calendarData;
+};
diff --git a/apps/app/helpers/color.helper.ts b/web/helpers/color.helper.ts
similarity index 100%
rename from apps/app/helpers/color.helper.ts
rename to web/helpers/color.helper.ts
diff --git a/web/helpers/common.helper.ts b/web/helpers/common.helper.ts
new file mode 100644
index 00000000000..7fb8896dee8
--- /dev/null
+++ b/web/helpers/common.helper.ts
@@ -0,0 +1,22 @@
+export const debounce = (func: any, wait: number, immediate: boolean = false) => {
+  let timeout: any;
+
+  return function executedFunction(...args: any) {
+    const later = () => {
+      timeout = null;
+      if (!immediate) func(...args);
+    };
+
+    const callNow = immediate && !timeout;
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, wait);
+
+    if (callNow) func(...args);
+  };
+};
+
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
+  ? process.env.NEXT_PUBLIC_API_BASE_URL
+  : "";
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
new file mode 100644
index 00000000000..dced747f9ce
--- /dev/null
+++ b/web/helpers/date-time.helper.ts
@@ -0,0 +1,427 @@
+export const renderDateFormat = (date: string | Date | null) => {
+  if (!date) return "N/A";
+
+  var d = new Date(date),
+    month = "" + (d.getMonth() + 1),
+    day = "" + d.getDate(),
+    year = d.getFullYear();
+
+  if (month.length < 2) month = "0" + month;
+  if (day.length < 2) day = "0" + day;
+
+  return [year, month, day].join("-");
+};
+
+export const renderShortNumericDateFormat = (date: string | Date) =>
+  new Date(date).toLocaleDateString("en-UK", {
+    day: "numeric",
+    month: "short",
+  });
+
+export const renderLongDetailDateFormat = (date: string | Date) =>
+  new Date(date).toLocaleDateString("en-UK", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+
+export const findHowManyDaysLeft = (date: string | Date) => {
+  const today = new Date();
+  const eventDate = new Date(date);
+  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
+  return Math.ceil(timeDiff / (1000 * 3600 * 24));
+};
+
+export const getDatesInRange = (startDate: string | Date, endDate: string | Date) => {
+  startDate = new Date(startDate);
+  endDate = new Date(endDate);
+
+  const date = new Date(startDate.getTime());
+  const dates = [];
+
+  while (date <= endDate) {
+    dates.push(new Date(date));
+    date.setDate(date.getDate() + 1);
+  }
+
+  return dates;
+};
+
+export const timeAgo = (time: any) => {
+  switch (typeof time) {
+    case "number":
+      break;
+    case "string":
+      time = +new Date(time);
+      break;
+    case "object":
+      if (time.constructor === Date) time = time.getTime();
+      break;
+    default:
+      time = +new Date();
+  }
+
+  var time_formats = [
+    [60, "seconds", 1], // 60
+    [120, "1 minute ago", "1 minute from now"], // 60*2
+    [3600, "minutes", 60], // 60*60, 60
+    [7200, "1 hour ago", "1 hour from now"], // 60*60*2
+    [86400, "hours", 3600], // 60*60*24, 60*60
+    [172800, "Yesterday", "Tomorrow"], // 60*60*24*2
+    [604800, "days", 86400], // 60*60*24*7, 60*60*24
+    [1209600, "Last week", "Next week"], // 60*60*24*7*4*2
+    [2419200, "weeks", 604800], // 60*60*24*7*4, 60*60*24*7
+    [4838400, "Last month", "Next month"], // 60*60*24*7*4*2
+    [29030400, "months", 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
+    [58060800, "Last year", "Next year"], // 60*60*24*7*4*12*2
+    [2903040000, "years", 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
+    [5806080000, "Last century", "Next century"], // 60*60*24*7*4*12*100*2
+    [58060800000, "centuries", 2903040000], // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
+  ];
+
+  var seconds = (+new Date() - time) / 1000,
+    token = "ago",
+    list_choice = 1;
+
+  if (seconds == 0) {
+    return "Just now";
+  }
+  if (seconds < 0) {
+    seconds = Math.abs(seconds);
+    token = "from now";
+    list_choice = 2;
+  }
+  var i = 0,
+    format: any[];
+  while ((format = time_formats[i++]))
+    if (seconds < format[0]) {
+      if (typeof format[2] == "string") return format[list_choice];
+      else return Math.floor(seconds / format[2]) + " " + format[1] + " " + token;
+    }
+  return time;
+};
+
+export const formatDateDistance = (date: string | Date) => {
+  const today = new Date();
+  const eventDate = new Date(date);
+  const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
+  const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
+
+  if (days < 1) {
+    const hours = Math.ceil(timeDiff / (1000 * 3600));
+    if (hours < 1) {
+      const minutes = Math.ceil(timeDiff / (1000 * 60));
+      if (minutes < 1) {
+        return "Just now";
+      } else {
+        return `${minutes}m`;
+      }
+    } else {
+      return `${hours}h`;
+    }
+  } else if (days < 7) {
+    return `${days}d`;
+  } else if (days < 30) {
+    return `${Math.floor(days / 7)}w`;
+  } else if (days < 365) {
+    return `${Math.floor(days / 30)}m`;
+  } else {
+    return `${Math.floor(days / 365)}y`;
+  }
+};
+
+export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => {
+  if (!startDate || !endDate) return "draft";
+
+  const today = renderDateFormat(new Date());
+  const now = new Date(today);
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  if (start <= now && end >= now) {
+    return "current";
+  } else if (start > now) {
+    return "upcoming";
+  } else {
+    return "completed";
+  }
+};
+
+export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`;
+};
+
+export const renderShortDate = (date: string | Date, placeholder?: string) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
+};
+
+export const renderShortMonthDate = (date: string | Date, placeholder?: string) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month} ${year}`;
+};
+
+export const render12HourFormatTime = (date: string | Date): string => {
+  if (!date || date === "") return "";
+
+  date = new Date(date);
+
+  let hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  let period = "AM";
+
+  if (hours >= 12) {
+    period = "PM";
+
+    if (hours > 12) hours -= 12;
+  }
+
+  return hours + ":" + (minutes < 10 ? `0${minutes}` : minutes) + " " + period;
+};
+
+export const render24HourFormatTime = (date: string | Date): string => {
+  if (!date || date === "") return "";
+
+  date = new Date(date);
+
+  const hours = date.getHours();
+  let minutes: any = date.getMinutes();
+
+  // add leading zero to single digit minutes
+  if (minutes < 10) minutes = "0" + minutes;
+
+  return hours + ":" + minutes;
+};
+
+export const isDateRangeValid = (startDate: string, endDate: string) => new Date(startDate) < new Date(endDate);
+
+export const isDateGreaterThanToday = (dateStr: string) => {
+  const date = new Date(dateStr);
+  const today = new Date();
+  return date > today;
+};
+
+export const renderLongDateFormat = (dateString: string | Date) => {
+  const date = new Date(dateString);
+  const day = date.getDate();
+  const year = date.getFullYear();
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const monthIndex = date.getMonth();
+  const monthName = monthNames[monthIndex];
+  const suffixes = ["st", "nd", "rd", "th"];
+  let suffix = "";
+  if (day === 1 || day === 21 || day === 31) {
+    suffix = suffixes[0];
+  } else if (day === 2 || day === 22) {
+    suffix = suffixes[1];
+  } else if (day === 3 || day === 23) {
+    suffix = suffixes[2];
+  } else {
+    suffix = suffixes[3];
+  }
+  return `${day}${suffix} ${monthName} ${year}`;
+};
+
+/**
+ *
+ * @returns {Array} Array of time objects with label and value as keys
+ */
+
+export const getTimestampAfterCurrentTime = (): Array<{
+  label: string;
+  value: Date;
+}> => {
+  const current = new Date();
+  const time = [];
+  for (let i = 0; i < 24; i++) {
+    const newTime = new Date(current.getTime() + i * 60 * 60 * 1000);
+    time.push({
+      label: newTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+      value: newTime,
+    });
+  }
+  return time;
+};
+
+/**
+ * @returns {Array} Array of date objects with label and value as keys
+ * @description Returns an array of date objects starting from current date to 7 days after
+ */
+
+export const getDatesAfterCurrentDate = (): Array<{
+  label: string;
+  value: Date;
+}> => {
+  const current = new Date();
+  const date = [];
+  for (let i = 0; i < 7; i++) {
+    const newDate = new Date(Math.round(current.getTime() / (30 * 60 * 1000)) * 30 * 60 * 1000);
+    date.push({
+      label: newDate.toLocaleDateString([], {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      }),
+      value: newDate,
+    });
+  }
+  return date;
+};
+
+/**
+ * @returns {boolean} true if date is valid
+ * @description Returns true if date is valid
+ * @param {string} date
+ * @example checkIfStringIsDate("2021-01-01") // true
+ * @example checkIfStringIsDate("2021-01-32") // false
+ */
+
+export const checkIfStringIsDate = (date: string): boolean => new Date(date).toString() !== "Invalid Date";
+
+// return an array of dates starting from 12:00 to 23:30 with 30 minutes interval as dates
+export const getDatesWith30MinutesInterval = (): Array<Date> => {
+  const dates = [];
+  const current = new Date();
+  for (let i = 0; i < 24; i++) {
+    const newDate = new Date(current.getTime() + i * 60 * 60 * 1000);
+    dates.push(newDate);
+  }
+  return dates;
+};
+
+export const getAllTimeIn30MinutesInterval = (): Array<{
+  label: string;
+  value: string;
+}> => [
+  { label: "12:00", value: "12:00" },
+  { label: "12:30", value: "12:30" },
+  { label: "01:00", value: "01:00" },
+  { label: "01:30", value: "01:30" },
+  { label: "02:00", value: "02:00" },
+  { label: "02:30", value: "02:30" },
+  { label: "03:00", value: "03:00" },
+  { label: "03:30", value: "03:30" },
+  { label: "04:00", value: "04:00" },
+  { label: "04:30", value: "04:30" },
+  { label: "05:00", value: "05:00" },
+  { label: "05:30", value: "05:30" },
+  { label: "06:00", value: "06:00" },
+  { label: "06:30", value: "06:30" },
+  { label: "07:00", value: "07:00" },
+  { label: "07:30", value: "07:30" },
+  { label: "08:00", value: "08:00" },
+  { label: "08:30", value: "08:30" },
+  { label: "09:00", value: "09:00" },
+  { label: "09:30", value: "09:30" },
+  { label: "10:00", value: "10:00" },
+  { label: "10:30", value: "10:30" },
+  { label: "11:00", value: "11:00" },
+  { label: "11:30", value: "11:30" },
+];
+
+/**
+ * @returns {number} total number of days in range
+ * @description Returns total number of days in range
+ * @param {string} startDate
+ * @param {string} endDate
+ * @param {boolean} inclusive
+ * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
+ */
+
+export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | string, inclusive: boolean): number => {
+  if (!startDate || !endDate) return 0;
+
+  startDate = new Date(startDate);
+  endDate = new Date(endDate);
+
+  // find number of days between startDate and endDate
+  const diffInTime = endDate.getTime() - startDate.getTime();
+  const diffInDays = diffInTime / (1000 * 3600 * 24);
+
+  // if inclusive is true, add 1 to diffInDays
+  if (inclusive) return diffInDays + 1;
+
+  return diffInDays;
+};
+
+export const getUserTimeZoneFromWindow = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+/**
+ * @returns {number} week number of date
+ * @description Returns week number of date
+ * @param {Date} date
+ * @example getWeekNumber(new Date("2023-09-01")) // 35
+ */
+export const getWeekNumberOfDate = (date: Date): number => {
+  const currentDate = new Date(date);
+
+  // Adjust the starting day to Sunday (0) instead of Monday (1)
+  const startDate = new Date(currentDate.getFullYear(), 0, 1);
+
+  // Calculate the number of days between currentDate and startDate
+  const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
+
+  // Adjust the calculation for weekNumber
+  const weekNumber = Math.ceil((days + 1) / 7);
+
+  return weekNumber;
+};
+
+/**
+ * @returns {Date} first date of week
+ * @description Returns week number of date
+ * @param {Date} date
+ * @example getFirstDateOfWeek(35, 2023) // 2023-08-27T00:00:00.000Z
+ */
+export const getFirstDateOfWeek = (date: Date): Date => {
+  const year = date.getFullYear();
+  const weekNumber = getWeekNumberOfDate(date);
+
+  const januaryFirst: Date = new Date(year, 0, 1); // January is month 0
+  const daysToAdd: number = (weekNumber - 1) * 7; // Subtract 1 from the week number since weeks are 0-indexed
+  const firstDateOfWeek: Date = new Date(januaryFirst);
+  firstDateOfWeek.setDate(januaryFirst.getDate() + daysToAdd);
+
+  // Adjust the date to Sunday (week start)
+  const dayOfWeek: number = firstDateOfWeek.getDay();
+  firstDateOfWeek.setDate(firstDateOfWeek.getDate() - dayOfWeek); // Move back to Sunday
+
+  return firstDateOfWeek;
+};
diff --git a/web/helpers/emoji.helper.tsx b/web/helpers/emoji.helper.tsx
new file mode 100644
index 00000000000..38b830071cc
--- /dev/null
+++ b/web/helpers/emoji.helper.tsx
@@ -0,0 +1,53 @@
+export const getRandomEmoji = () => {
+  const emojis = [
+    "8986",
+    "9200",
+    "128204",
+    "127773",
+    "127891",
+    "127947",
+    "128076",
+    "128077",
+    "128187",
+    "128188",
+    "128512",
+    "128522",
+    "128578",
+  ];
+
+  return emojis[Math.floor(Math.random() * emojis.length)];
+};
+
+export const renderEmoji = (
+  emoji:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded !text-sm">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
+export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
+  reactions: any,
+  key: string
+) => {
+  const groupedReactions = reactions.reduce((acc: any, reaction: any) => {
+    if (!acc[reaction[key]]) {
+      acc[reaction[key]] = [];
+    }
+    acc[reaction[key]].push(reaction);
+    return acc;
+  }, {} as { [key: string]: any[] });
+
+  return groupedReactions;
+};
diff --git a/web/helpers/filter.helper.ts b/web/helpers/filter.helper.ts
new file mode 100644
index 00000000000..001c0703582
--- /dev/null
+++ b/web/helpers/filter.helper.ts
@@ -0,0 +1,32 @@
+// types
+import { IIssueFilterOptions } from "types";
+
+export const calculateTotalFilters = (filters: IIssueFilterOptions): number =>
+  filters && Object.keys(filters).length > 0
+    ? Object.keys(filters)
+        .map((key) =>
+          filters[key as keyof IIssueFilterOptions] !== null
+            ? isNaN((filters[key as keyof IIssueFilterOptions] as string[]).length)
+              ? 0
+              : (filters[key as keyof IIssueFilterOptions] as string[]).length
+            : 0
+        )
+        .reduce((curr, prev) => curr + prev, 0)
+    : 0;
+
+// check if there is any difference between the saved filters and the current filters
+export const areFiltersDifferent = (filtersSet1: IIssueFilterOptions, filtersSet2: IIssueFilterOptions) => {
+  for (const [key, value] of Object.entries(filtersSet1) as [keyof IIssueFilterOptions, string[] | null][]) {
+    if (value) {
+      if (Array.isArray(value) && Array.isArray(filtersSet2[key])) {
+        if (value.length !== filtersSet2[key]?.length) return true;
+
+        for (let i = 0; i < value.length; i++) {
+          if (!filtersSet2[key]?.includes(value[i])) return true;
+        }
+      } else if (value !== filtersSet2[key]) return true;
+    }
+  }
+
+  return false;
+};
diff --git a/apps/app/helpers/graph.helper.ts b/web/helpers/graph.helper.ts
similarity index 100%
rename from apps/app/helpers/graph.helper.ts
rename to web/helpers/graph.helper.ts
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
new file mode 100644
index 00000000000..6f4381dec18
--- /dev/null
+++ b/web/helpers/issue.helper.ts
@@ -0,0 +1,111 @@
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+type THandleIssuesMutation = (
+  formData: Partial<IIssue>,
+  oldGroupTitle: string,
+  selectedGroupBy: TIssueGroupByOptions,
+  issueIndex: number,
+  orderBy: TIssueOrderByOptions,
+  prevData?:
+    | {
+        [key: string]: IIssue[];
+      }
+    | IIssue[]
+) =>
+  | {
+      [key: string]: IIssue[];
+    }
+  | IIssue[]
+  | undefined;
+
+export const handleIssuesMutation: THandleIssuesMutation = (
+  formData,
+  oldGroupTitle,
+  selectedGroupBy,
+  issueIndex,
+  orderBy,
+  prevData
+) => {
+  if (!prevData) return prevData;
+
+  if (Array.isArray(prevData)) {
+    const updatedIssue = {
+      ...prevData[issueIndex],
+      ...formData,
+    };
+
+    prevData.splice(issueIndex, 1, updatedIssue);
+
+    return [...prevData];
+  } else {
+    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
+
+    let newGroup: IIssue[] = [];
+
+    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
+    else if (selectedGroupBy === "state") newGroup = prevData[formData.state ?? ""] ?? [];
+
+    const updatedIssue = {
+      ...oldGroup[issueIndex],
+      ...formData,
+    };
+
+    if (selectedGroupBy !== Object.keys(formData)[0])
+      return {
+        ...prevData,
+        [oldGroupTitle ?? ""]: orderArrayBy(
+          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
+          orderBy
+        ),
+      };
+
+    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state;
+
+    return {
+      ...prevData,
+      [oldGroupTitle ?? ""]: orderArrayBy(
+        oldGroup.filter((i) => i.id !== updatedIssue.id),
+        orderBy
+      ),
+      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
+    };
+  }
+};
+
+export const handleIssueQueryParamsByLayout = (
+  layout: TIssueLayouts | undefined,
+  viewType: "my_issues" | "issues" | "profile_issues" | "archived_issues" | "draft_issues"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = [];
+
+  if (!layout) return null;
+
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+
+  // add filters query params
+  layoutOptions.filters.forEach((option) => {
+    queryParams.push(option);
+  });
+
+  // add display filters query params
+  Object.keys(layoutOptions.display_filters).forEach((option) => {
+    queryParams.push(option as TIssueParams);
+  });
+
+  // add extra options query params
+  if (layoutOptions.extra_options.access) {
+    layoutOptions.extra_options.values.forEach((option) => {
+      queryParams.push(option);
+    });
+  }
+
+  // add start_target_date query param for the gantt_chart layout
+  if (layout === "gantt_chart") queryParams.push("start_target_date");
+
+  return queryParams;
+};
diff --git a/apps/app/helpers/state.helper.ts b/web/helpers/state.helper.ts
similarity index 100%
rename from apps/app/helpers/state.helper.ts
rename to web/helpers/state.helper.ts
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
new file mode 100644
index 00000000000..778ec602a55
--- /dev/null
+++ b/web/helpers/string.helper.ts
@@ -0,0 +1,182 @@
+import {
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
+} from "constants/fetch-keys";
+
+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");
+};
+
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const truncateText = (str: string, length: number) => {
+  if (!str || str === "") return "";
+
+  return str.length > length ? `${str.substring(0, length)}...` : str;
+};
+
+export const createSimilarString = (str: string) => {
+  const shuffled = str
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  return shuffled;
+};
+
+const fallbackCopyTextToClipboard = (text: string) => {
+  var 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
+    var successful = document.execCommand("copy");
+  } catch (err) {}
+
+  document.body.removeChild(textArea);
+};
+
+export const copyTextToClipboard = async (text: string) => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
+
+/**
+ * @description: This function copies the url to clipboard after prepending the origin URL to it
+ * @param {string} path
+ * @example:
+ * const text = copyUrlToClipboard("path");
+ * copied URL: origin_url/path
+ */
+export const copyUrlToClipboard = async (path: string) => {
+  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+  await copyTextToClipboard(`${originUrl}/${path}`);
+};
+
+export const generateRandomColor = (string: string): string => {
+  if (!string) return "rgb(var(--color-primary-100))";
+
+  string = `${string}`;
+
+  const uniqueId = string.length.toString() + string; // Unique identifier based on string length
+  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; // Higher saturation for pastel colors
+  const lightness = 60; // Mid-range lightness for pastel colors
+
+  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+
+  return randomColor;
+};
+
+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: This function will remove all the HTML tags from the string
+ * @param {string} html
+ * @return {string}
+ * @example:
+ * const html = "<p>Some text</p>";
+ * const text = stripHTML(html);
+ * console.log(text); // Some text
+ */
+
+export const stripHTML = (html: string) => {
+  const strippedText = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ""); // Remove script tags
+  return strippedText.replace(/<[^>]*>/g, ""); // Remove all other HTML tags
+};
+
+/**
+ *
+ * @example:
+ * const html = "<p>Some text</p>";
+ * const text = stripAndTruncateHTML(html);
+ * console.log(text); // Some text
+ */
+
+export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(stripHTML(html), length);
+
+/**
+ * @description: This function return number count in string if number is more than 100 then it will return 99+
+ * @param {number} number
+ * @return {string}
+ * @example:
+ * const number = 100;
+ * const text = getNumberCount(number);
+ * console.log(text); // 99+
+ */
+
+export const getNumberCount = (number: number): string => {
+  if (number > 99) {
+    return "99+";
+  }
+  return number.toString();
+};
+
+export const objToQueryParams = (obj: any) => {
+  const params = new URLSearchParams();
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (value !== undefined && value !== null) params.append(key, value as string);
+  }
+
+  return params.toString();
+};
+
+export const getFetchKeysForIssueMutation = (options: {
+  cycleId?: string | string[];
+  moduleId?: string | string[];
+  viewId?: string | string[];
+  projectId: string;
+  viewGanttParams: any;
+  ganttParams: any;
+}) => {
+  const { cycleId, moduleId, viewId, projectId, viewGanttParams, ganttParams } = options;
+
+  const ganttFetchKey = cycleId
+    ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
+    : moduleId
+    ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
+    : viewId
+    ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
+    : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
+
+  return {
+    ...ganttFetchKey,
+  };
+};
diff --git a/apps/app/helpers/theme.helper.ts b/web/helpers/theme.helper.ts
similarity index 100%
rename from apps/app/helpers/theme.helper.ts
rename to web/helpers/theme.helper.ts
diff --git a/apps/app/hooks/use-comment-reaction.tsx b/web/hooks/use-comment-reaction.tsx
similarity index 84%
rename from apps/app/hooks/use-comment-reaction.tsx
rename to web/hooks/use-comment-reaction.tsx
index 92b4b9c1791..af1d0a90f8d 100644
--- a/apps/app/hooks/use-comment-reaction.tsx
+++ b/web/hooks/use-comment-reaction.tsx
@@ -2,16 +2,16 @@ import useSWR from "swr";
 
 // fetch keys
 import { COMMENT_REACTION_LIST } from "constants/fetch-keys";
-
 // services
-import reactionService from "services/reaction.service";
-
+import { IssueReactionService } from "services/issue";
 // helpers
 import { groupReactions } from "helpers/emoji.helper";
-
 // hooks
 import useUser from "./use-user";
 
+// services
+const issueReactionService = new IssueReactionService();
+
 const useCommentReaction = (
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
@@ -27,7 +27,7 @@ const useCommentReaction = (
       : null,
     workspaceSlug && projectId && commendId
       ? () =>
-          reactionService.listIssueCommentReactions(
+          issueReactionService.listIssueCommentReactions(
             workspaceSlug.toString(),
             projectId.toString(),
             commendId.toString()
@@ -48,7 +48,7 @@ const useCommentReaction = (
   const handleReactionCreate = async (reaction: string) => {
     if (!workspaceSlug || !projectId || !commendId) return;
 
-    const data = await reactionService.createIssueCommentReaction(
+    const data = await issueReactionService.createIssueCommentReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
@@ -69,12 +69,11 @@ const useCommentReaction = (
     if (!workspaceSlug || !projectId || !commendId) return;
 
     mutateCommentReactions(
-      (prevData: any) =>
-        prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
+      (prevData: any) => prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
       false
     );
 
-    await reactionService.deleteIssueCommentReaction(
+    await issueReactionService.deleteIssueCommentReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
diff --git a/apps/app/hooks/use-debounce.tsx b/web/hooks/use-debounce.tsx
similarity index 100%
rename from apps/app/hooks/use-debounce.tsx
rename to web/hooks/use-debounce.tsx
diff --git a/web/hooks/use-dynamic-dropdown.tsx b/web/hooks/use-dynamic-dropdown.tsx
new file mode 100644
index 00000000000..7bee1bd0cef
--- /dev/null
+++ b/web/hooks/use-dynamic-dropdown.tsx
@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect } from "react";
+
+// hook
+import useOutsideClickDetector from "./use-outside-click-detector";
+
+/**
+ * Custom hook for dynamic dropdown position calculation.
+ * @param isOpen - Indicates whether the dropdown is open.
+ * @param handleClose - Callback to handle closing the dropdown.
+ * @param buttonRef - Ref object for the button triggering the dropdown.
+ * @param dropdownRef - Ref object for the dropdown element.
+ */
+
+const useDynamicDropdownPosition = (
+  isOpen: boolean,
+  handleClose: () => void,
+  buttonRef: React.RefObject<any>,
+  dropdownRef: React.RefObject<any>
+) => {
+  const handlePosition = useCallback(() => {
+    const button = buttonRef.current;
+    const dropdown = dropdownRef.current;
+
+    if (!dropdown || !button) return;
+
+    const buttonRect = button.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+
+    const { innerHeight, innerWidth, scrollX, scrollY } = window;
+
+    let top: number = buttonRect.bottom + scrollY;
+    if (top + dropdownRect.height > innerHeight) top = innerHeight - dropdownRect.height;
+
+    let left: number = buttonRect.left + scrollX + (buttonRect.width - dropdownRect.width) / 2;
+    if (left + dropdownRect.width > innerWidth) left = innerWidth - dropdownRect.width;
+
+    dropdown.style.top = `${Math.max(top, 5)}px`;
+    dropdown.style.left = `${Math.max(left, 5)}px`;
+  }, [buttonRef, dropdownRef]);
+
+  useEffect(() => {
+    if (isOpen) handlePosition();
+  }, [handlePosition, isOpen]);
+
+  useOutsideClickDetector(dropdownRef, () => {
+    if (isOpen) handleClose();
+  });
+
+  const handleResize = useCallback(() => {
+    if (isOpen) {
+      handlePosition();
+    }
+  }, [handlePosition, isOpen]);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isOpen, handleResize]);
+};
+
+export default useDynamicDropdownPosition;
diff --git a/web/hooks/use-editor-suggestions.tsx b/web/hooks/use-editor-suggestions.tsx
new file mode 100644
index 00000000000..337fc5f0a0e
--- /dev/null
+++ b/web/hooks/use-editor-suggestions.tsx
@@ -0,0 +1,13 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const useEditorSuggestions = () => {
+  const { mentionsStore }: RootStore = useMobxStore();
+
+  return {
+    mentionSuggestions: mentionsStore.mentionSuggestions,
+    mentionHighlights: mentionsStore.mentionHighlights,
+  };
+};
+
+export default useEditorSuggestions;
diff --git a/apps/app/hooks/use-estimate-option.tsx b/web/hooks/use-estimate-option.tsx
similarity index 76%
rename from apps/app/hooks/use-estimate-option.tsx
rename to web/hooks/use-estimate-option.tsx
index 37b42b9e908..6d64c966570 100644
--- a/apps/app/hooks/use-estimate-option.tsx
+++ b/web/hooks/use-estimate-option.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import estimatesService from "services/estimates.service";
+import { ProjectEstimateService } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // helpers
@@ -11,19 +9,22 @@ import { orderArrayBy } from "helpers/array.helper";
 // fetch-keys
 import { ESTIMATE_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectEstimateService = new ProjectEstimateService();
+
 const useEstimateOption = (estimateKey?: number | null) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { projectDetails } = useProjectDetails();
 
-  const { data: estimateDetails, error: estimateDetailsError } = useSWR(
+  const { data: estimateDetails } = useSWR(
     workspaceSlug && projectId && projectDetails && projectDetails?.estimate
       ? ESTIMATE_DETAILS(projectDetails.estimate as string)
       : null,
     workspaceSlug && projectId && projectDetails && projectDetails.estimate
       ? () =>
-          estimatesService.getEstimateDetails(
+          projectEstimateService.getEstimateDetails(
             workspaceSlug.toString(),
             projectId.toString(),
             projectDetails.estimate as string
@@ -32,7 +33,7 @@ const useEstimateOption = (estimateKey?: number | null) => {
   );
 
   const estimateValue: any =
-    (estimateKey && estimateDetails?.points?.find((e) => e.key === estimateKey)?.value) ?? "None";
+    estimateKey || estimateKey === 0 ? estimateDetails?.points?.find((e) => e.key === estimateKey)?.value : "None";
 
   return {
     isEstimateActive: projectDetails?.estimate ? true : false,
diff --git a/apps/app/hooks/use-integration-popup.tsx b/web/hooks/use-integration-popup.tsx
similarity index 100%
rename from apps/app/hooks/use-integration-popup.tsx
rename to web/hooks/use-integration-popup.tsx
diff --git a/apps/app/hooks/use-issue-notification-subscription.tsx b/web/hooks/use-issue-notification-subscription.tsx
similarity index 76%
rename from apps/app/hooks/use-issue-notification-subscription.tsx
rename to web/hooks/use-issue-notification-subscription.tsx
index a118bdf6a49..6b1de86a644 100644
--- a/apps/app/hooks/use-issue-notification-subscription.tsx
+++ b/web/hooks/use-issue-notification-subscription.tsx
@@ -1,11 +1,11 @@
 import { useCallback } from "react";
-
 import useSWR from "swr";
-
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import userNotificationServices from "services/notifications.service";
+import { NotificationService } from "services/notification.service";
+
+const userNotificationServices = new NotificationService();
 
 const useUserIssueNotificationSubscription = (
   workspaceSlug?: string | string[] | null,
@@ -15,9 +15,7 @@ const useUserIssueNotificationSubscription = (
   const { user } = useUserAuth();
 
   const { data, error, mutate } = useSWR(
-    workspaceSlug && projectId && issueId
-      ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}`
-      : null,
+    workspaceSlug && projectId && issueId ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
       ? () =>
           userNotificationServices.getIssueNotificationSubscriptionStatus(
@@ -39,11 +37,7 @@ const useUserIssueNotificationSubscription = (
     );
 
     userNotificationServices
-      .unsubscribeFromIssueNotifications(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString()
-      )
+      .unsubscribeFromIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       .then(() => {
         mutate({
           subscribed: false,
@@ -62,11 +56,7 @@ const useUserIssueNotificationSubscription = (
     );
 
     userNotificationServices
-      .subscribeToIssueNotifications(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString()
-      )
+      .subscribeToIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       .then(() => {
         mutate({
           subscribed: true,
diff --git a/apps/app/hooks/use-issue-reaction.tsx b/web/hooks/use-issue-reaction.tsx
similarity index 81%
rename from apps/app/hooks/use-issue-reaction.tsx
rename to web/hooks/use-issue-reaction.tsx
index fabab98d285..c4ea210ded2 100644
--- a/apps/app/hooks/use-issue-reaction.tsx
+++ b/web/hooks/use-issue-reaction.tsx
@@ -2,16 +2,15 @@ import useSWR from "swr";
 
 // fetch keys
 import { ISSUE_REACTION_LIST } from "constants/fetch-keys";
-
 // helpers
 import { groupReactions } from "helpers/emoji.helper";
-
 // services
-import reactionService from "services/reaction.service";
-
+import { IssueReactionService } from "services/issue";
 // hooks
 import useUser from "./use-user";
 
+const issueReactionService = new IssueReactionService();
+
 const useIssueReaction = (
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
@@ -29,11 +28,7 @@ const useIssueReaction = (
       : null,
     workspaceSlug && projectId && issueId
       ? () =>
-          reactionService.listIssueReactions(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
+          issueReactionService.listIssueReactions(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
@@ -48,7 +43,7 @@ const useIssueReaction = (
   const handleReactionCreate = async (reaction: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
-    const data = await reactionService.createIssueReaction(
+    const data = await issueReactionService.createIssueReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
@@ -69,12 +64,11 @@ const useIssueReaction = (
     if (!workspaceSlug || !projectId || !issueId) return;
 
     mutateReaction(
-      (prevData: any) =>
-        prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
+      (prevData: any) => prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
       false
     );
 
-    await reactionService.deleteIssueReaction(
+    await issueReactionService.deleteIssueReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
diff --git a/web/hooks/use-keypress.tsx b/web/hooks/use-keypress.tsx
new file mode 100644
index 00000000000..d04cd14456d
--- /dev/null
+++ b/web/hooks/use-keypress.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+const useKeypress = (key: string, callback: () => void) => {
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        callback();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  });
+};
+
+export default useKeypress;
diff --git a/apps/app/hooks/use-local-storage.tsx b/web/hooks/use-local-storage.tsx
similarity index 96%
rename from apps/app/hooks/use-local-storage.tsx
rename to web/hooks/use-local-storage.tsx
index 0eb7e20f3e1..e13165bf80e 100644
--- a/apps/app/hooks/use-local-storage.tsx
+++ b/web/hooks/use-local-storage.tsx
@@ -12,9 +12,7 @@ const getValueFromLocalStorage = (key: string, defaultValue: any) => {
 };
 
 const useLocalStorage = <T,>(key: string, initialValue: T) => {
-  const [storedValue, setStoredValue] = useState<T | null>(() =>
-    getValueFromLocalStorage(key, initialValue)
-  );
+  const [storedValue, setStoredValue] = useState<T | null>(() => getValueFromLocalStorage(key, initialValue));
 
   const setValue = useCallback(
     (value: T) => {
diff --git a/apps/app/hooks/use-outside-click-detector.tsx b/web/hooks/use-outside-click-detector.tsx
similarity index 100%
rename from apps/app/hooks/use-outside-click-detector.tsx
rename to web/hooks/use-outside-click-detector.tsx
diff --git a/web/hooks/use-project-details.tsx b/web/hooks/use-project-details.tsx
new file mode 100644
index 00000000000..4a6fdd690e2
--- /dev/null
+++ b/web/hooks/use-project-details.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { ProjectService } from "services/project";
+// fetch-keys
+import { PROJECT_DETAILS } from "constants/fetch-keys";
+
+const projectService = new ProjectService();
+
+const useProjectDetails = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    data: projectDetails,
+    error: projectDetailsError,
+    mutate: mutateProjectDetails,
+  } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
+  );
+
+  return {
+    projectDetails,
+    projectDetailsError,
+    mutateProjectDetails,
+  };
+};
+
+export default useProjectDetails;
diff --git a/apps/app/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx
similarity index 100%
rename from apps/app/hooks/use-reload-confirmation.tsx
rename to web/hooks/use-reload-confirmation.tsx
diff --git a/web/hooks/use-sub-issue.tsx b/web/hooks/use-sub-issue.tsx
new file mode 100644
index 00000000000..a1d2e281cc7
--- /dev/null
+++ b/web/hooks/use-sub-issue.tsx
@@ -0,0 +1,31 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import { IssueService } from "services/issue";
+// types
+import { ISubIssueResponse } from "types";
+// fetch-keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+const issueService = new IssueService();
+
+const useSubIssue = (projectId: string, issueId: string, isExpanded: boolean) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const shouldFetch = workspaceSlug && projectId && issueId && isExpanded;
+
+  const { data: subIssuesResponse, isLoading } = useSWR<ISubIssueResponse>(
+    shouldFetch ? SUB_ISSUES(issueId as string) : null,
+    shouldFetch ? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueId as string) : null
+  );
+
+  return {
+    subIssues: subIssuesResponse?.sub_issues ?? [],
+    isLoading,
+  };
+};
+
+export default useSubIssue;
diff --git a/web/hooks/use-timer.tsx b/web/hooks/use-timer.tsx
new file mode 100644
index 00000000000..1edf4931ab0
--- /dev/null
+++ b/web/hooks/use-timer.tsx
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;
diff --git a/web/hooks/use-toast.tsx b/web/hooks/use-toast.tsx
new file mode 100644
index 00000000000..6de3c104c67
--- /dev/null
+++ b/web/hooks/use-toast.tsx
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { toastContext } from "contexts/toast.context";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+  return toastContextData;
+};
+
+export default useToast;
diff --git a/apps/app/hooks/use-user-auth.tsx b/web/hooks/use-user-auth.tsx
similarity index 84%
rename from apps/app/hooks/use-user-auth.tsx
rename to web/hooks/use-user-auth.tsx
index d3116ce0677..0f555b9dce6 100644
--- a/apps/app/hooks/use-user-auth.tsx
+++ b/web/hooks/use-user-auth.tsx
@@ -6,10 +6,13 @@ import useSWR from "swr";
 // keys
 import { CURRENT_USER } from "constants/fetch-keys";
 // services
-import userService from "services/user.service";
-import workspaceService from "services/workspace.service";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
-import type { IWorkspace, ICurrentUserResponse } from "types";
+import type { IUser } from "types";
+
+const userService = new UserService();
+const workspaceService = new WorkspaceService();
 
 const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "admin") => {
   const router = useRouter();
@@ -22,7 +25,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     isLoading,
     error,
     mutate,
-  } = useSWR<ICurrentUserResponse>(CURRENT_USER, () => userService.currentUser(), {
+  } = useSWR<IUser>(CURRENT_USER, () => userService.currentUser(), {
     refreshInterval: 0,
     shouldRetryOnError: false,
   });
@@ -30,9 +33,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
   useEffect(() => {
     const handleWorkSpaceRedirection = async () => {
       workspaceService.userWorkspaces().then(async (userWorkspaces) => {
-        const lastActiveWorkspace = userWorkspaces.find(
-          (workspace: IWorkspace) => workspace.id === user?.last_workspace_id
-        );
+        const lastActiveWorkspace = userWorkspaces.find((workspace) => workspace.id === user?.last_workspace_id);
         if (lastActiveWorkspace) {
           router.push(`/${lastActiveWorkspace.slug}`);
           return;
@@ -109,8 +110,8 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     isLoading: isRouteAccess,
     user: error ? undefined : user,
     mutateUser: mutate,
-    assignedIssuesLength: user?.assigned_issues ?? 0,
-    workspaceInvitesLength: user?.workspace_invites ?? 0,
+    // assignedIssuesLength: user?.assigned_issues ?? 0,
+    // workspaceInvitesLength: user?.workspace_invites ?? 0,
   };
 };
 
diff --git a/apps/app/hooks/use-user-notifications.tsx b/web/hooks/use-user-notifications.tsx
similarity index 82%
rename from apps/app/hooks/use-user-notifications.tsx
rename to web/hooks/use-user-notifications.tsx
index 5e6ea5d0b9f..a609213958f 100644
--- a/apps/app/hooks/use-user-notifications.tsx
+++ b/web/hooks/use-user-notifications.tsx
@@ -1,25 +1,21 @@
 import { useMemo, useState } from "react";
-
 import { useRouter } from "next/router";
-
 // swr
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
-
 // services
-import userNotificationServices from "services/notifications.service";
-
+import { NotificationService } from "services/notification.service";
 // hooks
 import useToast from "./use-toast";
-
 // fetch-keys
 import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "constants/fetch-keys";
-
 // type
 import type { NotificationType, NotificationCount, IMarkAllAsReadPayload } from "types";
 
 const PER_PAGE = 30;
 
+const userNotificationServices = new NotificationService();
+
 const useUserNotification = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -30,9 +26,7 @@ const useUserNotification = () => {
   const [archived, setArchived] = useState<boolean>(false);
   const [readNotification, setReadNotification] = useState<boolean>(false);
   const [fetchNotifications, setFetchNotifications] = useState<boolean>(false);
-  const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(
-    null
-  );
+  const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(null);
   const [selectedTab, setSelectedTab] = useState<NotificationType>("assigned");
 
   const params = useMemo(
@@ -55,26 +49,20 @@ const useUserNotification = () => {
     mutate: notificationMutate,
   } = useSWRInfinite(
     fetchNotifications && workspaceSlug
-      ? (index, prevData) =>
-          getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
+      ? (index, prevData) => getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
       : () => null,
     async (url: string) => await userNotificationServices.getNotifications(url)
   );
 
-  const isLoadingMore =
-    isLoading || (size > 0 && paginatedData && typeof paginatedData[size - 1] === "undefined");
+  const isLoadingMore = isLoading || (size > 0 && paginatedData && typeof paginatedData[size - 1] === "undefined");
   const isEmpty = paginatedData?.[0]?.results?.length === 0;
   const notifications = paginatedData ? paginatedData.map((d) => d.results).flat() : undefined;
-  const hasMore =
-    isEmpty || (paginatedData && paginatedData[paginatedData.length - 1].next_page_results);
+  const hasMore = isEmpty || (paginatedData && paginatedData[paginatedData.length - 1].next_page_results);
   const isRefreshing = isValidating && paginatedData && paginatedData.length === size;
 
   const { data: notificationCount, mutate: mutateNotificationCount } = useSWR(
     workspaceSlug ? UNREAD_NOTIFICATIONS_COUNT(workspaceSlug.toString()) : null,
-    () =>
-      workspaceSlug
-        ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString())
-        : null
+    () => (workspaceSlug ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString()) : null)
   );
 
   const handleReadMutation = (action: "read" | "unread") => {
@@ -84,11 +72,7 @@ const useUserNotification = () => {
       if (!prev) return prev;
 
       const notificationType: keyof NotificationCount =
-        selectedTab === "assigned"
-          ? "my_issues"
-          : selectedTab === "created"
-          ? "created_issues"
-          : "watching_issues";
+        selectedTab === "assigned" ? "my_issues" : selectedTab === "created" ? "created_issues" : "watching_issues";
 
       return {
         ...prev,
@@ -114,17 +98,14 @@ const useUserNotification = () => {
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
-      notificationIndexInPage =
-        notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
+      notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
 
       if (notificationIndex === -1) return previousNotifications;
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
       const key = Object.keys(value)[0];
-      (previousNotifications[notificationIndex].results[notificationIndexInPage] as any)[key] = (
-        value as any
-      )[key];
+      (previousNotifications[notificationIndex].results[notificationIndexInPage] as any)[key] = (value as any)[key];
 
       return previousNotifications;
     }, false);
@@ -147,8 +128,7 @@ const useUserNotification = () => {
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
-      notificationIndexInPage =
-        notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
+      notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
 
       if (notificationIndex === -1) return previousNotifications;
 
@@ -163,12 +143,13 @@ const useUserNotification = () => {
   const markNotificationReadStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
 
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     handleReadMutation(isRead ? "unread" : "read");
     mutateNotification(notificationId, { read_at: isRead ? null : new Date() });
 
+    if (readNotification) removeNotification(notificationId);
+
     if (isRead) {
       await userNotificationServices
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)
@@ -193,28 +174,23 @@ const useUserNotification = () => {
   const markNotificationAsRead = async (notificationId: string) => {
     if (!workspaceSlug) return;
 
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     if (isRead) return;
 
     mutateNotification(notificationId, { read_at: new Date() });
     handleReadMutation("read");
 
-    await userNotificationServices
-      .markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
-      .catch(() => {
-        throw new Error("Something went wrong");
-      });
+    await userNotificationServices.markUserNotificationAsRead(workspaceSlug.toString(), notificationId).catch(() => {
+      throw new Error("Something went wrong");
+    });
 
     mutateNotificationCount();
   };
 
   const markNotificationArchivedStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isArchived =
-      notifications?.find((notification) => notification.id === notificationId)?.archived_at !==
-      null;
+    const isArchived = notifications?.find((notification) => notification.id === notificationId)?.archived_at !== null;
 
     if (!isArchived) {
       handleReadMutation("read");
@@ -251,9 +227,7 @@ const useUserNotification = () => {
   const markSnoozeNotification = async (notificationId: string, dateTime?: Date) => {
     if (!workspaceSlug) return;
 
-    const isSnoozed =
-      notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !==
-      null;
+    const isSnoozed = notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !== null;
 
     mutateNotification(notificationId, { snoozed_till: isSnoozed ? null : dateTime });
 
@@ -299,6 +273,7 @@ const useUserNotification = () => {
       })
       .finally(() => {
         notificationMutate();
+        mutateNotificationCount();
       });
   };
 
@@ -319,9 +294,7 @@ const useUserNotification = () => {
     selectedTab,
     setSelectedTab,
     totalNotificationCount: notificationCount
-      ? notificationCount.created_issues +
-        notificationCount.watching_issues +
-        notificationCount.my_issues
+      ? notificationCount.created_issues + notificationCount.watching_issues + notificationCount.my_issues
       : null,
     notificationCount,
     mutateNotificationCount,
diff --git a/apps/app/hooks/use-user.tsx b/web/hooks/use-user.tsx
similarity index 77%
rename from apps/app/hooks/use-user.tsx
rename to web/hooks/use-user.tsx
index f9b6e36d8bf..97518fed6c6 100644
--- a/apps/app/hooks/use-user.tsx
+++ b/web/hooks/use-user.tsx
@@ -2,20 +2,19 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // constants
 import { CURRENT_USER } from "constants/fetch-keys";
 // types
-import type { ICurrentUserResponse, IUser } from "types";
+import type { IUser } from "types";
+
+// services
+const userService = new UserService();
 
 export default function useUser({ redirectTo = "", redirectIfFound = false, options = {} } = {}) {
   const router = useRouter();
   // API to fetch user information
-  const { data, isLoading, error, mutate } = useSWR<ICurrentUserResponse>(
-    CURRENT_USER,
-    () => userService.currentUser(),
-    options
-  );
+  const { data, isLoading, error, mutate } = useSWR<IUser>(CURRENT_USER, () => userService.currentUser(), options);
 
   const user = error ? undefined : data;
 
@@ -48,7 +47,7 @@ export default function useUser({ redirectTo = "", redirectIfFound = false, opti
     isUserLoading: isLoading,
     mutateUser: mutate,
     userError: error,
-    assignedIssuesLength: user?.assigned_issues ?? 0,
-    workspaceInvitesLength: user?.workspace_invites ?? 0,
+    // assignedIssuesLength: user?.assigned_issues ?? 0,
+    // workspaceInvitesLength: user?.workspace_invites ?? 0,
   };
 }
diff --git a/web/layouts/app-layout/index.ts b/web/layouts/app-layout/index.ts
new file mode 100644
index 00000000000..c4bfd4db38a
--- /dev/null
+++ b/web/layouts/app-layout/index.ts
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/app-layout/layout.tsx b/web/layouts/app-layout/layout.tsx
new file mode 100644
index 00000000000..b1601328077
--- /dev/null
+++ b/web/layouts/app-layout/layout.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactNode } from "react";
+// layouts
+import { UserAuthWrapper, WorkspaceAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout";
+// components
+import { CommandPalette } from "components/command-palette";
+import { AppSidebar } from "./sidebar";
+
+export interface IAppLayout {
+  children: ReactNode;
+  header: ReactNode;
+  withProjectWrapper?: boolean;
+}
+
+export const AppLayout: FC<IAppLayout> = (props) => {
+  const { children, header, withProjectWrapper = false } = props;
+
+  return (
+    <>
+      <CommandPalette />
+      <UserAuthWrapper>
+        <WorkspaceAuthWrapper>
+          <div className="relative flex h-screen w-full overflow-hidden">
+            <AppSidebar />
+            <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
+              {header}
+              <div className="h-full w-full overflow-hidden">
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
+                  {withProjectWrapper ? <ProjectAuthWrapper>{children}</ProjectAuthWrapper> : <>{children}</>}
+                </div>
+              </div>
+            </main>
+          </div>
+        </WorkspaceAuthWrapper>
+      </UserAuthWrapper>
+    </>
+  );
+};
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
new file mode 100644
index 00000000000..b5e804fdb4b
--- /dev/null
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import {
+  WorkspaceHelpSection,
+  WorkspaceSidebarDropdown,
+  WorkspaceSidebarMenu,
+  WorkspaceSidebarQuickAction,
+} from "components/workspace";
+import { ProjectSidebarList } from "components/project";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IAppSidebar {}
+
+export const AppSidebar: FC<IAppSidebar> = observer(() => {
+  // store
+  const { theme: themStore } = useMobxStore();
+
+  return (
+    <div
+      id="app-sidebar"
+      className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
+        themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
+      } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+    >
+      <div className="flex h-full w-full flex-1 flex-col">
+        <WorkspaceSidebarDropdown />
+        <WorkspaceSidebarQuickAction />
+        <WorkspaceSidebarMenu />
+        <ProjectSidebarList />
+        <WorkspaceHelpSection />
+      </div>
+    </div>
+  );
+});
diff --git a/web/layouts/auth-layout/index.ts b/web/layouts/auth-layout/index.ts
new file mode 100644
index 00000000000..fcd53c5eb90
--- /dev/null
+++ b/web/layouts/auth-layout/index.ts
@@ -0,0 +1,3 @@
+export * from "./user-wrapper";
+export * from "./workspace-wrapper";
+export * from "./project-wrapper";
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
new file mode 100644
index 00000000000..e3eca37ff12
--- /dev/null
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -0,0 +1,146 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { Spinner } from "@plane/ui";
+import { JoinProject } from "components/auth-screens";
+import { EmptyState } from "components/common";
+// images
+import emptyProject from "public/empty-state/project.svg";
+
+interface IProjectAuthWrapper {
+  children: ReactNode;
+}
+
+export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const {
+    user: userStore,
+    project: projectStore,
+    cycle: cycleStore,
+    module: moduleStore,
+    projectViews: projectViewsStore,
+    inbox: inboxStore,
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // fetching project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching user project member information
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => userStore.fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching project labels
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching project estimates
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectEstimates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // fetching project cycles
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => cycleStore.fetchCycles(workspaceSlug.toString(), projectId.toString(), "all")
+      : null
+  );
+  // fetching project modules
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => moduleStore.fetchModules(workspaceSlug.toString(), projectId.toString()) : null
+  );
+  // fetching project views
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => projectViewsStore.fetchAllViews(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+  // TODO: fetching project pages
+  // fetching project inboxes if inbox is enabled
+  useSWR(
+    workspaceSlug && projectId && inboxStore.isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && inboxStore.isInboxEnabled
+      ? () => inboxStore.fetchInboxesList(workspaceSlug.toString(), projectId.toString())
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+  const projectExists = projectId ? projectsList?.find((project) => project.id === projectId.toString()) : null;
+
+  // check if the project member apis is loading
+  if (!userStore.projectMemberInfo && projectId && userStore.hasPermissionToProject[projectId.toString()] === null)
+    return (
+      <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+
+  // check if the user don't have permission to access the project
+  if (projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
+    return <JoinProject />;
+
+  // check if the project info is not found.
+  if (!projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
+    return (
+      <div className="container grid h-screen place-items-center bg-custom-background-100">
+        <EmptyState
+          title="No such project exists"
+          description="Try creating a new project"
+          image={emptyProject}
+          primaryButton={{
+            text: "Create Project",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      </div>
+    );
+
+  return <>{children}</>;
+});
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
new file mode 100644
index 00000000000..596612153f0
--- /dev/null
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -0,0 +1,49 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// ui
+import { Spinner } from "@plane/ui";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IUserAuthWrapper {
+  children: ReactNode;
+}
+
+export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
+  const { children } = props;
+  // store
+  const { user: userStore, workspace: workspaceStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  // fetching user information
+  const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => userStore.fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  // fetching user settings
+  useSWR("CURRENT_USER_SETTINGS", () => userStore.fetchCurrentUserSettings(), {
+    shouldRetryOnError: false,
+  });
+  // fetching all workspaces
+  useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces(), {
+    shouldRetryOnError: false,
+  });
+
+  if (!currentUser && !error) {
+    return (
+      <div className="h-screen grid place-items-center p-4 bg-custom-background-100">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    const redirectTo = router.asPath;
+    router.push(`/?next=${redirectTo}`);
+    return null;
+  }
+
+  return <>{children}</>;
+};
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
new file mode 100644
index 00000000000..376fe2e2813
--- /dev/null
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -0,0 +1,90 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// icons
+import { Button, Spinner } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IWorkspaceAuthWrapper {
+  children: ReactNode;
+}
+
+export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const { user: userStore, project: projectStore, workspace: workspaceStore } = useMobxStore();
+  const { currentWorkspaceMemberInfo, hasPermissionToCurrentWorkspace } = userStore;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // fetching user workspace information
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
+    workspaceSlug ? () => userStore.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null
+  );
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug ? () => projectStore.fetchProjects(workspaceSlug.toString()) : null
+  );
+  // fetch workspace members
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug ? () => workspaceStore.fetchWorkspaceMembers(workspaceSlug.toString()) : null
+  );
+  // fetch workspace labels
+  useSWR(
+    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
+    workspaceSlug ? () => workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  // while data is being loaded
+  if (!currentWorkspaceMemberInfo && hasPermissionToCurrentWorkspace === undefined) {
+    return (
+      <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+  // while user does not have access to view that workspace
+  if (hasPermissionToCurrentWorkspace !== undefined && hasPermissionToCurrentWorkspace === false) {
+    return (
+      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+        <div className="grid h-full place-items-center p-4">
+          <div className="space-y-8 text-center">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Not Authorized!</h3>
+              <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+                You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
+                check your pending invitations.
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <Link href="/invitations">
+                <a>
+                  <Button variant="neutral-primary" size="sm">
+                    Check pending invites
+                  </Button>
+                </a>
+              </Link>
+              <Link href="/create-workspace">
+                <a>
+                  <Button variant="primary" size="sm">
+                    Create new workspace
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+});
diff --git a/web/layouts/default-layout/index.tsx b/web/layouts/default-layout/index.tsx
new file mode 100644
index 00000000000..ea647312b3a
--- /dev/null
+++ b/web/layouts/default-layout/index.tsx
@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  gradient?: boolean;
+};
+
+const DefaultLayout: FC<Props> = ({ children, gradient = false }) => (
+  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>{children}</div>
+);
+
+export default DefaultLayout;
diff --git a/web/layouts/profile-layout/index.ts b/web/layouts/profile-layout/index.ts
new file mode 100644
index 00000000000..eec9d1e67dd
--- /dev/null
+++ b/web/layouts/profile-layout/index.ts
@@ -0,0 +1 @@
+export * from "./layout";
diff --git a/web/layouts/profile-layout/layout.tsx b/web/layouts/profile-layout/layout.tsx
new file mode 100644
index 00000000000..4127530da78
--- /dev/null
+++ b/web/layouts/profile-layout/layout.tsx
@@ -0,0 +1,47 @@
+import useSWR from "swr";
+import { useRouter } from "next/router";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { ProfileNavbar, ProfileSidebar } from "components/profile";
+// constants
+import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  showProfileIssuesFilter?: boolean;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const ProfileAuthWrapper: React.FC<Props> = (props) => {
+  const { children, className, showProfileIssuesFilter } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: memberDetails } = useSWR(
+    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
+  );
+
+  const isAuthorized = memberDetails?.role === 20 || memberDetails?.role === 15 || memberDetails?.role === 10;
+
+  return (
+    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
+      <ProfileSidebar />
+      <div className="md:h-full w-full flex flex-col md:overflow-hidden">
+        <ProfileNavbar isAuthorized={isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
+        {isAuthorized ? (
+          <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
+        ) : (
+          <div className="h-full w-full grid place-items-center text-custom-text-200">
+            You do not have the permission to access this page.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/index.ts b/web/layouts/settings-layout/index.ts
new file mode 100644
index 00000000000..acaed01baec
--- /dev/null
+++ b/web/layouts/settings-layout/index.ts
@@ -0,0 +1,2 @@
+export * from "./project";
+export * from "./workspace";
diff --git a/web/layouts/settings-layout/project/index.tsx b/web/layouts/settings-layout/project/index.tsx
new file mode 100644
index 00000000000..c4bfd4db38a
--- /dev/null
+++ b/web/layouts/settings-layout/project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/layouts/settings-layout/project/layout.tsx
new file mode 100644
index 00000000000..7a0bee0ebdf
--- /dev/null
+++ b/web/layouts/settings-layout/project/layout.tsx
@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+// components
+import { ProjectSettingsSidebar } from "./sidebar";
+
+export interface IProjectSettingLayout {
+  children: ReactNode;
+}
+
+export const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
+  const { children } = props;
+
+  return (
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <ProjectSettingsSidebar />
+      </div>
+      {children}
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/project/sidebar.tsx b/web/layouts/settings-layout/project/sidebar.tsx
new file mode 100644
index 00000000000..2ce97dd8848
--- /dev/null
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+export const ProjectSettingsSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const projectLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+    },
+    {
+      label: "Features",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+    },
+    {
+      label: "States",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+    },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
+    {
+      label: "Automations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6 w-80 px-5">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
+        <div className="flex flex-col gap-1 w-full">
+          {projectLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/workspace/index.tsx b/web/layouts/settings-layout/workspace/index.tsx
new file mode 100644
index 00000000000..c4bfd4db38a
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/index.tsx
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/settings-layout/workspace/layout.tsx b/web/layouts/settings-layout/workspace/layout.tsx
new file mode 100644
index 00000000000..a584c26c194
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/layout.tsx
@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+// components
+import { WorkspaceSettingsSidebar } from "./sidebar";
+
+export interface IWorkspaceSettingLayout {
+  children: ReactNode;
+}
+
+export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
+  const { children } = props;
+
+  return (
+    <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+      <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+        <WorkspaceSettingsSidebar />
+      </div>
+      {children}
+    </div>
+  );
+};
diff --git a/web/layouts/settings-layout/workspace/sidebar.tsx b/web/layouts/settings-layout/workspace/sidebar.tsx
new file mode 100644
index 00000000000..caf4f835894
--- /dev/null
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+export const WorkspaceSettingsSidebar = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const workspaceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/settings/members`,
+    },
+    {
+      label: "Billing & Plans",
+      href: `/${workspaceSlug}/settings/billing`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/settings/integrations`,
+    },
+    {
+      label: "Imports",
+      href: `/${workspaceSlug}/settings/imports`,
+    },
+    {
+      label: "Exports",
+      href: `/${workspaceSlug}/settings/exports`,
+    },
+  ];
+
+  const profileLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "Profile",
+      href: `/${workspaceSlug}/me/profile`,
+    },
+    {
+      label: "Activity",
+      href: `/${workspaceSlug}/me/profile/activity`,
+    },
+    {
+      label: "Preferences",
+      href: `/${workspaceSlug}/me/profile/preferences`,
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 w-80 px-5">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
+        <div className="flex flex-col gap-1 w-full">
+          {workspaceLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
+        <div className="flex flex-col gap-1 w-full">
+          {profileLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <a>
+                <div
+                  className={`px-4 py-2 text-sm font-medium rounded-md ${
+                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  }`}
+                >
+                  {link.label}
+                </div>
+              </a>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/lib/auth.ts b/web/lib/auth.ts
similarity index 81%
rename from apps/app/lib/auth.ts
rename to web/lib/auth.ts
index 47a52663d1d..56cfab9ae78 100644
--- a/apps/app/lib/auth.ts
+++ b/web/lib/auth.ts
@@ -2,6 +2,8 @@
 import { convertCookieStringToObject } from "./cookie";
 // types
 import type { IProjectMember, IUser, IWorkspace, IWorkspaceMember } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
 
 export const requiredAuth = async (cookie?: string) => {
   const cookies = convertCookieStringToObject(cookie);
@@ -9,12 +11,10 @@ export const requiredAuth = async (cookie?: string) => {
 
   if (!token) return null;
 
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
-
   let user: IUser | null = null;
 
   try {
-    const data = await fetch(`${baseUrl}/api/users/me/`, {
+    const data = await fetch(`${API_BASE_URL}/api/users/me/`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -41,13 +41,11 @@ export const requiredAdmin = async (workspaceSlug: string, projectId: string, co
   const cookies = convertCookieStringToObject(cookie);
   const token = cookies?.accessToken;
 
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
-
   let memberDetail: IProjectMember | null = null;
 
   try {
     const data = await fetch(
-      `${baseUrl}/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`,
+      `${API_BASE_URL}/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`,
       {
         method: "GET",
         headers: {
@@ -75,17 +73,18 @@ export const requiredWorkspaceAdmin = async (workspaceSlug: string, cookie?: str
   const cookies = convertCookieStringToObject(cookie);
   const token = cookies?.accessToken;
 
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
-
   let memberDetail: IWorkspaceMember | null = null;
 
   try {
-    const data = await fetch(`${baseUrl}/api/workspaces/${workspaceSlug}/workspace-members/me/`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
+    const data = await fetch(
+      `${API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-members/me/`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    )
       .then((res) => res.json())
       .then((data) => data);
 
@@ -119,13 +118,11 @@ export const homePageRedirect = async (cookie?: string) => {
 
   let workspaces: IWorkspace[] = [];
 
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.plane.so";
-
   const cookies = convertCookieStringToObject(cookie);
   const token = cookies?.accessToken;
 
   try {
-    const data = await fetch(`${baseUrl}/api/users/me/workspaces/`, {
+    const data = await fetch(`${API_BASE_URL}/api/users/me/workspaces/`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -166,7 +163,7 @@ export const homePageRedirect = async (cookie?: string) => {
     };
   }
 
-  const invitations = await fetch(`${baseUrl}/api/users/me/invitations/workspaces/`, {
+  const invitations = await fetch(`${API_BASE_URL}/api/users/me/invitations/workspaces/`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
diff --git a/apps/app/lib/cookie.ts b/web/lib/cookie.ts
similarity index 100%
rename from apps/app/lib/cookie.ts
rename to web/lib/cookie.ts
diff --git a/web/lib/local-storage.ts b/web/lib/local-storage.ts
new file mode 100644
index 00000000000..41d66fe0cd8
--- /dev/null
+++ b/web/lib/local-storage.ts
@@ -0,0 +1,21 @@
+export const getLocalStorage = (key: string) => {
+  if (typeof window === undefined || typeof window === "undefined") return null;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? item : null;
+  } catch (error) {
+    window.localStorage.removeItem(key);
+    return null;
+  }
+};
+
+export const setLocalStorage = (key: string, value: any) => {
+  if (key && value) {
+    const _value = value ? (["string", "boolean"].includes(typeof value) ? value : JSON.stringify(value)) : null;
+    if (_value) window.localStorage.setItem(key, _value);
+  }
+};
+
+export const removeLocalStorage = (key: string) => {
+  if (key) window.localStorage.removeItem(key);
+};
diff --git a/web/lib/mobx/store-init.tsx b/web/lib/mobx/store-init.tsx
new file mode 100644
index 00000000000..780b12d9992
--- /dev/null
+++ b/web/lib/mobx/store-init.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+// next themes
+import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { useRouter } from "next/router";
+import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
+import { observer } from "mobx-react-lite";
+
+const MobxStoreInit = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
+  // store
+  const {
+    theme: themeStore,
+    user: userStore,
+    workspace: workspaceStore,
+    project: projectStore,
+    cycle: cycleStore,
+    module: moduleStore,
+    globalViews: globalViewsStore,
+    projectViews: projectViewsStore,
+    inbox: inboxStore,
+  } = useMobxStore();
+  // state
+  const [dom, setDom] = useState<any>();
+  // theme
+  const { setTheme } = useTheme();
+
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (localValue && themeStore?.sidebarCollapsed === undefined) {
+      themeStore.toggleSidebar(localBoolValue);
+    }
+  }, [themeStore, userStore, setTheme]);
+
+  /**
+   * Setting up the theme of the user by fetching it from local storage
+   */
+  useEffect(() => {
+    if (!userStore.currentUser) return;
+    if (window) {
+      setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
+    }
+    setTheme(userStore.currentUser?.theme?.theme || "system");
+    if (userStore.currentUser?.theme?.theme === "custom" && dom) {
+      applyTheme(userStore.currentUser?.theme?.palette, false);
+    } else unsetCustomCssVariables();
+  }, [userStore.currentUser, setTheme, dom]);
+
+  /**
+   * Setting router info to the respective stores.
+   */
+  useEffect(() => {
+    if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+    if (projectId) projectStore.setProjectId(projectId.toString());
+    if (cycleId) cycleStore.setCycleId(cycleId.toString());
+    if (moduleId) moduleStore.setModuleId(moduleId.toString());
+    if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
+    if (viewId) projectViewsStore.setViewId(viewId.toString());
+    if (inboxId) inboxStore.setInboxId(inboxId.toString());
+  }, [
+    workspaceSlug,
+    projectId,
+    cycleId,
+    moduleId,
+    globalViewId,
+    viewId,
+    inboxId,
+    workspaceStore,
+    projectStore,
+    cycleStore,
+    moduleStore,
+    globalViewsStore,
+    projectViewsStore,
+    inboxStore,
+  ]);
+
+  return <></>;
+});
+
+export default MobxStoreInit;
diff --git a/apps/space/lib/mobx/store-provider.tsx b/web/lib/mobx/store-provider.tsx
similarity index 100%
rename from apps/space/lib/mobx/store-provider.tsx
rename to web/lib/mobx/store-provider.tsx
diff --git a/apps/app/lib/redirect.ts b/web/lib/redirect.ts
similarity index 100%
rename from apps/app/lib/redirect.ts
rename to web/lib/redirect.ts
diff --git a/apps/app/manifest.json b/web/manifest.json
similarity index 100%
rename from apps/app/manifest.json
rename to web/manifest.json
diff --git a/apps/app/next-env.d.ts b/web/next-env.d.ts
similarity index 100%
rename from apps/app/next-env.d.ts
rename to web/next-env.d.ts
diff --git a/web/next.config.js b/web/next.config.js
new file mode 100644
index 00000000000..f48ccd9a6d5
--- /dev/null
+++ b/web/next.config.js
@@ -0,0 +1,29 @@
+require("dotenv").config({ path: ".env" });
+
+const { withSentryConfig } = require("@sentry/nextjs");
+const path = require("path");
+
+const nextConfig = {
+  reactStrictMode: false,
+  swcMinify: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+    unoptimized: true,
+  },
+  output: "standalone",
+  experimental: {
+    // this includes files from the monorepo base two directories up
+    outputFileTracingRoot: path.join(__dirname, "../"),
+  },
+};
+
+if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
+  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
+} else {
+  module.exports = nextConfig;
+}
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 00000000000..b2791978fbd
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "web",
+  "version": "0.13.2",
+  "private": true,
+  "scripts": {
+    "dev": "turbo run develop",
+    "develop": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "export": "next export"
+  },
+  "dependencies": {
+    "@blueprintjs/popover2": "^1.13.3",
+    "@headlessui/react": "^1.7.3",
+    "@hello-pangea/dnd": "^16.3.0",
+    "@jitsu/nextjs": "^3.1.5",
+    "@nivo/bar": "0.80.0",
+    "@nivo/calendar": "0.80.0",
+    "@nivo/core": "0.80.0",
+    "@nivo/legends": "0.80.0",
+    "@nivo/line": "0.80.0",
+    "@nivo/pie": "0.80.0",
+    "@nivo/scatterplot": "0.80.0",
+    "@plane/lite-text-editor": "*",
+    "@plane/rich-text-editor": "*",
+    "@plane/ui": "*",
+    "@popperjs/core": "^2.11.8",
+    "@sentry/nextjs": "^7.36.0",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/react-datepicker": "^4.8.0",
+    "axios": "^1.1.3",
+    "cmdk": "^0.2.0",
+    "dotenv": "^16.0.3",
+    "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.274.0",
+    "mobx": "^6.10.0",
+    "mobx-react-lite": "^4.0.3",
+    "next": "12.3.2",
+    "next-pwa": "^5.6.0",
+    "next-themes": "^0.2.1",
+    "nprogress": "^0.2.0",
+    "react": "18.2.0",
+    "react-color": "^2.19.3",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.38.0",
+    "react-markdown": "^8.0.7",
+    "react-popper": "^2.3.0",
+    "sharp": "^0.32.1",
+    "swr": "^2.1.3",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
+    "@types/node": "18.0.6",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^18.2.35",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.2.14",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.31.0",
+    "eslint-config-custom": "*",
+    "eslint-config-next": "12.2.2",
+    "prettier": "^2.8.7",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "typescript": "4.7.4"
+  }
+}
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
new file mode 100644
index 00000000000..a1f462f2cba
--- /dev/null
+++ b/web/pages/404.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Button } from "@plane/ui";
+// images
+import Image404 from "public/404.svg";
+// types
+import type { NextPage } from "next";
+
+const PageNotFound: NextPage = () => (
+  <DefaultLayout>
+    <div className="grid h-full place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
+          <Image src={Image404} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
+          <p className="text-sm text-custom-text-200">
+            Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+            temporarily unavailable.
+          </p>
+        </div>
+        <Link href="/">
+          <a className="flex justify-center">
+            <Button variant="neutral-primary" size="md">
+              Go to Home
+            </Button>
+          </a>
+        </Link>
+      </div>
+    </div>
+  </DefaultLayout>
+);
+
+export default PageNotFound;
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
new file mode 100644
index 00000000000..0faa835ada7
--- /dev/null
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -0,0 +1,117 @@
+import React, { Fragment, useEffect, ReactElement } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Tab } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { TrackEventService } from "services/track_event.service";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+import { WorkspaceAnalyticsHeader } from "components/headers";
+import { EmptyState } from "components/common";
+// icons
+import { Plus } from "lucide-react";
+// assets
+import emptyAnalytics from "public/empty-state/analytics.svg";
+// constants
+import { ANALYTICS_TABS } from "constants/analytics";
+// type
+import { NextPageWithLayout } from "types/app";
+
+const trackEventService = new TrackEventService();
+
+const AnalyticsPage: NextPageWithLayout = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore, user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug?.toString()] : null;
+
+  const trackAnalyticsEvent = (tab: string) => {
+    if (!user) return;
+
+    const eventPayload = {
+      workspaceSlug: workspaceSlug?.toString(),
+    };
+
+    const eventType =
+      tab === "scope_and_demand" ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" : "WORKSPACE_CUSTOM_ANALYTICS";
+
+    trackEventService.trackAnalyticsEvent(eventPayload, eventType, user);
+  };
+
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    if (user && workspaceSlug)
+      trackEventService.trackAnalyticsEvent(
+        { workspaceSlug: workspaceSlug?.toString() },
+        "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
+        user
+      );
+  }, [user, workspaceSlug]);
+
+  return (
+    <>
+      {projects && projects.length > 0 ? (
+        <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+          <Tab.Group as={Fragment}>
+            <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
+              {ANALYTICS_TABS.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  className={({ selected }) =>
+                    `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                      selected ? "bg-custom-background-80" : ""
+                    }`
+                  }
+                  onClick={() => trackAnalyticsEvent(tab.key)}
+                >
+                  {tab.title}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels as={Fragment}>
+              <Tab.Panel as={Fragment}>
+                <ScopeAndDemand fullScreen />
+              </Tab.Panel>
+              <Tab.Panel as={Fragment}>
+                <CustomAnalytics fullScreen />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </div>
+      ) : (
+        <>
+          <EmptyState
+            title="You can see your all projects' analytics here"
+            description="Let's create your first project and analyze the stats with various graphs."
+            image={emptyAnalytics}
+            primaryButton={{
+              icon: <Plus className="h-4 w-4" />,
+              text: "New Project",
+              onClick: () => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "p",
+                });
+                document.dispatchEvent(e);
+              },
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+});
+
+AnalyticsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<WorkspaceAnalyticsHeader />}>{page}</AppLayout>;
+};
+
+export default AnalyticsPage;
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
new file mode 100644
index 00000000000..daeb8aae5a1
--- /dev/null
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { WorkspaceDashboardView } from "components/page-views";
+import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const WorkspacePage: NextPageWithLayout = () => <WorkspaceDashboardView />;
+
+WorkspacePage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<WorkspaceDashboardHeader />}>{page}</AppLayout>;
+};
+
+export default WorkspacePage;
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
new file mode 100644
index 00000000000..3b5e60f59fc
--- /dev/null
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -0,0 +1,202 @@
+import { ReactElement } from "react";
+import useSWR from "swr";
+import { useRouter } from "next/router";
+import Link from "next/link";
+// services
+import { UserService } from "services/user.service";
+// layouts
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "layouts/app-layout";
+// components
+import { ActivityIcon, ActivityMessage } from "components/core";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { WorkspaceSettingHeader } from "components/headers";
+// icons
+import { History, MessageSquare } from "lucide-react";
+// ui
+import { ExternalLinkIcon, Loader } from "@plane/ui";
+// fetch-keys
+import { USER_ACTIVITY } from "constants/fetch-keys";
+// helper
+import { timeAgo } from "helpers/date-time.helper";
+// type
+import { NextPageWithLayout } from "types/app";
+
+const userService = new UserService();
+
+const ProfileActivityPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: userActivity } = useSWR(
+    workspaceSlug ? USER_ACTIVITY : null,
+    workspaceSlug ? () => userService.getUserWorkspaceActivity(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <>
+      {userActivity ? (
+        <section className="pr-9 py-8 w-full overflow-y-auto">
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Activity</h3>
+          </div>
+          <div className={`flex flex-col gap-2 py-4 w-full`}>
+            <ul role="list" className="-mb-4">
+              {userActivity.results.map((activityItem: any) => {
+                if (activityItem.field === "comment") {
+                  return (
+                    <div key={activityItem.id} className="mt-2">
+                      <div className="relative flex items-start space-x-3">
+                        <div className="relative px-1">
+                          {activityItem.field ? (
+                            activityItem.new_value === "restore" && (
+                              <History className="h-3.5 w-3.5 text-custom-text-200" />
+                            )
+                          ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                            <img
+                              src={activityItem.actor_detail.avatar}
+                              alt={activityItem.actor_detail.display_name}
+                              height={30}
+                              width={30}
+                              className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                            />
+                          ) : (
+                            <div
+                              className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+                            >
+                              {activityItem.actor_detail.display_name?.charAt(0)}
+                            </div>
+                          )}
+
+                          <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
+                            <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div>
+                            <div className="text-xs">
+                              {activityItem.actor_detail.is_bot
+                                ? activityItem.actor_detail.first_name + " Bot"
+                                : activityItem.actor_detail.display_name}
+                            </div>
+                            <p className="mt-0.5 text-xs text-custom-text-200">
+                              Commented {timeAgo(activityItem.created_at)}
+                            </p>
+                          </div>
+                          <div className="issue-comments-section p-0">
+                            <RichReadOnlyEditor
+                              value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
+                              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+                              noBorder
+                              borderOnFocus={false}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                }
+
+                const message =
+                  activityItem.verb === "created" &&
+                  activityItem.field !== "cycles" &&
+                  activityItem.field !== "modules" &&
+                  activityItem.field !== "attachment" &&
+                  activityItem.field !== "link" &&
+                  activityItem.field !== "estimate" ? (
+                    <span className="text-custom-text-200">
+                      created{" "}
+                      <Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
+                        <a className="inline-flex items-center hover:underline">
+                          this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
+                        </a>
+                      </Link>
+                    </span>
+                  ) : activityItem.field ? (
+                    <ActivityMessage activity={activityItem} showIssue />
+                  ) : (
+                    "created the issue."
+                  );
+
+                if ("field" in activityItem && activityItem.field !== "updated_by") {
+                  return (
+                    <li key={activityItem.id}>
+                      <div className="relative pb-1">
+                        <div className="relative flex items-center space-x-2">
+                          <>
+                            <div>
+                              <div className="relative px-1.5">
+                                <div className="mt-1.5">
+                                  <div className="flex h-6 w-6 items-center justify-center">
+                                    {activityItem.field ? (
+                                      activityItem.new_value === "restore" ? (
+                                        <History className="h-5 w-5 text-custom-text-200" />
+                                      ) : (
+                                        <ActivityIcon activity={activityItem} />
+                                      )
+                                    ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                      <img
+                                        src={activityItem.actor_detail.avatar}
+                                        alt={activityItem.actor_detail.display_name}
+                                        height={24}
+                                        width={24}
+                                        className="rounded-full h-full w-full object-cover"
+                                      />
+                                    ) : (
+                                      <div
+                                        className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                      >
+                                        {activityItem.actor_detail.display_name?.charAt(0)}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
+                              <div className="text-sm text-custom-text-200 break-words">
+                                {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                                  <span className="text-gray font-medium">Plane</span>
+                                ) : activityItem.actor_detail.is_bot ? (
+                                  <span className="text-gray font-medium">
+                                    {activityItem.actor_detail.first_name} Bot
+                                  </span>
+                                ) : (
+                                  <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                                    <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
+                                  </Link>
+                                )}{" "}
+                                {message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                              </div>
+                            </div>
+                          </>
+                        </div>
+                      </div>
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          </div>
+        </section>
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+};
+
+ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile Activity" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfileActivityPage;
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
new file mode 100644
index 00000000000..33813fa525b
--- /dev/null
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -0,0 +1,404 @@
+import React, { useEffect, useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+// services
+import { FileService } from "services/file.service";
+import { UserService } from "services/user.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { ImagePickerPopover, ImageUploadModal } from "components/core";
+import { WorkspaceSettingHeader } from "components/headers";
+// ui
+import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
+// icons
+import { User2, UserCircle2 } from "lucide-react";
+// types
+import type { IUser } from "types";
+import type { NextPageWithLayout } from "types/app";
+// constants
+import { USER_ROLES } from "constants/workspace";
+import { TIME_ZONES } from "constants/timezones";
+
+const defaultValues: Partial<IUser> = {
+  avatar: "",
+  cover_image: "",
+  first_name: "",
+  last_name: "",
+  email: "",
+  role: "Product / Project Manager",
+  user_timezone: "Asia/Kolkata",
+};
+
+const fileService = new FileService();
+const userService = new UserService();
+
+const ProfilePage: NextPageWithLayout = () => {
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // form info
+  const {
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<IUser>({ defaultValues });
+
+  const { setToastAlert } = useToast();
+  const { user: myProfile, mutateUser } = useUserAuth();
+
+  useEffect(() => {
+    reset({ ...defaultValues, ...myProfile });
+  }, [myProfile, reset]);
+
+  const onSubmit = async (formData: IUser) => {
+    if (formData.first_name === "" || formData.last_name === "") {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "First and last names are required.",
+      });
+
+      return;
+    }
+
+    const payload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+      cover_image: formData.cover_image,
+      role: formData.role,
+      display_name: formData.display_name,
+      user_timezone: formData.user_timezone,
+    };
+
+    await userService
+      .updateUser(payload)
+      .then((res) => {
+        mutateUser((prevData: any) => {
+          if (!prevData) return prevData;
+
+          return { ...prevData, ...res };
+        }, false);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Profile updated successfully.",
+        });
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "There was some error in updating your profile. Please try again.",
+        })
+      );
+  };
+
+  const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
+    if (!url) return;
+
+    setIsRemoving(true);
+
+    fileService.deleteUserFile(url).then(() => {
+      if (updateUser)
+        userService
+          .updateUser({ avatar: "" })
+          .then(() => {
+            setToastAlert({
+              type: "success",
+              title: "Success!",
+              message: "Profile picture removed successfully.",
+            });
+            mutateUser((prevData: any) => {
+              if (!prevData) return prevData;
+              return { ...prevData, avatar: "" };
+            }, false);
+            setIsRemoving(false);
+          })
+          .catch(() => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "There was some error in deleting your profile picture. Please try again.",
+            });
+          })
+          .finally(() => setIsRemoving(false));
+    });
+  };
+
+  const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
+    value: timeZone.value,
+    query: timeZone.label + " " + timeZone.value,
+    content: timeZone.label,
+  }));
+
+  return (
+    <>
+      <ImageUploadModal
+        isOpen={isImageUploadModalOpen}
+        onClose={() => setIsImageUploadModalOpen(false)}
+        isRemoving={isRemoving}
+        handleDelete={() => handleDelete(myProfile?.avatar, true)}
+        onSuccess={(url) => {
+          setValue("avatar", url);
+          handleSubmit(onSubmit)();
+          setIsImageUploadModalOpen(false);
+        }}
+        value={watch("avatar") !== "" ? watch("avatar") : undefined}
+        userImage
+      />
+      {myProfile ? (
+        <form onSubmit={handleSubmit(onSubmit)} className="h-full w-full">
+          <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
+            <div className="relative h-44 w-full mt-6">
+              <img
+                src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                className="h-44 w-full rounded-lg object-cover"
+                alt={myProfile?.first_name ?? "Cover image"}
+              />
+              <div className="flex items-end justify-between absolute left-8 -bottom-6">
+                <div className="flex gap-3">
+                  <div className="flex items-center justify-center bg-custom-background-90 h-16 w-16 rounded-lg">
+                    <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                      {!watch("avatar") || watch("avatar") === "" ? (
+                        <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
+                          <User2 className="h-full w-full text-custom-text-200" />
+                        </div>
+                      ) : (
+                        <div className="relative h-16 w-16 overflow-hidden">
+                          <img
+                            src={watch("avatar")}
+                            className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
+                            onClick={() => setIsImageUploadModalOpen(true)}
+                            alt={myProfile.display_name}
+                          />
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex absolute right-3 bottom-3">
+                <Controller
+                  control={control}
+                  name="cover_image"
+                  render={() => (
+                    <ImagePickerPopover
+                      label={"Change cover"}
+                      onChange={(imageUrl) => {
+                        setValue("cover_image", imageUrl);
+                      }}
+                      control={control}
+                      value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className="flex item-center justify-between px-8 mt-4">
+              <div className="flex flex-col">
+                <div className="flex item-center text-lg font-semibold text-custom-text-100">
+                  <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
+                </div>
+                <span className="text-sm tracking-tight">{watch("email")}</span>
+              </div>
+
+              <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
+                <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
+                  <span className="h-4 w-4">
+                    <UserCircle2 className="h-4 w-4" />
+                  </span>
+                  View Profile
+                </a>
+              </Link>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">First Name</h4>
+                <Controller
+                  control={control}
+                  name="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="rounded-md font-medium w-full"
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">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="rounded-md font-medium w-full"
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Email</h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.email)}
+                      placeholder="Enter your last name"
+                      className="rounded-md font-medium w-full"
+                      disabled
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Role</h4>
+                <Controller
+                  name="role"
+                  control={control}
+                  rules={{ required: "This field is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={value ? value.toString() : "Select your role"}
+                      buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : ""}
+                      width="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 className="flex flex-col gap-1">
+                <h4 className="text-sm">Display name </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 characters 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"
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Timezone </h4>
+
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "This field is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSearchSelect
+                      value={value}
+                      label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
+                      options={timeZoneOptions}
+                      onChange={onChange}
+                      optionsClassName="w-full"
+                      input
+                    />
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+
+              <div className="flex items-center justify-between py-2">
+                <Button variant="primary" type="submit" loading={isSubmitting}>
+                  {isSubmitting ? "Updating Profile..." : "Update Profile"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </>
+  );
+};
+
+ProfilePage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfilePage;
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
new file mode 100644
index 00000000000..842740f7ac4
--- /dev/null
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState, ReactElement } from "react";
+import { observer } from "mobx-react-lite";
+import { useTheme } from "next-themes";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { CustomThemeSelector, ThemeSwitch } from "components/core";
+import { WorkspaceSettingHeader } from "components/headers";
+// ui
+import { Spinner } from "@plane/ui";
+// constants
+import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes";
+// type
+import { NextPageWithLayout } from "types/app";
+
+const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
+  const { user: userStore } = useMobxStore();
+  // states
+  const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
+  // computed
+  const userTheme = userStore.currentUser?.theme;
+  // hooks
+  const { setTheme } = useTheme();
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    if (userTheme) {
+      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userTheme?.theme);
+      if (userThemeOption) {
+        setCurrentTheme(userThemeOption);
+      }
+    }
+  }, [userTheme]);
+
+  const handleThemeChange = (themeOption: I_THEME_OPTION) => {
+    setTheme(themeOption.value);
+    userStore.updateCurrentUserTheme(themeOption.value).catch(() => {
+      setToastAlert({
+        title: "Failed to Update the theme",
+        type: "error",
+      });
+    });
+  };
+
+  return (
+    <>
+      {userStore.currentUser ? (
+        <div className="pr-9 py-8 w-full overflow-y-auto">
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Preferences</h3>
+          </div>
+          <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
+            <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>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
+            </div>
+          </div>
+          {userTheme?.theme === "custom" && <CustomThemeSelector />}
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="My Profile Preferences" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProfilePreferencesPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
new file mode 100644
index 00000000000..6d0c6e0d640
--- /dev/null
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -0,0 +1,74 @@
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProfileAuthWrapper } from "layouts/profile-layout";
+// components
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  }: RootStore = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query as {
+    workspaceSlug: string;
+    userId: string;
+  };
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug);
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug);
+      await projectStore.fetchProjects(workspaceSlug);
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug, userId, "assigned");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+});
+
+ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Assigned" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default ProfileAssignedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
new file mode 100644
index 00000000000..7bf21edd992
--- /dev/null
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -0,0 +1,70 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProfileAuthWrapper } from "layouts/profile-layout";
+// components
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_CREATED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "created");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Created" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileCreatedIssuesPage);
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
new file mode 100644
index 00000000000..e5b70b1db88
--- /dev/null
+++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -0,0 +1,65 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { UserService } from "services/user.service";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProfileAuthWrapper } from "layouts/profile-layout";
+// components
+import { UserProfileHeader } from "components/headers";
+import {
+  ProfileActivity,
+  ProfilePriorityDistribution,
+  ProfileStateDistribution,
+  ProfileStats,
+  ProfileWorkload,
+} from "components/profile";
+// types
+import { IUserStateDistribution, TStateGroups } from "types";
+import { NextPageWithLayout } from "types/app";
+// constants
+import { USER_PROFILE_DATA } from "constants/fetch-keys";
+import { GROUP_CHOICES } from "constants/project";
+
+// services
+const userService = new UserService();
+
+const ProfileOverviewPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { data: userProfile } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString()) : null
+  );
+
+  const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
+    const group = userProfile?.state_distribution.find((g) => g.state_group === key);
+
+    if (group) return group;
+    else return { state_group: key as TStateGroups, state_count: 0 };
+  });
+
+  return (
+    <div className="h-full w-full px-5 md:px-9 py-5 space-y-7 overflow-y-auto">
+      <ProfileStats userProfile={userProfile} />
+      <ProfileWorkload stateDistribution={stateDistribution} />
+      <div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
+        <ProfilePriorityDistribution userProfile={userProfile} />
+        <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
+      </div>
+      <ProfileActivity />
+    </div>
+  );
+};
+
+ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Overview" />}>
+      <ProfileAuthWrapper>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default ProfileOverviewPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
new file mode 100644
index 00000000000..8900fb3fd61
--- /dev/null
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -0,0 +1,70 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProfileAuthWrapper } from "layouts/profile-layout";
+// components
+import { UserProfileHeader } from "components/headers";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { Spinner } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesStore,
+  } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_SUBSCRIBED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "subscribed");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="w-full h-full relative overflow-auto -z-1">
+          {activeLayout === "list" ? (
+            <ProfileIssuesListLayout />
+          ) : activeLayout === "kanban" ? (
+            <ProfileIssuesKanBanLayout />
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader title="Subscribed" />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileSubscribedIssuesPage);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
new file mode 100644
index 00000000000..ff374202d2d
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -0,0 +1,199 @@
+import { useCallback, useEffect, useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { useForm } from "react-hook-form";
+// services
+import { IssueService, IssueArchiveService } from "services/issue";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
+import { ProjectArchivedIssueDetailsHeader } from "components/headers";
+// ui
+import { ArchiveIcon, Loader } from "@plane/ui";
+// icons
+import { History } from "lucide-react";
+// types
+import { IIssue } from "types";
+import { NextPageWithLayout } from "types/app";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+  description: "",
+  description_html: "",
+  estimate_point: null,
+  state: "",
+  priority: "low",
+  target_date: new Date().toString(),
+  issue_cycle: null,
+  issue_module: null,
+};
+
+// services
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
+
+const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, archivedIssueId } = router.query;
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  // hooks
+  const { user } = useUserAuth();
+  const { setToastAlert } = useToast();
+
+  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
+    workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
+    workspaceSlug && projectId && archivedIssueId
+      ? () =>
+          issueArchiveService.retrieveArchivedIssue(
+            workspaceSlug as string,
+            projectId as string,
+            archivedIssueId as string
+          )
+      : null
+  );
+
+  const { reset, control, watch } = useForm<IIssue>({
+    defaultValues,
+  });
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !archivedIssueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(archivedIssueId as string),
+        (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload: Partial<IIssue> = {
+        ...formData,
+      };
+
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, archivedIssueId as string, payload, user)
+        .then(() => {
+          mutateIssueDetails();
+          mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, archivedIssueId, projectId, mutateIssueDetails, user]
+  );
+
+  useEffect(() => {
+    if (!issueDetails) return;
+
+    mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
+    reset({
+      ...issueDetails,
+    });
+  }, [issueDetails, reset, archivedIssueId]);
+
+  const handleUnArchive = async () => {
+    if (!workspaceSlug || !projectId || !archivedIssueId) return;
+
+    setIsRestoring(true);
+
+    await issueArchiveService
+      .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success",
+          message: `${issueDetails?.project_detail?.identifier}-${issueDetails?.sequence_id} is restored successfully under the project ${issueDetails?.project_detail?.name}`,
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${archivedIssueId}`);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "错误!",
+          message: "出错了。请重试。",
+        });
+      })
+      .finally(() => setIsRestoring(false));
+  };
+
+  return (
+    <>
+      {issueDetails && projectId ? (
+        <div className="flex h-full overflow-hidden">
+          <div className="w-2/3 h-full overflow-y-auto space-y-2 divide-y-2 divide-custom-border-300 p-5">
+            {issueDetails.archived_at && (
+              <div className="flex items-center justify-between gap-2 px-2.5 py-2 text-sm border rounded-md text-custom-text-200 border-custom-border-200 bg-custom-background-90">
+                <div className="flex gap-2 items-center">
+                  <ArchiveIcon className="h-3.5 w-3.5" />
+                  <p>This issue has been archived by Plane.</p>
+                </div>
+                <button
+                  className="flex items-center gap-2 p-1.5 text-sm rounded-md border border-custom-border-200"
+                  onClick={handleUnArchive}
+                  disabled={isRestoring}
+                >
+                  <History className="h-3.5 w-3.5" />
+
+                  <span>{isRestoring ? "Restoring..." : "Restore Issue"}</span>
+                </button>
+              </div>
+            )}
+            <div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60 pointer-events-none">
+              <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} uneditable />
+            </div>
+          </div>
+          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
+            <IssueDetailsSidebar
+              control={control}
+              issueDetail={issueDetails}
+              submitChanges={submitChanges}
+              watch={watch}
+              uneditable
+            />
+          </div>
+        </div>
+      ) : (
+        <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>
+      )}
+    </>
+  );
+};
+
+ArchivedIssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectArchivedIssueDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ArchivedIssueDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
new file mode 100644
index 00000000000..13fb00f6db0
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { ArchivedIssueLayoutRoot } from "components/issues";
+// ui
+import { ArchiveIcon } from "@plane/ui";
+import { ProjectArchivedIssuesHeader } from "components/headers";
+// icons
+import { X } from "lucide-react";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectArchivedIssuesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
+        <button
+          type="button"
+          onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
+          className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
+        >
+          <ArchiveIcon className="h-4 w-4" />
+          <span>Archived Issues</span>
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+      <ArchivedIssueLayoutRoot />
+    </div>
+  );
+};
+
+ProjectArchivedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <IssueViewContextProvider>
+      <AppLayout header={<ProjectArchivedIssuesHeader />} withProjectWrapper>
+        {page}
+      </AppLayout>
+    </IssueViewContextProvider>
+  );
+};
+
+export default ProjectArchivedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
new file mode 100644
index 00000000000..318d61cf556
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -0,0 +1,85 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { CycleIssuesHeader } from "components/headers";
+import { CycleDetailsSidebar } from "components/cycles";
+import { CycleLayoutRoot } from "components/issues/issue-layouts";
+// ui
+import { EmptyState } from "components/common";
+// assets
+import emptyCycle from "public/empty-state/cycle.svg";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const CycleDetailPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { cycle: cycleStore } = useMobxStore();
+
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+
+  const { error } = useSWR(
+    workspaceSlug && projectId && cycleId ? `CURRENT_CYCLE_DETAILS_${cycleId.toString()}` : null,
+    workspaceSlug && projectId && cycleId
+      ? () => cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
+      : null
+  );
+
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  return (
+    <>
+      {error ? (
+        <EmptyState
+          image={emptyCycle}
+          title="Cycle does not exist"
+          description="The cycle you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other cycles",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
+          }}
+        />
+      ) : (
+        <>
+          <div className="flex h-full w-full">
+            <div className="h-full w-full overflow-hidden">
+              <CycleLayoutRoot />
+            </div>
+            {cycleId && !isSidebarCollapsed && (
+              <div
+                className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+                style={{
+                  boxShadow:
+                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+                }}
+              >
+                <CycleDetailsSidebar cycleId={cycleId.toString()} handleClose={toggleSidebar} />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+CycleDetailPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default CycleDetailPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
new file mode 100644
index 00000000000..21fd5fe8b49
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -0,0 +1,231 @@
+import { Fragment, useCallback, useEffect, useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import { Tab } from "@headlessui/react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { CyclesHeader } from "components/headers";
+import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles";
+// ui
+import { EmptyState } from "components/common";
+import { Tooltip } from "@plane/ui";
+// images
+import emptyCycle from "public/empty-state/cycle.svg";
+// types
+import { TCycleView, TCycleLayout } from "types";
+import { NextPageWithLayout } from "types/app";
+// constants
+import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+// lib cookie
+import { setLocalStorage, getLocalStorage } from "lib/local-storage";
+
+const ProjectCyclesPage: NextPageWithLayout = observer(() => {
+  const [createModal, setCreateModal] = useState(false);
+  // store
+  const { project: projectStore, cycle: cycleStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekCycle } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    peekCycle: string;
+  };
+  // fetching project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null,
+    workspaceSlug && projectId ? () => projectStore.fetchProjectDetails(workspaceSlug, projectId) : null
+  );
+
+  const handleCurrentLayout = useCallback(
+    (_layout: TCycleLayout) => {
+      if (projectId) {
+        setLocalStorage(`cycle_layout:${projectId}`, _layout);
+        cycleStore.setCycleLayout(_layout);
+      }
+    },
+    [cycleStore, projectId]
+  );
+
+  const handleCurrentView = useCallback(
+    (_view: TCycleView) => {
+      if (projectId) {
+        setLocalStorage(`cycle_view:${projectId}`, _view);
+        cycleStore.setCycleView(_view);
+        if (_view === "draft" && cycleStore.cycleLayout === "gantt") {
+          handleCurrentLayout("list");
+        }
+      }
+    },
+    [cycleStore, projectId, handleCurrentLayout]
+  );
+
+  useEffect(() => {
+    if (projectId) {
+      const _viewKey = `cycle_view:${projectId}`;
+      const _viewValue = getLocalStorage(_viewKey);
+      if (_viewValue && _viewValue !== cycleStore?.cycleView) cycleStore.setCycleView(_viewValue as TCycleView);
+      else handleCurrentView("all");
+
+      const _layoutKey = `cycle_layout:${projectId}`;
+      const _layoutValue = getLocalStorage(_layoutKey);
+      if (_layoutValue && _layoutValue !== cycleStore?.cycleView)
+        cycleStore.setCycleLayout(_layoutValue as TCycleLayout);
+      else handleCurrentLayout("list");
+    }
+  }, [projectId, cycleStore, handleCurrentView, handleCurrentLayout]);
+
+  const cycleView = cycleStore?.cycleView;
+  const cycleLayout = cycleStore?.cycleLayout;
+
+  return (
+    <>
+      <CycleCreateUpdateModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        isOpen={createModal}
+        handleClose={() => setCreateModal(false)}
+      />
+      {currentProjectDetails?.total_cycles === 0 ? (
+        <div className="h-full grid place-items-center">
+          <EmptyState
+            title="Plan your project with cycles"
+            description="Cycle is a custom time period in which a team works to complete items on their backlog."
+            image={emptyCycle}
+            primaryButton={{
+              icon: <Plus className="h-4 w-4" />,
+              text: "New Cycle",
+              onClick: () => {
+                setCreateModal(true);
+              },
+            }}
+          />
+        </div>
+      ) : (
+        <Tab.Group
+          as="div"
+          className="h-full flex flex-col overflow-hidden"
+          defaultIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleStore?.cycleView)}
+          selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleStore?.cycleView)}
+          onChange={(i) => {
+            handleCurrentView(CYCLE_TAB_LIST[i].key as TCycleView);
+          }}
+        >
+          <div className="flex flex-col sm:flex-row gap-4 justify-between items-end sm:items-center border-b border-custom-border-200 px-4 sm:px-5 pb-4 sm:pb-0">
+            <Tab.List as="div" className="flex items-center overflow-x-scroll">
+              {CYCLE_TAB_LIST.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  className={({ selected }) =>
+                    `border-b-2 p-4 text-sm font-medium outline-none ${
+                      selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
+                    }`
+                  }
+                >
+                  {tab.name}
+                </Tab>
+              ))}
+            </Tab.List>
+            {cycleStore?.cycleView != "active" && (
+              <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+                {CYCLE_VIEW_LAYOUTS.map((layout) => {
+                  if (layout.key === "gantt" && cycleStore?.cycleView === "draft") return null;
+
+                  return (
+                    <Tooltip key={layout.key} tooltipContent={layout.title}>
+                      <button
+                        type="button"
+                        className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                          cycleStore?.cycleLayout == layout.key
+                            ? "bg-custom-background-100 shadow-custom-shadow-2xs"
+                            : ""
+                        }`}
+                        onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
+                      >
+                        <layout.icon
+                          strokeWidth={2}
+                          className={`h-3.5 w-3.5 ${
+                            cycleStore?.cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                          }`}
+                        />
+                      </button>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"all"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  peekCycle={peekCycle}
+                />
+              )}
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="p-4 sm:p-5 space-y-5 h-full overflow-y-auto">
+              <ActiveCycleDetails workspaceSlug={workspaceSlug} projectId={projectId} />
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"upcoming"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  peekCycle={peekCycle}
+                />
+              )}
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"completed"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  peekCycle={peekCycle}
+                />
+              )}
+            </Tab.Panel>
+
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
+              {cycleView && cycleLayout && workspaceSlug && projectId && (
+                <CyclesView
+                  filter={"draft"}
+                  layout={cycleLayout as TCycleLayout}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  peekCycle={peekCycle}
+                />
+              )}
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      )}
+    </>
+  );
+});
+
+ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<CyclesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectCyclesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
new file mode 100644
index 00000000000..fcde49524c0
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -0,0 +1,46 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// contexts
+import { IssueViewContextProvider } from "contexts/issue-view.context";
+// ui
+import { ProjectDraftIssueHeader } from "components/headers";
+// icons
+import { X, PenSquare } from "lucide-react";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectDraftIssuesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center ga-1 px-4 py-2.5 shadow-sm border-b border-custom-border-200">
+        <button
+          type="button"
+          onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
+          className="flex items-center gap-1.5 rounded border border-custom-border-200 px-3 py-1.5 text-xs"
+        >
+          <PenSquare className="h-3 w-3 text-custom-text-300" />
+          <span>Draft Issues</span>
+
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+ProjectDraftIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <IssueViewContextProvider>
+      <AppLayout header={<ProjectDraftIssueHeader />} withProjectWrapper>
+        {page}
+      </AppLayout>
+    </IssueViewContextProvider>
+  );
+};
+
+export default ProjectDraftIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
new file mode 100644
index 00000000000..e10f76c4878
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
+import { ProjectInboxHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectInboxPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, inboxId } = router.query;
+
+  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
+    workspaceSlug && projectId && inboxId
+      ? () => inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
+      : null
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <InboxActionsHeader />
+      <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
+        <InboxIssuesListSidebar />
+        <div className="col-span-3 h-full overflow-auto">
+          <InboxMainContent />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ProjectInboxPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectInboxPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
new file mode 100644
index 00000000000..32c11345ead
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -0,0 +1,164 @@
+import React, { useCallback, useEffect, ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { useForm } from "react-hook-form";
+// services
+import { IssueService } from "services/issue";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { ProjectIssueDetailsHeader } from "components/headers";
+import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
+// ui
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
+// images
+import emptyIssue from "public/empty-state/issue.svg";
+// types
+import { IIssue } from "types";
+import { NextPageWithLayout } from "types/app";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IIssue> = {
+  description: "",
+  description_html: "",
+  estimate_point: null,
+  issue_cycle: null,
+  issue_module: null,
+  name: "",
+  priority: "low",
+  start_date: null,
+  state: "",
+  target_date: null,
+};
+
+// services
+const issueService = new IssueService();
+
+const IssueDetailsPage: NextPageWithLayout = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { user } = useUserAuth();
+
+  const {
+    data: issueDetails,
+    mutate: mutateIssueDetails,
+    error,
+  } = useSWR(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const { reset, control, watch } = useForm<IIssue>({
+    defaultValues,
+  });
+
+  const submitChanges = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+        (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload: Partial<IIssue> = {
+        ...formData,
+      };
+
+      delete payload.related_issues;
+      delete payload.issue_relations;
+
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutateIssueDetails();
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
+  );
+
+  useEffect(() => {
+    if (!issueDetails) return;
+
+    mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+    reset({
+      ...issueDetails,
+    });
+  }, [issueDetails, reset, issueId]);
+
+  return (
+    <>
+      {" "}
+      {error ? (
+        <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."
+          primaryButton={{
+            text: "View other issues",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : issueDetails && projectId ? (
+        <div className="flex h-full overflow-hidden">
+          <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
+            <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
+          </div>
+          <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">
+            <IssueDetailsSidebar
+              control={control}
+              issueDetail={issueDetails}
+              submitChanges={submitChanges}
+              watch={watch}
+            />
+          </div>
+        </div>
+      ) : (
+        <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>
+      )}
+    </>
+  );
+};
+
+IssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectIssueDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default IssueDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
new file mode 100644
index 00000000000..ceb75b43c6c
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+// components
+import { ProjectLayoutRoot } from "components/issues";
+import { ProjectIssuesHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+
+const ProjectIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full w-full">
+    <ProjectLayoutRoot />
+  </div>
+);
+
+ProjectIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
new file mode 100644
index 00000000000..5130680c5b2
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -0,0 +1,84 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { ModuleDetailsSidebar } from "components/modules";
+import { ModuleLayoutRoot } from "components/issues";
+import { ModuleIssuesHeader } from "components/headers";
+// ui
+import { EmptyState } from "components/common";
+// assets
+import emptyModule from "public/empty-state/module.svg";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ModuleIssuesPage: NextPageWithLayout = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+  // store
+  const { module: moduleStore } = useMobxStore();
+  // local storage
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
+
+  const { error } = useSWR(
+    workspaceSlug && projectId && moduleId ? `CURRENT_MODULE_DETAILS_${moduleId.toString()}` : null,
+    workspaceSlug && projectId && moduleId
+      ? () => moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
+      : null
+  );
+
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
+  return (
+    <>
+      {error ? (
+        <EmptyState
+          image={emptyModule}
+          title="Module does not exist"
+          description="The module you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other modules",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
+          }}
+        />
+      ) : (
+        <div className="flex h-full w-full">
+          <div className="h-full w-full overflow-hidden">
+            <ModuleLayoutRoot />
+          </div>
+          {moduleId && !isSidebarCollapsed && (
+            <div
+              className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+              style={{
+                boxShadow:
+                  "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+              }}
+            >
+              <ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+ModuleIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ModuleIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
new file mode 100644
index 00000000000..3ec3bf7f6b3
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { ModulesListView } from "components/modules";
+import { ModulesListHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectModulesPage: NextPageWithLayout = () => <ModulesListView />;
+
+ProjectModulesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ModulesListHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectModulesPage;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
similarity index 76%
rename from apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
rename to web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 753464f4137..ade06b36aa2 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -1,61 +1,38 @@
-import React, { useEffect, useRef, useState } from "react";
-
+import React, { useEffect, useRef, useState, ReactElement } from "react";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
+import { Controller, useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
-// react-color
 import { TwitterPicker } from "react-color";
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 // services
-import projectService from "services/project.service";
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.service";
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
+import { PageDetailsHeader } from "components/headers/page-details";
 // ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import {
-  CustomSearchSelect,
-  EmptyState,
-  Loader,
-  TextArea,
-  ToggleSwitch,
-  Tooltip,
-} from "components/ui";
+import { EmptyState } from "components/common";
+import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
-import {
-  ArrowLeftIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PlusIcon,
-  StarIcon,
-  LinkIcon,
-  XMarkIcon,
-  ChevronDownIcon,
-} from "@heroicons/react/24/outline";
-import { ColorPalletteIcon } from "components/icons";
+import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import type { NextPage } from "next";
+import { NextPageWithLayout } from "types/app";
 import { IIssueLabels, IPage, IPageBlock, IProjectMember } from "types";
 // fetch-keys
 import {
@@ -66,7 +43,12 @@ import {
   USER_PROJECT_VIEW,
 } from "constants/fetch-keys";
 
-const SinglePage: NextPage = () => {
+// services
+const projectService = new ProjectService();
+const pageService = new PageService();
+const issueLabelService = new IssueLabelService();
+
+const PageDetailsPage: NextPageWithLayout = () => {
   const [createBlockForm, setCreateBlockForm] = useState(false);
   const [labelModal, setLabelModal] = useState(false);
   const [showBlock, setShowBlock] = useState(false);
@@ -80,45 +62,33 @@ const SinglePage: NextPage = () => {
 
   const { user } = useUser();
 
-  const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
+  const { handleSubmit, reset, watch, setValue, control } = useForm<IPage>({
     defaultValues: { name: "" },
   });
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: pageDetails, error } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
     workspaceSlug && projectId
-      ? () =>
-          pagesService.getPageDetails(
-            workspaceSlug as string,
-            projectId as string,
-            pageId as string
-          )
+      ? () => pageService.getPageDetails(workspaceSlug as string, projectId as string, pageId as string)
       : null
   );
 
   const { data: pageBlocks } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
     workspaceSlug && projectId
-      ? () =>
-          pagesService.listPageBlocks(
-            workspaceSlug as string,
-            projectId as string,
-            pageId as string
-          )
+      ? () => pageService.listPageBlocks(workspaceSlug as string, projectId as string, pageId as string)
       : null
   );
 
   const { data: labels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -134,7 +104,7 @@ const SinglePage: NextPage = () => {
 
     if (!formData.name || formData.name.length === 0 || formData.name === "") return;
 
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData, user)
       .then(() => {
         mutate<IPage>(
@@ -156,12 +126,11 @@ const SinglePage: NextPage = () => {
       (prevData) => ({
         ...(prevData as IPage),
         ...formData,
-        labels: formData.labels_list ? formData.labels_list : (prevData as IPage).labels,
       }),
       false
     );
 
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData, user)
       .then(() => {
         mutate(PAGE_DETAILS(pageId as string));
@@ -181,12 +150,12 @@ const SinglePage: NextPage = () => {
     ).then(() => {
       setToastAlert({
         type: "success",
-        title: "成功",
-        message: "已添加到收藏夹",
+        title: "Success",
+        message: "Added to favorites",
       });
     });
 
-    pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
+    pageService.addPageToFavorites(workspaceSlug as string, projectId as string, {
       page: pageId as string,
     });
   };
@@ -204,16 +173,12 @@ const SinglePage: NextPage = () => {
     ).then(() => {
       setToastAlert({
         type: "success",
-        title: "成功",
-        message: "已从收藏夹中删除",
+        title: "Success",
+        message: "Removed from favorites",
       });
     });
 
-    pagesService.removePageFromFavorites(
-      workspaceSlug as string,
-      projectId as string,
-      pageId as string
-    );
+    pageService.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
   };
 
   const handleOnDragEnd = (result: DropResult) => {
@@ -228,15 +193,9 @@ const SinglePage: NextPage = () => {
       newSortOrder = pageBlocks[pageBlocks.length - 1].sort_order + 10000;
     else {
       if (destination.index > source.index)
-        newSortOrder =
-          (pageBlocks[destination.index].sort_order +
-            pageBlocks[destination.index + 1].sort_order) /
-          2;
+        newSortOrder = (pageBlocks[destination.index].sort_order + pageBlocks[destination.index + 1].sort_order) / 2;
       else if (destination.index < source.index)
-        newSortOrder =
-          (pageBlocks[destination.index - 1].sort_order +
-            pageBlocks[destination.index].sort_order) /
-          2;
+        newSortOrder = (pageBlocks[destination.index - 1].sort_order + pageBlocks[destination.index].sort_order) / 2;
     }
 
     const newBlocksList = pageBlocks.map((p) => ({
@@ -249,7 +208,7 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -262,18 +221,15 @@ const SinglePage: NextPage = () => {
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(
-      () => {
-        setToastAlert({
-          type: "success",
-          title: "链接已复制！",
-          message: "页面链接已复制到剪贴板",
-        });
-      }
-    );
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
   };
 
   const handleShowBlockToggle = async () => {
@@ -288,9 +244,7 @@ const SinglePage: NextPage = () => {
     };
 
     mutate<IProjectMember>(
-      (workspaceSlug as string) && (projectId as string)
-        ? USER_PROJECT_VIEW(projectId as string)
-        : null,
+      (workspaceSlug as string) && (projectId as string) ? USER_PROJECT_VIEW(projectId as string) : null,
       (prevData) => {
         if (!prevData) return prevData;
 
@@ -302,15 +256,13 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    await projectService
-      .setProjectView(workspaceSlug as string, projectId as string, payload)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
+    await projectService.setProjectView(workspaceSlug as string, projectId as string, payload).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Something went wrong. Please try again.",
       });
+    });
   };
 
   const options = labels?.map((label) => ({
@@ -343,14 +295,7 @@ const SinglePage: NextPage = () => {
   }, [memberDetails]);
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
-        </Breadcrumbs>
-      }
-    >
+    <>
       {error ? (
         <EmptyState
           image={emptyPage}
@@ -372,20 +317,25 @@ const SinglePage: NextPage = () => {
                     className="flex items-center gap-2 text-sm text-custom-text-200"
                     onClick={() => router.back()}
                   >
-                    <ArrowLeftIcon className="h-4 w-4" />
+                    <ArrowLeft className="h-4 w-4" />
                   </button>
 
-                  <TextArea
-                    id="name"
+                  <Controller
                     name="name"
-                    placeholder="Page Title"
-                    value={watch("name")}
-                    onBlur={handleSubmit(updatePage)}
-                    onChange={(e) => setValue("name", e.target.value)}
-                    required={true}
-                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0"
-                    role="textbox"
-                    noPadding
+                    control={control}
+                    render={() => (
+                      <TextArea
+                        id="name"
+                        name="name"
+                        value={watch("name")}
+                        placeholder="Page Title"
+                        onBlur={handleSubmit(updatePage)}
+                        onChange={(e) => setValue("name", e.target.value)}
+                        required
+                        className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !px-3 !py-2 text-xl font-semibold outline-none ring-0"
+                        role="textbox"
+                      />
+                    )}
                   />
                 </div>
 
@@ -403,23 +353,20 @@ const SinglePage: NextPage = () => {
                             className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
                             onClick={() => {
                               const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
-                              partialUpdatePage({ labels_list: updatedLabels });
+                              partialUpdatePage({ labels: updatedLabels });
                             }}
                             style={{
-                              backgroundColor: `${
-                                label?.color && label.color !== "" ? label.color : "#000000"
-                              }20`,
+                              backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"}20`,
                             }}
                           >
                             <span
                               className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                               style={{
-                                backgroundColor:
-                                  label?.color && label.color !== "" ? label.color : "#000000",
+                                backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
                               }}
                             />
                             {label.name}
-                            <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                            <X className="h-2.5 w-2.5 group-hover:text-red-500" />
                           </div>
                         );
                       })}
@@ -427,13 +374,10 @@ const SinglePage: NextPage = () => {
                   )}
                   <CustomSearchSelect
                     customButton={
-                      <button
-                        type="button"
-                        className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs"
-                      >
-                        <PlusIcon className="h-3.5 w-3.5" />
-                        {pageDetails.labels.length <= 0 && <span>添加标签</span>}
-                      </button>
+                      <div className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs">
+                        <Plus className="h-3.5 w-3.5" />
+                        {pageDetails.labels.length <= 0 && <span>Add Label</span>}
+                      </div>
                     }
                     value={pageDetails.labels}
                     footerOption={
@@ -445,12 +389,12 @@ const SinglePage: NextPage = () => {
                         }}
                       >
                         <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                          <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                          <span>创建新标签</span>
+                          <Plus className="h-4 w-4" aria-hidden="true" />
+                          <span>Create New Label</span>
                         </span>
                       </button>
                     }
-                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                    onChange={(val: string[]) => partialUpdatePage({ labels: val })}
                     options={options}
                     multiple
                     noChevron
@@ -476,8 +420,8 @@ const SinglePage: NextPage = () => {
                               : "text-custom-sidebar-text-200"
                           }`}
                         >
-                          View
-                          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                          Display
+                          <ChevronDown className="h-3 w-3" aria-hidden="true" />
                         </Popover.Button>
 
                         <Transition
@@ -492,9 +436,7 @@ const SinglePage: NextPage = () => {
                           <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                             <div className="relative divide-y-2 divide-custom-border-200">
                               <div className="flex items-center justify-between">
-                                <span className="text-sm text-custom-text-200">
-                                  Show full block content
-                                </span>
+                                <span className="text-sm text-custom-text-200">Show full block content</span>
                                 <ToggleSwitch
                                   value={showBlock}
                                   onChange={(value) => {
@@ -530,7 +472,7 @@ const SinglePage: NextPage = () => {
                                 }}
                               />
                             ) : (
-                              <ColorPalletteIcon height={16} width={16} />
+                              <Palette height={16} width={16} />
                             )}
                           </Popover.Button>
 
@@ -591,26 +533,22 @@ const SinglePage: NextPage = () => {
                     >
                       {pageDetails.access ? (
                         <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-                          <LockClosedIcon className="h-4 w-4" />
+                          <Lock className="h-4 w-4" />
                         </button>
                       ) : (
-                        <button
-                          onClick={() => partialUpdatePage({ access: 1 })}
-                          type="button"
-                          className="z-10"
-                        >
-                          <LockOpenIcon className="h-4 w-4" />
+                        <button onClick={() => partialUpdatePage({ access: 1 })} type="button" className="z-10">
+                          <Unlock className="h-4 w-4" />
                         </button>
                       )}
                     </Tooltip>
                   )}
                   {pageDetails.is_favorite ? (
                     <button onClick={handleRemoveFromFavorites} className="z-10">
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button onClick={handleAddToFavorites} type="button" className="z-10">
-                      <StarIcon className="h-4 w-4" />
+                      <Star className="h-4 w-4" />
                     </button>
                   )}
                 </div>
@@ -649,11 +587,7 @@ const SinglePage: NextPage = () => {
                   </DragDropContext>
                   {createBlockForm && (
                     <div className="mt-4" ref={scrollToRef}>
-                      <CreateUpdateBlockInline
-                        handleClose={() => setCreateBlockForm(false)}
-                        focus="name"
-                        user={user}
-                      />
+                      <CreateUpdateBlockInline handleClose={() => setCreateBlockForm(false)} focus="name" user={user} />
                     </div>
                   )}
                   {labelModal && typeof projectId === "string" && (
@@ -661,10 +595,9 @@ const SinglePage: NextPage = () => {
                       isOpen={labelModal}
                       handleClose={() => setLabelModal(false)}
                       projectId={projectId}
-                      user={user}
                       onSuccess={(response) => {
                         partialUpdatePage({
-                          labels_list: [...(pageDetails.labels ?? []), response.id],
+                          labels: [...(pageDetails.labels ?? []), response.id],
                         });
                       }}
                     />
@@ -687,8 +620,16 @@ const SinglePage: NextPage = () => {
           <Loader.Item height="200px" />
         </Loader>
       )}
-    </ProjectAuthorizationWrapper>
+    </>
+  );
+};
+
+PageDetailsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<PageDetailsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
   );
 };
 
-export default SinglePage;
+export default PageDetailsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
new file mode 100644
index 00000000000..5ad969fde41
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -0,0 +1,171 @@
+import { useState, Fragment, ReactElement } from "react";
+import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+import { Tab } from "@headlessui/react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+import useUserAuth from "hooks/use-user-auth";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
+import { PagesHeader } from "components/headers";
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { TPageViewProps } from "types";
+import { NextPageWithLayout } from "types/app";
+// constants
+import { PAGE_TABS_LIST, PAGE_VIEW_LAYOUTS } from "constants/page";
+
+const AllPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.AllPagesList), {
+  ssr: false,
+});
+
+const FavoritePagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.FavoritePagesList), {
+  ssr: false,
+});
+
+const MyPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.MyPagesList), {
+  ssr: false,
+});
+
+const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.OtherPagesList), {
+  ssr: false,
+});
+
+const ProjectPagesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // states
+  const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
+  const [viewType, setViewType] = useState<TPageViewProps>("list");
+
+  const { user } = useUserAuth();
+
+  const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
+
+  const currentTabValue = (tab: string | null) => {
+    switch (tab) {
+      case "Recent":
+        return 0;
+      case "All":
+        return 1;
+      case "Favorites":
+        return 2;
+      case "Created by me":
+        return 3;
+      case "Created by others":
+        return 4;
+
+      default:
+        return 0;
+    }
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdatePageModal
+          isOpen={createUpdatePageModal}
+          handleClose={() => setCreateUpdatePageModal(false)}
+          user={user}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+        />
+      )}
+      <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
+          <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+            {PAGE_VIEW_LAYOUTS.map((layout) => (
+              <Tooltip key={layout.key} tooltipContent={layout.title}>
+                <button
+                  type="button"
+                  className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                    viewType == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                  }`}
+                  onClick={() => setViewType(layout.key as TPageViewProps)}
+                >
+                  <layout.icon
+                    strokeWidth={2}
+                    className={`h-3.5 w-3.5 ${
+                      viewType == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                    }`}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+        <Tab.Group
+          as={Fragment}
+          defaultIndex={currentTabValue(pageTab)}
+          onChange={(i) => {
+            switch (i) {
+              case 0:
+                return setPageTab("Recent");
+              case 1:
+                return setPageTab("All");
+              case 2:
+                return setPageTab("Favorites");
+              case 3:
+                return setPageTab("Created by me");
+              case 4:
+                return setPageTab("Created by others");
+
+              default:
+                return setPageTab("Recent");
+            }
+          }}
+        >
+          <Tab.List as="div" className="mb-6 flex items-center justify-between">
+            <div className="flex gap-4 items-center flex-wrap">
+              {PAGE_TABS_LIST.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  className={({ selected }) =>
+                    `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                      selected
+                        ? "border-custom-primary bg-custom-primary text-white"
+                        : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                    }`
+                  }
+                >
+                  {tab.title}
+                </Tab>
+              ))}
+            </div>
+          </Tab.List>
+          <Tab.Panels as={Fragment}>
+            <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">
+              <RecentPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <AllPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <FavoritePagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <MyPagesList viewType={viewType} />
+            </Tab.Panel>
+            <Tab.Panel as="div" className="h-full overflow-hidden">
+              <OtherPagesList viewType={viewType} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </>
+  );
+};
+
+ProjectPagesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<PagesHeader showButton />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectPagesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
new file mode 100644
index 00000000000..0a000e847bb
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -0,0 +1,89 @@
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+// services
+import { ProjectService } from "services/project";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useProjectDetails from "hooks/use-project-details";
+import useToast from "hooks/use-toast";
+// components
+import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
+import { ProjectSettingHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+import { IProject } from "types";
+// constant
+import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+
+// services
+const projectService = new ProjectService();
+
+const AutomationSettingsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUserAuth();
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const handleChange = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId || !projectDetails) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      false
+    );
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) => (prevData ?? []).map((p) => (p.id === projectDetails.id ? { ...p, ...formData } : p)),
+      false
+    );
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, formData, user)
+      .then(() => {})
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        });
+      });
+  };
+
+  const isAdmin = memberDetails?.role === 20;
+
+  return (
+    <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Automations</h3>
+      </div>
+      <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
+      <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
+    </section>
+  );
+};
+
+AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default AutomationSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
new file mode 100644
index 00000000000..0afc3399bc4
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingHeader } from "components/headers";
+import { EstimatesList } from "components/estimates/estimate-list";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const EstimatesSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 w-full overflow-y-auto">
+    <EstimatesList />
+  </div>
+);
+
+EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}; </ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default EstimatesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
new file mode 100644
index 00000000000..ecb8ca02776
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingHeader } from "components/headers";
+import { ProjectFeaturesList } from "components/project";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const FeaturesSettingsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    user: { fetchUserProjectInfo },
+  } = useMobxStore();
+
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  const isAdmin = memberDetails?.role === 20;
+
+  return (
+    <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Features</h3>
+      </div>
+      <ProjectFeaturesList />
+    </section>
+  );
+};
+
+FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default FeaturesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
new file mode 100644
index 00000000000..c93b258d0a7
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -0,0 +1,83 @@
+import { useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingHeader } from "components/headers";
+import {
+  DeleteProjectModal,
+  DeleteProjectSection,
+  ProjectDetailsForm,
+  ProjectDetailsFormLoader,
+} from "components/project";
+// types
+import { NextPageWithLayout } from "types/app";
+// fetch-keys
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+const GeneralSettingsPage: NextPageWithLayout = observer(() => {
+  // store
+  const { project: projectStore } = useMobxStore();
+  const { currentProjectDetails } = projectStore;
+  // states
+  const [selectProject, setSelectedProject] = useState<string | null>(null);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
+  // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  const isAdmin = currentProjectDetails?.member_role === 20;
+
+  return (
+    <>
+      {currentProjectDetails && (
+        <DeleteProjectModal
+          project={currentProjectDetails}
+          isOpen={Boolean(selectProject)}
+          onClose={() => setSelectedProject(null)}
+        />
+      )}
+
+      <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+        {currentProjectDetails && workspaceSlug ? (
+          <ProjectDetailsForm
+            project={currentProjectDetails}
+            workspaceSlug={workspaceSlug.toString()}
+            isAdmin={isAdmin}
+          />
+        ) : (
+          <ProjectDetailsFormLoader />
+        )}
+
+        {isAdmin && (
+          <DeleteProjectSection
+            projectDetails={currentProjectDetails}
+            handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+          />
+        )}
+      </div>
+    </>
+  );
+});
+
+GeneralSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default GeneralSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
new file mode 100644
index 00000000000..06b8c25b261
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -0,0 +1,88 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// services
+import { IntegrationService } from "services/integrations";
+import { ProjectService } from "services/project";
+// components
+import { IntegrationCard } from "components/project";
+import { ProjectSettingHeader } from "components/headers";
+// ui
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
+// images
+import emptyIntegration from "public/empty-state/integration.svg";
+// types
+import { IProject } from "types";
+import { NextPageWithLayout } from "types/app";
+// fetch-keys
+import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+// services
+const integrationService = new IntegrationService();
+const projectService = new ProjectService();
+
+const ProjectIntegrationsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
+  );
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
+  );
+
+  const isAdmin = projectDetails?.member_role === 20;
+
+  return (
+    <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Integrations</h3>
+      </div>
+      {workspaceIntegrations ? (
+        workspaceIntegrations.length > 0 ? (
+          <div>
+            {workspaceIntegrations.map((integration) => (
+              <IntegrationCard key={integration.integration_detail.id} integration={integration} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            title="You haven't configured integrations"
+            description="Configure GitHub and other integrations to sync your project issues."
+            image={emptyIntegration}
+            primaryButton={{
+              text: "Configure now",
+              onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
+            }}
+            disabled={!isAdmin}
+          />
+        )
+      ) : (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </div>
+  );
+};
+
+ProjectIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Integrations Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ProjectIntegrationsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
new file mode 100644
index 00000000000..6adbdb69e9a
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingsLabelList } from "components/labels";
+import { ProjectSettingHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const LabelsSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+    <ProjectSettingsLabelList />
+  </div>
+);
+
+LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default LabelsSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
new file mode 100644
index 00000000000..f7903fb5500
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingHeader } from "components/headers";
+import { ProjectMemberList, ProjectSettingsMemberDefaults } from "components/project";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const MembersSettingsPage: NextPageWithLayout = () => (
+  <section className={`pr-9 py-8 w-full overflow-y-auto`}>
+    <ProjectSettingsMemberDefaults />
+    <ProjectMemberList />
+  </section>
+);
+
+MembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default MembersSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
new file mode 100644
index 00000000000..cc87c20f438
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+// layout
+import { AppLayout } from "layouts/app-layout";
+import { ProjectSettingLayout } from "layouts/settings-layout";
+// components
+import { ProjectSettingStateList } from "components/states";
+import { ProjectSettingHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const StatesSettingsPage: NextPageWithLayout = () => (
+  <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+    <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <h3 className="text-xl font-medium">States</h3>
+    </div>
+    <ProjectSettingStateList />
+  </div>
+);
+
+StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default StatesSettingsPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
new file mode 100644
index 00000000000..f704f0e89e5
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -0,0 +1,58 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { ProjectViewLayoutRoot } from "components/issues";
+import { ProjectViewIssuesHeader } from "components/headers";
+// ui
+import { EmptyState } from "components/common";
+// assets
+import emptyView from "public/empty-state/view.svg";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectViewIssuesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const { error } = useSWR(
+    workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
+    workspaceSlug && projectId && viewId
+      ? () => projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())
+      : null
+  );
+
+  return (
+    <>
+      {error ? (
+        <EmptyState
+          image={emptyView}
+          title="View does not exist"
+          description="The view you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other views",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
+          }}
+        />
+      ) : (
+        <ProjectViewLayoutRoot />
+      )}
+    </>
+  );
+};
+
+ProjectViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectViewIssuesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectViewIssuesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
new file mode 100644
index 00000000000..b7bb7fd9da6
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -0,0 +1,38 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectViewsHeader } from "components/headers";
+import { ProjectViewsList } from "components/views";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ProjectViewsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const {
+    projectViews: { fetchAllViews },
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_LIST_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId ? () => fetchAllViews(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  return <ProjectViewsList />;
+};
+
+ProjectViewsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectViewsHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectViewsPage;
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
new file mode 100644
index 00000000000..bb720e1efdd
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+// components
+import { ProjectCardList } from "components/project";
+import { ProjectsHeader } from "components/headers";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// type
+import { NextPageWithLayout } from "types/app";
+
+const ProjectsPage: NextPageWithLayout = () => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return <>{workspaceSlug && <ProjectCardList workspaceSlug={workspaceSlug.toString()} />}</>;
+};
+
+ProjectsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<ProjectsHeader />}>{page}</AppLayout>;
+};
+
+export default ProjectsPage;
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
new file mode 100644
index 00000000000..751b5cfab48
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -0,0 +1,39 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// component
+import { WorkspaceSettingHeader } from "components/headers";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const BillingSettingsPage: NextPageWithLayout = () => (
+  <section className="pr-9 py-8 w-full overflow-y-auto">
+    <div>
+      <div className="flex  items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Billing & Plans</h3>
+      </div>
+    </div>
+    <div className="px-4 py-6">
+      <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="https://plane.so/pricing" target="_blank" rel="noreferrer">
+          <Button variant="neutral-primary">View Plans</Button>
+        </a>
+      </div>
+    </div>
+  </section>
+);
+
+BillingSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default BillingSettingsPage;
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
new file mode 100644
index 00000000000..ce0786634cb
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -0,0 +1,32 @@
+import { ReactElement } from "react";
+// layout
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { WorkspaceSettingHeader } from "components/headers";
+import ExportGuide from "components/exporter/guide";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ExportsPage: NextPageWithLayout = () => (
+  <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+    <WorkspaceSettingLayout>
+      <div className="pr-9 py-8 w-full overflow-y-auto">
+        <div className="flex items-center py-3.5 border-b border-custom-border-200">
+          <h3 className="text-xl font-medium">Exports</h3>
+        </div>
+        <ExportGuide />
+      </div>
+    </WorkspaceSettingLayout>
+  </AppLayout>
+);
+
+ExportsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ExportsPage;
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
new file mode 100644
index 00000000000..c75c2d7e7a2
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+// layouts
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "layouts/app-layout";
+// components
+import IntegrationGuide from "components/integration/guide";
+import { WorkspaceSettingHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const ImportsPage: NextPageWithLayout = () => (
+  <section className="pr-9 py-8 w-full overflow-y-auto">
+    <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <h3 className="text-xl font-medium">Imports</h3>
+    </div>
+    <IntegrationGuide />
+  </section>
+);
+
+ImportsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ImportsPage;
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
new file mode 100644
index 00000000000..49dd85e2a6b
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { WorkspaceSettingHeader } from "components/headers";
+import { WorkspaceDetails } from "components/workspace";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const WorkspaceSettingsPage: NextPageWithLayout = () => <WorkspaceDetails />;
+
+WorkspaceSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WorkspaceSettingsPage;
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
new file mode 100644
index 00000000000..c16330e294b
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -0,0 +1,56 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { IntegrationService } from "services/integrations";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { SingleIntegrationCard } from "components/integration";
+import { WorkspaceSettingHeader } from "components/headers";
+// ui
+import { IntegrationAndImportExportBanner } from "components/ui";
+import { Loader } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
+// fetch-keys
+import { APP_INTEGRATIONS } from "constants/fetch-keys";
+
+// services
+const integrationService = new IntegrationService();
+
+const WorkspaceIntegrationsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
+    workspaceSlug ? integrationService.getAppIntegrationsList() : null
+  );
+
+  return (
+    <section className="pr-9 py-8 w-full overflow-y-auto">
+      <IntegrationAndImportExportBanner bannerName="Integrations" />
+      <div>
+        {appIntegrations ? (
+          appIntegrations.map((integration) => <SingleIntegrationCard key={integration.id} integration={integration} />)
+        ) : (
+          <Loader className="space-y-2.5 mt-4">
+            <Loader.Item height="89px" />
+            <Loader.Item height="89px" />
+          </Loader>
+        )}
+      </div>
+    </section>
+  );
+};
+
+WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WorkspaceIntegrationsPage;
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
new file mode 100644
index 00000000000..90c9848ca63
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -0,0 +1,68 @@
+import { useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// components
+import { WorkspaceSettingHeader } from "components/headers";
+import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { Search } from "lucide-react";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const WorkspaceMembersSettingsPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // hooks
+  const { user } = useUser();
+
+  return (
+    <>
+      {workspaceSlug && (
+        <SendWorkspaceInvitationModal
+          isOpen={inviteModal}
+          onClose={() => setInviteModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          user={user}
+        />
+      )}
+      <section className="pr-9 py-8 w-full overflow-y-auto">
+        <div className="flex items-center justify-between gap-4 py-3.5 border-b-[0.5px] border-custom-border-200">
+          <h4 className="text-xl font-medium">Members</h4>
+          <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+            <Search className="h-3.5 w-3.5" />
+            <input
+              className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              autoFocus={true}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
+            Add Member
+          </Button>
+        </div>
+        <WorkspaceMembersList searchQuery={searchQuery} />
+      </section>
+    </>
+  );
+};
+
+WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WorkspaceMembersSettingsPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
new file mode 100644
index 00000000000..a7ccc4c3b3f
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -0,0 +1,44 @@
+import { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalViewLayoutRoot } from "components/issues";
+import { GlobalIssuesHeader } from "components/headers";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const GlobalViewIssuesPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: { fetchGlobalViewDetails },
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
+    workspaceSlug && globalViewId
+      ? () => fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
+      : null
+  );
+
+  return (
+    <div className="h-full overflow-hidden bg-custom-background-100">
+      <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+        <GlobalViewsHeader />
+        <GlobalViewLayoutRoot />
+      </div>
+    </div>
+  );
+};
+
+GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
new file mode 100644
index 00000000000..3539beb4704
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const GlobalViewAllIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full overflow-hidden bg-custom-background-100">
+    <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+      <GlobalViewsHeader />
+      <GlobalViewLayoutRoot type="all-issues" />
+    </div>
+  </div>
+);
+
+GlobalViewAllIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewAllIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
new file mode 100644
index 00000000000..7c1f56bb04f
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const GlobalViewAssignedIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full overflow-hidden bg-custom-background-100">
+    <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+      <GlobalViewsHeader />
+      <GlobalViewLayoutRoot type="assigned" />
+    </div>
+  </div>
+);
+
+GlobalViewAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewAssignedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
new file mode 100644
index 00000000000..e8a33cf398d
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const GlobalViewCreatedIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full overflow-hidden bg-custom-background-100">
+    <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+      <GlobalViewsHeader />
+      <GlobalViewLayoutRoot type="created" />
+    </div>
+  </div>
+);
+
+GlobalViewCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewCreatedIssuesPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
new file mode 100644
index 00000000000..f42a0815d4c
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -0,0 +1,45 @@
+import React, { useState, ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+// ui
+import { Input } from "@plane/ui";
+// icons
+import { Search } from "lucide-react";
+// types
+import { NextPageWithLayout } from "types/app";
+// constants
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+
+const WorkspaceViewsPage: NextPageWithLayout = () => {
+  const [query, setQuery] = useState("");
+
+  return (
+    <div className="flex flex-col">
+      <div className="h-full w-full flex flex-col overflow-hidden">
+        <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
+          <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+          <Input
+            className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search"
+            mode="true-transparent"
+          />
+        </div>
+      </div>
+      {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
+        <GlobalDefaultViewListItem key={option.key} view={option} />
+      ))}
+      <GlobalViewsList searchQuery={query} />
+    </div>
+  );
+};
+
+WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>{page}</AppLayout>;
+};
+
+export default WorkspaceViewsPage;
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
new file mode 100644
index 00000000000..02d9800746e
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const GlobalViewSubscribedIssuesPage: NextPageWithLayout = () => (
+  <div className="h-full overflow-hidden bg-custom-background-100">
+    <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+      <GlobalViewsHeader />
+      <GlobalViewLayoutRoot type="subscribed" />
+    </div>
+  </div>
+);
+
+GlobalViewSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
+  return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>;
+};
+
+export default GlobalViewSubscribedIssuesPage;
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
new file mode 100644
index 00000000000..d4dca452a90
--- /dev/null
+++ b/web/pages/_app.tsx
@@ -0,0 +1,60 @@
+import { ReactElement } from "react";
+import Head from "next/head";
+import dynamic from "next/dynamic";
+import Router from "next/router";
+import { AppProps } from "next/app";
+import { ThemeProvider } from "next-themes";
+import NProgress from "nprogress";
+// styles
+import "styles/globals.css";
+import "styles/editor.css";
+import "styles/table.css";
+import "styles/command-pallette.css";
+import "styles/nprogress.css";
+import "styles/react-datepicker.css";
+// contexts
+import { ToastContextProvider } from "contexts/toast.context";
+// constants
+import { THEMES } from "constants/themes";
+import { SITE_TITLE } from "constants/seo-variables";
+// mobx store provider
+import { MobxStoreProvider } from "lib/mobx/store-provider";
+import MobxStoreInit from "lib/mobx/store-init";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const CrispWithNoSSR = dynamic(() => import("constants/crisp"), { ssr: false });
+
+// nprogress
+NProgress.configure({ showSpinner: false });
+Router.events.on("routeChangeStart", NProgress.start);
+Router.events.on("routeChangeError", NProgress.done);
+Router.events.on("routeChangeComplete", NProgress.done);
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page: ReactElement) => page);
+
+  return (
+    <>
+      <Head>
+        <title>{SITE_TITLE}</title>
+      </Head>
+      <MobxStoreProvider {...pageProps}>
+        <ThemeProvider themes={THEMES} defaultTheme="system">
+          <ToastContextProvider>
+            <CrispWithNoSSR />
+            <MobxStoreInit />
+            {getLayout(<Component {...pageProps} />)}
+          </ToastContextProvider>
+        </ThemeProvider>
+      </MobxStoreProvider>
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
new file mode 100644
index 00000000000..7a84cfd9ff4
--- /dev/null
+++ b/web/pages/_document.tsx
@@ -0,0 +1,67 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+// constants
+import {
+  SITE_NAME,
+  SITE_DESCRIPTION,
+  SITE_URL,
+  TWITTER_USER_NAME,
+  SITE_KEYWORDS,
+  SITE_TITLE,
+} from "constants/seo-variables";
+import Script from "next/script";
+
+class MyDocument extends Document {
+  render() {
+    const isSessionRecorderEnabled = parseInt(
+      process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0"
+    );
+
+    return (
+      <Html>
+        <Head>
+          <meta property="og:site_name" content={SITE_NAME} />
+          <meta property="og:title" content={SITE_TITLE} />
+          <meta property="og:url" content={SITE_URL} />
+          <meta name="description" content={SITE_DESCRIPTION} />
+          <meta property="og:description" content={SITE_DESCRIPTION} />
+          <meta name="keywords" content={SITE_KEYWORDS} />
+          <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
+          <meta name="theme-color" content="#fff" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+          <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+          <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+          <link rel="manifest" href="/site.webmanifest.json" />
+          <link rel="shortcut icon" href="/favicon/favicon.ico" />
+          {isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
+            <Script id="clarity-tracking">
+              {`(function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY}");`}
+            </Script>
+          )}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+          {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
+            <script
+              defer
+              data-domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
+              src="https://plausible.io/js/script.js"
+            />
+          )}
+          {process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST && (
+            <Script id="posthog-tracking">
+              {`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    posthog.init('${process.env.NEXT_PUBLIC_POSTHOG_KEY}',{api_host:'${process.env.NEXT_PUBLIC_POSTHOG_HOST}'})`}
+            </Script>
+          )}
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/apps/app/pages/_error.tsx b/web/pages/_error.tsx
similarity index 78%
rename from apps/app/pages/_error.tsx
rename to web/pages/_error.tsx
index 12ce38b69d9..094d90601bd 100644
--- a/apps/app/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -3,13 +3,16 @@ import * as Sentry from "@sentry/nextjs";
 import { useRouter } from "next/router";
 
 // services
-import authenticationService from "services/authentication.service";
+import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+
+// services
+const authService = new AuthService();
 
 const CustomErrorComponent = () => {
   const router = useRouter();
@@ -17,7 +20,7 @@ const CustomErrorComponent = () => {
   const { setToastAlert } = useToast();
 
   const handleSignOut = async () => {
-    await authenticationService
+    await authService
       .signOut()
       .catch(() =>
         setToastAlert({
@@ -36,9 +39,8 @@ const CustomErrorComponent = () => {
           <div className="space-y-2">
             <h3 className="text-lg font-semibold">Exception Detected!</h3>
             <p className="text-sm text-custom-text-200 w-1/2 mx-auto">
-              We{"'"}re Sorry! An exception has been detected, and our engineering team has been
-              notified. We apologize for any inconvenience this may have caused. Please reach out to
-              our engineering team at{" "}
+              We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We apologize
+              for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
               <a href="mailto:support@plane.so" className="text-custom-primary">
                 support@plane.so
               </a>{" "}
@@ -55,12 +57,12 @@ const CustomErrorComponent = () => {
             </p>
           </div>
           <div className="flex items-center gap-2 justify-center">
-            <PrimaryButton size="md" onClick={() => router.back()}>
+            <Button variant="primary" size="md" onClick={() => router.back()}>
               Go back
-            </PrimaryButton>
-            <SecondaryButton size="md" onClick={handleSignOut}>
+            </Button>
+            <Button variant="neutral-primary" size="md" onClick={handleSignOut}>
               Sign out
-            </SecondaryButton>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx
new file mode 100644
index 00000000000..c1869439347
--- /dev/null
+++ b/web/pages/accounts/forgot-password.tsx
@@ -0,0 +1,75 @@
+import { ReactElement } from "react";
+import Image from "next/image";
+// components
+import { EmailForgotPasswordForm, EmailForgotPasswordFormValues } from "components/account";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// services
+import { UserService } from "services/user.service";
+// hooks
+import useToast from "hooks/use-toast";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const userService = new UserService();
+
+const ForgotPasswordPage: NextPageWithLayout = () => {
+  // toast
+  const { setToastAlert } = useToast();
+
+  const handleForgotPassword = (formData: EmailForgotPasswordFormValues) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    return userService
+      .forgotPassword(payload)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Password reset link has been sent to your email address.",
+        })
+      )
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Please check the Email ID entered.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+  return (
+    <>
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-6 px-7">
+        <div>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Forgot Password</h1>
+          <EmailForgotPasswordForm onSubmit={handleForgotPassword} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+ForgotPasswordPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default ForgotPasswordPage;
diff --git a/web/pages/accounts/magic-sign-in.tsx b/web/pages/accounts/magic-sign-in.tsx
new file mode 100644
index 00000000000..fc698fef1af
--- /dev/null
+++ b/web/pages/accounts/magic-sign-in.tsx
@@ -0,0 +1,105 @@
+import { useState, useEffect, ReactElement } from "react";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// types
+import { NextPageWithLayout } from "types/app";
+
+const authService = new AuthService();
+
+const MagicSignInPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { password, key } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { setTheme } = useTheme();
+
+  const { mutateUser } = useUserAuth("sign-in");
+
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    setIsSigningIn(() => false);
+    setErrorSignIn(() => undefined);
+    if (!password || !key) {
+      setErrorSignIn("URL is invalid");
+      return;
+    } else {
+      setIsSigningIn(() => true);
+      authService
+        .magicSignIn({ token: password, key })
+        .then(async () => {
+          setIsSigningIn(false);
+          await mutateUser();
+        })
+        .catch((err) => {
+          setErrorSignIn(err.response.data.error);
+          setIsSigningIn(false);
+        });
+    }
+  }, [password, key, mutateUser, router]);
+
+  return (
+    <div className="h-screen w-full overflow-auto bg-custom-background-90">
+      {isSigningIn ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+          <h2 className="text-4xl font-medium">Signing you in...</h2>
+          <p className="text-sm font-medium text-custom-text-200">Please wait while we are preparing your take off.</p>
+        </div>
+      ) : errorSigningIn ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+          <h2 className="text-4xl font-medium">Error</h2>
+          <div className="text-sm font-medium text-custom-text-200 flex gap-2">
+            <div>{errorSigningIn}.</div>
+            <span
+              className="cursor-pointer underline"
+              onClick={() => {
+                authService
+                  .emailCode({ email: (key as string).split("_")[1] })
+                  .then(() => {
+                    setToastAlert({
+                      type: "success",
+                      title: "Email sent",
+                      message: "A new link/code has been send to you.",
+                    });
+                  })
+                  .catch(() => {
+                    setToastAlert({
+                      type: "error",
+                      title: "Error",
+                      message: "Unable to send email.",
+                    });
+                  });
+              }}
+            >
+              Send link again?
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
+          <h2 className="text-4xl font-medium">Success</h2>
+          <p className="text-sm font-medium text-custom-text-200">Redirecting you to the app...</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+MagicSignInPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default MagicSignInPage;
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
new file mode 100644
index 00000000000..a817509d1c5
--- /dev/null
+++ b/web/pages/accounts/reset-password.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect, useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Controller, useForm } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { UserService } from "services/user.service";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Button, Input, Spinner } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
+import { NextPageWithLayout } from "types/app";
+
+type FormData = {
+  password: string;
+  confirmPassword: string;
+};
+
+// services
+const userService = new UserService();
+
+const ResetPasswordPage: NextPageWithLayout = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const router = useRouter();
+  const { uidb64, token } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { setTheme } = useTheme();
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>();
+
+  const onSubmit = async (formData: FormData) => {
+    if (!uidb64 || !token) return;
+
+    if (formData.password !== formData.confirmPassword) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Passwords do not match.",
+      });
+
+      return;
+    }
+
+    const payload = {
+      new_password: formData.password,
+      confirm_password: formData.confirmPassword,
+    };
+
+    await userService
+      .resetPassword(uidb64.toString(), token.toString(), payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Password reset successfully. You can now login with your new password.",
+        });
+        router.push("/");
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+        })
+      );
+  };
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
+    else setIsLoading(false);
+  }, [router]);
+
+  if (isLoading)
+    return (
+      <div className="grid place-items-center h-screen w-full">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
+        <div className="w-full">
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Reset your password</h1>
+          <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-1">
+              <Controller
+                control={control}
+                name="password"
+                rules={{
+                  required: "Password is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.password)}
+                    placeholder="Enter new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
+              />
+            </div>
+            <div className="space-y-1">
+              <Controller
+                control={control}
+                name="confirmPassword"
+                rules={{
+                  required: "Password is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.confirmPassword)}
+                    placeholder="Confirm new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
+              />
+            </div>
+            <Button variant="primary" type="submit" className="w-full" loading={isSubmitting}>
+              {isSubmitting ? "Resetting..." : "Reset"}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default ResetPasswordPage;
diff --git a/web/pages/accounts/sign-up.tsx b/web/pages/accounts/sign-up.tsx
new file mode 100644
index 00000000000..dac86c22bf5
--- /dev/null
+++ b/web/pages/accounts/sign-up.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, ReactElement } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// next-themes
+import { useTheme } from "next-themes";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// components
+import { EmailSignUpForm } from "components/account";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
+import { NextPageWithLayout } from "types/app";
+
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+// services
+const authService = new AuthService();
+
+const SignUpPage: NextPageWithLayout = () => {
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
+  const { setTheme } = useTheme();
+
+  const { mutateUser } = useUserAuth("sign-in");
+
+  const handleSignUp = async (formData: EmailPasswordFormValues) => {
+    const payload = {
+      email: formData.email,
+      password: formData.password ?? "",
+    };
+
+    await authService
+      .emailSignUp(payload)
+      .then(async (response) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Account created successfully.",
+        });
+
+        if (response) await mutateUser();
+        router.push("/onboarding");
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+        })
+      );
+  };
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  return (
+    <>
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
+        <div>
+          <h1 className="text-2xl text-center font-">SignUp on Plane</h1>
+          <EmailSignUpForm onSubmit={handleSignUp} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+SignUpPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default SignUpPage;
diff --git a/web/pages/api/track-event.ts b/web/pages/api/track-event.ts
new file mode 100644
index 00000000000..09ef11d3604
--- /dev/null
+++ b/web/pages/api/track-event.ts
@@ -0,0 +1,34 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+// jitsu
+import { createClient } from "@jitsu/nextjs";
+
+const jitsuClient = createClient({
+  key: process.env.JITSU_TRACKER_ACCESS_KEY || "",
+  tracking_host: process.env.JITSU_TRACKER_HOST || "",
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { eventName, user, extra } = req.body;
+
+  if (!eventName) {
+    return res.status(400).json({ message: "错误请求" });
+  }
+
+  if (!user) return res.status(401).json({ message: "未经授权" });
+
+  jitsuClient
+    .id({
+      id: user?.id,
+      email: user?.email,
+      first_name: user?.first_name,
+      last_name: user?.last_name,
+      display_name: user?.display_name,
+    })
+    .then(() => {
+      jitsuClient.track(eventName, {
+        ...extra,
+      });
+    });
+
+  res.status(200).json({ message: "成功" });
+}
diff --git a/web/pages/api/unsplash.ts b/web/pages/api/unsplash.ts
new file mode 100644
index 00000000000..11acb2096fd
--- /dev/null
+++ b/web/pages/api/unsplash.ts
@@ -0,0 +1,26 @@
+import axios from "axios";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const unsplashKey = process.env.UNSPLASH_ACCESS_KEY;
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { query, page, per_page = 20 } = req.query;
+
+    const url = query
+      ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
+      : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
+
+    const response = await axios({
+      method: "GET",
+      url,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    res.status(200).json(response?.data);
+  } catch (error) {
+    res.status(500).json({ message: "Failed to fetch unsplash", error });
+  }
+}
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
new file mode 100644
index 00000000000..51ae06b9e22
--- /dev/null
+++ b/web/pages/create-workspace.tsx
@@ -0,0 +1,84 @@
+import React, { useState, ReactElement } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthWrapper } from "layouts/auth-layout";
+// components
+import { CreateWorkspaceForm } from "components/workspace";
+// images
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+// types
+import { IWorkspace } from "types";
+import { NextPageWithLayout } from "types/app";
+
+const CreateWorkspacePage: NextPageWithLayout = observer(() => {
+  const [defaultValues, setDefaultValues] = useState({
+    name: "",
+    slug: "",
+    organization_size: "",
+  });
+
+  const router = useRouter();
+
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  const { theme } = useTheme();
+
+  const onSubmit = async (workspace: IWorkspace) => {
+    await userStore
+      .updateCurrentUser({ last_workspace_id: workspace.id })
+      .then(() => router.push(`/${workspace.slug}`));
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+      <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+        <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
+        <button
+          className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12"
+          onClick={() => router.push("/")}
+        >
+          <div className="h-[30px] w-[133px]">
+            {theme === "light" ? (
+              <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+            ) : (
+              <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+            )}
+          </div>
+        </button>
+        <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+          {user?.email}
+        </div>
+      </div>
+      <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
+        <div className="w-full space-y-7 sm:space-y-10">
+          <h4 className="text-2xl font-semibold">Create your workspace</h4>
+          <div className="sm:w-3/4 md:w-2/5">
+            <CreateWorkspaceForm
+              onSubmit={onSubmit}
+              defaultValues={defaultValues}
+              setDefaultValues={setDefaultValues}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+CreateWorkspacePage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page} </DefaultLayout>
+    </UserAuthWrapper>
+  );
+};
+
+export default CreateWorkspacePage;
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
new file mode 100644
index 00000000000..c6842a921f0
--- /dev/null
+++ b/web/pages/index.tsx
@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// components
+import { SignInView } from "components/page-views";
+// type
+import { NextPageWithLayout } from "types/app";
+
+const HomePage: NextPageWithLayout = () => <SignInView />;
+
+HomePage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default HomePage;
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
new file mode 100644
index 00000000000..243065a7c60
--- /dev/null
+++ b/web/pages/installations/[provider]/index.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect, ReactElement } from "react";
+import { useRouter } from "next/router";
+// services
+import { AppInstallationService } from "services/app_installation.service";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { NextPageWithLayout } from "types/app";
+
+// services
+const appInstallationService = new AppInstallationService();
+
+const AppPostInstallation: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { installation_id, state, provider, code } = router.query;
+
+  useEffect(() => {
+    if (provider === "github" && state && installation_id) {
+      appInstallationService
+        .addInstallationApp(state.toString(), provider, { installation_id })
+        .then(() => {
+          window.opener = null;
+          window.open("", "_self");
+          window.close();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    } else if (provider === "slack" && state && code) {
+      const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
+
+      if (!projectId) {
+        const payload = {
+          code,
+        };
+        appInstallationService
+          .addInstallationApp(state.toString(), provider, payload)
+          .then(() => {
+            window.opener = null;
+            window.open("", "_self");
+            window.close();
+          })
+          .catch((err) => {
+            throw err?.response;
+          });
+      } else {
+        const payload = {
+          code,
+        };
+        appInstallationService
+          .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
+          .then(() => {
+            window.opener = null;
+            window.open("", "_self");
+            window.close();
+          })
+          .catch((err) => {
+            throw err.response;
+          });
+      }
+    }
+  }, [state, installation_id, provider, code]);
+
+  return (
+    <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3 bg-custom-background-80">
+      <h2 className="text-2xl text-custom-text-100">Installing. Please wait...</h2>
+      <Spinner />
+    </div>
+  );
+};
+
+AppPostInstallation.getLayout = function getLayout(page: ReactElement) {
+  return <div>{page}</div>;
+};
+
+export default AppPostInstallation;
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
new file mode 100644
index 00000000000..d950b13db4d
--- /dev/null
+++ b/web/pages/invitations/index.tsx
@@ -0,0 +1,219 @@
+import React, { useState, ReactElement } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { useTheme } from "next-themes";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { UserService } from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthWrapper } from "layouts/auth-layout";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { CheckCircle2 } from "lucide-react";
+// images
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+import emptyInvitation from "public/empty-state/invitation.svg";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { NextPageWithLayout } from "types/app";
+import type { IWorkspaceMemberInvitation } from "types";
+// constants
+import { ROLE } from "constants/workspace";
+// components
+import { EmptyState } from "components/common";
+
+// services
+const workspaceService = new WorkspaceService();
+const userService = new UserService();
+
+const UserInvitationsPage: NextPageWithLayout = () => {
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+
+  const router = useRouter();
+
+  const { theme } = useTheme();
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>("USER_WORKSPACE_INVITATIONS", () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  const submitInvitations = () => {
+    if (invitationsRespond.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one invitation.",
+      });
+      return;
+    }
+
+    setIsJoiningWorkspaces(true);
+
+    workspaceService
+      .joinWorkspaces({ invitations: invitationsRespond })
+      .then(() => {
+        mutate("USER_WORKSPACES");
+        const firstInviteId = invitationsRespond[0];
+        const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
+        userService
+          .updateUser({ last_workspace_id: redirectWorkspace?.id })
+          .then(() => {
+            setIsJoiningWorkspaces(false);
+            router.push(`/${redirectWorkspace?.slug}`);
+          })
+          .catch(() => {
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "Something went wrong, Please try again.",
+            });
+            setIsJoiningWorkspaces(false);
+          });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong, Please try again.",
+        });
+        setIsJoiningWorkspaces(false);
+      });
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+      <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+        <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0" />
+        <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12">
+          <div className="h-[30px] w-[133px]">
+            {theme === "light" ? (
+              <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+            ) : (
+              <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+            )}
+          </div>
+        </div>
+        <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+          {user?.email}
+        </div>
+      </div>
+      {invitations ? (
+        invitations.length > 0 ? (
+          <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 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>
+              <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
+                {invitations.map((invitation) => {
+                  const isSelected = invitationsRespond.includes(invitation.id);
+
+                  return (
+                    <div
+                      key={invitation.id}
+                      className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
+                        isSelected
+                          ? "border-custom-primary-100"
+                          : "border-custom-border-200 hover:bg-custom-background-80"
+                      }`}
+                      onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+                    >
+                      <div className="flex-shrink-0">
+                        <div className="grid place-items-center h-9 w-9 rounded">
+                          {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                            <img
+                              src={invitation.workspace.logo}
+                              height="100%"
+                              width="100%"
+                              className="rounded"
+                              alt={invitation.workspace.name}
+                            />
+                          ) : (
+                            <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
+                              {invitation.workspace.name[0]}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
+                        <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                      </div>
+                      <span
+                        className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}
+                      >
+                        <CheckCircle2 className="h-5 w-5" />
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="primary"
+                  type="submit"
+                  size="md"
+                  onClick={submitInvitations}
+                  disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                  loading={isJoiningWorkspaces}
+                >
+                  Accept & Join
+                </Button>
+                <Link href="/">
+                  <a>
+                    <Button variant="neutral-primary" size="md">
+                      Go Home
+                    </Button>
+                  </a>
+                </Link>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
+            <EmptyState
+              title="No pending invites"
+              description="You can see here if someone invites you to a workspace."
+              image={emptyInvitation}
+              primaryButton={{
+                text: "Back to Dashboard",
+                onClick: () => router.push("/"),
+              }}
+            />
+          </div>
+        )
+      ) : null}
+    </div>
+  );
+};
+
+UserInvitationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page}</DefaultLayout>
+    </UserAuthWrapper>
+  );
+};
+
+export default UserInvitationsPage;
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
new file mode 100644
index 00000000000..f8c5e3e6fe1
--- /dev/null
+++ b/web/pages/onboarding/index.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useState, ReactElement } from "react";
+import Image from "next/image";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { useTheme } from "next-themes";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+import { UserAuthWrapper } from "layouts/auth-layout";
+// components
+import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
+// ui
+import { Spinner } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+// types
+import { IUser, TOnboardingSteps } from "types";
+import { NextPageWithLayout } from "types/app";
+
+// services
+const workspaceService = new WorkspaceService();
+
+const OnboardingPage: NextPageWithLayout = observer(() => {
+  const [step, setStep] = useState<number | null>(null);
+
+  const { user: userStore, workspace: workspaceStore } = useMobxStore();
+
+  const user = userStore.currentUser ?? undefined;
+  const workspaces = workspaceStore.workspaces;
+  const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
+
+  const { theme, setTheme } = useTheme();
+
+  const {} = useUserAuth("onboarding");
+
+  const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () =>
+    workspaceService.userWorkspaceInvitations()
+  );
+
+  // update last active workspace details
+  const updateLastWorkspace = async () => {
+    if (!workspaces) return;
+
+    await userStore.updateCurrentUser({
+      last_workspace_id: workspaces[0]?.id,
+    });
+  };
+
+  // handle step change
+  const stepChange = async (steps: Partial<TOnboardingSteps>) => {
+    if (!user) return;
+
+    const payload: Partial<IUser> = {
+      onboarding_step: {
+        ...user.onboarding_step,
+        ...steps,
+      },
+    };
+
+    await userStore.updateCurrentUser(payload);
+  };
+
+  // complete onboarding
+  const finishOnboarding = async () => {
+    if (!user) return;
+
+    await userStore.updateUserOnBoard();
+  };
+
+  useEffect(() => {
+    setTheme("system");
+  }, [setTheme]);
+
+  useEffect(() => {
+    const handleStepChange = async () => {
+      if (!user || !invitations) return;
+
+      const onboardingStep = user.onboarding_step;
+
+      if (!onboardingStep.profile_complete && step !== 1) setStep(1);
+
+      if (onboardingStep.profile_complete) {
+        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4);
+        else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
+          setStep(2);
+      }
+
+      if (
+        onboardingStep.profile_complete &&
+        onboardingStep.workspace_create &&
+        !onboardingStep.workspace_invite &&
+        step !== 3
+      )
+        setStep(3);
+    };
+
+    handleStepChange();
+  }, [user, invitations, step]);
+
+  return (
+    <>
+      {user && step !== null ? (
+        <div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden">
+          <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
+            <div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" />
+            {step === 1 ? (
+              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+                <div className="h-[30px] w-[30px]">
+                  <Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
+                </div>
+              </div>
+            ) : (
+              <div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10">
+                <div className="h-[30px] w-[133px]">
+                  {theme === "light" ? (
+                    <Image src={BlackHorizontalLogo} alt="Plane black logo" />
+                  ) : (
+                    <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+              {user?.email}
+            </div>
+          </div>
+          <div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
+            {step === 1 ? (
+              <UserDetails user={user} />
+            ) : step === 2 ? (
+              <Workspace
+                finishOnboarding={finishOnboarding}
+                stepChange={stepChange}
+                updateLastWorkspace={updateLastWorkspace}
+                user={user}
+                workspaces={workspaces}
+              />
+            ) : step === 3 ? (
+              <InviteMembers
+                finishOnboarding={finishOnboarding}
+                stepChange={stepChange}
+                user={user}
+                workspace={userWorkspaces?.[0]}
+              />
+            ) : (
+              step === 4 && (
+                <JoinWorkspaces
+                  finishOnboarding={finishOnboarding}
+                  stepChange={stepChange}
+                  updateLastWorkspace={updateLastWorkspace}
+                />
+              )
+            )}
+          </div>
+          {step !== 4 && (
+            <div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
+              <div className="w-3/4 md:w-1/5 space-y-1">
+                <p className="text-xs text-custom-text-200">{step} of 3 steps</p>
+                <div className="relative h-1 w-full rounded bg-custom-background-80">
+                  <div
+                    className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
+                    style={{
+                      width: `${((step / 3) * 100).toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="h-screen w-full grid place-items-center">
+          <Spinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+OnboardingPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <UserAuthWrapper>
+      <DefaultLayout>{page}</DefaultLayout>
+    </UserAuthWrapper>
+  );
+};
+
+export default OnboardingPage;
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
new file mode 100644
index 00000000000..c2d3bd9e28c
--- /dev/null
+++ b/web/pages/workspace-invitations/index.tsx
@@ -0,0 +1,146 @@
+import React, { ReactElement } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// swr
+import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+import useUser from "hooks/use-user";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { Spinner } from "@plane/ui";
+// icons
+import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
+// types
+import { NextPageWithLayout } from "types/app";
+// constants
+import { WORKSPACE_INVITATION } from "constants/fetch-keys";
+
+// services
+const workspaceService = new WorkspaceService();
+
+const WorkspaceInvitationPage: NextPageWithLayout = () => {
+  const router = useRouter();
+
+  const { invitation_id, email } = router.query;
+
+  const { user } = useUser();
+
+  const { data: invitationDetail, error } = useSWR(
+    invitation_id && WORKSPACE_INVITATION(invitation_id.toString()),
+    () => (invitation_id ? workspaceService.getWorkspaceInvitation(invitation_id as string) : null)
+  );
+
+  const handleAccept = () => {
+    if (!invitationDetail) return;
+    workspaceService
+      .joinWorkspace(
+        invitationDetail.workspace.slug,
+        invitationDetail.id,
+        {
+          accepted: true,
+          email: invitationDetail.email,
+        },
+        user
+      )
+      .then(() => {
+        if (email === user?.email) {
+          router.push("/invitations");
+        } else {
+          router.push("/");
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center px-3">
+      {invitationDetail ? (
+        <>
+          {error ? (
+            <div className="flex w-full flex-col space-y-4 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
+            </div>
+          ) : (
+            <>
+              {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."
+                  >
+                    <EmptySpaceItem Icon={Boxes} title="Continue to Dashboard" action={() => router.push("/")} />
+                  </EmptySpace>
+                </>
+              ) : (
+                <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."
+                >
+                  <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
+                  <EmptySpaceItem
+                    Icon={X}
+                    title="Ignore"
+                    action={() => {
+                      router.push("/");
+                    }}
+                  />
+                </EmptySpace>
+              )}
+            </>
+          )}
+        </>
+      ) : error ? (
+        <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."
+          link={{ text: "Or start from an empty project", href: "/" }}
+        >
+          {!user ? (
+            <EmptySpaceItem
+              Icon={User2}
+              title="Sign in to continue"
+              action={() => {
+                router.push("/");
+              }}
+            />
+          ) : (
+            <EmptySpaceItem
+              Icon={Boxes}
+              title="Continue to Dashboard"
+              action={() => {
+                router.push("/");
+              }}
+            />
+          )}
+          <EmptySpaceItem
+            Icon={Star}
+            title="Star us on GitHub"
+            action={() => {
+              router.push("https://github.com/makeplane");
+            }}
+          />
+          <EmptySpaceItem
+            Icon={Share2}
+            title="Join our community of active creators"
+            action={() => {
+              router.push("https://discord.com/invite/8SR2N9PAcJ");
+            }}
+          />
+        </EmptySpace>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  );
+};
+
+WorkspaceInvitationPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default WorkspaceInvitationPage;
diff --git a/web/postcss.config.js b/web/postcss.config.js
new file mode 100644
index 00000000000..6887c82624a
--- /dev/null
+++ b/web/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/space/public/404.svg b/web/public/404.svg
similarity index 100%
rename from apps/space/public/404.svg
rename to web/public/404.svg
diff --git a/apps/app/public/animated-icons/uploading.json b/web/public/animated-icons/uploading.json
similarity index 100%
rename from apps/app/public/animated-icons/uploading.json
rename to web/public/animated-icons/uploading.json
diff --git a/apps/app/public/attachment/audio-icon.png b/web/public/attachment/audio-icon.png
similarity index 100%
rename from apps/app/public/attachment/audio-icon.png
rename to web/public/attachment/audio-icon.png
diff --git a/apps/app/public/attachment/css-icon.png b/web/public/attachment/css-icon.png
similarity index 100%
rename from apps/app/public/attachment/css-icon.png
rename to web/public/attachment/css-icon.png
diff --git a/apps/app/public/attachment/csv-icon.png b/web/public/attachment/csv-icon.png
similarity index 100%
rename from apps/app/public/attachment/csv-icon.png
rename to web/public/attachment/csv-icon.png
diff --git a/apps/app/public/attachment/default-icon.png b/web/public/attachment/default-icon.png
similarity index 100%
rename from apps/app/public/attachment/default-icon.png
rename to web/public/attachment/default-icon.png
diff --git a/apps/app/public/attachment/doc-icon.png b/web/public/attachment/doc-icon.png
similarity index 100%
rename from apps/app/public/attachment/doc-icon.png
rename to web/public/attachment/doc-icon.png
diff --git a/apps/app/public/attachment/excel-icon.png b/web/public/attachment/excel-icon.png
similarity index 100%
rename from apps/app/public/attachment/excel-icon.png
rename to web/public/attachment/excel-icon.png
diff --git a/apps/app/public/attachment/figma-icon.png b/web/public/attachment/figma-icon.png
similarity index 100%
rename from apps/app/public/attachment/figma-icon.png
rename to web/public/attachment/figma-icon.png
diff --git a/apps/app/public/attachment/html-icon.png b/web/public/attachment/html-icon.png
similarity index 100%
rename from apps/app/public/attachment/html-icon.png
rename to web/public/attachment/html-icon.png
diff --git a/apps/app/public/attachment/img-icon.png b/web/public/attachment/img-icon.png
similarity index 100%
rename from apps/app/public/attachment/img-icon.png
rename to web/public/attachment/img-icon.png
diff --git a/apps/app/public/attachment/jpg-icon.png b/web/public/attachment/jpg-icon.png
similarity index 100%
rename from apps/app/public/attachment/jpg-icon.png
rename to web/public/attachment/jpg-icon.png
diff --git a/apps/app/public/attachment/js-icon.png b/web/public/attachment/js-icon.png
similarity index 100%
rename from apps/app/public/attachment/js-icon.png
rename to web/public/attachment/js-icon.png
diff --git a/apps/app/public/attachment/pdf-icon.png b/web/public/attachment/pdf-icon.png
similarity index 100%
rename from apps/app/public/attachment/pdf-icon.png
rename to web/public/attachment/pdf-icon.png
diff --git a/apps/app/public/attachment/png-icon.png b/web/public/attachment/png-icon.png
similarity index 100%
rename from apps/app/public/attachment/png-icon.png
rename to web/public/attachment/png-icon.png
diff --git a/apps/app/public/attachment/svg-icon.png b/web/public/attachment/svg-icon.png
similarity index 100%
rename from apps/app/public/attachment/svg-icon.png
rename to web/public/attachment/svg-icon.png
diff --git a/apps/app/public/attachment/txt-icon.png b/web/public/attachment/txt-icon.png
similarity index 100%
rename from apps/app/public/attachment/txt-icon.png
rename to web/public/attachment/txt-icon.png
diff --git a/apps/app/public/attachment/video-icon.png b/web/public/attachment/video-icon.png
similarity index 100%
rename from apps/app/public/attachment/video-icon.png
rename to web/public/attachment/video-icon.png
diff --git a/apps/app/public/auth/project-not-authorized.svg b/web/public/auth/project-not-authorized.svg
similarity index 100%
rename from apps/app/public/auth/project-not-authorized.svg
rename to web/public/auth/project-not-authorized.svg
diff --git a/apps/app/public/auth/workspace-not-authorized.svg b/web/public/auth/workspace-not-authorized.svg
similarity index 100%
rename from apps/app/public/auth/workspace-not-authorized.svg
rename to web/public/auth/workspace-not-authorized.svg
diff --git a/apps/app/public/empty-state/analytics.svg b/web/public/empty-state/analytics.svg
similarity index 100%
rename from apps/app/public/empty-state/analytics.svg
rename to web/public/empty-state/analytics.svg
diff --git a/apps/app/public/empty-state/cycle.svg b/web/public/empty-state/cycle.svg
similarity index 100%
rename from apps/app/public/empty-state/cycle.svg
rename to web/public/empty-state/cycle.svg
diff --git a/apps/app/public/empty-state/dashboard.svg b/web/public/empty-state/dashboard.svg
similarity index 100%
rename from apps/app/public/empty-state/dashboard.svg
rename to web/public/empty-state/dashboard.svg
diff --git a/apps/app/public/empty-state/empty_bar_graph.svg b/web/public/empty-state/empty_bar_graph.svg
similarity index 100%
rename from apps/app/public/empty-state/empty_bar_graph.svg
rename to web/public/empty-state/empty_bar_graph.svg
diff --git a/apps/app/public/empty-state/empty_graph.svg b/web/public/empty-state/empty_graph.svg
similarity index 100%
rename from apps/app/public/empty-state/empty_graph.svg
rename to web/public/empty-state/empty_graph.svg
diff --git a/web/public/empty-state/empty_label.svg b/web/public/empty-state/empty_label.svg
new file mode 100644
index 00000000000..c664da6f47e
--- /dev/null
+++ b/web/public/empty-state/empty_label.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 3.33203H3.33331V19.9987L18.8166 35.482C20.3833 37.0487 22.95 37.0487 24.5166 35.482L35.4833 24.5154C37.05 22.9487 37.05 20.382 35.4833 18.8154L20 3.33203Z" fill="#CED4DA" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6667 11.668H11.6834" stroke="#E9ECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/public/empty-state/empty_members.svg b/web/public/empty-state/empty_members.svg
new file mode 100644
index 00000000000..6672c587bfd
--- /dev/null
+++ b/web/public/empty-state/empty_members.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_656_27784)">
+<path d="M24.8113 22.6226C30.23 22.6226 34.6226 18.23 34.6226 12.8113C34.6226 7.39268 30.23 3 24.8113 3C19.3927 3 15 7.39268 15 12.8113C15 18.23 19.3927 22.6226 24.8113 22.6226Z" fill="#E9ECEF"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833" fill="#CED4DA"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833C10.5708 47.729 38.3358 49.5686 41.6604 39.4833Z" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.4427 37.888C41.9639 39.9507 39.7091 42.6049 36.6233 44.3074C33.5374 46.0099 29.8569 46.6995 25.4928 46.6995C21.1288 46.6995 16.9435 45.743 13.8576 44.0405C10.6678 42.8396 7.44345 39.8189 9.03816 37.6211L25.4928 37.6211L41.4427 37.888Z" fill="#CED4DA"/>
+</g>
+<defs>
+<clipPath id="clip0_656_27784">
+<rect width="47.0943" height="47.0943" fill="white" transform="translate(0.452881 0.820312)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/app/public/empty-state/empty_users.svg b/web/public/empty-state/empty_users.svg
similarity index 100%
rename from apps/app/public/empty-state/empty_users.svg
rename to web/public/empty-state/empty_users.svg
diff --git a/apps/app/public/empty-state/estimate.svg b/web/public/empty-state/estimate.svg
similarity index 100%
rename from apps/app/public/empty-state/estimate.svg
rename to web/public/empty-state/estimate.svg
diff --git a/apps/app/public/empty-state/integration.svg b/web/public/empty-state/integration.svg
similarity index 100%
rename from apps/app/public/empty-state/integration.svg
rename to web/public/empty-state/integration.svg
diff --git a/apps/app/public/empty-state/invitation.svg b/web/public/empty-state/invitation.svg
similarity index 100%
rename from apps/app/public/empty-state/invitation.svg
rename to web/public/empty-state/invitation.svg
diff --git a/apps/app/public/empty-state/issue-archive.svg b/web/public/empty-state/issue-archive.svg
similarity index 100%
rename from apps/app/public/empty-state/issue-archive.svg
rename to web/public/empty-state/issue-archive.svg
diff --git a/apps/app/public/empty-state/issue.svg b/web/public/empty-state/issue.svg
similarity index 100%
rename from apps/app/public/empty-state/issue.svg
rename to web/public/empty-state/issue.svg
diff --git a/apps/app/public/empty-state/label.svg b/web/public/empty-state/label.svg
similarity index 100%
rename from apps/app/public/empty-state/label.svg
rename to web/public/empty-state/label.svg
diff --git a/apps/app/public/empty-state/module.svg b/web/public/empty-state/module.svg
similarity index 100%
rename from apps/app/public/empty-state/module.svg
rename to web/public/empty-state/module.svg
diff --git a/apps/app/public/empty-state/my-issues.svg b/web/public/empty-state/my-issues.svg
similarity index 100%
rename from apps/app/public/empty-state/my-issues.svg
rename to web/public/empty-state/my-issues.svg
diff --git a/apps/app/public/empty-state/notification.svg b/web/public/empty-state/notification.svg
similarity index 100%
rename from apps/app/public/empty-state/notification.svg
rename to web/public/empty-state/notification.svg
diff --git a/apps/app/public/empty-state/page.svg b/web/public/empty-state/page.svg
similarity index 100%
rename from apps/app/public/empty-state/page.svg
rename to web/public/empty-state/page.svg
diff --git a/apps/app/public/empty-state/project.svg b/web/public/empty-state/project.svg
similarity index 100%
rename from apps/app/public/empty-state/project.svg
rename to web/public/empty-state/project.svg
diff --git a/apps/app/public/empty-state/recent_activity.svg b/web/public/empty-state/recent_activity.svg
similarity index 100%
rename from apps/app/public/empty-state/recent_activity.svg
rename to web/public/empty-state/recent_activity.svg
diff --git a/apps/app/public/empty-state/state_graph.svg b/web/public/empty-state/state_graph.svg
similarity index 93%
rename from apps/app/public/empty-state/state_graph.svg
rename to web/public/empty-state/state_graph.svg
index 07337991ee1..651ea347498 100644
--- a/apps/app/public/empty-state/state_graph.svg
+++ b/web/public/empty-state/state_graph.svg
@@ -2,25 +2,25 @@
 <mask id="path-1-inside-1_6456_90192" fill="white">
 <path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z"/>
 </mask>
-<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
+<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
 <mask id="path-2-inside-2_6456_90192" fill="white">
 <path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
+<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
 <mask id="path-3-inside-3_6456_90192" fill="white">
 <path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
+<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
 <mask id="path-4-inside-4_6456_90192" fill="white">
 <path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
+<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
 <mask id="path-5-inside-5_6456_90192" fill="white">
 <path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
+<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
 <mask id="path-6-inside-6_6456_90192" fill="white">
 <path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
+<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
 </svg>
diff --git a/apps/app/public/empty-state/view.svg b/web/public/empty-state/view.svg
similarity index 100%
rename from apps/app/public/empty-state/view.svg
rename to web/public/empty-state/view.svg
diff --git a/web/public/favicon/android-chrome-192x192.png b/web/public/favicon/android-chrome-192x192.png
new file mode 100644
index 00000000000..62e95acfc55
Binary files /dev/null and b/web/public/favicon/android-chrome-192x192.png differ
diff --git a/web/public/favicon/android-chrome-512x512.png b/web/public/favicon/android-chrome-512x512.png
new file mode 100644
index 00000000000..41400832b31
Binary files /dev/null and b/web/public/favicon/android-chrome-512x512.png differ
diff --git a/web/public/favicon/apple-touch-icon.png b/web/public/favicon/apple-touch-icon.png
new file mode 100644
index 00000000000..5273d4951db
Binary files /dev/null and b/web/public/favicon/apple-touch-icon.png differ
diff --git a/web/public/favicon/favicon-16x16.png b/web/public/favicon/favicon-16x16.png
new file mode 100644
index 00000000000..8ddbd49c043
Binary files /dev/null and b/web/public/favicon/favicon-16x16.png differ
diff --git a/web/public/favicon/favicon-32x32.png b/web/public/favicon/favicon-32x32.png
new file mode 100644
index 00000000000..80cbe7a68fd
Binary files /dev/null and b/web/public/favicon/favicon-32x32.png differ
diff --git a/web/public/favicon/favicon.ico b/web/public/favicon/favicon.ico
new file mode 100644
index 00000000000..9094a07c786
Binary files /dev/null and b/web/public/favicon/favicon.ico differ
diff --git a/web/public/favicon/site.webmanifest b/web/public/favicon/site.webmanifest
new file mode 100644
index 00000000000..45dc8a20658
--- /dev/null
+++ b/web/public/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/apps/app/public/logos/github-black.png b/web/public/logos/github-black.png
similarity index 100%
rename from apps/app/public/logos/github-black.png
rename to web/public/logos/github-black.png
diff --git a/apps/app/public/logos/github-square.png b/web/public/logos/github-square.png
similarity index 100%
rename from apps/app/public/logos/github-square.png
rename to web/public/logos/github-square.png
diff --git a/apps/app/public/logos/github-white.png b/web/public/logos/github-white.png
similarity index 100%
rename from apps/app/public/logos/github-white.png
rename to web/public/logos/github-white.png
diff --git a/apps/app/public/mac-command.svg b/web/public/mac-command.svg
similarity index 100%
rename from apps/app/public/mac-command.svg
rename to web/public/mac-command.svg
diff --git a/apps/app/public/onboarding/cycles.svg b/web/public/onboarding/cycles.svg
similarity index 100%
rename from apps/app/public/onboarding/cycles.svg
rename to web/public/onboarding/cycles.svg
diff --git a/apps/app/public/onboarding/cycles.webp b/web/public/onboarding/cycles.webp
similarity index 100%
rename from apps/app/public/onboarding/cycles.webp
rename to web/public/onboarding/cycles.webp
diff --git a/apps/app/public/onboarding/issues.svg b/web/public/onboarding/issues.svg
similarity index 100%
rename from apps/app/public/onboarding/issues.svg
rename to web/public/onboarding/issues.svg
diff --git a/apps/app/public/onboarding/issues.webp b/web/public/onboarding/issues.webp
similarity index 100%
rename from apps/app/public/onboarding/issues.webp
rename to web/public/onboarding/issues.webp
diff --git a/apps/app/public/onboarding/modules.svg b/web/public/onboarding/modules.svg
similarity index 100%
rename from apps/app/public/onboarding/modules.svg
rename to web/public/onboarding/modules.svg
diff --git a/apps/app/public/onboarding/modules.webp b/web/public/onboarding/modules.webp
similarity index 100%
rename from apps/app/public/onboarding/modules.webp
rename to web/public/onboarding/modules.webp
diff --git a/apps/app/public/onboarding/pages.svg b/web/public/onboarding/pages.svg
similarity index 100%
rename from apps/app/public/onboarding/pages.svg
rename to web/public/onboarding/pages.svg
diff --git a/apps/app/public/onboarding/pages.webp b/web/public/onboarding/pages.webp
similarity index 100%
rename from apps/app/public/onboarding/pages.webp
rename to web/public/onboarding/pages.webp
diff --git a/apps/app/public/onboarding/views.svg b/web/public/onboarding/views.svg
similarity index 100%
rename from apps/app/public/onboarding/views.svg
rename to web/public/onboarding/views.svg
diff --git a/apps/app/public/onboarding/views.webp b/web/public/onboarding/views.webp
similarity index 100%
rename from apps/app/public/onboarding/views.webp
rename to web/public/onboarding/views.webp
diff --git a/web/public/plane-logos/black-horizontal-with-blue-logo.svg b/web/public/plane-logos/black-horizontal-with-blue-logo.svg
new file mode 100644
index 00000000000..ae79919fc55
--- /dev/null
+++ b/web/public/plane-logos/black-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#262626"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#262626"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#262626"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#262626"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#262626"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/public/plane-logos/blue-without-text.png b/web/public/plane-logos/blue-without-text.png
new file mode 100644
index 00000000000..ea94aec7920
Binary files /dev/null and b/web/public/plane-logos/blue-without-text.png differ
diff --git a/web/public/plane-logos/white-horizontal-with-blue-logo.svg b/web/public/plane-logos/white-horizontal-with-blue-logo.svg
new file mode 100644
index 00000000000..1f09cc34ab6
--- /dev/null
+++ b/web/public/plane-logos/white-horizontal-with-blue-logo.svg
@@ -0,0 +1,17 @@
+<svg width="133" height="30" viewBox="0 0 133 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_372_3489)">
+<path d="M35.7598 0.00235398H44.7151C46.4036 -0.0301787 48.0819 0.274777 49.6538 0.899752C51.0897 1.48694 52.3232 2.48876 53.2005 3.7804C54.1414 5.27171 54.6058 7.02009 54.5305 8.78788C54.6025 10.5948 54.1394 12.3823 53.2005 13.921C52.338 15.271 51.1056 16.3375 49.6538 16.9901C48.0968 17.6881 46.409 18.0371 44.7062 18.0131H40.3882V30.0024H35.7598V0.00235398ZM40.3882 14.1812H43.4472C44.5022 14.1924 45.5515 14.0225 46.5505 13.6787C47.4425 13.3684 48.2171 12.7851 48.7672 12.0095C49.3447 11.1092 49.6299 10.0487 49.5829 8.97633C49.6547 7.88162 49.368 6.79348 48.7672 5.88031C48.2009 5.1354 47.4202 4.58669 46.5328 4.30986C45.5354 3.98896 44.4937 3.83143 43.4472 3.84322H40.3882V14.1812Z" fill="#ffffff"/>
+<path d="M63.6538 30.0023H58.9102V0.00234985H63.6538V30.0023Z" fill="#ffffff"/>
+<path d="M83.1961 30.0023V26.0717C82.9541 26.623 82.6146 27.1249 82.1941 27.5524C81.5462 28.2456 80.7841 28.8194 79.942 29.2485C78.8993 29.7731 77.7457 30.0319 76.5816 30.0023C74.9896 30.0315 73.4209 29.6134 72.0497 28.7943C70.6785 27.9753 69.5585 26.7874 68.8144 25.3628C68.0116 23.8079 67.6091 22.0734 67.644 20.3194C67.6069 18.5595 68.0094 16.8186 68.8144 15.2581C69.5577 13.8315 70.677 12.6411 72.048 11.819C73.419 10.9969 74.9882 10.5752 76.5816 10.6006C77.7134 10.57 78.8375 10.7969 79.8711 11.2647C80.698 11.6453 81.4539 12.1675 82.1055 12.8082C82.5675 13.2374 82.9256 13.7687 83.1518 14.3607V11.139H87.8333V29.9844L83.1961 30.0023ZM72.299 20.3194C72.2745 21.3974 72.5412 22.4617 73.0704 23.3975C73.548 24.2312 74.2333 24.9235 75.0579 25.4053C75.8825 25.8872 76.8175 26.1417 77.7697 26.1435C78.7342 26.1735 79.6872 25.9254 80.5177 25.4281C81.3482 24.9308 82.0218 24.2047 82.4602 23.3347C82.9374 22.3947 83.1751 21.349 83.1518 20.2925C83.1763 19.233 82.9385 18.1841 82.4602 17.2413C81.9964 16.419 81.3267 15.7349 80.5183 15.2581C79.6888 14.7549 78.7367 14.4969 77.7697 14.5133C76.8353 14.5149 75.9179 14.7656 75.1097 15.2401C74.2725 15.73 73.5757 16.4321 73.0881 17.2772C72.5606 18.2015 72.288 19.2521 72.299 20.3194Z" fill="#ffffff"/>
+<path d="M103.536 10.6096C104.757 10.611 105.964 10.8677 107.082 11.3634C108.238 11.8795 109.223 12.7205 109.92 13.7864C110.714 15.0781 111.104 16.5829 111.037 18.1029V30.0023H106.293V18.9733C106.348 18.3184 106.273 17.6591 106.074 17.0337C105.874 16.4082 105.554 15.8291 105.132 15.3299C104.739 14.9381 104.272 14.6317 103.758 14.4296C103.244 14.2274 102.695 14.1337 102.144 14.1543C101.323 14.1599 100.521 14.3994 99.8295 14.8453C99.0977 15.3167 98.4893 15.9602 98.0562 16.7209C97.5907 17.539 97.3518 18.469 97.3646 19.4131V30.0023H92.6387V11.157H97.3646V14.244C97.5688 13.6234 97.9368 13.0711 98.4286 12.6467C99.081 12.0457 99.8309 11.563 100.645 11.2198C101.557 10.8175 102.541 10.6097 103.536 10.6096Z" fill="#ffffff"/>
+<path d="M118.973 21.4322C118.987 22.346 119.221 23.2426 119.656 24.0436C120.095 24.8189 120.753 25.4438 121.545 25.8384C122.494 26.3044 123.541 26.5293 124.595 26.4935C125.5 26.5093 126.4 26.3635 127.255 26.0628C127.932 25.8094 128.569 25.4556 129.143 25.0128C129.56 24.6821 129.93 24.2957 130.243 23.8642L132.335 26.7448C131.854 27.3909 131.273 27.9545 130.615 28.414C129.834 28.9511 128.963 29.3402 128.044 29.5626C126.808 29.8643 125.538 30.0031 124.267 29.9754C122.476 30.0226 120.705 29.599 119.124 28.746C117.69 27.949 116.513 26.7492 115.737 25.291C114.909 23.68 114.498 21.8834 114.54 20.0682C114.532 18.3948 114.924 16.7444 115.684 15.2581C116.41 13.8364 117.524 12.6558 118.894 11.857C120.412 11.0607 122.093 10.6338 123.803 10.6105C125.513 10.5871 127.205 10.9678 128.744 11.7224C130.081 12.4518 131.174 13.5669 131.883 14.9261C132.667 16.483 133.051 18.2141 133 19.9605C133 20.0771 133 20.3284 133 20.6963C133.005 20.9431 132.984 21.1897 132.938 21.4322H118.973ZM128.567 17.9503C128.53 17.3776 128.37 16.8201 128.097 16.317C127.762 15.6679 127.264 15.12 126.652 14.7287C125.854 14.2334 124.926 13.9955 123.992 14.0466C123.03 14.0014 122.076 14.2282 121.234 14.7017C120.661 15.0464 120.172 15.5175 119.804 16.08C119.435 16.6424 119.197 17.2817 119.106 17.9503H128.567Z" fill="#ffffff"/>
+<path d="M29.127 0.271576H9.70898V10.0981H19.418V19.9246H29.127V0.271576Z" fill="#3F76FF"/>
+<path d="M9.709 10.0981H0V19.9066H9.709V10.0981Z" fill="#3F76FF"/>
+<path d="M19.4266 19.9246H9.73535V29.7511H19.4266V19.9246Z" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_372_3489">
+<rect width="133" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/public/plane-logos/white-horizontal.svg b/web/public/plane-logos/white-horizontal.svg
new file mode 100644
index 00000000000..13e2dbb9fa8
--- /dev/null
+++ b/web/public/plane-logos/white-horizontal.svg
@@ -0,0 +1,17 @@
+<svg width="178" height="40" viewBox="0 0 178 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_435_3747)">
+<path d="M47.8574 -4.66756e-06H59.8428C62.1026 -0.0433815 64.3487 0.363226 66.4525 1.19653C68.3742 1.97944 70.025 3.3152 71.1992 5.03739C72.4584 7.02581 73.0799 9.35697 72.9792 11.714C73.0756 14.1233 72.4557 16.5067 71.1992 18.5582C70.0448 20.3582 68.3954 21.7802 66.4525 22.6503C64.3686 23.581 62.1098 24.0463 59.8309 24.0144H54.0518V40H47.8574V-4.66756e-06ZM54.0518 18.9052H58.1458C59.5579 18.9201 60.9622 18.6935 62.2992 18.2351C63.493 17.8214 64.5297 17.0436 65.2658 16.0096C66.0388 14.8091 66.4205 13.3952 66.3576 11.9653C66.4536 10.5057 66.0699 9.05483 65.2658 7.83727C64.508 6.84406 63.4631 6.11244 62.2754 5.74334C60.9405 5.31547 59.5464 5.10542 58.1458 5.12114H54.0518V18.9052Z" fill="#F2F2F2"/>
+<path d="M85.1905 40H78.8418V0H85.1905V40Z" fill="#F2F2F2"/>
+<path d="M111.345 40V34.7592C111.021 35.4943 110.566 36.1634 110.004 36.7335C109.136 37.6576 108.117 38.4228 106.99 38.9949C105.594 39.6944 104.05 40.0394 102.492 40C100.362 40.0389 98.262 39.4814 96.4269 38.3893C94.5917 37.2972 93.0929 35.7134 92.0969 33.8139C91.0225 31.7408 90.4838 29.4281 90.5305 27.0894C90.4808 24.7429 91.0196 22.4217 92.0969 20.341C93.0918 18.4388 94.5897 16.8517 96.4246 15.7555C98.2595 14.6594 100.36 14.0971 102.492 14.131C104.007 14.0902 105.511 14.3928 106.895 15.0165C108.001 15.524 109.013 16.2202 109.885 17.0745C110.503 17.6468 110.983 18.3551 111.285 19.1445V14.8489H117.551V39.9761L111.345 40ZM96.7605 27.0894C96.7277 28.5267 97.0847 29.9458 97.7929 31.1935C98.4321 32.3051 99.3493 33.2282 100.453 33.8706C101.556 34.5131 102.808 34.8525 104.082 34.8549C105.373 34.8949 106.649 34.5641 107.76 33.901C108.871 33.2379 109.773 32.2699 110.36 31.1098C110.998 29.8565 111.317 28.4623 111.285 27.0536C111.318 25.6409 111 24.2424 110.36 22.9853C109.739 21.8888 108.843 20.9767 107.761 20.341C106.651 19.6701 105.376 19.3261 104.082 19.3479C102.832 19.3501 101.604 19.6844 100.522 20.3171C99.4017 20.9702 98.4693 21.9063 97.8166 23.0332C97.1106 24.2655 96.7459 25.6664 96.7605 27.0894Z" fill="#F2F2F2"/>
+<path d="M138.567 14.143C140.201 14.1449 141.816 14.4871 143.313 15.1481C144.86 15.8362 146.178 16.9575 147.111 18.3787C148.174 20.101 148.695 22.1074 148.606 24.134V40H142.257V25.2946C142.33 24.4215 142.23 23.5424 141.963 22.7085C141.696 21.8745 141.268 21.1023 140.703 20.4367C140.177 19.9144 139.551 19.5058 138.864 19.2363C138.176 18.9667 137.441 18.8418 136.703 18.8693C135.606 18.8767 134.532 19.196 133.606 19.7906C132.627 20.4192 131.813 21.2771 131.233 22.2914C130.61 23.3822 130.29 24.6223 130.307 25.8809V40H123.982V14.8729H130.307V18.9889C130.581 18.1614 131.073 17.425 131.731 16.8591C132.605 16.0578 133.608 15.4143 134.698 14.9566C135.918 14.4202 137.235 14.1432 138.567 14.143Z" fill="#F2F2F2"/>
+<path d="M159.226 28.5731C159.245 29.7916 159.558 30.987 160.14 32.055C160.728 33.0887 161.608 33.922 162.668 34.4481C163.938 35.0694 165.339 35.3692 166.75 35.3216C167.961 35.3426 169.166 35.1482 170.31 34.7472C171.217 34.4094 172.068 33.9376 172.837 33.3473C173.394 32.9063 173.889 32.3911 174.309 31.8157L177.109 35.6566C176.465 36.5181 175.688 37.2695 174.807 37.8821C173.761 38.5983 172.596 39.1172 171.366 39.4137C169.711 39.8159 168.012 40.0009 166.311 39.9641C163.915 40.027 161.543 39.4622 159.428 38.3249C157.508 37.2622 155.934 35.6624 154.895 33.7182C153.787 31.5703 153.236 29.1747 153.293 26.7544C153.282 24.5233 153.807 22.3227 154.824 20.341C155.795 18.4454 157.286 16.8713 159.12 15.8062C161.152 14.7444 163.402 14.1753 165.69 14.1442C167.979 14.113 170.243 14.6206 172.303 15.6267C174.093 16.5992 175.555 18.086 176.504 19.8983C177.552 21.9742 178.067 24.2823 177.999 26.6108C177.999 26.7664 177.999 27.1014 177.999 27.592C178.005 27.921 177.977 28.2498 177.916 28.5731H159.226ZM172.066 23.9306C172.017 23.167 171.802 22.4237 171.437 21.7529C170.989 20.8874 170.322 20.1568 169.503 19.6351C168.435 18.9747 167.194 18.6575 165.943 18.7257C164.656 18.6653 163.378 18.9678 162.252 19.5992C161.485 20.0587 160.831 20.6868 160.338 21.4368C159.844 22.1867 159.526 23.0391 159.404 23.9306H172.066Z" fill="#F2F2F2"/>
+<path d="M38.9821 0.358963H12.9941V13.461H25.9881V26.563H38.9821V0.358963Z" fill="#F2F2F2"/>
+<path d="M12.994 13.461H0V26.539H12.994V13.461Z" fill="#F2F2F2"/>
+<path d="M25.9996 26.563H13.0293V39.665H25.9996V26.563Z" fill="#F2F2F2"/>
+</g>
+<defs>
+<clipPath id="clip0_435_3747">
+<rect width="178" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/app/public/services/csv.svg b/web/public/services/csv.svg
similarity index 100%
rename from apps/app/public/services/csv.svg
rename to web/public/services/csv.svg
diff --git a/apps/app/public/services/excel.svg b/web/public/services/excel.svg
similarity index 100%
rename from apps/app/public/services/excel.svg
rename to web/public/services/excel.svg
diff --git a/apps/app/public/services/github.png b/web/public/services/github.png
similarity index 100%
rename from apps/app/public/services/github.png
rename to web/public/services/github.png
diff --git a/apps/app/public/services/jira.png b/web/public/services/jira.png
similarity index 100%
rename from apps/app/public/services/jira.png
rename to web/public/services/jira.png
diff --git a/apps/app/public/services/json.svg b/web/public/services/json.svg
similarity index 92%
rename from apps/app/public/services/json.svg
rename to web/public/services/json.svg
index 4c2df222236..0fe32e276d4 100644
--- a/apps/app/public/services/json.svg
+++ b/web/public/services/json.svg
@@ -2,7 +2,7 @@
 <g clip-path="url(#clip0_6990_114394)">
 <rect width="24" height="24" rx="12" fill="#FAFAFA"/>
 <path d="M13.4583 6.1665H8.49992C8.1905 6.1665 7.89375 6.28942 7.67496 6.50821C7.45617 6.72701 7.33325 7.02375 7.33325 7.33317V16.6665C7.33325 16.9759 7.45617 17.2727 7.67496 17.4915C7.89375 17.7103 8.1905 17.8332 8.49992 17.8332H15.4999C15.8093 17.8332 16.1061 17.7103 16.3249 17.4915C16.5437 17.2727 16.6666 16.9759 16.6666 16.6665V9.37484L13.4583 6.1665Z" stroke="#3F76FF" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" strokeWidth="0.75" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_6990_114394">
diff --git a/apps/app/public/services/slack.png b/web/public/services/slack.png
similarity index 100%
rename from apps/app/public/services/slack.png
rename to web/public/services/slack.png
diff --git a/apps/app/public/site.webmanifest.json b/web/public/site.webmanifest.json
similarity index 100%
rename from apps/app/public/site.webmanifest.json
rename to web/public/site.webmanifest.json
diff --git a/apps/app/public/sw.js b/web/public/sw.js
similarity index 100%
rename from apps/app/public/sw.js
rename to web/public/sw.js
diff --git a/apps/app/public/sw.js.map b/web/public/sw.js.map
similarity index 100%
rename from apps/app/public/sw.js.map
rename to web/public/sw.js.map
diff --git a/web/public/theme-mode/custom-mode.svg b/web/public/theme-mode/custom-mode.svg
new file mode 100644
index 00000000000..01be18d5b40
--- /dev/null
+++ b/web/public/theme-mode/custom-mode.svg
@@ -0,0 +1,54 @@
+<svg width="201" height="150" viewBox="0 0 201 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2267_36125" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="101" height="150">
+<rect width="101" height="150" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2267_36125)">
+<path d="M1.25 4.00001C1.25 1.92894 2.92893 0.25 5 0.25H225C227.071 0.25 228.75 1.92893 228.75 4V189.75H1.25V4.00001Z" fill="#231035" stroke="#3F2B58" stroke-width="0.5"/>
+<path d="M2 4C2 2.34315 3.34315 1 5 1H204C205.657 1 207 2.34315 207 4V10H2V4Z" fill="#32184C"/>
+<line x1="51.25" y1="10" x2="51.25" y2="190" stroke="#3F2B58" stroke-width="0.5"/>
+<line x1="1" y1="9.75" x2="211" y2="9.75002" stroke="#3F2B58" stroke-width="0.5"/>
+<rect x="5" y="14" width="36" height="6" rx="1" fill="#572D81"/>
+<rect x="5" y="26" width="39" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="35" width="31" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="53" width="26" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="80" width="34" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="44" width="35" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="62" width="29" height="4" rx="1" fill="#371B52"/>
+<rect x="5" y="71" width="38" height="4" rx="1" fill="#371B52"/>
+<rect x="43" y="14" width="6" height="6" rx="3" fill="#572D81"/>
+<rect x="66" y="44" width="51" height="4" rx="1" fill="#572D81"/>
+<rect x="66" y="53" width="132" height="4" rx="1" fill="#371B52"/>
+<rect x="66" y="60" width="97" height="4" rx="1" fill="#371B52"/>
+<rect x="75" y="76" width="52" height="4" rx="1" fill="#371B52"/>
+<rect x="75" y="87" width="78" height="4" rx="1" fill="#371B52"/>
+<rect x="75" y="98" width="71" height="4" rx="1" fill="#371B52"/>
+<rect x="75" y="109" width="58" height="4" rx="1" fill="#371B52"/>
+<rect x="66" y="75" width="6" height="6" rx="3" fill="#401E60"/>
+<rect x="66" y="86" width="6" height="6" rx="3" fill="#401E60"/>
+<rect x="66" y="97" width="6" height="6" rx="3" fill="#401E60"/>
+<rect x="66" y="108" width="6" height="6" rx="3" fill="#401E60"/>
+<rect x="66" y="26" width="12" height="12" rx="6" fill="#572D81"/>
+<rect x="5" y="4" width="3" height="3" rx="1.5" fill="#EF4444"/>
+<rect x="9" y="4" width="3" height="3" rx="1.5" fill="#FCD34D"/>
+<rect x="13" y="4" width="3" height="3" rx="1.5" fill="#4ADE80"/>
+</g>
+<mask id="mask1_2267_36125" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="101" y="0" width="100" height="150">
+<rect x="101" width="100" height="150" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_2267_36125)">
+<path d="M0.5 4.00001C0.5 2.06701 2.067 0.5 4 0.5H224C225.933 0.5 227.5 2.067 227.5 4V189.5H0.5V4.00001Z" fill="#000C1B" stroke="#172534"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H203C204.657 1 206 2.34315 206 4V10H1V4Z" fill="#001936"/>
+<line x1="2.18557e-08" y1="9.75" x2="210" y2="9.75002" stroke="#172534" stroke-width="0.5"/>
+<rect x="65" y="44" width="51" height="4" rx="1" fill="#172B52"/>
+<rect x="65" y="53" width="132" height="4" rx="1" fill="#151E3D"/>
+<rect x="65" y="60" width="97" height="4" rx="1" fill="#151E3D"/>
+<rect x="74" y="76" width="52" height="4" rx="1" fill="#151E3D"/>
+<rect x="74" y="87" width="78" height="4" rx="1" fill="#151E3D"/>
+<rect x="74" y="98" width="71" height="4" rx="1" fill="#151E3D"/>
+<rect x="74" y="109" width="58" height="4" rx="1" fill="#151E3D"/>
+<rect x="129" y="76" width="6" height="4" rx="1" fill="#151E3D"/>
+<rect x="155" y="87" width="6" height="4" rx="1" fill="#151E3D"/>
+<rect x="148" y="98" width="6" height="4" rx="1" fill="#151E3D"/>
+<rect x="135" y="109" width="6" height="4" rx="1" fill="#151E3D"/>
+</g>
+</svg>
diff --git a/web/public/theme-mode/custom-theme-banner.svg b/web/public/theme-mode/custom-theme-banner.svg
new file mode 100644
index 00000000000..b7434cd764e
--- /dev/null
+++ b/web/public/theme-mode/custom-theme-banner.svg
@@ -0,0 +1,33 @@
+<svg width="462" height="536" viewBox="0 0 462 536" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.827922 13.2468C0.827922 6.38804 6.38802 0.827922 13.2468 0.827922H741.818C748.677 0.827922 754.237 6.38802 754.237 13.2468V628.393H0.827922V13.2468Z" fill="white" stroke="#E5E5E5" stroke-width="1.65584"/>
+<path d="M0.827922 13.2468C0.827922 6.38802 6.38802 0.827922 13.2468 0.827922H672.273C677.302 0.827922 681.38 4.90533 681.38 9.93507V32.289H0.827922V13.2468Z" fill="#F5F5F5" stroke="#E5E5E5" stroke-width="1.65584"/>
+<line x1="166.414" y1="33.1162" x2="166.414" y2="629.22" stroke="#E5E5E5" stroke-width="1.65584"/>
+<line x1="-7.23793e-08" y1="32.2883" x2="695.455" y2="32.2882" stroke="#E5E5E5" stroke-width="1.65584"/>
+<rect x="13.25" y="46.3633" width="119.221" height="19.8701" rx="3.31169" fill="#E5E5E5"/>
+<rect x="13.25" y="86.1035" width="129.156" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="115.908" width="102.662" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="175.519" width="86.1039" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="264.935" width="112.597" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="145.714" width="115.909" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="205.324" width="96.039" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="13.25" y="235.129" width="125.844" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="139.094" y="46.3633" width="19.8701" height="19.8701" rx="9.93506" fill="#E5E5E5"/>
+<rect x="215.266" y="145.715" width="168.896" height="13.2468" rx="3.31169" fill="#E5E5E5"/>
+<rect x="397.406" y="145.715" width="43.0519" height="13.2468" rx="3.31169" fill="#3F76FF"/>
+<rect x="215.266" y="175.521" width="437.143" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="215.266" y="198.702" width="321.234" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="245.07" y="251.688" width="172.208" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="245.07" y="288.117" width="258.312" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="245.07" y="324.546" width="235.13" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="245.07" y="360.975" width="192.078" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="427.219" y="251.688" width="19.8701" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="447.078" y="360.975" width="19.8701" height="13.2468" rx="3.31169" fill="#F1F1F1"/>
+<rect x="215.266" y="248.378" width="19.8701" height="19.8701" rx="9.93506" fill="#E5E5E5"/>
+<rect x="215.266" y="284.806" width="19.8701" height="19.8701" rx="9.93506" fill="#E5E5E5"/>
+<rect x="215.266" y="321.234" width="19.8701" height="19.8701" rx="9.93506" fill="#E5E5E5"/>
+<rect x="215.266" y="357.663" width="19.8701" height="19.8701" rx="9.93506" fill="#E5E5E5"/>
+<rect x="215.266" y="86.1045" width="39.7403" height="39.7403" rx="19.8701" fill="#D4D4D4"/>
+<rect x="13.2422" y="13.2471" width="9.93506" height="9.93506" rx="4.96753" fill="#EF4444"/>
+<rect x="26.4922" y="13.2471" width="9.93506" height="9.93506" rx="4.96753" fill="#FCD34D"/>
+<rect x="39.7422" y="13.2471" width="9.93506" height="9.93506" rx="4.96753" fill="#4ADE80"/>
+</svg>
diff --git a/web/public/theme-mode/dark-high-contrast.svg b/web/public/theme-mode/dark-high-contrast.svg
new file mode 100644
index 00000000000..e5839b28600
--- /dev/null
+++ b/web/public/theme-mode/dark-high-contrast.svg
@@ -0,0 +1,34 @@
+<svg width="201" height="151" viewBox="0 0 201 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.25 4.00001C0.25 1.92894 1.92893 0.25 4 0.25H224C226.071 0.25 227.75 1.92893 227.75 4V189.75H0.25V4.00001Z" fill="#171717" stroke="white" stroke-width="0.5"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H203C204.657 1 206 2.34315 206 4V10H1V4Z" fill="#171717"/>
+<line x1="50.25" y1="10" x2="50.25" y2="190" stroke="white" stroke-width="0.5"/>
+<line x1="2.18557e-08" y1="9.75" x2="210" y2="9.75002" stroke="white" stroke-width="0.5"/>
+<rect x="4" y="14" width="36" height="6" rx="1" fill="white"/>
+<rect x="4" y="26" width="39" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="35" width="31" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="53" width="26" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="80" width="34" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="44" width="35" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="62" width="29" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="4" y="71" width="38" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="42" y="14" width="6" height="6" rx="3" fill="white"/>
+<rect x="65" y="44" width="51" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="65" y="53" width="132" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="65" y="60" width="97" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="74" y="76" width="52" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="74" y="87" width="78" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="74" y="98" width="71" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="74" y="109" width="58" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="129" y="76" width="6" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="155" y="87" width="6" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="148" y="98" width="6" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="135" y="109" width="6" height="4" rx="1" fill="#D4D4D4"/>
+<rect x="65" y="75" width="6" height="6" rx="3" fill="white"/>
+<rect x="65" y="86" width="6" height="6" rx="3" fill="white"/>
+<rect x="65" y="97" width="6" height="6" rx="3" fill="white"/>
+<rect x="65" y="108" width="6" height="6" rx="3" fill="white"/>
+<rect x="65" y="26" width="12" height="12" rx="6" fill="#F1F1F1"/>
+<rect x="4" y="4" width="3" height="3" rx="1.5" fill="#EF4444"/>
+<rect x="8" y="4" width="3" height="3" rx="1.5" fill="#FCD34D"/>
+<rect x="12" y="4" width="3" height="3" rx="1.5" fill="#4ADE80"/>
+</svg>
diff --git a/web/public/theme-mode/dark-mode.svg b/web/public/theme-mode/dark-mode.svg
new file mode 100644
index 00000000000..b8c14711c17
--- /dev/null
+++ b/web/public/theme-mode/dark-mode.svg
@@ -0,0 +1,41 @@
+<svg width="201" height="154" viewBox="0 0 201 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2273_36428)">
+<path d="M0.25 4.00001C0.25 1.92894 1.92893 0.25 4 0.25H224C226.071 0.25 227.75 1.92893 227.75 4V189.75H0.25V4.00001Z" fill="#121212" stroke="#262626" stroke-width="0.5"/>
+<path d="M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H203C204.519 0.25 205.75 1.48122 205.75 3V9.75H0.25V4Z" fill="#222222" stroke="#222222" stroke-width="0.5"/>
+<line x1="50.25" y1="10" x2="50.25" y2="190" stroke="#262626" stroke-width="0.5"/>
+<rect x="4" y="14" width="36" height="6" rx="1" fill="#404040"/>
+<rect x="4" y="26" width="39" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="35" width="31" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="53" width="26" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="80" width="34" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="44" width="35" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="62" width="29" height="4" rx="1" fill="#262626"/>
+<rect x="4" y="71" width="38" height="4" rx="1" fill="#262626"/>
+<rect x="42" y="14" width="6" height="6" rx="3" fill="#404040"/>
+<rect x="65" y="44" width="51" height="4" rx="1" fill="#404040"/>
+<rect x="65" y="53" width="132" height="4" rx="1" fill="#262626"/>
+<rect x="65" y="60" width="97" height="4" rx="1" fill="#262626"/>
+<rect x="74" y="76" width="52" height="4" rx="1" fill="#262626"/>
+<rect x="74" y="87" width="78" height="4" rx="1" fill="#262626"/>
+<rect x="74" y="98" width="71" height="4" rx="1" fill="#262626"/>
+<rect x="74" y="109" width="58" height="4" rx="1" fill="#262626"/>
+<rect x="129" y="76" width="6" height="4" rx="1" fill="#262626"/>
+<rect x="155" y="87" width="6" height="4" rx="1" fill="#262626"/>
+<rect x="148" y="98" width="6" height="4" rx="1" fill="#262626"/>
+<rect x="135" y="109" width="6" height="4" rx="1" fill="#262626"/>
+<rect x="65" y="75" width="6" height="6" rx="3" fill="#222222"/>
+<rect x="65" y="86" width="6" height="6" rx="3" fill="#222222"/>
+<rect x="65" y="97" width="6" height="6" rx="3" fill="#222222"/>
+<rect x="65" y="108" width="6" height="6" rx="3" fill="#222222"/>
+<rect x="65" y="26" width="12" height="12" rx="6" fill="#404040"/>
+<rect x="4" y="4" width="3" height="3" rx="1.5" fill="#EF4444"/>
+<rect x="8" y="4" width="3" height="3" rx="1.5" fill="#FCD34D"/>
+<rect x="12" y="4" width="3" height="3" rx="1.5" fill="#4ADE80"/>
+<rect x="121" y="44" width="13" height="4" rx="1" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_2273_36428">
+<rect width="201" height="154" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/public/theme-mode/light-high-contrast.svg b/web/public/theme-mode/light-high-contrast.svg
new file mode 100644
index 00000000000..c2f5ded22be
--- /dev/null
+++ b/web/public/theme-mode/light-high-contrast.svg
@@ -0,0 +1,42 @@
+<svg width="204" height="154" viewBox="0 0 204 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2273_36429)">
+<path d="M0.25 4.00001C0.25 1.92894 1.92893 0.25 4 0.25H224C226.071 0.25 227.75 1.92893 227.75 4V189.75H0.25V4.00001Z" fill="white" stroke="black" stroke-width="0.5"/>
+<path d="M1 4C1 2.34315 2.34315 1 4 1H203C204.657 1 206 2.34315 206 4V10H1V4Z" fill="white"/>
+<line x1="50.25" y1="10" x2="50.25" y2="190" stroke="black" stroke-width="0.5"/>
+<line x1="-2.18557e-08" y1="9.75" x2="210" y2="9.74998" stroke="black" stroke-width="0.5"/>
+<rect x="4" y="14" width="36" height="6" rx="1" fill="#2E2E2E"/>
+<rect x="4" y="26" width="39" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="35" width="31" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="53" width="26" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="80" width="34" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="44" width="35" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="62" width="29" height="4" rx="1" fill="#404040"/>
+<rect x="4" y="71" width="38" height="4" rx="1" fill="#404040"/>
+<rect x="42" y="14" width="6" height="6" rx="3" fill="#2E2E2E"/>
+<rect x="65" y="44" width="51" height="4" rx="1" fill="#2E2E2E"/>
+<rect x="65" y="53" width="132" height="4" rx="1" fill="#404040"/>
+<rect x="65" y="60" width="97" height="4" rx="1" fill="#404040"/>
+<rect x="74" y="76" width="52" height="4" rx="1" fill="#404040"/>
+<rect x="74" y="87" width="78" height="4" rx="1" fill="#404040"/>
+<rect x="74" y="98" width="71" height="4" rx="1" fill="#404040"/>
+<rect x="74" y="109" width="58" height="4" rx="1" fill="#404040"/>
+<rect x="129" y="76" width="6" height="4" rx="1" fill="#404040"/>
+<rect x="155" y="87" width="6" height="4" rx="1" fill="#404040"/>
+<rect x="148" y="98" width="6" height="4" rx="1" fill="#404040"/>
+<rect x="135" y="109" width="6" height="4" rx="1" fill="#404040"/>
+<rect x="65" y="75" width="6" height="6" rx="3" fill="#3A3A3A"/>
+<rect x="65" y="86" width="6" height="6" rx="3" fill="#3A3A3A"/>
+<rect x="65" y="97" width="6" height="6" rx="3" fill="#3A3A3A"/>
+<rect x="65" y="108" width="6" height="6" rx="3" fill="#3A3A3A"/>
+<rect x="65" y="26" width="12" height="12" rx="6" fill="#262626"/>
+<rect x="4" y="4" width="3" height="3" rx="1.5" fill="#EF4444"/>
+<rect x="8" y="4" width="3" height="3" rx="1.5" fill="#FCD34D"/>
+<rect x="12" y="4" width="3" height="3" rx="1.5" fill="#4ADE80"/>
+<rect x="121" y="44" width="13" height="4" rx="1" fill="#3F76FF"/>
+</g>
+<defs>
+<clipPath id="clip0_2273_36429">
+<rect width="204" height="154" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/public/theme-mode/light-mode.svg b/web/public/theme-mode/light-mode.svg
new file mode 100644
index 00000000000..9c7fdae4b8d
--- /dev/null
+++ b/web/public/theme-mode/light-mode.svg
@@ -0,0 +1,42 @@
+<svg width="201" height="154" viewBox="0 0 201 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2273_36427)">
+<path d="M0.25 4.00001C0.25 1.92894 1.92893 0.25 4 0.25H224C226.071 0.25 227.75 1.92893 227.75 4V189.75H0.25V4.00001Z" fill="white" stroke="#E5E5E5" stroke-width="0.5"/>
+<path d="M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H203C204.519 0.25 205.75 1.48122 205.75 3V9.75H0.25V4Z" fill="#F5F5F5" stroke="#E5E5E5" stroke-width="0.5"/>
+<line x1="50.25" y1="10" x2="50.25" y2="190" stroke="#E5E5E5" stroke-width="0.5"/>
+<line x1="-2.18557e-08" y1="9.75" x2="210" y2="9.74998" stroke="#E5E5E5" stroke-width="0.5"/>
+<rect x="4" y="14" width="36" height="6" rx="1" fill="#E5E5E5"/>
+<rect x="4" y="26" width="39" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="35" width="31" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="53" width="26" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="80" width="34" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="44" width="35" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="62" width="29" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="4" y="71" width="38" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="42" y="14" width="6" height="6" rx="3" fill="#E5E5E5"/>
+<rect x="65" y="44" width="51" height="4" rx="1" fill="#E5E5E5"/>
+<rect x="120" y="44" width="13" height="4" rx="1" fill="#3F76FF"/>
+<rect x="65" y="53" width="132" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="65" y="60" width="97" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="74" y="76" width="52" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="74" y="87" width="78" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="74" y="98" width="71" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="74" y="109" width="58" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="129" y="76" width="6" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="155" y="87" width="6" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="148" y="98" width="6" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="135" y="109" width="6" height="4" rx="1" fill="#F1F1F1"/>
+<rect x="65" y="75" width="6" height="6" rx="3" fill="#E5E5E5"/>
+<rect x="65" y="86" width="6" height="6" rx="3" fill="#E5E5E5"/>
+<rect x="65" y="97" width="6" height="6" rx="3" fill="#E5E5E5"/>
+<rect x="65" y="108" width="6" height="6" rx="3" fill="#E5E5E5"/>
+<rect x="65" y="26" width="12" height="12" rx="6" fill="#D4D4D4"/>
+<rect x="4" y="4" width="3" height="3" rx="1.5" fill="#EF4444"/>
+<rect x="8" y="4" width="3" height="3" rx="1.5" fill="#FCD34D"/>
+<rect x="12" y="4" width="3" height="3" rx="1.5" fill="#4ADE80"/>
+</g>
+<defs>
+<clipPath id="clip0_2273_36427">
+<rect width="201" height="154" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/app/public/user.png b/web/public/user.png
similarity index 100%
rename from apps/app/public/user.png
rename to web/public/user.png
diff --git a/web/public/web-view-spinner.png b/web/public/web-view-spinner.png
new file mode 100644
index 00000000000..527f307c29f
Binary files /dev/null and b/web/public/web-view-spinner.png differ
diff --git a/apps/app/public/workbox-7805bd61.js b/web/public/workbox-7805bd61.js
similarity index 100%
rename from apps/app/public/workbox-7805bd61.js
rename to web/public/workbox-7805bd61.js
diff --git a/apps/app/public/workbox-7805bd61.js.map b/web/public/workbox-7805bd61.js.map
similarity index 100%
rename from apps/app/public/workbox-7805bd61.js.map
rename to web/public/workbox-7805bd61.js.map
diff --git a/apps/app/sentry.client.config.js b/web/sentry.client.config.js
similarity index 100%
rename from apps/app/sentry.client.config.js
rename to web/sentry.client.config.js
diff --git a/apps/app/sentry.edge.config.js b/web/sentry.edge.config.js
similarity index 100%
rename from apps/app/sentry.edge.config.js
rename to web/sentry.edge.config.js
diff --git a/apps/app/sentry.properties b/web/sentry.properties
similarity index 100%
rename from apps/app/sentry.properties
rename to web/sentry.properties
diff --git a/apps/app/sentry.server.config.js b/web/sentry.server.config.js
similarity index 100%
rename from apps/app/sentry.server.config.js
rename to web/sentry.server.config.js
diff --git a/web/services/ai.service.ts b/web/services/ai.service.ts
new file mode 100644
index 00000000000..63bf02ee439
--- /dev/null
+++ b/web/services/ai.service.ts
@@ -0,0 +1,30 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IUser, IGptResponse } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class AIService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createGptTask(
+    workspaceSlug: string,
+    projectId: string,
+    data: { prompt: string; task: string },
+    user: IUser | undefined
+  ): Promise<IGptResponse> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/ai-assistant/`, data)
+      .then((response) => {
+        trackEventService.trackAskGptEvent(response?.data, "ASK_GPT", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/apps/app/services/analytics.service.ts b/web/services/analytics.service.ts
similarity index 86%
rename from apps/app/services/analytics.service.ts
rename to web/services/analytics.service.ts
index 0b38f8c570d..38d0ab77492 100644
--- a/apps/app/services/analytics.service.ts
+++ b/web/services/analytics.service.ts
@@ -1,5 +1,5 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 // types
 import {
   IAnalyticsParams,
@@ -8,12 +8,12 @@ import {
   IExportAnalyticsFormData,
   ISaveAnalyticsFormData,
 } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
 
-const { NEXT_PUBLIC_API_BASE_URL } = process.env;
-
-class AnalyticsServices extends APIService {
+export class AnalyticsService extends APIService {
   constructor() {
-    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+    super(API_BASE_URL);
   }
 
   async getAnalytics(workspaceSlug: string, params: IAnalyticsParams): Promise<IAnalyticsResponse> {
@@ -61,5 +61,3 @@ class AnalyticsServices extends APIService {
       });
   }
 }
-
-export default new AnalyticsServices();
diff --git a/web/services/api.service.ts b/web/services/api.service.ts
new file mode 100644
index 00000000000..621bac767e4
--- /dev/null
+++ b/web/services/api.service.ts
@@ -0,0 +1,94 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+export abstract class APIService {
+  protected baseURL: string;
+  protected headers: any = {};
+
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
+  }
+
+  setRefreshToken(token: string) {
+    Cookies.set("refreshToken", token);
+  }
+
+  getRefreshToken() {
+    return Cookies.get("refreshToken");
+  }
+
+  purgeRefreshToken() {
+    Cookies.remove("refreshToken", { path: "/" });
+  }
+
+  setAccessToken(token: string) {
+    Cookies.set("accessToken", token);
+  }
+
+  getAccessToken() {
+    return Cookies.get("accessToken");
+  }
+
+  purgeAccessToken() {
+    Cookies.remove("accessToken", { path: "/" });
+  }
+
+  getHeaders() {
+    return {
+      Authorization: `Bearer ${this.getAccessToken()}`,
+    };
+  }
+
+  get(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: this.baseURL + url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  post(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  put(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "put",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  patch(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "patch",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  delete(url: string, data?: any, config = {}): Promise<any> {
+    return axios({
+      method: "delete",
+      url: this.baseURL + url,
+      data: data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  request(config = {}) {
+    return axios(config);
+  }
+}
diff --git a/web/services/app_config.service.ts b/web/services/app_config.service.ts
new file mode 100644
index 00000000000..5843c01c96e
--- /dev/null
+++ b/web/services/app_config.service.ts
@@ -0,0 +1,30 @@
+// services
+import { APIService } from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface IEnvConfig {
+  github: string;
+  google: string;
+  github_app_name: string | null;
+  email_password_login: boolean;
+  magic_login: boolean;
+}
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<IEnvConfig> {
+    return this.get("/api/configs/", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/app_installation.service.ts b/web/services/app_installation.service.ts
new file mode 100644
index 00000000000..17972103640
--- /dev/null
+++ b/web/services/app_installation.service.ts
@@ -0,0 +1,63 @@
+// services
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class AppInstallationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async addInstallationApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/workspace-integrations/${provider}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async addSlackChannel(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined,
+    data: any
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getSlackChannelDetail(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async removeSlackChannel(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined,
+    slackSyncId: string | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/${slackSyncId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/auth.service.ts b/web/services/auth.service.ts
new file mode 100644
index 00000000000..f7dd9e94c04
--- /dev/null
+++ b/web/services/auth.service.ts
@@ -0,0 +1,83 @@
+// services
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface ILoginTokenResponse {
+  access_token: string;
+  refresh_toke: string;
+}
+
+export class AuthService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async emailLogin(data: any): Promise<ILoginTokenResponse> {
+    return this.post("/api/sign-in/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailSignUp(data: { email: string; password: string }): Promise<ILoginTokenResponse> {
+    return this.post("/api/sign-up/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async socialAuth(data: any): Promise<ILoginTokenResponse> {
+    return this.post("/api/social-auth/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailCode(data: any): Promise<any> {
+    return this.post("/api/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async magicSignIn(data: any): Promise<any> {
+    const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
+    if (response?.status === 200) {
+      this.setAccessToken(response?.data?.access_token);
+      this.setRefreshToken(response?.data?.refresh_token);
+      return response?.data;
+    }
+    throw response.response.data;
+  }
+
+  async signOut(): Promise<any> {
+    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
+      .then((response) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        return response?.data;
+      })
+      .catch((error) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/cycle.service.ts b/web/services/cycle.service.ts
new file mode 100644
index 00000000000..65188515ccd
--- /dev/null
+++ b/web/services/cycle.service.ts
@@ -0,0 +1,163 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { CycleDateCheckData, IUser, ICycle, IIssue } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class CycleService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createCycle(workspaceSlug: string, projectId: string, data: any, user: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
+      .then((response) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCyclesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    cycleType: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
+      params: {
+        cycle_view: cycleType,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycleDetails(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getCycleIssues(workspaceSlug: string, projectId: string, cycleId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycleIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    queries?: any
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
+      .then((response) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: Partial<ICycle>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
+      .then((response) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteCycle(workspaceSlug: string, projectId: string, cycleId: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((response) => {
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async cycleDateCheck(workspaceSlug: string, projectId: string, data: CycleDateCheckData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addCycleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async transferIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      new_cycle_id: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeCycleFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/file.service.ts b/web/services/file.service.ts
new file mode 100644
index 00000000000..0e3749a4cd8
--- /dev/null
+++ b/web/services/file.service.ts
@@ -0,0 +1,123 @@
+// services
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+export interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+export class FileService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.deleteImage = this.deleteImage.bind(this);
+  }
+
+  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
+    return async (file: File) => {
+      const formData = new FormData();
+      formData.append("asset", file);
+      formData.append("attributes", JSON.stringify({}));
+
+      const data = await this.uploadFile(workspaceSlug, formData);
+      return data.asset;
+    };
+  }
+
+  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
+    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteFile(workspaceId: string, assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadUserFile(file: FormData): Promise<any> {
+    return this.post(`/api/users/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserFile(assetUrl: string): Promise<any> {
+    const lastIndex = assetUrl.lastIndexOf("/");
+    const assetId = assetUrl.substring(lastIndex + 1);
+
+    return this.delete(`/api/users/file-assets/${assetId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUnsplashImages(query?: string): Promise<UnSplashImage[]> {
+    return this.get(`/api/unsplash/`, {
+      params: {
+        query,
+      },
+    })
+      .then((res) => res?.data?.results ?? res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getProjectCoverImages(): Promise<string[]> {
+    return this.get(`/api/project-covers/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+}
diff --git a/web/services/inbox.service.ts b/web/services/inbox.service.ts
new file mode 100644
index 00000000000..05b19aa415b
--- /dev/null
+++ b/web/services/inbox.service.ts
@@ -0,0 +1,154 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import type { IInboxIssue, IInbox, TInboxStatus, IUser, IInboxQueryParams } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class InboxService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getInboxes(workspaceSlug: string, projectId: string): Promise<IInbox[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getInboxById(workspaceSlug: string, projectId: string, inboxId: string): Promise<IInbox> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchInbox(workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IInbox>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getInboxIssues(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    params?: IInboxQueryParams
+  ): Promise<IInboxIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getInboxIssueById(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    inboxIssueId: string
+  ): Promise<IInboxIssue> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteInboxIssue(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    inboxIssueId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
+    )
+      .then((response) => {
+        if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markInboxStatus(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    inboxIssueId: string,
+    data: TInboxStatus,
+    user: IUser | undefined
+  ): Promise<IInboxIssue> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
+      data
+    )
+      .then((response) => {
+        const action =
+          data.status === -1
+            ? "INBOX_ISSUE_REJECTED"
+            : data.status === 0
+            ? "INBOX_ISSUE_SNOOZED"
+            : data.status === 1
+            ? "INBOX_ISSUE_ACCEPTED"
+            : "INBOX_ISSUE_DUPLICATED";
+        trackEventService.trackInboxEvent(response?.data, action, user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchInboxIssue(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    inboxIssueId: string,
+    data: { issue: Partial<IInboxIssue> },
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
+      data
+    )
+      .then((response) => {
+        if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createInboxIssue(
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<IInboxIssue> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data)
+      .then((response) => {
+        if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/integrations/github.service.ts b/web/services/integrations/github.service.ts
new file mode 100644
index 00000000000..bec6101e5ad
--- /dev/null
+++ b/web/services/integrations/github.service.ts
@@ -0,0 +1,49 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import { IUser, IGithubRepoInfo, IGithubServiceImportFormData } from "types";
+
+const integrationServiceType: string = "github";
+
+const trackEventService = new TrackEventService();
+
+export class GithubIntegrationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async listAllRepositories(workspaceSlug: string, integrationSlug: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepoInfo(workspaceSlug: string, params: { owner: string; repo: string }): Promise<IGithubRepoInfo> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/${integrationServiceType}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createGithubServiceImport(
+    workspaceSlug: string,
+    data: IGithubServiceImportFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`, data)
+      .then((response) => {
+        trackEventService.trackImporterEvent(response?.data, "GITHUB_IMPORTER_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/integrations/index.ts b/web/services/integrations/index.ts
new file mode 100644
index 00000000000..cf9a070eec3
--- /dev/null
+++ b/web/services/integrations/index.ts
@@ -0,0 +1,3 @@
+export * from "./github.service";
+export * from "./integration.service";
+export * from "./jira.service";
diff --git a/web/services/integrations/integration.service.ts b/web/services/integrations/integration.service.ts
new file mode 100644
index 00000000000..e36ea4889eb
--- /dev/null
+++ b/web/services/integrations/integration.service.ts
@@ -0,0 +1,79 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IAppIntegration, IUser, IImporterService, IWorkspaceIntegration, IExportServiceResponse } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class IntegrationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getAppIntegrationsList(): Promise<IAppIntegration[]> {
+    return this.get(`/api/integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceIntegrationsList(workspaceSlug: string): Promise<IWorkspaceIntegration[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getImporterServicesList(workspaceSlug: string): Promise<IImporterService[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async getExportsServicesList(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IExportServiceResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/export-issues`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteImporterService(
+    workspaceSlug: string,
+    service: string,
+    importerId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/importers/${service}/${importerId}/`)
+      .then((response) => {
+        const eventName = service === "github" ? "GITHUB_IMPORTER_DELETE" : "JIRA_IMPORTER_DELETE";
+        trackEventService.trackImporterEvent(response?.data, eventName, user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/integrations/jira.service.ts b/web/services/integrations/jira.service.ts
new file mode 100644
index 00000000000..744dc2b115f
--- /dev/null
+++ b/web/services/integrations/jira.service.ts
@@ -0,0 +1,38 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import { IJiraMetadata, IJiraResponse, IJiraImporterForm, IUser } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class JiraImporterService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getJiraProjectInfo(workspaceSlug: string, params: IJiraMetadata): Promise<IJiraResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/jira`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createJiraImporter(
+    workspaceSlug: string,
+    data: IJiraImporterForm,
+    user: IUser | undefined
+  ): Promise<IJiraResponse> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/jira/`, data)
+      .then((response) => {
+        trackEventService.trackImporterEvent(response?.data, "JIRA_IMPORTER_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/index.ts b/web/services/issue/index.ts
new file mode 100644
index 00000000000..2f92d64290f
--- /dev/null
+++ b/web/services/issue/index.ts
@@ -0,0 +1,7 @@
+export * from "./issue_archive.service";
+export * from "./issue.service";
+export * from "./issue_draft.service";
+export * from "./issue_reaction.service";
+export * from "./issue_label.service";
+export * from "./issue_attachment.service";
+export * from "./issue_comment.service";
diff --git a/web/services/issue/issue.service.ts b/web/services/issue/issue.service.ts
new file mode 100644
index 00000000000..5f284489631
--- /dev/null
+++ b/web/services/issue/issue.service.ts
@@ -0,0 +1,277 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// type
+import type { IUser, IIssue, IIssueActivity, ISubIssueResponse, IIssueDisplayProperties } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class IssueService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createIssue(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEvent(response.data, "ISSUE_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssues(workspaceSlug: string, projectId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueActivities(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssueActivity[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssueToCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      issues: string[];
+    },
+    user: IUser | undefined
+  ) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueMovedToCycleOrModuleEvent(
+          {
+            workspaceSlug,
+            workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
+            projectId,
+            projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
+            projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
+            issueId: response?.data?.[0]?.issue_detail?.id,
+            cycleId,
+          },
+          response.data.length > 1 ? "ISSUE_MOVED_TO_CYCLE_IN_BULK" : "ISSUE_MOVED_TO_CYCLE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromCycle(workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    user: IUser,
+    data: {
+      related_list: Array<{
+        relation_type: "duplicate" | "relates_to" | "blocked_by";
+        related_issue: string;
+      }>;
+      relation?: "blocking" | null;
+    }
+  ) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`, data)
+      .then((response) => {
+        trackEventService.trackIssueRelationEvent(response.data, "ISSUE_RELATION_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationId: string,
+    user: IUser
+  ) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/${relationId}/`
+    )
+      .then((response) => {
+        trackEventService.trackIssueRelationEvent(response.data, "ISSUE_RELATION_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueDisplayProperties(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssueDisplayProperties(
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssueDisplayProperties
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`, {
+      properties: data,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssue>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEvent(response.data, "ISSUE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
+      .then((response) => {
+        trackEventService.trackIssueEvent({ issuesId }, "ISSUE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueBulkDeleteEvent(data, user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subIssues(workspaceSlug: string, projectId: string, issueId: string): Promise<ISubIssueResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueLink(workspaceSlug: string, projectId: string, issueId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_archive.service.ts b/web/services/issue/issue_archive.service.ts
new file mode 100644
index 00000000000..02cb6357ebf
--- /dev/null
+++ b/web/services/issue/issue_archive.service.ts
@@ -0,0 +1,43 @@
+import { APIService } from "services/api.service";
+// type
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async unarchiveIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/unarchive/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveArchivedIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteArchivedIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issuesId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_attachment.service.ts b/web/services/issue/issue_attachment.service.ts
new file mode 100644
index 00000000000..94c94ded168
--- /dev/null
+++ b/web/services/issue/issue_attachment.service.ts
@@ -0,0 +1,49 @@
+import { APIService } from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueAttachmentService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async uploadIssueAttachment(workspaceSlug: string, projectId: string, issueId: string, file: FormData): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`,
+      file,
+      {
+        headers: {
+          ...this.getHeaders(),
+          "Content-Type": "multipart/form-data",
+        },
+      }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueAttachment(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    assetId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/${assetId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_comment.service.ts b/web/services/issue/issue_comment.service.ts
new file mode 100644
index 00000000000..12c08a517cd
--- /dev/null
+++ b/web/services/issue/issue_comment.service.ts
@@ -0,0 +1,86 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IIssueComment, IUser } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class IssueCommentService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssueComment>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`, data)
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<IIssueComment>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(
+          {
+            issueId,
+            commentId,
+          },
+          "ISSUE_COMMENT_DELETE",
+          user
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_draft.service.tsx b/web/services/issue/issue_draft.service.tsx
new file mode 100644
index 00000000000..b329febfb42
--- /dev/null
+++ b/web/services/issue/issue_draft.service.tsx
@@ -0,0 +1,51 @@
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueDraftService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getDraftIssues(workspaceSlug: string, projectId: string, params?: any): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createDraftIssue(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateDraftIssue(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteDraftIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getDraftIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/issue/issue_label.service.ts b/web/services/issue/issue_label.service.ts
new file mode 100644
index 00000000000..00b945d018a
--- /dev/null
+++ b/web/services/issue/issue_label.service.ts
@@ -0,0 +1,112 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IIssueLabels, IUser } from "types";
+
+const trackEventServices = new TrackEventService();
+
+export class IssueLabelService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getWorkspaceIssueLabels(workspaceSlug: string): Promise<IIssueLabels[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<IIssueLabels> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
+      .then((response: { data: IIssueLabels; [key: string]: any }) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workSpaceId: response?.data?.workspace_detail?.id,
+            workSpaceName: response?.data?.workspace_detail?.name,
+            workspaceSlug,
+            projectId,
+            projectIdentifier: response?.data?.project_detail?.identifier,
+            projectName: response?.data?.project_detail?.name,
+            labelId: response?.data?.id,
+            color: response?.data?.color,
+          },
+          "ISSUE_LABEL_CREATE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`, data)
+      .then((response) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workSpaceId: response?.data?.workspace_detail?.id,
+            workSpaceName: response?.data?.workspace_detail?.name,
+            workspaceSlug,
+            projectId,
+            projectIdentifier: response?.data?.project_detail?.identifier,
+            projectName: response?.data?.project_detail?.name,
+            labelId: response?.data?.id,
+            color: response?.data?.color,
+          },
+          "ISSUE_LABEL_UPDATE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`)
+      .then((response) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workspaceSlug,
+            projectId,
+          },
+          "ISSUE_LABEL_DELETE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_reaction.service.ts b/web/services/issue/issue_reaction.service.ts
new file mode 100644
index 00000000000..737d9879f2c
--- /dev/null
+++ b/web/services/issue/issue_reaction.service.ts
@@ -0,0 +1,106 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { IUser, IssueReaction, IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class IssueReactionService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: IssueReactionForm,
+    user?: IUser
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`, data)
+      .then((response) => {
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_REACTION_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IssueReaction[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reaction: string,
+    user?: IUser
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/${reaction}/`
+    )
+      .then((response) => {
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_REACTION_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    data: IssueCommentReactionForm,
+    user?: IUser
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`, data)
+      .then((response) => {
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_COMMENT_REACTION_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listIssueCommentReactions(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string
+  ): Promise<IssueCommentReaction[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string,
+    user?: IUser
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/${reaction}/`
+    )
+      .then((response) => {
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_COMMENT_REACTION_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/module.service.ts b/web/services/module.service.ts
new file mode 100644
index 00000000000..dec4b2d8ff9
--- /dev/null
+++ b/web/services/module.service.ts
@@ -0,0 +1,228 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { IModule, IIssue, IUser } from "types";
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class ModuleService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModule(workspaceSlug: string, projectId: string, data: any, user: any): Promise<IModule> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
+      .then((response) => {
+        trackEventService.trackModuleEvent(response?.data, "MODULE_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+      .then((response) => {
+        trackEventService.trackModuleEvent(response?.data, "MODULE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleDetails(workspaceSlug: string, projectId: string, moduleId: string): Promise<IModule> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IModule>,
+    user: IUser | undefined
+  ): Promise<IModule> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+      .then((response) => {
+        if (user) trackEventService.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteModule(workspaceSlug: string, projectId: string, moduleId: string, user: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => {
+        trackEventService.trackModuleEvent(response?.data, "MODULE_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssues(workspaceSlug: string, projectId: string, moduleId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    queries?: any
+  ): Promise<
+    | IIssue[]
+    | {
+        [key: string]: IIssue[];
+      }
+  > {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: { issues: string[] },
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueMovedToCycleOrModuleEvent(
+          {
+            workspaceSlug,
+            workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
+            projectId,
+            projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
+            projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
+            issueId: response?.data?.[0]?.issue_detail?.id,
+            moduleId,
+          },
+          response?.data?.length > 1 ? "ISSUE_MOVED_TO_MODULE_IN_BULK" : "ISSUE_MOVED_TO_MODULE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    bridgeId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    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: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    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/web/services/notification.service.ts b/web/services/notification.service.ts
new file mode 100644
index 00000000000..fe8a24b6c95
--- /dev/null
+++ b/web/services/notification.service.ts
@@ -0,0 +1,144 @@
+// services
+import { APIService } from "services/api.service";
+// types
+import type {
+  IUserNotification,
+  INotificationParams,
+  NotificationCount,
+  PaginatedUserNotification,
+  IMarkAllAsReadPayload,
+} from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class NotificationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getUserNotifications(workspaceSlug: string, params: INotificationParams): Promise<IUserNotification[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserNotificationDetailById(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markUserNotificationAsRead(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markUserNotificationAsUnread(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markUserNotificationAsArchived(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markUserNotificationAsUnarchived(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchUserNotification(
+    workspaceSlug: string,
+    notificationId: string,
+    data: Partial<IUserNotification>
+  ): Promise<IUserNotification> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserNotification(workspaceSlug: string, notificationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subscribeToIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueNotificationSubscriptionStatus(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{
+    subscribed: boolean;
+  }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async unsubscribeFromIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUnreadNotificationsCount(workspaceSlug: string): Promise<NotificationCount> {
+    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/unread/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getNotifications(url: string): Promise<PaginatedUserNotification> {
+    return this.get(url)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async markAllNotificationsAsRead(workspaceSlug: string, payload: IMarkAllAsReadPayload): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, {
+      ...payload,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/page.service.ts b/web/services/page.service.ts
new file mode 100644
index 00000000000..a344c69ecd8
--- /dev/null
+++ b/web/services/page.service.ts
@@ -0,0 +1,215 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IPage, IPageBlock, RecentPagesResponse, IIssue, IUser } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class PageService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createPage(
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IPage>,
+    user: IUser | undefined
+  ): Promise<IPage> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
+      .then((response) => {
+        trackEventService.trackPageEvent(response?.data, "PAGE_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPage(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Partial<IPage>,
+    user: IUser | undefined
+  ): Promise<IPage> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`, data)
+      .then((response) => {
+        trackEventService.trackPageEvent(response?.data, "PAGE_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePage(workspaceSlug: string, projectId: string, pageId: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => {
+        trackEventService.trackPageEvent(response?.data, "PAGE_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addPageToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      page: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removePageFromFavorites(workspaceSlug: string, projectId: string, pageId: string) {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPagesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    pageType: "all" | "favorite" | "created_by_me" | "created_by_other"
+  ): Promise<IPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, {
+      params: {
+        page_view: pageType,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getRecentPages(workspaceSlug: string, projectId: string): Promise<RecentPagesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, {
+      params: {
+        page_view: "recent",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPageDetails(workspaceSlug: string, projectId: string, pageId: string): Promise<IPage> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Partial<IPageBlock>,
+    user: IUser | undefined
+  ): Promise<IPageBlock> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`, data)
+      .then((response) => {
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string
+  ): Promise<IPageBlock[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string,
+    data: Partial<IPageBlock>,
+    user: IUser | undefined
+  ): Promise<IPage> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`,
+      data
+    )
+      .then((response) => {
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => {
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listPageBlocks(workspaceSlug: string, projectId: string, pageId: string): Promise<IPageBlock[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async convertPageBlockToIssue(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    blockId: string,
+    user: IUser | undefined
+  ): Promise<IIssue> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${blockId}/issues/`
+    )
+      .then((response) => {
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CONVERTED_TO_ISSUE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/index.ts b/web/services/project/index.ts
new file mode 100644
index 00000000000..538b65e1182
--- /dev/null
+++ b/web/services/project/index.ts
@@ -0,0 +1,6 @@
+export * from "./project.service";
+export * from "./project_estimate.service";
+export * from "./project_publish.service";
+export * from "./project_state.service";
+export * from "./project_export.service";
+export * from "./project_invitation.service";
diff --git a/web/services/project/project.service.ts b/web/services/project/project.service.ts
new file mode 100644
index 00000000000..1c824a40c10
--- /dev/null
+++ b/web/services/project/project.service.ts
@@ -0,0 +1,277 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type {
+  GithubRepositoriesResponse,
+  IUser,
+  IProject,
+  IProjectBulkAddFormData,
+  IProjectMember,
+  ISearchIssueResponse,
+  ProjectPreferences,
+  IProjectViewProps,
+  TProjectIssuesSearchParams,
+} from "types";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createProject(workspaceSlug: string, data: Partial<IProject>, user: any): Promise<IProject> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(response.data, "CREATE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
+      params: {
+        name: data,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjects(workspaceSlug: string): Promise<IProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProject(workspaceSlug: string, projectId: string): Promise<IProject> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProject(workspaceSlug: string, projectId: string, data: Partial<IProject>, user: any): Promise<IProject> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProject(workspaceSlug: string, projectId: string, user: any | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => {
+        trackEventService.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinProject(workspaceSlug: string, project_ids: string[]): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, { project_ids })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async leaveProject(workspaceSlug: string, projectId: string, user: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
+      .then((response) => {
+        trackEventService.trackProjectEvent(
+          "PROJECT_MEMBER_LEAVE",
+          {
+            workspaceSlug,
+            projectId,
+            ...response?.data,
+          },
+          user
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchProjectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkAddMembersToProject(
+    workspaceSlug: string,
+    projectId: string,
+    data: IProjectBulkAddFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`, data)
+      .then((response) => {
+        trackEventService.trackProjectEvent(
+          {
+            workspaceId: response?.data?.workspace?.id,
+            workspaceSlug,
+            projectId,
+            projectName: response?.data?.project?.name,
+            memberEmail: response?.data?.member?.email,
+          },
+          "PROJECT_MEMBER_INVITE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<IProjectMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<IProjectMember> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ): Promise<IProjectMember> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async setProjectView(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view_props?: IProjectViewProps;
+      default_props?: IProjectViewProps;
+      preferences?: ProjectPreferences;
+      sort_order?: number;
+    }
+  ): Promise<any> {
+    await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
+    return this.request(url)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async syncGithubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    workspaceIntegrationId: string,
+    data: {
+      name: string;
+      owner: string;
+      repository_id: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectGithubRepository(workspaceSlug: string, projectId: string, integrationId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProjectFavorites(workspaceSlug: string): Promise<any[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addProjectToFavorites(workspaceSlug: string, project: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, { project })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectIssuesSearch(
+    workspaceSlug: string,
+    projectId: string,
+    params: TProjectIssuesSearchParams
+  ): Promise<ISearchIssueResponse[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project_estimate.service.ts b/web/services/project/project_estimate.service.ts
new file mode 100644
index 00000000000..322d986fa9b
--- /dev/null
+++ b/web/services/project/project_estimate.service.ts
@@ -0,0 +1,80 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type { IUser, IEstimate, IEstimateFormData } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectEstimateService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    data: IEstimateFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async patchEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: IEstimateFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimateDetails(workspaceSlug: string, projectId: string, estimateId: string): Promise<IEstimate> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimatesList(workspaceSlug: string, projectId: string): Promise<IEstimate[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`)
+      .then((response) => {
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project_export.service.ts b/web/services/project/project_export.service.ts
new file mode 100644
index 00000000000..64e42925c0a
--- /dev/null
+++ b/web/services/project/project_export.service.ts
@@ -0,0 +1,38 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IUser } from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectExportService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async csvExport(
+    workspaceSlug: string,
+    data: {
+      provider: string;
+      project: string[];
+    },
+    user: IUser
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)
+      .then((response) => {
+        trackEventService.trackExporterEvent(
+          {
+            workspaceSlug,
+          },
+          "CSV_EXPORTER_CREATE",
+          user
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project_invitation.service.ts b/web/services/project/project_invitation.service.ts
new file mode 100644
index 00000000000..1fbf6e24c24
--- /dev/null
+++ b/web/services/project/project_invitation.service.ts
@@ -0,0 +1,35 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+// types
+import { IProjectMemberInvitation } from "types";
+
+export class ProjectInvitationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchProjectInvitations(workspaceSlug: string, projectId: string): Promise<IProjectMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectInvitation(workspaceSlug: string, projectId: string, invitationId: string): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectInvitation(workspaceSlug: string, projectId: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project_publish.service.ts b/web/services/project/project_publish.service.ts
new file mode 100644
index 00000000000..16d705b4573
--- /dev/null
+++ b/web/services/project/project_publish.service.ts
@@ -0,0 +1,61 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+// types
+import { IProjectPublishSettings } from "store/project";
+
+export class ProjectPublishService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    data: IProjectPublishSettings
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    project_publish_id: string,
+    data: IProjectPublishSettings
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    project_publish_id: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/project/project_state.service.ts b/web/services/project/project_state.service.ts
new file mode 100644
index 00000000000..018df3a2053
--- /dev/null
+++ b/web/services/project/project_state.service.ts
@@ -0,0 +1,96 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import type { IUser, IState, IStateResponse } from "types";
+
+const trackEventService = new TrackEventService();
+
+export class ProjectStateService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createState(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`, data)
+      .then((response) => {
+        trackEventService.trackStateEvent(response?.data, "STATE_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getStates(workspaceSlug: string, projectId: string): Promise<IStateResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesByState(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?group_by=state`)
+
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateState(
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    data: IState,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
+      .then((response) => {
+        trackEventService.trackStateEvent(response?.data, "STATE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async patchState(
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    data: Partial<IState>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
+      .then((response) => {
+        trackEventService.trackStateEvent(response?.data, "STATE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteState(workspaceSlug: string, projectId: string, stateId: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => {
+        trackEventService.trackStateEvent(response?.data, "STATE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/track_event.service.ts b/web/services/track_event.service.ts
new file mode 100644
index 00000000000..d3a2bd74381
--- /dev/null
+++ b/web/services/track_event.service.ts
@@ -0,0 +1,850 @@
+// services
+import { APIService } from "services/api.service";
+
+const trackEvent = process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+
+// types
+import type {
+  IUser,
+  ICycle,
+  IEstimate,
+  IGptResponse,
+  IIssue,
+  IIssueComment,
+  IModule,
+  IPage,
+  IPageBlock,
+  IProject,
+  IState,
+  IProjectView,
+  IWorkspace,
+  IssueCommentReaction,
+  IssueReaction,
+} from "types";
+
+type WorkspaceEventType =
+  | "CREATE_WORKSPACE"
+  | "UPDATE_WORKSPACE"
+  | "DELETE_WORKSPACE"
+  | "WORKSPACE_USER_INVITE"
+  | "WORKSPACE_USER_INVITE_ACCEPT"
+  | "WORKSPACE_USER_BULK_INVITE_ACCEPT";
+
+type ProjectEventType =
+  | "CREATE_PROJECT"
+  | "UPDATE_PROJECT"
+  | "DELETE_PROJECT"
+  | "PROJECT_MEMBER_INVITE"
+  | "PROJECT_MEMBER_LEAVE";
+
+type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
+
+type CycleEventType = "CYCLE_CREATE" | "CYCLE_UPDATE" | "CYCLE_DELETE";
+
+type StateEventType = "STATE_CREATE" | "STATE_UPDATE" | "STATE_DELETE";
+
+type ModuleEventType = "MODULE_CREATE" | "MODULE_UPDATE" | "MODULE_DELETE";
+
+type PagesEventType = "PAGE_CREATE" | "PAGE_UPDATE" | "PAGE_DELETE";
+
+type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";
+
+type IssueCommentEventType = "ISSUE_COMMENT_CREATE" | "ISSUE_COMMENT_UPDATE" | "ISSUE_COMMENT_DELETE";
+
+type Toggle = "TOGGLE_CYCLE" | "TOGGLE_MODULE" | "TOGGLE_VIEW" | "TOGGLE_PAGES" | "TOGGLE_STATE" | "TOGGLE_INBOX";
+
+export type MiscellaneousEventType = `${Toggle}_ON` | `${Toggle}_OFF`;
+
+type IntegrationEventType = "ADD_WORKSPACE_INTEGRATION" | "REMOVE_WORKSPACE_INTEGRATION";
+
+type GitHubSyncEventType = "GITHUB_REPO_SYNC";
+
+type PageBlocksEventType =
+  | "PAGE_BLOCK_CREATE"
+  | "PAGE_BLOCK_UPDATE"
+  | "PAGE_BLOCK_DELETE"
+  | "PAGE_BLOCK_CONVERTED_TO_ISSUE";
+
+type IssueLabelEventType = "ISSUE_LABEL_CREATE" | "ISSUE_LABEL_UPDATE" | "ISSUE_LABEL_DELETE";
+
+type GptEventType = "ASK_GPT" | "USE_GPT_RESPONSE_IN_ISSUE" | "USE_GPT_RESPONSE_IN_PAGE_BLOCK";
+
+type IssueEstimateEventType = "ESTIMATE_CREATE" | "ESTIMATE_UPDATE" | "ESTIMATE_DELETE";
+
+type InboxEventType =
+  | "INBOX_CREATE"
+  | "INBOX_UPDATE"
+  | "INBOX_DELETE"
+  | "INBOX_ISSUE_CREATE"
+  | "INBOX_ISSUE_UPDATE"
+  | "INBOX_ISSUE_DELETE"
+  | "INBOX_ISSUE_DUPLICATED"
+  | "INBOX_ISSUE_ACCEPTED"
+  | "INBOX_ISSUE_SNOOZED"
+  | "INBOX_ISSUE_REJECTED";
+
+type ImporterEventType =
+  | "GITHUB_IMPORTER_CREATE"
+  | "GITHUB_IMPORTER_DELETE"
+  | "JIRA_IMPORTER_CREATE"
+  | "JIRA_IMPORTER_DELETE";
+
+type ExporterEventType = "CSV_EXPORTER_CREATE";
+
+type AnalyticsEventType =
+  | "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS"
+  | "WORKSPACE_CUSTOM_ANALYTICS"
+  | "WORKSPACE_ANALYTICS_EXPORT"
+  | "PROJECT_SCOPE_AND_DEMAND_ANALYTICS"
+  | "PROJECT_CUSTOM_ANALYTICS"
+  | "PROJECT_ANALYTICS_EXPORT"
+  | "CYCLE_SCOPE_AND_DEMAND_ANALYTICS"
+  | "CYCLE_CUSTOM_ANALYTICS"
+  | "CYCLE_ANALYTICS_EXPORT"
+  | "MODULE_SCOPE_AND_DEMAND_ANALYTICS"
+  | "MODULE_CUSTOM_ANALYTICS"
+  | "MODULE_ANALYTICS_EXPORT";
+
+type ReactionEventType =
+  | "ISSUE_REACTION_CREATE"
+  | "ISSUE_COMMENT_REACTION_CREATE"
+  | "ISSUE_REACTION_DELETE"
+  | "ISSUE_COMMENT_REACTION_DELETE";
+
+export class TrackEventService extends APIService {
+  constructor() {
+    super("/");
+  }
+
+  async trackWorkspaceEvent(data: IWorkspace | any, eventName: WorkspaceEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (
+      eventName !== "DELETE_WORKSPACE" &&
+      eventName !== "WORKSPACE_USER_INVITE" &&
+      eventName !== "WORKSPACE_USER_INVITE_ACCEPT" &&
+      eventName !== "WORKSPACE_USER_BULK_INVITE_ACCEPT"
+    )
+      payload = {
+        workspaceId: data.id,
+        workspaceSlug: data.slug,
+        workspaceName: data.name,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackProjectEvent(data: Partial<IProject> | any, eventName: ProjectEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE" && eventName !== "PROJECT_MEMBER_LEAVE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.id,
+        projectName: data?.name,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackUserOnboardingCompleteEvent(data: any, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "USER_ONBOARDING_COMPLETE",
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackUserTourCompleteEvent(data: any, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "USER_TOUR_COMPLETE",
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueEvent(data: IIssue | any, eventName: IssueEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "ISSUE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueMarkedAsDoneEvent(data: any, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "ISSUES_MARKED_AS_DONE",
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssuePartialPropertyUpdateEvent(
+    data: any,
+    propertyName:
+      | "ISSUE_PROPERTY_UPDATE_PRIORITY"
+      | "ISSUE_PROPERTY_UPDATE_STATE"
+      | "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
+      | "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+      | "ISSUE_PROPERTY_UPDATE_ESTIMATE",
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: propertyName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueCommentEvent(
+    data: Partial<IIssueComment> | any,
+    eventName: IssueCommentEventType,
+    user: IUser | undefined
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "ISSUE_COMMENT_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.issue,
+      };
+    else payload = data;
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueRelationEvent(
+    data: any,
+    eventName: "ISSUE_RELATION_CREATE" | "ISSUE_RELATION_DELETE",
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: data,
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueMovedToCycleOrModuleEvent(
+    data: any,
+    eventName:
+      | "ISSUE_MOVED_TO_CYCLE"
+      | "ISSUE_MOVED_TO_MODULE"
+      | "ISSUE_MOVED_TO_CYCLE_IN_BULK"
+      | "ISSUE_MOVED_TO_MODULE_IN_BULK",
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueBulkDeleteEvent(data: any, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName: "ISSUE_BULK_DELETE",
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueLabelEvent(data: any, eventName: IssueLabelEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackStateEvent(data: IState | any, eventName: StateEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "STATE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        stateId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackCycleEvent(data: ICycle | any, eventName: CycleEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "CYCLE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        cycleId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackModuleEvent(data: IModule | any, eventName: ModuleEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "MODULE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        moduleId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackPageEvent(data: Partial<IPage> | any, eventName: PagesEventType, user: IUser | undefined): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "PAGE_DELETE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        pageId: data.id,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackPageBlockEvent(
+    data: Partial<IPageBlock> | IIssue,
+    eventName: PageBlocksEventType,
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "PAGE_BLOCK_DELETE" && eventName !== "PAGE_BLOCK_CONVERTED_TO_ISSUE")
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        pageId: (data as IPageBlock)?.page,
+        pageBlockId: data.id,
+      };
+    else if (eventName === "PAGE_BLOCK_CONVERTED_TO_ISSUE") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+        issueId: data?.id,
+      };
+    } else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackAskGptEvent(data: IGptResponse, eventName: GptEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    const payload = {
+      workspaceId: data?.workspace_detail?.id,
+      workspaceName: data?.workspace_detail?.name,
+      workspaceSlug: data?.workspace_detail?.slug,
+      projectId: data?.project_detail?.id,
+      projectIdentifier: data?.project_detail?.identifier,
+      projectName: data?.project_detail?.name,
+      count: data?.count,
+    };
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackUseGPTResponseEvent(data: IIssue | IPageBlock, eventName: GptEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+
+    if (eventName === "USE_GPT_RESPONSE_IN_ISSUE") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectIdentifier: data?.project_detail?.identifier,
+        projectName: data?.project_detail?.name,
+        issueId: data.id,
+      };
+    } else if (eventName === "USE_GPT_RESPONSE_IN_PAGE_BLOCK") {
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectIdentifier: data?.project_detail?.identifier,
+        projectName: data?.project_detail?.name,
+        pageId: (data as IPageBlock)?.page,
+        pageBlockId: data.id,
+      };
+    }
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackViewEvent(data: IProjectView, eventName: ViewEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName === "VIEW_DELETE") payload = data;
+    else
+      payload = {
+        labels: Boolean(data.query_data.labels),
+        assignees: Boolean(data.query_data.assignees),
+        priority: Boolean(data.query_data.priority),
+        state: Boolean(data.query_data.state),
+        created_by: Boolean(data.query_data.created_by),
+      };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackMiscellaneousEvent(data: any, eventName: MiscellaneousEventType, user: IUser | undefined): Promise<any> {
+    if (!trackEvent || !user) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackAppIntegrationEvent(data: any, eventName: IntegrationEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackGitHubSyncEvent(data: any, eventName: GitHubSyncEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...data,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackIssueEstimateEvent(
+    data: { estimate: IEstimate },
+    eventName: IssueEstimateEventType,
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName === "ESTIMATE_DELETE") payload = data;
+    else
+      payload = {
+        workspaceId: data?.estimate?.workspace_detail?.id,
+        workspaceName: data?.estimate?.workspace_detail?.name,
+        workspaceSlug: data?.estimate?.workspace_detail?.slug,
+        projectId: data?.estimate?.project_detail?.id,
+        projectName: data?.estimate?.project_detail?.name,
+        projectIdentifier: data?.estimate?.project_detail?.identifier,
+        estimateId: data.estimate?.id,
+      };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackImporterEvent(data: any, eventName: ImporterEventType, user: IUser | undefined): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName === "GITHUB_IMPORTER_DELETE" || eventName === "JIRA_IMPORTER_DELETE") payload = data;
+    else
+      payload = {
+        workspaceId: data?.workspace_detail?.id,
+        workspaceName: data?.workspace_detail?.name,
+        workspaceSlug: data?.workspace_detail?.slug,
+        projectId: data?.project_detail?.id,
+        projectName: data?.project_detail?.name,
+        projectIdentifier: data?.project_detail?.identifier,
+      };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackAnalyticsEvent(data: any, eventName: AnalyticsEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    const payload = { ...data };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: payload,
+        user: user,
+      },
+    });
+  }
+
+  async trackExporterEvent(data: any, eventName: ExporterEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    const payload = { ...data };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  // TODO: add types to the data
+  async trackInboxEvent(data: any, eventName: InboxEventType, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName !== "INBOX_DELETE")
+      payload = {
+        issue: data?.issue?.id,
+        inbox: data?.id,
+        workspaceId: data?.issue?.workspace_detail?.id,
+        workspaceName: data?.issue?.workspace_detail?.name,
+        workspaceSlug: data?.issue?.workspace_detail?.slug,
+        projectId: data?.issue?.project_detail?.id,
+        projectName: data?.issue?.project_detail?.name,
+      };
+    else payload = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: {
+          ...payload,
+        },
+        user: user,
+      },
+    });
+  }
+
+  async trackReactionEvent(
+    data: IssueReaction | IssueCommentReaction,
+    eventName: ReactionEventType,
+    user: IUser
+  ): Promise<any> {
+    if (!trackEvent) return;
+
+    let payload: any;
+    if (eventName === "ISSUE_REACTION_DELETE" || eventName === "ISSUE_COMMENT_REACTION_DELETE") payload = data;
+    else
+      payload = {
+        workspaceId: data?.workspace,
+        projectId: data?.project,
+        reaction: data?.reaction,
+      };
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: payload,
+        user: user,
+      },
+    });
+  }
+
+  async trackProjectPublishSettingsEvent(data: any, eventName: string, user: IUser): Promise<any> {
+    if (!trackEvent) return;
+
+    const payload: any = data;
+
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: payload,
+        user: user,
+      },
+    });
+  }
+}
diff --git a/web/services/user.service.ts b/web/services/user.service.ts
new file mode 100644
index 00000000000..f5c4ac17e6e
--- /dev/null
+++ b/web/services/user.service.ts
@@ -0,0 +1,192 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import type {
+  IIssue,
+  IUser,
+  IUserActivityResponse,
+  IUserProfileData,
+  IUserProfileProjectSegregation,
+  IUserSettings,
+  IUserWorkspaceDashboard,
+} from "types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class UserService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  currentUserConfig() {
+    return {
+      url: `${this.baseURL}/api/users/me/`,
+      headers: this.getHeaders(),
+    };
+  }
+
+  async userIssues(
+    workspaceSlug: string,
+    params: any
+  ): Promise<
+    | {
+        [key: string]: IIssue[];
+      }
+    | IIssue[]
+  > {
+    return this.get(`/api/workspaces/${workspaceSlug}/my-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async currentUser(): Promise<IUser> {
+    return this.get("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async currentUserSettings(): Promise<IUserSettings> {
+    return this.get("/api/users/me/settings/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateUser(data: Partial<IUser>): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateUserOnBoard({ userRole }: any, user: IUser | undefined): Promise<any> {
+    return this.patch("/api/users/me/onboard/", {
+      is_onboarded: true,
+    })
+      .then((response) => {
+        trackEventService.trackUserOnboardingCompleteEvent(
+          {
+            user_role: userRole ?? "None",
+          },
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateUserTourCompleted(user: IUser): Promise<any> {
+    return this.patch("/api/users/me/tour-completed/", {
+      is_tour_completed: true,
+    })
+      .then((response) => {
+        trackEventService.trackUserTourCompleteEvent({ user_role: user.role ?? "None" }, user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserWorkspaceActivity(workspaceSlug: string): Promise<IUserActivityResponse> {
+    return this.get(`/api/users/workspaces/${workspaceSlug}/activities/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceDashboard(workspaceSlug: string, month: number): Promise<IUserWorkspaceDashboard> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, {
+      params: {
+        month: month,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async forgotPassword(data: { email: string }): Promise<any> {
+    return this.post(`/api/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async resetPassword(
+    uidb64: string,
+    token: string,
+    data: {
+      new_password: string;
+      confirm_password: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/reset-password/${uidb64}/${token}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileData(workspaceSlug: string, userId: string): Promise<IUserProfileData> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-stats/${userId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileProjectsSegregation(
+    workspaceSlug: string,
+    userId: string
+  ): Promise<IUserProfileProjectSegregation> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-profile/${userId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileActivity(workspaceSlug: string, userId: string): Promise<IUserActivityResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/?per_page=15`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileIssues(
+    workspaceSlug: string,
+    userId: string,
+    params: any
+  ): Promise<
+    | {
+        [key: string]: IIssue[];
+      }
+    | IIssue[]
+  > {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-issues/${userId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/view.service.ts b/web/services/view.service.ts
new file mode 100644
index 00000000000..97f0db9a2e8
--- /dev/null
+++ b/web/services/view.service.ts
@@ -0,0 +1,99 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IProjectView } from "types/views";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class ViewService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createView(workspaceSlug: string, projectId: string, data: Partial<IProjectView>, user: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>,
+    user: any
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, projectId: string, viewId: string, user: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViews(workspaceSlug: string, projectId: string): Promise<IProjectView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addViewToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeViewFromFavorites(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts
new file mode 100644
index 00000000000..30126c2eeac
--- /dev/null
+++ b/web/services/workspace.service.ts
@@ -0,0 +1,287 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import {
+  IWorkspace,
+  IWorkspaceMemberMe,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+  IWorkspaceSearchResults,
+  IProductUpdateResponse,
+  IUser,
+  IWorkspaceBulkInviteFormData,
+  IWorkspaceViewProps,
+} from "types";
+import { IWorkspaceView } from "types/workspace-views";
+// store
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
+
+const trackEventService = new TrackEventService();
+
+export class WorkspaceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async userWorkspaces(): Promise<IWorkspace[]> {
+    return this.get("/api/users/me/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspace(workspaceSlug: string): Promise<IWorkspace> {
+    return this.get(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createWorkspace(data: Partial<IWorkspace>, user: IUser | undefined): Promise<IWorkspace> {
+    return this.post("/api/workspaces/", data)
+      .then((response) => {
+        trackEventService.trackWorkspaceEvent(response.data, "CREATE_WORKSPACE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspace(
+    workspaceSlug: string,
+    data: Partial<IWorkspace>,
+    user: IUser | undefined
+  ): Promise<IWorkspace> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
+      .then((response) => {
+        trackEventService.trackWorkspaceEvent(response.data, "UPDATE_WORKSPACE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspace(workspaceSlug: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => {
+        trackEventService.trackWorkspaceEvent({ workspaceSlug }, "DELETE_WORKSPACE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async inviteWorkspace(
+    workspaceSlug: string,
+    data: IWorkspaceBulkInviteFormData,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
+      .then((response) => {
+        trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspace(workspaceSlug: string, invitationId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.post(`/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`, data, {
+      headers: {},
+    })
+      .then((response) => {
+        trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE_ACCEPT", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspaces(data: any): Promise<any> {
+    return this.post("/api/users/me/invitations/workspaces/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get("/api/users/last-visited-workspace/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get("/api/users/me/invitations/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMemberMe> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateWorkspaceView(workspaceSlug: string, data: { view_props: IWorkspaceViewProps }): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/workspace-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchWorkspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspaceMember(
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<IWorkspaceMember> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
+    return this.get(`/api/users/me/invitations/${invitationId}/`, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceSlugCheck(slug: string): Promise<any> {
+    return this.get(`/api/workspace-slug-check/?slug=${slug}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async searchWorkspace(
+    workspaceSlug: string,
+    params: {
+      project_id?: string;
+      search: string;
+      workspace_search: boolean;
+    }
+  ): Promise<IWorkspaceSearchResults> {
+    return this.get(`/api/workspaces/${workspaceSlug}/search/`, {
+      params,
+    })
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async getProductUpdates(): Promise<IProductUpdateResponse[]> {
+    return this.get("/api/release-notes/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createView(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateView(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getAllViews(workspaceSlug: string): Promise<IWorkspaceView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, viewId: string): Promise<IWorkspaceView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(
+    workspaceSlug: string,
+    params: any
+  ): Promise<IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure> {
+    return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/store/archived-issues/index.ts b/web/store/archived-issues/index.ts
new file mode 100644
index 00000000000..b1230f1c9e4
--- /dev/null
+++ b/web/store/archived-issues/index.ts
@@ -0,0 +1,3 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
+export * from "./issue_detail.store";
diff --git a/web/store/archived-issues/issue.store.ts b/web/store/archived-issues/issue.store.ts
new file mode 100644
index 00000000000..624f4714a49
--- /dev/null
+++ b/web/store/archived-issues/issue.store.ts
@@ -0,0 +1,230 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueArchiveService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface IArchivedIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  issueDetail: {
+    [project_id: string]: {
+      [issue_id: string]: IIssue;
+    };
+  };
+
+  // services
+  archivedIssueService: IssueArchiveService;
+
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  deleteArchivedIssue: (group: string | null, sub_group: string | null, issue: IIssue) => Promise<any>;
+}
+
+export class ArchivedIssueStore implements IArchivedIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  issueDetail: IArchivedIssueStore["issueDetail"] = {};
+
+  // service
+  archivedIssueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      deleteArchivedIssue: action,
+    });
+    this.rootStore = _rootStore;
+    this.archivedIssueService = new IssueArchiveService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        this.rootStore.archivedIssueFilters.userDisplayFilters &&
+        this.rootStore.archivedIssueFilters.userFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId);
+    });
+  }
+
+  get getIssueType() {
+    const issueSubGroup = this.rootStore.archivedIssueFilters.userDisplayFilters?.sub_group_by || null;
+    return issueSubGroup ? "groupWithSubGroups" : "grouped";
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore.archivedIssueFilters.appliedFilters;
+      const issueResponse = await this.archivedIssueService.getArchivedIssues(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      throw error;
+    }
+  };
+
+  /**
+   * @description Function to delete issue from the store. NOTE: This function is not deleting issue from the backend.
+   */
+  deleteArchivedIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues?.[group_id]?.filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues?.[sub_group_id],
+          [group_id]: issues?.[sub_group_id]?.[group_id]?.filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+}
diff --git a/web/store/archived-issues/issue_detail.store.ts b/web/store/archived-issues/issue_detail.store.ts
new file mode 100644
index 00000000000..ef3468f1995
--- /dev/null
+++ b/web/store/archived-issues/issue_detail.store.ts
@@ -0,0 +1,198 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueArchiveService } from "services/issue";
+
+export interface IArchivedIssueDetailStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issueDetail: {
+    [issue_id: string]: IIssue;
+  };
+  peekId: string | null;
+
+  // services
+  archivedIssueService: IssueArchiveService;
+
+  // computed
+  getIssue: IIssue | null;
+
+  // action
+  deleteArchivedIssue: (workspaceSlug: string, projectId: string, issuesId: string) => Promise<any>;
+  unarchiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+  fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+  fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
+}
+
+export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issueDetail: IArchivedIssueDetailStore["issueDetail"] = {};
+  peekId: string | null = null;
+
+  // service
+  archivedIssueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issueDetail: observable.ref,
+      peekId: observable.ref,
+
+      // computed
+      getIssue: computed,
+
+      // actions
+      deleteArchivedIssue: action,
+      unarchiveIssue: action,
+      fetchIssueDetails: action,
+      fetchPeekIssueDetails: action,
+    });
+    this.rootStore = _rootStore;
+    this.archivedIssueService = new IssueArchiveService();
+  }
+
+  get getIssue() {
+    if (!this.peekId) return null;
+    const _issue = this.issueDetail[this.peekId];
+    return _issue || null;
+  }
+
+  /**
+   * @description Function to delete archived issue from the detail store and backend.
+   */
+  deleteArchivedIssue = async (workspaceSlug: string, projectId: string, issuesId: string) => {
+    const originalIssues = { ...this.issueDetail };
+
+    const _issues = { ...this.issueDetail };
+    delete _issues[issuesId];
+
+    // optimistically deleting item from store
+    runInAction(() => {
+      this.issueDetail = _issues;
+    });
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      // deleting using api
+      const issueResponse = await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issuesId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        // reverting back to original issues
+        this.issueDetail = originalIssues;
+      });
+      throw error;
+    }
+  };
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issueDetail = {
+          ...this.issueDetail,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+      throw error;
+    }
+  };
+
+  unarchiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const issueResponse = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
+      this.rootStore.archivedIssues.fetchIssues(workspaceSlug, projectId);
+
+      // deleting from issue detail store
+      const _issues = { ...this.issueDetail };
+      delete _issues[issueId];
+      runInAction(() => {
+        this.issueDetail = _issues;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+      throw error;
+    }
+  };
+
+  fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.peekId = issueId;
+    });
+
+    try {
+      const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
+      await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
+      await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issueDetail = {
+          ...this.issueDetail,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.peekId = null;
+      });
+      throw error;
+    }
+  };
+}
diff --git a/web/store/archived-issues/issue_filters.store.ts b/web/store/archived-issues/issue_filters.store.ts
new file mode 100644
index 00000000000..edb1549a630
--- /dev/null
+++ b/web/store/archived-issues/issue_filters.store.ts
@@ -0,0 +1,244 @@
+import { observable, computed, makeObservable, action, runInAction } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// services
+import { IssueService } from "services/issue";
+import { ProjectService } from "services/project";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueParams,
+  IProjectViewProps,
+} from "types";
+
+export interface IArchivedIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // services
+  projectService: ProjectService;
+  issueService: IssueService;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+
+  // actions
+  fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateUserFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IProjectViewProps>
+  ) => Promise<void>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => Promise<void>;
+}
+
+export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  projectService: ProjectService;
+  issueService: IssueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+
+      // actions
+      fetchUserProjectFilters: action,
+      updateUserFilters: action,
+      updateDisplayProperties: action,
+      computedFilter: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.issueService = new IssueService();
+    this.projectService = new ProjectService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by,
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout("list", "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+
+  updateUserFilters = async (workspaceSlug: string, projectId: string, properties: Partial<IProjectViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.userDisplayFilters,
+        ...properties.display_filters,
+      },
+      filters: {
+        ...this.userFilters,
+        ...properties.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.userFilters = newViewProps.filters;
+        this.userDisplayFilters = {
+          ...newViewProps.display_filters,
+          layout: "list",
+        };
+      });
+
+      this.projectService.setProjectView(workspaceSlug, projectId, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+
+  updateDisplayProperties = async (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => {
+    const newProperties: IIssueDisplayProperties = {
+      ...this.userDisplayProperties,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.userDisplayProperties = newProperties;
+      });
+
+      await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user display properties in issue filter store", error);
+    }
+  };
+
+  fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const memberResponse = await this.projectService.projectMemberMe(workspaceSlug, projectId);
+      const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.userFilters = memberResponse?.view_props?.filters;
+        this.userDisplayFilters = {
+          ...(memberResponse?.view_props?.display_filters ?? {}),
+          layout: "list",
+        };
+        this.userDisplayProperties = issueProperties?.properties;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/calendar.store.ts b/web/store/calendar.store.ts
new file mode 100644
index 00000000000..3d4f5cfdde0
--- /dev/null
+++ b/web/store/calendar.store.ts
@@ -0,0 +1,121 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+
+// helpers
+import { generateCalendarData } from "helpers/calendar.helper";
+// types
+import { RootStore } from "./root";
+import { ICalendarPayload, ICalendarWeek } from "components/issues";
+import { getWeekNumberOfDate } from "helpers/date-time.helper";
+
+export interface ICalendarStore {
+  calendarFilters: {
+    activeMonthDate: Date;
+    activeWeekDate: Date;
+  };
+  calendarPayload: ICalendarPayload | null;
+
+  // action
+  updateCalendarFilters: (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => void;
+  updateCalendarPayload: (date: Date) => void;
+
+  // computed
+  allWeeksOfActiveMonth:
+    | {
+        [weekNumber: string]: ICalendarWeek;
+      }
+    | undefined;
+  activeWeekNumber: number;
+  allDaysOfActiveWeek: ICalendarWeek | undefined;
+}
+
+class CalendarStore implements ICalendarStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  calendarFilters: { activeMonthDate: Date; activeWeekDate: Date } = {
+    activeMonthDate: new Date(),
+    activeWeekDate: new Date(),
+  };
+  calendarPayload: ICalendarPayload | null = null;
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      calendarFilters: observable.ref,
+      calendarPayload: observable.ref,
+
+      // actions
+      updateCalendarFilters: action,
+      updateCalendarPayload: action,
+
+      //computed
+      allWeeksOfActiveMonth: computed,
+      activeWeekNumber: computed,
+      allDaysOfActiveWeek: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.initCalendar();
+  }
+
+  get allWeeksOfActiveMonth() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeMonthDate } = this.calendarFilters;
+
+    return this.calendarPayload[`y-${activeMonthDate.getFullYear()}`][`m-${activeMonthDate.getMonth()}`];
+  }
+
+  get activeWeekNumber() {
+    return getWeekNumberOfDate(this.calendarFilters.activeWeekDate);
+  }
+
+  get allDaysOfActiveWeek() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeWeekDate } = this.calendarFilters;
+
+    return this.calendarPayload[`y-${activeWeekDate.getFullYear()}`][`m-${activeWeekDate.getMonth()}`][
+      `w-${this.activeWeekNumber}`
+    ];
+  }
+
+  updateCalendarFilters = (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => {
+    this.updateCalendarPayload(filters.activeMonthDate || filters.activeWeekDate || new Date());
+
+    runInAction(() => {
+      this.calendarFilters = {
+        ...this.calendarFilters,
+        ...filters,
+      };
+    });
+  };
+
+  updateCalendarPayload = (date: Date) => {
+    if (!this.calendarPayload) return null;
+
+    const nextDate = new Date(date);
+
+    runInAction(() => {
+      this.calendarPayload = generateCalendarData(this.calendarPayload, nextDate);
+    });
+  };
+
+  initCalendar = () => {
+    const newCalendarPayload = generateCalendarData(null, new Date());
+
+    runInAction(() => {
+      this.calendarPayload = newCalendarPayload;
+    });
+  };
+}
+
+export default CalendarStore;
diff --git a/web/store/command-palette.store.ts b/web/store/command-palette.store.ts
new file mode 100644
index 00000000000..7bed73bfebc
--- /dev/null
+++ b/web/store/command-palette.store.ts
@@ -0,0 +1,163 @@
+import { observable, action, makeObservable } from "mobx";
+// types
+import { RootStore } from "./root";
+// services
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+
+export interface ICommandPaletteStore {
+  isCommandPaletteOpen: boolean;
+  isShortcutModalOpen: boolean;
+  isCreateProjectModalOpen: boolean;
+  isCreateCycleModalOpen: boolean;
+  isCreateModuleModalOpen: boolean;
+  isCreateViewModalOpen: boolean;
+  isCreatePageModalOpen: boolean;
+  isCreateIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: boolean;
+  isBulkDeleteIssueModalOpen: boolean;
+
+  toggleCommandPaletteModal: (value?: boolean) => void;
+  toggleShortcutModal: (value?: boolean) => void;
+  toggleCreateProjectModal: (value?: boolean) => void;
+  toggleCreateCycleModal: (value?: boolean) => void;
+  toggleCreateViewModal: (value?: boolean) => void;
+  toggleCreatePageModal: (value?: boolean) => void;
+  toggleCreateIssueModal: (value?: boolean) => void;
+  toggleCreateModuleModal: (value?: boolean) => void;
+  toggleDeleteIssueModal: (value?: boolean) => void;
+  toggleBulkDeleteIssueModal: (value?: boolean) => void;
+}
+
+class CommandPaletteStore implements ICommandPaletteStore {
+  isCommandPaletteOpen: boolean = false;
+  isShortcutModalOpen: boolean = false;
+  isCreateProjectModalOpen: boolean = false;
+  isCreateCycleModalOpen: boolean = false;
+  isCreateModuleModalOpen: boolean = false;
+  isCreateViewModalOpen: boolean = false;
+  isCreatePageModalOpen: boolean = false;
+  isCreateIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: boolean = false;
+  isBulkDeleteIssueModalOpen: boolean = false;
+  // root store
+  rootStore;
+  // service
+  projectService;
+  pageService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      isCommandPaletteOpen: observable.ref,
+      isShortcutModalOpen: observable.ref,
+      isCreateProjectModalOpen: observable.ref,
+      isCreateCycleModalOpen: observable.ref,
+      isCreateModuleModalOpen: observable.ref,
+      isCreateViewModalOpen: observable.ref,
+      isCreatePageModalOpen: observable.ref,
+      isCreateIssueModalOpen: observable.ref,
+      isDeleteIssueModalOpen: observable.ref,
+      isBulkDeleteIssueModalOpen: observable.ref,
+      // computed
+      // projectPages: computed,
+      // action
+      toggleCommandPaletteModal: action,
+      toggleShortcutModal: action,
+      toggleCreateProjectModal: action,
+      toggleCreateCycleModal: action,
+      toggleCreateViewModal: action,
+      toggleCreatePageModal: action,
+      toggleCreateIssueModal: action,
+      toggleCreateModuleModal: action,
+      toggleDeleteIssueModal: action,
+      toggleBulkDeleteIssueModal: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.pageService = new PageService();
+  }
+
+  toggleCommandPaletteModal = (value?: boolean) => {
+    if (value) {
+      this.isCommandPaletteOpen = value;
+    } else {
+      this.isCommandPaletteOpen = !this.isCommandPaletteOpen;
+    }
+  };
+
+  toggleShortcutModal = (value?: boolean) => {
+    if (value) {
+      this.isShortcutModalOpen = value;
+    } else {
+      this.isShortcutModalOpen = !this.isShortcutModalOpen;
+    }
+  };
+
+  toggleCreateProjectModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateProjectModalOpen = value;
+    } else {
+      this.isCreateProjectModalOpen = !this.isCreateProjectModalOpen;
+    }
+  };
+
+  toggleCreateCycleModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateCycleModalOpen = value;
+    } else {
+      this.isCreateCycleModalOpen = !this.isCreateCycleModalOpen;
+    }
+  };
+
+  toggleCreateViewModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateViewModalOpen = value;
+    } else {
+      this.isCreateViewModalOpen = !this.isCreateViewModalOpen;
+    }
+  };
+
+  toggleCreatePageModal = (value?: boolean) => {
+    if (value) {
+      this.isCreatePageModalOpen = value;
+    } else {
+      this.isCreatePageModalOpen = !this.isCreatePageModalOpen;
+    }
+  };
+
+  toggleCreateIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateIssueModalOpen = value;
+    } else {
+      this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
+    }
+  };
+
+  toggleDeleteIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isDeleteIssueModalOpen = value;
+    } else {
+      this.isDeleteIssueModalOpen = !this.isDeleteIssueModalOpen;
+    }
+  };
+
+  toggleCreateModuleModal = (value?: boolean) => {
+    if (value) {
+      this.isCreateModuleModalOpen = value;
+    } else {
+      this.isCreateModuleModalOpen = !this.isCreateModuleModalOpen;
+    }
+  };
+
+  toggleBulkDeleteIssueModal = (value?: boolean) => {
+    if (value) {
+      this.isBulkDeleteIssueModalOpen = value;
+    } else {
+      this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
+    }
+  };
+}
+
+export default CommandPaletteStore;
diff --git a/web/store/cycle/cycle_issue.store.ts b/web/store/cycle/cycle_issue.store.ts
new file mode 100644
index 00000000000..17d8f351cbf
--- /dev/null
+++ b/web/store/cycle/cycle_issue.store.ts
@@ -0,0 +1,364 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// services
+import { CycleService } from "services/cycle.service";
+import { IssueService } from "services/issue";
+// constants
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { IIssue } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface ICycleIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [cycleId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, cycleId: string, issue: IIssue, payload: IBlockUpdateData) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => void;
+}
+
+export class CycleIssueStore implements ICycleIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [cycle_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+
+  // services
+  rootStore;
+  cycleService;
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      addIssueToCycle: action,
+      removeIssueFromCycle: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.cycleService = new CycleService();
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const cycleId = this.rootStore.cycle.cycleId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        cycleId &&
+        this.rootStore.cycleIssueFilter.cycleFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId, cycleId);
+    });
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const cycleId: string | null = this.rootStore?.cycle?.cycleId;
+    const issueType = this.getIssueType;
+    if (!cycleId || !issueType) return null;
+
+    return this.issues?.[cycleId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const cycleId: string | null = this.rootStore?.cycle?.cycleId || null;
+    const issueType = this.getIssueType;
+    if (!cycleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") issues = sortArrayByDate(issues as any, "created_at");
+    if (orderBy === "-updated_at") issues = sortArrayByDate(issues as any, "updated_at");
+    if (orderBy === "start_date") issues = sortArrayByDate(issues as any, "updated_at");
+    if (orderBy === "priority") issues = sortArrayByPriority(issues as any, "priority");
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [cycleId]: { ...this.issues[cycleId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    cycleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [cycleId]: {
+          ...this.issues[cycleId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const cycleId: string | null = this.rootStore.cycle.cycleId;
+    const issueType = this.getIssueType;
+    if (!cycleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [cycleId]: { ...this.issues[cycleId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const params = this.rootStore?.cycleIssueFilter?.appliedFilters;
+      const issueResponse = await this.cycleService.getCycleIssuesWithParams(workspaceSlug, projectId, cycleId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [cycleId]: {
+            ...this.issues[cycleId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+    try {
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.issueService.addIssueToCycle(
+        workspaceSlug,
+        projectId,
+        cycleId,
+        {
+          issues: issueIds,
+        },
+        user
+      );
+
+      this.fetchIssues(workspaceSlug, projectId, cycleId);
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) => {
+    try {
+      await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, bridgeId);
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/cycle/cycle_issue_calendar_view.store.ts b/web/store/cycle/cycle_issue_calendar_view.store.ts
new file mode 100644
index 00000000000..3b695d69778
--- /dev/null
+++ b/web/store/cycle/cycle_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+export interface ICycleIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class CycleIssueCalendarViewStore implements ICycleIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const cycleId = this.rootStore?.cycle?.cycleId;
+    const issueType: IIssueType | null = this.rootStore?.cycleIssue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    if (workspaceSlug && projectId && cycleId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [cycleId]: {
+          ...this.rootStore?.cycleIssue.issues?.[cycleId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[cycleId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
diff --git a/web/store/cycle/cycle_issue_filters.store.ts b/web/store/cycle/cycle_issue_filters.store.ts
new file mode 100644
index 00000000000..c6818b6df21
--- /dev/null
+++ b/web/store/cycle/cycle_issue_filters.store.ts
@@ -0,0 +1,147 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { CycleService } from "services/cycle.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions, TIssueParams } from "types";
+
+export interface ICycleIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+  cycleFilters: IIssueFilterOptions;
+
+  // action
+  fetchCycleFilters: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  updateCycleFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class CycleIssueFilterStore implements ICycleIssueFilterStore {
+  // observables
+  loader: boolean = false;
+  error: any | null = null;
+  cycleFilters: IIssueFilterOptions = {};
+  // root store
+  rootStore;
+  // services
+  cycleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      error: observable.ref,
+      cycleFilters: observable.ref,
+      // computed
+      appliedFilters: computed,
+      // actions
+      fetchCycleFilters: action,
+      updateCycleFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.cycleService = new CycleService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    const userDisplayFilters = this.rootStore?.issueFilter?.userDisplayFilters;
+
+    if (!this.cycleFilters || !userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.cycleFilters?.priority || undefined,
+      state_group: this.cycleFilters?.state_group || undefined,
+      state: this.cycleFilters?.state || undefined,
+      assignees: this.cycleFilters?.assignees || undefined,
+      created_by: this.cycleFilters?.created_by || undefined,
+      labels: this.cycleFilters?.labels || undefined,
+      start_date: this.cycleFilters?.start_date || undefined,
+      target_date: this.cycleFilters?.target_date || undefined,
+      group_by: userDisplayFilters?.group_by || "state",
+      order_by: userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: userDisplayFilters?.sub_group_by || undefined,
+      type: userDisplayFilters?.type || undefined,
+      sub_issue: userDisplayFilters?.sub_issue || true,
+      show_empty_groups: userDisplayFilters?.show_empty_groups || true,
+      start_target_date: userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userDisplayFilters.layout, "issues");
+
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchCycleFilters = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const cycleResponse = await this.cycleService.getCycleDetails(workspaceSlug, projectId, cycleId);
+      runInAction(() => {
+        this.cycleFilters = cycleResponse?.view_props?.filters || {};
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+
+  updateCycleFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    properties: Partial<IIssueFilterOptions>
+  ) => {
+    const newProperties = {
+      ...this.cycleFilters,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.cycleFilters = newProperties;
+      });
+
+      const payload = {
+        view_props: {
+          filters: newProperties,
+        },
+      };
+
+      await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, payload, undefined);
+    } catch (error) {
+      this.fetchCycleFilters(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/cycle/cycle_issue_kanban_view.store.ts b/web/store/cycle/cycle_issue_kanban_view.store.ts
new file mode 100644
index 00000000000..0ecc96e60ad
--- /dev/null
+++ b/web/store/cycle/cycle_issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+export interface ICycleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (this.rootStore.issueDetail.peekId) return false;
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.cycleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.cycleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+}
diff --git a/web/store/cycle/cycles.store.ts b/web/store/cycle/cycles.store.ts
new file mode 100644
index 00000000000..06ac6185465
--- /dev/null
+++ b/web/store/cycle/cycles.store.ts
@@ -0,0 +1,358 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// types
+import { ICycle, TCycleView, TCycleLayout, CycleDateCheckData, IIssue } from "types";
+// mobx
+import { RootStore } from "../root";
+// services
+import { ProjectService } from "services/project";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
+
+export interface ICycleStore {
+  loader: boolean;
+  error: any | null;
+
+  cycleView: TCycleView;
+  cycleLayout: TCycleLayout;
+
+  cycleId: string | null;
+  cycles: {
+    [project_id: string]: ICycle[];
+  };
+  cycle_details: {
+    [cycle_id: string]: ICycle;
+  };
+  active_cycle_issues: {
+    [cycle_id: string]: IIssue[];
+  };
+
+  // computed
+  getCycleById: (cycleId: string) => ICycle | null;
+
+  // actions
+  setCycleView: (_cycleView: TCycleView) => void;
+  setCycleLayout: (_cycleLayout: TCycleLayout) => void;
+  setCycleId: (cycleId: string) => void;
+
+  validateDate: (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => Promise<any>;
+
+  fetchCycles: (
+    workspaceSlug: string,
+    projectId: string,
+    params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ) => Promise<void>;
+  fetchCycleWithId: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  fetchActiveCycleIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+
+  createCycle: (workspaceSlug: string, projectId: string, data: any) => Promise<ICycle>;
+  updateCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: any) => Promise<ICycle>;
+  removeCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+
+  addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+}
+
+export class CycleStore implements ICycleStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  cycleView: TCycleView = "all";
+  cycleLayout: TCycleLayout = "list";
+
+  cycleId: string | null = null;
+  cycles: {
+    [project_id: string]: ICycle[];
+  } = {};
+
+  cycle_details: {
+    [cycle_id: string]: ICycle;
+  } = {};
+
+  active_cycle_issues: {
+    [cycle_id: string]: IIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+  // services
+  projectService;
+  issueService;
+  cycleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable,
+      error: observable.ref,
+
+      cycleView: observable,
+      cycleLayout: observable,
+
+      cycleId: observable,
+      cycles: observable.ref,
+      cycle_details: observable.ref,
+      active_cycle_issues: observable.ref,
+
+      // computed
+      projectCycles: computed,
+
+      // actions
+      setCycleView: action,
+      setCycleLayout: action,
+      setCycleId: action,
+      getCycleById: action,
+
+      fetchCycles: action,
+      fetchCycleWithId: action,
+
+      fetchActiveCycleIssues: action,
+
+      createCycle: action,
+      updateCycle: action,
+      removeCycle: action,
+
+      addCycleToFavorites: action,
+      removeCycleFromFavorites: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.cycleService = new CycleService();
+  }
+
+  // computed
+  get projectCycles() {
+    if (!this.rootStore.project.projectId) return null;
+    return this.cycles[this.rootStore.project.projectId] || null;
+  }
+
+  getCycleById = (cycleId: string) => this.cycle_details[cycleId] || null;
+
+  // actions
+  setCycleView = (_cycleView: TCycleView) => (this.cycleView = _cycleView);
+  setCycleLayout = (_cycleLayout: TCycleLayout) => (this.cycleLayout = _cycleLayout);
+  setCycleId = (cycleId: string) => (this.cycleId = cycleId);
+
+  validateDate = async (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => {
+    try {
+      const response = await this.cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
+      return response;
+    } catch (error) {
+      console.log("Failed to validate cycle dates", error);
+      throw error;
+    }
+  };
+
+  fetchCycles = async (
+    workspaceSlug: string,
+    projectId: string,
+    params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const cyclesResponse = await this.cycleService.getCyclesWithParams(workspaceSlug, projectId, params);
+
+      if (this.cycleView === "active") this.fetchActiveCycleIssues(workspaceSlug, projectId, cyclesResponse[0].id);
+
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: cyclesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project cycles in project store", error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchCycleWithId = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const response = await this.cycleService.getCycleDetails(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.cycle_details = {
+          ...this.cycle_details,
+          [response?.id]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to fetch cycle detail from cycle store");
+      throw error;
+    }
+  };
+
+  fetchActiveCycleIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const _cycleIssues = await this.cycleService.getCycleIssuesWithParams(workspaceSlug, projectId, cycleId, {
+        priority: `urgent,high`,
+      });
+
+      const _activeCycleIssues = {
+        ...this.active_cycle_issues,
+        [cycleId]: _cycleIssues as IIssue[],
+      };
+
+      runInAction(() => {
+        this.active_cycle_issues = _activeCycleIssues;
+      });
+
+      return _activeCycleIssues;
+    } catch (error) {
+      console.log("error");
+    }
+  };
+
+  createCycle = async (workspaceSlug: string, projectId: string, data: any) => {
+    try {
+      console.log("Cycle Creating");
+      const response = await this.cycleService.createCycle(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+      console.log("Cycle created");
+
+      runInAction(() => {
+        this.cycle_details = {
+          ...this.cycle_details,
+          [response?.id]: response,
+        };
+      });
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create cycle from cycle store");
+      throw error;
+    }
+  };
+
+  updateCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: any) => {
+    try {
+      const response = await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, data, undefined);
+
+      const _cycleDetails = {
+        ...this.cycle_details,
+        [cycleId]: { ...this.cycle_details[cycleId], ...response },
+      };
+
+      runInAction(() => {
+        this.cycle_details = _cycleDetails;
+      });
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update cycle from cycle store");
+      throw error;
+    }
+  };
+
+  patchCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: any) => {
+    try {
+      const _response = await this.cycleService.patchCycle(workspaceSlug, projectId, cycleId, data, undefined);
+
+      const _cycleDetails = {
+        ...this.cycle_details,
+        [cycleId]: { ...this.cycle_details[cycleId], ..._response },
+      };
+
+      runInAction(() => {
+        this.cycle_details = _cycleDetails;
+      });
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return _response;
+    } catch (error) {
+      console.log("Failed to patch cycle from cycle store");
+      throw error;
+    }
+  };
+
+  removeCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const _response = await this.cycleService.deleteCycle(workspaceSlug, projectId, cycleId, undefined);
+
+      const _currentView = this.cycleView === "active" ? "current" : this.cycleView;
+      this.fetchCycles(workspaceSlug, projectId, _currentView);
+
+      return _response;
+    } catch (error) {
+      console.log("Failed to delete cycle from cycle store");
+      throw error;
+    }
+  };
+
+  addCycleToFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: true };
+            return cycle;
+          }),
+        };
+      });
+      // updating through api.
+      const response = await this.cycleService.addCycleToFavorites(workspaceSlug, projectId, { cycle: cycleId });
+      return response;
+    } catch (error) {
+      console.log("Failed to add cycle to favorites in the cycles store", error);
+      // resetting the local state
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: false };
+            return cycle;
+          }),
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  removeCycleFromFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: false };
+            return cycle;
+          }),
+        };
+      });
+      const response = await this.cycleService.removeCycleFromFavorites(workspaceSlug, projectId, cycleId);
+      return response;
+    } catch (error) {
+      console.log("Failed to remove cycle from favorites - Cycle Store", error);
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: true };
+            return cycle;
+          }),
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/web/store/cycle/index.ts b/web/store/cycle/index.ts
new file mode 100644
index 00000000000..ae854f97890
--- /dev/null
+++ b/web/store/cycle/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle_issue_filters.store";
+export * from "./cycle_issue_kanban_view.store";
+export * from "./cycle_issue_calendar_view.store";
+export * from "./cycle_issue.store";
+export * from "./cycles.store";
diff --git a/web/store/draft-issues/index.ts b/web/store/draft-issues/index.ts
new file mode 100644
index 00000000000..abfd52768ec
--- /dev/null
+++ b/web/store/draft-issues/index.ts
@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
diff --git a/web/store/draft-issues/issue.store.ts b/web/store/draft-issues/issue.store.ts
new file mode 100644
index 00000000000..f31a0bbb451
--- /dev/null
+++ b/web/store/draft-issues/issue.store.ts
@@ -0,0 +1,184 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface IDraftIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class DraftIssueStore implements IDraftIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  issueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore?.issueFilter?.appliedFilters;
+      const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/draft-issues/issue_filters.store.ts b/web/store/draft-issues/issue_filters.store.ts
new file mode 100644
index 00000000000..2560c011bbc
--- /dev/null
+++ b/web/store/draft-issues/issue_filters.store.ts
@@ -0,0 +1,109 @@
+import { observable, computed, makeObservable } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IDraftIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class DraftIssueFilterStore implements IDraftIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+    assignees: null,
+    created_by: null,
+    subscriber: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || "state",
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+}
diff --git a/web/store/editor/index.ts b/web/store/editor/index.ts
new file mode 100644
index 00000000000..ff3ce7a3349
--- /dev/null
+++ b/web/store/editor/index.ts
@@ -0,0 +1 @@
+export * from "./mentions.store"
\ No newline at end of file
diff --git a/web/store/editor/mentions.store.ts b/web/store/editor/mentions.store.ts
new file mode 100644
index 00000000000..4bf1f45c3af
--- /dev/null
+++ b/web/store/editor/mentions.store.ts
@@ -0,0 +1,45 @@
+import { IMentionHighlight, IMentionSuggestion } from "@plane/lite-text-editor";
+import { RootStore } from "../root";
+import { computed, makeObservable } from "mobx";
+
+export interface IMentionsStore {
+    mentionSuggestions: IMentionSuggestion[];
+    mentionHighlights: IMentionHighlight[];
+}
+
+export class MentionsStore implements IMentionsStore{
+
+    // root store
+    rootStore;
+
+    constructor(_rootStore: RootStore ){
+
+        // rootStore
+        this.rootStore = _rootStore;
+
+        makeObservable(this, {
+            mentionHighlights: computed,
+            mentionSuggestions: computed
+        })
+    }
+
+    get mentionSuggestions() {
+        const projectMembers = this.rootStore.project.projectMembers
+
+        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.currentUser;
+        return user ? [user.id] : []
+    }
+}
\ No newline at end of file
diff --git a/web/store/global-view/global_view_filters.store.ts b/web/store/global-view/global_view_filters.store.ts
new file mode 100644
index 00000000000..9bec4bde8a1
--- /dev/null
+++ b/web/store/global-view/global_view_filters.store.ts
@@ -0,0 +1,68 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions } from "types";
+
+export interface IGlobalViewFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  };
+
+  // actions
+  updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
+  deleteStoredFilters: (viewId: string) => void;
+}
+
+export class GlobalViewFiltersStore implements IGlobalViewFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  } = {};
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      storedFilters: observable.ref,
+
+      // actions
+      updateStoredFilters: action,
+      deleteStoredFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
+    runInAction(() => {
+      this.storedFilters = {
+        ...this.storedFilters,
+        [viewId]: { ...this.storedFilters[viewId], ...filters },
+      };
+    });
+  };
+
+  deleteStoredFilters = (viewId: string) => {
+    const updatedStoredFilters = { ...this.storedFilters };
+    delete updatedStoredFilters[viewId];
+
+    runInAction(() => {
+      this.storedFilters = updatedStoredFilters;
+    });
+  };
+}
diff --git a/web/store/global-view/global_view_issues.store.ts b/web/store/global-view/global_view_issues.store.ts
new file mode 100644
index 00000000000..006c9b380a3
--- /dev/null
+++ b/web/store/global-view/global_view_issues.store.ts
@@ -0,0 +1,204 @@
+import { observable, action, makeObservable, runInAction, autorun } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssue, IIssueFilterOptions, TStaticViewTypes } from "types";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export interface IGlobalViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  };
+
+  // actions
+  fetchViewIssues: (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => Promise<any>;
+  fetchStaticIssues: (workspaceSlug: string, type: TStaticViewTypes) => Promise<any>;
+  updateIssueStructure: (viewId: string, issue: IIssue) => Promise<any>;
+}
+
+export class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewIssues: observable.ref,
+
+      // actions
+      fetchViewIssues: action,
+      fetchStaticIssues: action,
+      updateIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const globalViewId = this.rootStore.globalViews.globalViewId;
+
+      if (
+        workspaceSlug &&
+        globalViewId &&
+        this.rootStore.globalViewFilters.storedFilters[globalViewId] &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchViewIssues(workspaceSlug, globalViewId, this.rootStore.globalViewFilters.storedFilters[globalViewId]);
+    });
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  fetchViewIssues = async (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const displayFilters = this.rootStore.workspaceFilter.workspaceDisplayFilters;
+
+      let filteredRouteParams: any = {
+        priority: filters?.priority || undefined,
+        project: filters?.project || undefined,
+        state_group: filters?.state_group || undefined,
+        state: filters?.state || undefined,
+        assignees: filters?.assignees || undefined,
+        created_by: filters?.created_by || undefined,
+        labels: filters?.labels || undefined,
+        start_date: filters?.start_date || undefined,
+        target_date: filters?.target_date || undefined,
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [viewId]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchStaticIssues = async (workspaceSlug: string, type: TStaticViewTypes) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const workspaceMemberResponse = await this.rootStore.workspaceFilter.fetchUserWorkspaceFilters(workspaceSlug);
+      const displayFilters = workspaceMemberResponse.view_props.display_filters;
+
+      let filteredRouteParams: any = {
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const currentUser = this.rootStore.user.currentUser;
+
+      if (type === "assigned" && currentUser) filteredRouteParams.assignees = currentUser.id;
+      if (type === "created" && currentUser) filteredRouteParams.created_by = currentUser.id;
+      if (type === "subscribed" && currentUser) filteredRouteParams.subscriber = currentUser.id;
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [type]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateIssueStructure = async (viewId: string, issue: IIssue) => {
+    let issues = this.viewIssues[viewId];
+
+    if (!issues) return null;
+
+    const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+    issues = _currentIssueId
+      ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+      : [...(issues ?? []), issue];
+
+    const orderBy = this.rootStore?.workspaceFilter?.workspaceDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") issues = sortArrayByDate(issues as any, "created_at");
+
+    if (orderBy === "-updated_at") issues = sortArrayByDate(issues as any, "updated_at");
+
+    if (orderBy === "start_date") issues = sortArrayByDate(issues as any, "updated_at");
+
+    if (orderBy === "priority") issues = sortArrayByPriority(issues as any, "priority");
+
+    runInAction(() => {
+      this.viewIssues = { ...this.viewIssues, [viewId]: issues };
+    });
+  };
+}
diff --git a/web/store/global-view/global_views.store.ts b/web/store/global-view/global_views.store.ts
new file mode 100644
index 00000000000..c9915b8d898
--- /dev/null
+++ b/web/store/global-view/global_views.store.ts
@@ -0,0 +1,205 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
+// types
+import { RootStore } from "../root";
+import { IWorkspaceView } from "types/workspace-views";
+
+export interface IGlobalViewsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  globalViewId: string | null;
+  globalViewsList: IWorkspaceView[] | null;
+  globalViewDetails: {
+    [viewId: string]: IWorkspaceView;
+  };
+
+  // actions
+  setGlobalViewId: (viewId: string) => void;
+
+  fetchAllGlobalViews: (workspaceSlug: string) => Promise<IWorkspaceView[]>;
+  fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
+  createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  updateGlobalView: (workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
+}
+
+export class GlobalViewsStore implements IGlobalViewsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  globalViewId: string | null = null;
+  globalViewsList: IWorkspaceView[] | null = null;
+  globalViewDetails: { [viewId: string]: IWorkspaceView } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      globalViewId: observable.ref,
+      globalViewsList: observable.ref,
+      globalViewDetails: observable.ref,
+
+      // actions
+      setGlobalViewId: action,
+
+      fetchAllGlobalViews: action,
+      fetchGlobalViewDetails: action,
+      createGlobalView: action,
+      updateGlobalView: action,
+      deleteGlobalView: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  setGlobalViewId = (viewId: string) => {
+    this.globalViewId = viewId;
+  };
+
+  fetchAllGlobalViews = async (workspaceSlug: string): Promise<IWorkspaceView[]> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getAllViews(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewsList = response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchGlobalViewDetails = async (workspaceSlug: string, viewId: string): Promise<IWorkspaceView> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createGlobalView = async (workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> => {
+    try {
+      const response = await this.workspaceService.createView(workspaceSlug, data);
+
+      runInAction(() => {
+        this.globalViewsList = [response, ...(this.globalViewsList ?? [])];
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateGlobalView = async (
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>
+  ): Promise<IWorkspaceView> => {
+    const viewToUpdate = { ...this.globalViewDetails[viewId], ...data };
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = (this.globalViewsList ?? []).map((view) => {
+          if (view.id === viewId) return viewToUpdate;
+
+          return view;
+        });
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [viewId]: viewToUpdate,
+        };
+      });
+
+      const response = await this.workspaceService.updateView(workspaceSlug, viewId, data);
+
+      return response;
+    } catch (error) {
+      this.fetchGlobalViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteGlobalView = async (workspaceSlug: string, viewId: string): Promise<any> => {
+    const newViewsList = (this.globalViewsList ?? []).filter((view) => view.id !== viewId);
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = newViewsList;
+      });
+
+      await this.workspaceService.deleteView(workspaceSlug, viewId);
+    } catch (error) {
+      this.fetchAllGlobalViews(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/global-view/index.ts b/web/store/global-view/index.ts
new file mode 100644
index 00000000000..6c62135db41
--- /dev/null
+++ b/web/store/global-view/index.ts
@@ -0,0 +1,3 @@
+export * from "./global_view_filters.store";
+export * from "./global_view_issues.store";
+export * from "./global_views.store";
diff --git a/web/store/inbox/inbox.store.ts b/web/store/inbox/inbox.store.ts
new file mode 100644
index 00000000000..c1ca086098e
--- /dev/null
+++ b/web/store/inbox/inbox.store.ts
@@ -0,0 +1,162 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInbox } from "types";
+
+export interface IInboxStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxId: string | null;
+
+  inboxesList: {
+    [projectId: string]: IInbox[];
+  };
+  inboxDetails: {
+    [inboxId: string]: IInbox;
+  };
+
+  // actions
+  setInboxId: (inboxId: string) => void;
+
+  getInboxId: (projectId: string) => string | null;
+
+  fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise<IInbox[]>;
+  fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
+
+  // computed
+  isInboxEnabled: boolean;
+}
+
+export class InboxStore implements IInboxStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxId: string | null = null;
+
+  inboxesList: {
+    [projectId: string]: IInbox[];
+  } = {};
+  inboxDetails: {
+    [inboxId: string]: IInbox;
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxId: observable.ref,
+
+      inboxesList: observable.ref,
+      inboxDetails: observable.ref,
+
+      // actions
+      setInboxId: action,
+
+      fetchInboxesList: action,
+      getInboxId: action,
+
+      // computed
+      isInboxEnabled: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  get isInboxEnabled() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return false;
+
+    const projectDetails = this.rootStore.project.project_details[projectId];
+
+    if (!projectDetails) return false;
+
+    return projectDetails.inbox_view;
+  }
+
+  getInboxId = (projectId: string) => {
+    const projectDetails = this.rootStore.project.project_details[projectId];
+
+    if (!projectDetails || !projectDetails.inbox_view) return null;
+
+    return this.inboxesList[projectId]?.[0]?.id ?? null;
+  };
+
+  setInboxId = (inboxId: string) => {
+    runInAction(() => {
+      this.inboxId = inboxId;
+    });
+  };
+
+  fetchInboxesList = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const inboxesResponse = await this.inboxService.getInboxes(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxesList = {
+          ...this.inboxesList,
+          [projectId]: inboxesResponse,
+        };
+      });
+
+      return inboxesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchInboxDetails = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const inboxDetailsResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxDetails = {
+          ...this.inboxDetails,
+          [inboxId]: inboxDetailsResponse,
+        };
+      });
+
+      return inboxDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_filters.store.ts b/web/store/inbox/inbox_filters.store.ts
new file mode 100644
index 00000000000..8a7c7ff379b
--- /dev/null
+++ b/web/store/inbox/inbox_filters.store.ts
@@ -0,0 +1,146 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInbox, IInboxFilterOptions, IInboxQueryParams } from "types";
+
+export interface IInboxFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxFilters: {
+    [inboxId: string]: { filters: IInboxFilterOptions };
+  };
+
+  // actions
+  fetchInboxFilters: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
+  updateInboxFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    filters: Partial<IInboxFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: IInboxQueryParams | null;
+}
+
+export class InboxFiltersStore implements IInboxFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxFilters: {
+    [inboxId: string]: { filters: IInboxFilterOptions };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxFilters: observable.ref,
+
+      // actions
+      fetchInboxFilters: action,
+      updateInboxFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  get appliedFilters(): IInboxQueryParams | null {
+    const inboxId = this.rootStore.inbox.inboxId;
+
+    if (!inboxId) return null;
+
+    const filtersList = this.inboxFilters[inboxId]?.filters;
+
+    if (!filtersList) return null;
+
+    const filteredRouteParams: IInboxQueryParams = {
+      priority: filtersList.priority ? filtersList.priority.join(",") : null,
+      inbox_status: filtersList.inbox_status ? filtersList.inbox_status.join(",") : null,
+    };
+
+    return filteredRouteParams;
+  }
+
+  fetchInboxFilters = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const issuesResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxFilters = {
+          ...this.inboxFilters,
+          [inboxId]: issuesResponse.view_props,
+        };
+      });
+
+      return issuesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateInboxFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    filters: Partial<IInboxFilterOptions>
+  ) => {
+    const newViewProps = {
+      ...this.inboxFilters[inboxId],
+      filters: {
+        ...this.inboxFilters[inboxId]?.filters,
+        ...filters,
+      },
+    };
+
+    try {
+      runInAction(() => {
+        this.inboxFilters = {
+          ...this.inboxFilters,
+          [inboxId]: newViewProps,
+        };
+      });
+
+      await this.inboxService.patchInbox(workspaceSlug, projectId, inboxId, { view_props: newViewProps });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.fetchInboxFilters(workspaceSlug, projectId, inboxId);
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_issue_detail.store.ts b/web/store/inbox/inbox_issue_detail.store.ts
new file mode 100644
index 00000000000..9085264f528
--- /dev/null
+++ b/web/store/inbox/inbox_issue_detail.store.ts
@@ -0,0 +1,280 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInboxIssue, IIssue, TInboxStatus } from "types";
+// constants
+import { INBOX_ISSUE_SOURCE } from "constants/inbox";
+
+export interface IInboxIssueDetailsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  issueDetails: {
+    [issueId: string]: IInboxIssue;
+  };
+
+  // actions
+  fetchIssueDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string
+  ) => Promise<IInboxIssue>;
+  createIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    data: Partial<IIssue>
+  ) => Promise<IInboxIssue>;
+  updateIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: Partial<IInboxIssue>
+  ) => Promise<void>;
+  updateIssueStatus: (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: TInboxStatus
+  ) => Promise<void>;
+  deleteIssue: (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => Promise<void>;
+}
+
+export class InboxIssueDetailsStore implements IInboxIssueDetailsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  issueDetails: { [issueId: string]: IInboxIssue } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      issueDetails: observable.ref,
+
+      // actions
+      fetchIssueDetails: action,
+      createIssue: action,
+      updateIssueStatus: action,
+      deleteIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+  }
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const issueResponse = await this.inboxService.getInboxIssueById(workspaceSlug, projectId, inboxId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: issueResponse,
+        };
+      });
+
+      return issueResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IIssue>) => {
+    const payload = {
+      issue: {
+        name: data.name,
+        description: data.description,
+        description_html: data.description_html,
+        priority: data.priority,
+      },
+      source: INBOX_ISSUE_SOURCE,
+    };
+
+    try {
+      const response = await this.inboxService.createInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        payload,
+        this.rootStore.user.currentUser ?? undefined
+      );
+
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [response.id]: response,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: [response, ...this.rootStore.inboxIssues.inboxIssues[inboxId]],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: Partial<IInboxIssue>
+  ) => {
+    const updatedIssue = { ...this.issueDetails[issueId], ...data };
+
+    try {
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: updatedIssue,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
+            if (issue.issue_inbox[0].id === issueId) return updatedIssue;
+
+            return issue;
+          }),
+        };
+      });
+
+      await this.inboxService.patchInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        { issue: data },
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+
+  updateIssueStatus = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxId: string,
+    issueId: string,
+    data: TInboxStatus
+  ) => {
+    const updatedIssue = { ...this.issueDetails[issueId] };
+    updatedIssue.issue_inbox[0] = {
+      ...updatedIssue.issue_inbox[0],
+      ...data,
+    };
+
+    try {
+      runInAction(() => {
+        this.issueDetails = {
+          ...this.issueDetails,
+          [issueId]: updatedIssue,
+        };
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
+            if (issue.issue_inbox[0].id === issueId) return updatedIssue as IInboxIssue;
+
+            return issue;
+          }),
+        };
+      });
+
+      await this.inboxService.markInboxStatus(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        data,
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+
+  deleteIssue = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
+    const updatedIssues = { ...this.issueDetails };
+    delete updatedIssues[issueId];
+
+    try {
+      runInAction(() => {
+        this.issueDetails = updatedIssues;
+        this.rootStore.inboxIssues.inboxIssues = {
+          ...this.rootStore.inboxIssues.inboxIssues,
+          [inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId]?.filter(
+            (issue) => issue.issue_inbox[0].id !== issueId
+          ),
+        };
+      });
+
+      await this.inboxService.deleteInboxIssue(
+        workspaceSlug,
+        projectId,
+        inboxId,
+        issueId,
+        this.rootStore.user.currentUser ?? undefined
+      );
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+      this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/inbox_issues.store.ts b/web/store/inbox/inbox_issues.store.ts
new file mode 100644
index 00000000000..06c7997b2df
--- /dev/null
+++ b/web/store/inbox/inbox_issues.store.ts
@@ -0,0 +1,93 @@
+import { observable, action, makeObservable, runInAction, autorun } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { InboxService } from "services/inbox.service";
+// types
+import { IInboxIssue } from "types";
+
+export interface IInboxIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  inboxIssues: {
+    [inboxId: string]: IInboxIssue[];
+  };
+
+  // actions
+  fetchInboxIssues: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInboxIssue[]>;
+}
+
+export class InboxIssuesStore implements IInboxIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  inboxIssues: {
+    [inboxId: string]: IInboxIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  inboxService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      inboxIssues: observable.ref,
+
+      // actions
+      fetchInboxIssues: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.inboxService = new InboxService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const inboxId = this.rootStore.inbox.inboxId;
+
+      if (workspaceSlug && projectId && inboxId && this.rootStore.inboxFilters.inboxFilters[inboxId])
+        this.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+    });
+  }
+
+  fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const queryParams = this.rootStore.inboxFilters.appliedFilters ?? undefined;
+
+      const issuesResponse = await this.inboxService.getInboxIssues(workspaceSlug, projectId, inboxId, queryParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.inboxIssues = {
+          ...this.inboxIssues,
+          [inboxId]: issuesResponse,
+        };
+      });
+
+      return issuesResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/inbox/index.ts b/web/store/inbox/index.ts
new file mode 100644
index 00000000000..5ed4153323e
--- /dev/null
+++ b/web/store/inbox/index.ts
@@ -0,0 +1,4 @@
+export * from "./inbox_filters.store";
+export * from "./inbox_issue_detail.store";
+export * from "./inbox_issues.store";
+export * from "./inbox.store";
diff --git a/web/store/issue/index.ts b/web/store/issue/index.ts
new file mode 100644
index 00000000000..c66d617e108
--- /dev/null
+++ b/web/store/issue/index.ts
@@ -0,0 +1,7 @@
+export * from "./issue_detail.store";
+export * from "./issue_draft.store";
+export * from "./issue_filters.store";
+export * from "./issue_kanban_view.store";
+export * from "./issue_calendar_view.store";
+export * from "./issue.store";
+export * from "./issue_quick_add.store";
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
new file mode 100644
index 00000000000..b2db11fb956
--- /dev/null
+++ b/web/store/issue/issue.store.ts
@@ -0,0 +1,370 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  removeIssueFromStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => void;
+}
+
+export class IssueStore implements IIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  issueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      removeIssueFromStructure: action,
+      deleteIssue: action,
+      updateGanttIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        this.rootStore.issueFilter.userFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId);
+    });
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  removeIssueFromStructure = (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: (issues[group_id] ?? []).filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: (issues[sub_group_id]?.[group_id] ?? []).filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            ...issue,
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date ?? i.start_date,
+            target_date: payload.target_date ?? i.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [issue.project]: {
+          ...this.issues[issue.project],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...issue, ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore?.issueFilter?.appliedFilters;
+      const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/issue/issue_calendar_view.store.ts b/web/store/issue/issue_calendar_view.store.ts
new file mode 100644
index 00000000000..881e2ee836d
--- /dev/null
+++ b/web/store/issue/issue_calendar_view.store.ts
@@ -0,0 +1,88 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./issue.store";
+
+export interface IIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class IssueCalendarViewStore implements IIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.issue.getIssues;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      // horizontal
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.issue.issues,
+        [projectId]: {
+          ...this.rootStore?.issue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.issue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.issue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
diff --git a/web/store/issue/issue_detail.store.ts b/web/store/issue/issue_detail.store.ts
new file mode 100644
index 00000000000..58d4aabe77d
--- /dev/null
+++ b/web/store/issue/issue_detail.store.ts
@@ -0,0 +1,748 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// services
+import { IssueService, IssueReactionService, IssueCommentService } from "services/issue";
+import { NotificationService } from "services/notification.service";
+// types
+import { RootStore } from "../root";
+import { IIssue } from "types";
+// constants
+import { groupReactionEmojis } from "constants/issue";
+// uuid
+import { v4 as uuidv4 } from "uuid";
+
+export interface IIssueDetailStore {
+  loader: boolean;
+  error: any | null;
+
+  peekId: string | null;
+  issues: {
+    [issueId: string]: IIssue;
+  };
+  issue_reactions: {
+    [issueId: string]: any;
+  };
+  issue_comments: {
+    [issueId: string]: any;
+  };
+  issue_comment_reactions: {
+    [issueId: string]: {
+      [comment_id: string]: any;
+    };
+  };
+  issue_subscription: {
+    [issueId: string]: any;
+  };
+
+  setPeekId: (issueId: string | null) => void;
+
+  // computed
+  getIssue: IIssue | null;
+  getIssueReactions: any | null;
+  getIssueComments: any | null;
+  getIssueCommentReactions: any | null;
+  getIssueSubscription: any | null;
+
+  // fetch issue details
+  fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
+  // creating issue
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  optimisticallyCreateIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  // updating issue
+  updateIssue: (workspaceId: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  // deleting issue
+  deleteIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+
+  fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
+
+  fetchIssueReactions: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
+  removeIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
+
+  fetchIssueComments: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueComment: (workspaceSlug: string, projectId: string, issueId: string, data: any) => Promise<void>;
+  updateIssueComment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => Promise<void>;
+  removeIssueComment: (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => Promise<void>;
+
+  fetchIssueCommentReactions: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string
+  ) => Promise<void>;
+  creationIssueCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => Promise<void>;
+  removeIssueCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => Promise<void>;
+
+  fetchIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  createIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeIssueSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+}
+
+export class IssueDetailStore implements IIssueDetailStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  peekId: string | null = null;
+  issues: {
+    [issueId: string]: IIssue;
+  } = {};
+  issue_reactions: {
+    [issueId: string]: any;
+  } = {};
+  issue_comments: {
+    [issueId: string]: any;
+  } = {};
+  issue_comment_reactions: {
+    [issueId: string]: any;
+  } = {};
+  issue_subscription: {
+    [issueId: string]: any;
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+  issueReactionService;
+  issueCommentService;
+  notificationService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      peekId: observable.ref,
+      issues: observable.ref,
+      issue_reactions: observable.ref,
+      issue_comments: observable.ref,
+      issue_comment_reactions: observable.ref,
+      issue_subscription: observable.ref,
+
+      getIssue: computed,
+      getIssueReactions: computed,
+      getIssueComments: computed,
+      getIssueCommentReactions: computed,
+      getIssueSubscription: computed,
+
+      setPeekId: action,
+
+      fetchIssueDetails: action,
+      createIssue: action,
+      optimisticallyCreateIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
+
+      fetchPeekIssueDetails: action,
+
+      fetchIssueReactions: action,
+      createIssueReaction: action,
+      removeIssueReaction: action,
+
+      fetchIssueComments: action,
+      createIssueComment: action,
+      updateIssueComment: action,
+      removeIssueComment: action,
+
+      fetchIssueCommentReactions: action,
+      creationIssueCommentReaction: action,
+      removeIssueCommentReaction: action,
+
+      fetchIssueSubscription: action,
+      createIssueSubscription: action,
+      removeIssueSubscription: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+    this.issueReactionService = new IssueReactionService();
+    this.issueCommentService = new IssueCommentService();
+    this.notificationService = new NotificationService();
+  }
+
+  get getIssue() {
+    if (!this.peekId) return null;
+    const _issue = this.issues[this.peekId];
+    return _issue || null;
+  }
+
+  get getIssueReactions() {
+    if (!this.peekId) return null;
+    const _reactions = this.issue_reactions[this.peekId];
+    return _reactions || null;
+  }
+
+  get getIssueComments() {
+    if (!this.peekId) return null;
+    const _comments = this.issue_comments[this.peekId];
+    return _comments || null;
+  }
+
+  get getIssueCommentReactions() {
+    if (!this.peekId) return null;
+    const _commentReactions = this.issue_comment_reactions[this.peekId];
+    return _commentReactions || null;
+  }
+
+  get getIssueSubscription() {
+    if (!this.peekId) return null;
+    const _commentSubscription = this.issue_subscription[this.peekId];
+    return _commentSubscription || null;
+  }
+
+  setPeekId = (issueId: string | null) => (this.peekId = issueId);
+
+  fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+      this.peekId = issueId;
+
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: issueDetailsResponse,
+        };
+      });
+
+      return issueDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  optimisticallyCreateIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
+    const tempId = data?.id || uuidv4();
+
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.issues = {
+        ...this.issues,
+        [tempId]: data as IIssue,
+      };
+    });
+
+    try {
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.issueService.createIssue(workspaceSlug, projectId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<IIssue>) => {
+    const newIssues = { ...this.issues };
+    newIssues[issueId] = {
+      ...newIssues[issueId],
+      ...data,
+    };
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      const user = this.rootStore.user.currentUser;
+
+      if (!user) return;
+
+      const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: {
+            ...this.issues[issueId],
+            ...response,
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.fetchIssueDetails(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  deleteIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const newIssues = { ...this.issues };
+    delete newIssues[issueId];
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      const user = this.rootStore.user.currentUser;
+
+      if (!user) return;
+
+      const response = await this.issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.fetchIssueDetails(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.peekId = issueId;
+
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
+      await this.fetchIssueReactions(workspaceSlug, projectId, issueId);
+      await this.fetchIssueComments(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: issueDetailsResponse,
+        };
+      });
+
+      return issueDetailsResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  // reactions
+  fetchIssueReactions = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _reactions = await this.issueReactionService.listIssueReactions(workspaceSlug, projectId, issueId);
+
+      const _issue_reactions = {
+        ...this.issue_reactions,
+        [issueId]: groupReactionEmojis(_reactions),
+      };
+
+      runInAction(() => {
+        this.issue_reactions = _issue_reactions;
+      });
+    } catch (error) {
+      console.warn("error creating the issue reaction", error);
+      throw error;
+    }
+  };
+  createIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => {
+    let _currentReactions = this.getIssueReactions;
+
+    try {
+      const _reaction = await this.issueReactionService.createIssueReaction(workspaceSlug, projectId, issueId, {
+        reaction,
+      });
+
+      _currentReactions = {
+        ..._currentReactions,
+        [reaction]: [..._currentReactions[reaction], { ..._reaction }],
+      };
+
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+      console.warn("error creating the issue reaction", error);
+      throw error;
+    }
+  };
+  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => {
+    let _currentReactions = this.getIssueReactions;
+
+    try {
+      const user = this.rootStore.user.currentUser;
+
+      if (user) {
+        _currentReactions = {
+          ..._currentReactions,
+          [reaction]: [..._currentReactions[reaction].filter((r: any) => r.actor !== user.id)],
+        };
+
+        runInAction(() => {
+          this.issue_reactions = {
+            ...this.issue_reactions,
+            [issueId]: _currentReactions,
+          };
+        });
+
+        await this.issueReactionService.deleteIssueReaction(workspaceSlug, projectId, issueId, reaction);
+      }
+    } catch (error) {
+      runInAction(() => {
+        this.issue_reactions = {
+          ...this.issue_reactions,
+          [issueId]: _currentReactions,
+        };
+      });
+      console.warn("error removing the issue reaction", error);
+      throw error;
+    }
+  };
+
+  // comments
+  fetchIssueComments = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _issueCommentResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: [..._issueCommentResponse],
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error creating the issue comment", error);
+      throw error;
+    }
+  };
+  createIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+    try {
+      const _issueCommentResponse = await this.issueCommentService.createIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        data,
+        undefined
+      );
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: [...this.issue_comments[issueId], _issueCommentResponse],
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error creating the issue comment", error);
+      throw error;
+    }
+  };
+  updateIssueComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: any
+  ) => {
+    try {
+      const _issueCommentResponse = await this.issueCommentService.patchIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        commentId,
+        data,
+        undefined
+      );
+
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: this.issue_comments[issueId].map((comment: any) =>
+          comment.id === commentId ? _issueCommentResponse : comment
+        ),
+      };
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error updating the issue comment", error);
+      throw error;
+    }
+  };
+  removeIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const _issueComments = {
+        ...this.issue_comments,
+        [issueId]: this.issue_comments[issueId].filter((comment: any) => comment.id != commentId),
+      };
+
+      await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId, undefined);
+
+      runInAction(() => {
+        this.issue_comments = _issueComments;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+
+  // comment reaction
+  fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    try {
+      const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
+
+      const _issue_comment_reactions = {
+        ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
+          [commentId]: groupReactionEmojis(_reactions),
+        },
+      };
+
+      runInAction(() => {
+        this.issue_comment_reactions = _issue_comment_reactions;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+  creationIssueCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => {
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
+
+    try {
+      const _reaction = await this.issueReactionService.createIssueCommentReaction(
+        workspaceSlug,
+        projectId,
+        commentId,
+        {
+          reaction,
+        }
+      );
+
+      _currentReactions = {
+        ..._currentReactions,
+        [reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
+      };
+
+      const _issue_comment_reactions = {
+        ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
+          [commentId]: _currentReactions,
+        },
+      };
+
+      runInAction(() => {
+        this.issue_comment_reactions = _issue_comment_reactions;
+      });
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+  removeIssueCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    reaction: string
+  ) => {
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
+
+    try {
+      const user = this.rootStore.user.currentUser;
+
+      if (user) {
+        _currentReactions = {
+          ..._currentReactions,
+          [reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
+        };
+
+        const _issue_comment_reactions = {
+          ...this.issue_comment_reactions,
+          [issueId]: {
+            ...this.issue_comment_reactions[issueId],
+            [commentId]: _currentReactions,
+          },
+        };
+
+        runInAction(() => {
+          this.issue_comment_reactions = _issue_comment_reactions;
+        });
+
+        await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+      }
+    } catch (error) {
+      console.warn("error removing the issue comment", error);
+      throw error;
+    }
+  };
+
+  // subscription
+  fetchIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _subscription = await this.notificationService.getIssueNotificationSubscriptionStatus(
+        workspaceSlug,
+        projectId,
+        issueId
+      );
+
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: _subscription,
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+    } catch (error) {
+      console.warn("error fetching the issue subscription", error);
+      throw error;
+    }
+  };
+  createIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      await this.notificationService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
+
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: { subscribed: true },
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+    } catch (error) {
+      console.warn("error creating the issue subscription", error);
+      throw error;
+    }
+  };
+  removeIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const _issue_subscription = {
+        ...this.issue_subscription,
+        [issueId]: { subscribed: false },
+      };
+
+      runInAction(() => {
+        this.issue_subscription = _issue_subscription;
+      });
+
+      await this.notificationService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      console.warn("error removing the issue subscription", error);
+      throw error;
+    }
+  };
+}
diff --git a/web/store/issue/issue_draft.store.ts b/web/store/issue/issue_draft.store.ts
new file mode 100644
index 00000000000..76faacb7ed7
--- /dev/null
+++ b/web/store/issue/issue_draft.store.ts
@@ -0,0 +1,169 @@
+// mobx
+import { action, observable, runInAction, makeAutoObservable } from "mobx";
+// services
+import { IssueDraftService } from "services/issue";
+// types
+import type { IIssue, IUser } from "types";
+
+export class DraftIssuesStore {
+  issues: { [key: string]: IIssue } = {};
+  isIssuesLoading: boolean = false;
+  rootStore: any | null = null;
+  issueDraftService;
+
+  constructor(_rootStore: any | null = null) {
+    makeAutoObservable(this, {
+      issues: observable.ref,
+      isIssuesLoading: observable.ref,
+      rootStore: observable.ref,
+      loadDraftIssues: action,
+      getIssueById: action,
+      createDraftIssue: action,
+      updateDraftIssue: action,
+      deleteDraftIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueDraftService = new IssueDraftService();
+  }
+
+  /**
+   * @description Fetch all draft issues of a project and hydrate issues field
+   */
+
+  loadDraftIssues = async (workspaceSlug: string, projectId: string, params?: any) => {
+    this.isIssuesLoading = true;
+    try {
+      const issuesResponse = await this.issueDraftService.getDraftIssues(workspaceSlug, projectId, params);
+
+      const issues = Array.isArray(issuesResponse) ? { allIssues: issuesResponse } : issuesResponse;
+
+      runInAction(() => {
+        this.issues = issues;
+        this.isIssuesLoading = false;
+      });
+    } catch (error) {
+      this.isIssuesLoading = false;
+      console.error("Fetching issues error", error);
+    }
+  };
+
+  /**
+   * @description Fetch a single draft issue by id and hydrate issues field
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @returns {IIssue}
+   */
+
+  getIssueById = async (workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> => {
+    if (this.issues[issueId]) return this.issues[issueId];
+
+    try {
+      const issueResponse: IIssue = await this.issueDraftService.getDraftIssueById(workspaceSlug, projectId, issueId);
+
+      const issues = {
+        ...this.issues,
+        [issueId]: { ...issueResponse },
+      };
+
+      runInAction(() => {
+        this.issues = issues;
+      });
+
+      return issueResponse;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * @description Create a new draft issue and hydrate issues field
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueForm
+   * @param user
+   * @returns {IIssue}
+   */
+
+  createDraftIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueForm: IIssue,
+    user: IUser
+  ): Promise<IIssue> => {
+    try {
+      const issueResponse = await this.issueDraftService.createDraftIssue(workspaceSlug, projectId, issueForm);
+
+      const issues = {
+        ...this.issues,
+        [issueResponse.id]: { ...issueResponse },
+      };
+
+      runInAction(() => {
+        this.issues = issues;
+      });
+      return issueResponse;
+    } catch (error) {
+      console.error("Creating issue error", error);
+      throw error;
+    }
+  };
+
+  updateDraftIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    issueForm: Partial<IIssue>,
+    user: IUser
+  ) => {
+    // keep a copy of the issue in the store
+    const originalIssue = { ...this.issues[issueId] };
+
+    // immediately update the issue in the store
+    const updatedIssue = { ...this.issues[issueId], ...issueForm };
+
+    try {
+      runInAction(() => {
+        this.issues[issueId] = { ...updatedIssue };
+      });
+
+      // make a patch request to update the issue
+      const issueResponse: IIssue = await this.issueDraftService.updateDraftIssue(
+        workspaceSlug,
+        projectId,
+        issueId,
+        issueForm
+      );
+
+      const updatedIssues = { ...this.issues };
+      updatedIssues[issueId] = { ...issueResponse };
+
+      runInAction(() => {
+        this.issues = updatedIssues;
+      });
+    } catch (error) {
+      // if there is an error, revert the changes
+      runInAction(() => {
+        this.issues[issueId] = originalIssue;
+      });
+
+      return error;
+    }
+  };
+
+  deleteDraftIssue = async (workspaceSlug: string, projectId: string, issueId: string, user: IUser) => {
+    const issues = { ...this.issues };
+    delete issues[issueId];
+
+    try {
+      runInAction(() => {
+        this.issues = issues;
+      });
+
+      this.issueDraftService.deleteDraftIssue(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      console.error("Deleting issue error", error);
+    }
+  };
+}
diff --git a/web/store/issue/issue_filters.store.ts b/web/store/issue/issue_filters.store.ts
new file mode 100644
index 00000000000..be28cca87d1
--- /dev/null
+++ b/web/store/issue/issue_filters.store.ts
@@ -0,0 +1,247 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { IssueService } from "services/issue";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IProjectViewProps,
+  TIssueParams,
+} from "types";
+
+export interface IIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+  // TODO: store filters and properties separately for each project
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+  defaultDisplayFilters: IIssueDisplayFilterOptions;
+  defaultFilters: IIssueFilterOptions;
+
+  // action
+  fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateUserFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterToUpdate: Partial<IProjectViewProps>
+  ) => Promise<void>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class IssueFilterStore implements IIssueFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  userDisplayProperties: IIssueDisplayProperties = {};
+  userDisplayFilters: IIssueDisplayFilterOptions = {};
+  userFilters: IIssueFilterOptions = {};
+  defaultDisplayFilters: IIssueDisplayFilterOptions = {};
+  defaultFilters: IIssueFilterOptions = {};
+  defaultDisplayProperties: IIssueDisplayProperties = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      defaultDisplayFilters: observable.ref,
+      defaultFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+      userDisplayFilters: observable.ref,
+      userFilters: observable.ref,
+
+      // actions
+      fetchUserProjectFilters: action,
+      updateUserFilters: action,
+      updateDisplayProperties: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      mentions: this.userFilters?.mentions || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || undefined,
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const memberResponse = await this.projectService.projectMemberMe(workspaceSlug, projectId);
+      const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.userFilters = memberResponse?.view_props?.filters;
+        this.userDisplayFilters = {
+          ...memberResponse?.view_props?.display_filters,
+          // add calendar display filters if not already present
+          calendar: {
+            show_weekends: memberResponse?.view_props?.display_filters?.calendar?.show_weekends || true,
+            layout: memberResponse?.view_props?.display_filters?.calendar?.layout || "month",
+          },
+        };
+        this.userDisplayProperties = issueProperties?.properties || this.defaultDisplayProperties;
+        // default props from api
+        this.defaultFilters = memberResponse.default_props.filters;
+        this.defaultDisplayFilters = memberResponse.default_props.display_filters ?? {};
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+
+  updateUserFilters = async (workspaceSlug: string, projectId: string, filterToUpdate: Partial<IProjectViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.userDisplayFilters,
+        ...filterToUpdate.display_filters,
+      },
+      filters: {
+        ...this.userFilters,
+        ...filterToUpdate.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+    if (
+      newViewProps.display_filters.layout === "kanban" &&
+      newViewProps.display_filters.group_by === newViewProps.display_filters.sub_group_by
+    )
+      newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.userFilters = newViewProps.filters;
+        this.userDisplayFilters = newViewProps.display_filters;
+      });
+
+      this.projectService.setProjectView(workspaceSlug, projectId, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+
+  updateDisplayProperties = async (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => {
+    const newProperties: IIssueDisplayProperties = {
+      ...this.userDisplayProperties,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.userDisplayProperties = newProperties;
+      });
+
+      await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user display properties in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/issue/issue_kanban_view.store.ts b/web/store/issue/issue_kanban_view.store.ts
new file mode 100644
index 00000000000..827972694ea
--- /dev/null
+++ b/web/store/issue/issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./issue.store";
+
+export interface IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class IssueKanBanViewStore implements IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (this.rootStore.issueDetail.peekId) return false;
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.issue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.issue.issues,
+        [projectId]: {
+          ...this.rootStore?.issue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.issue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.issue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.issue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.issue.issues,
+        [projectId]: {
+          ...this.rootStore?.issue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.issue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.issue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+}
diff --git a/web/store/issue/issue_quick_add.store.ts b/web/store/issue/issue_quick_add.store.ts
new file mode 100644
index 00000000000..44683b57882
--- /dev/null
+++ b/web/store/issue/issue_quick_add.store.ts
@@ -0,0 +1,227 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// types
+import { RootStore } from "../root";
+import { IIssue } from "types";
+// uuid
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "./issue.store";
+
+export interface IIssueQuickAddStore {
+  loader: boolean;
+  error: any | null;
+
+  createIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => Promise<IIssue>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateQuickAddIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class IssueQuickAddStore implements IIssueQuickAddStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      createIssue: action,
+      updateIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  createIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => {
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+    });
+
+    const { group_id, sub_group_id } = grouping;
+
+    try {
+      this.updateIssueStructure(group_id, sub_group_id, data as IIssue);
+
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      this.updateQuickAddIssueStructure(group_id, sub_group_id, {
+        ...data,
+        ...response,
+      });
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (group_id === "null") group_id = null;
+    if (sub_group_id === "null") sub_group_id = null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+
+  //   same as above function but will use temp id instead of real id
+  updateQuickAddIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) =>
+              i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+            )
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) =>
+                i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+              )
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.tempId === issue.tempId);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+}
diff --git a/web/store/module/index.ts b/web/store/module/index.ts
new file mode 100644
index 00000000000..3d62d3de815
--- /dev/null
+++ b/web/store/module/index.ts
@@ -0,0 +1,5 @@
+export * from "./module_filters.store";
+export * from "./module_issue_kanban_view.store";
+export * from "./module_issue_calendar_view.store";
+export * from "./module_issue.store";
+export * from "./modules.store";
diff --git a/web/store/module/module_filters.store.ts b/web/store/module/module_filters.store.ts
new file mode 100644
index 00000000000..ae94af59e84
--- /dev/null
+++ b/web/store/module/module_filters.store.ts
@@ -0,0 +1,178 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions, IModule, TIssueParams } from "types";
+
+export interface IModuleFilterStore {
+  loader: boolean;
+  error: any | null;
+  moduleFilters: IIssueFilterOptions;
+  defaultFilters: IIssueFilterOptions;
+
+  // action
+  fetchModuleFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+  updateModuleFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class ModuleFilterStore implements IModuleFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  moduleFilters: IIssueFilterOptions = {};
+  defaultFilters: IIssueFilterOptions = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      defaultFilters: observable.ref,
+      moduleFilters: observable.ref,
+
+      // actions
+      fetchModuleFilters: action,
+      updateModuleFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.moduleService = new ModuleService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    const userDisplayFilters = this.rootStore.issueFilter.userDisplayFilters;
+
+    if (!this.moduleFilters || !userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.moduleFilters?.priority || undefined,
+      state_group: this.moduleFilters?.state_group || undefined,
+      state: this.moduleFilters?.state || undefined,
+      assignees: this.moduleFilters?.assignees || undefined,
+      created_by: this.moduleFilters?.created_by || undefined,
+      labels: this.moduleFilters?.labels || undefined,
+      start_date: this.moduleFilters?.start_date || undefined,
+      target_date: this.moduleFilters?.target_date || undefined,
+      group_by: userDisplayFilters?.group_by || "state",
+      order_by: userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: userDisplayFilters?.sub_group_by || undefined,
+      type: userDisplayFilters?.type || undefined,
+      sub_issue: userDisplayFilters?.sub_issue || true,
+      show_empty_groups: userDisplayFilters?.show_empty_groups || true,
+      start_target_date: userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchModuleFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.moduleFilters = response.view_props?.filters ?? {};
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to fetch module details in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateModuleFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => {
+    const newFilters = {
+      ...this.moduleFilters,
+      ...filterToUpdate,
+    };
+
+    try {
+      runInAction(() => {
+        this.moduleFilters = newFilters;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      this.moduleService.patchModule(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        {
+          view_props: {
+            filters: newFilters,
+          },
+        },
+        user
+      );
+    } catch (error) {
+      this.fetchModuleFilters(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/module/module_issue.store.ts b/web/store/module/module_issue.store.ts
new file mode 100644
index 00000000000..165b51b622d
--- /dev/null
+++ b/web/store/module/module_issue.store.ts
@@ -0,0 +1,379 @@
+import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
+// store
+import { RootStore } from "../root";
+// services
+import { ModuleService } from "services/module.service";
+// helpers
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { IIssue } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueType,
+  IIssueUnGroupedStructure,
+} from "store/issue";
+
+export interface IModuleIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [module_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssuesCount: number;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (
+    workspaceSlug: string,
+    moduleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => Promise<any>;
+}
+
+export class ModuleIssueStore implements IModuleIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [module_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+
+  // services
+  rootStore;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      addIssueToModule: action,
+      removeIssueFromModule: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.moduleService = new ModuleService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const moduleId = this.rootStore.module.moduleId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        moduleId &&
+        this.rootStore.moduleFilter.moduleFilters &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchIssues(workspaceSlug, projectId, moduleId);
+    });
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const moduleId: string | null = this.rootStore?.module?.moduleId;
+    const issueType = this.getIssueType;
+    if (!moduleId || !issueType) return null;
+
+    return this.issues?.[moduleId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const moduleId: string | null = this.rootStore?.module?.moduleId;
+    const issueType = this.getIssueType;
+    if (!moduleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [moduleId]: { ...this.issues[moduleId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    moduleId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [moduleId]: {
+          ...this.issues[moduleId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const moduleId: string | null = this.rootStore.module.moduleId;
+    const issueType = this.getIssueType;
+    if (!moduleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [moduleId]: { ...this.issues[moduleId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const params = this.rootStore?.moduleFilter?.appliedFilters;
+      const issueResponse = await this.moduleService.getModuleIssuesWithParams(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        params
+      );
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [moduleId]: {
+            ...this.issues[moduleId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
+    try {
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.moduleService.addIssuesToModule(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        {
+          issues: issueIds,
+        },
+        user
+      );
+
+      this.fetchIssues(workspaceSlug, projectId, moduleId);
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  removeIssueFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, bridgeId: string) => {
+    try {
+      await this.moduleService.removeIssueFromModule(workspaceSlug, projectId, moduleId, bridgeId);
+    } catch (error) {
+      this.fetchIssues(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/module/module_issue_calendar_view.store.ts b/web/store/module/module_issue_calendar_view.store.ts
new file mode 100644
index 00000000000..3bfed3140a9
--- /dev/null
+++ b/web/store/module/module_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+
+export interface IModuleIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ModuleIssueCalendarViewStore implements IModuleIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const moduleId = this.rootStore?.module?.moduleId;
+    const issueType: IIssueType | null = this.rootStore?.moduleIssue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    if (workspaceSlug && projectId && moduleId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [moduleId]: {
+          ...this.rootStore?.moduleIssue.issues?.[moduleId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[moduleId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
diff --git a/web/store/module/module_issue_kanban_view.store.ts b/web/store/module/module_issue_kanban_view.store.ts
new file mode 100644
index 00000000000..82e210f29ff
--- /dev/null
+++ b/web/store/module/module_issue_kanban_view.store.ts
@@ -0,0 +1,448 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "../issue/issue.store";
+
+export interface IModuleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (this.rootStore.issueDetail.peekId) return false;
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.moduleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source?.droppableId || null;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination?.droppableId || null;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.moduleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+  };
+}
diff --git a/web/store/module/modules.store.ts b/web/store/module/modules.store.ts
new file mode 100644
index 00000000000..91a11cd76d5
--- /dev/null
+++ b/web/store/module/modules.store.ts
@@ -0,0 +1,398 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
+// types
+import { RootStore } from "../root";
+import { IIssue, IModule } from "types";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueUnGroupedStructure,
+} from "../issue/issue.store";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+export interface IModuleStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  moduleId: string | null;
+  modules: {
+    [project_id: string]: IModule[];
+  };
+  moduleDetails: {
+    [module_id: string]: IModule;
+  };
+  issues: {
+    [module_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+
+  // actions
+  setModuleId: (moduleSlug: string) => void;
+
+  getModuleById: (moduleId: string) => IModule | null;
+
+  fetchModules: (workspaceSlug: string, projectId: string) => void;
+  fetchModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+
+  createModule: (workspaceSlug: string, projectId: string, data: Partial<IModule>) => Promise<IModule>;
+  updateModuleDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IModule>
+  ) => Promise<IModule>;
+  deleteModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  addModuleToFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  removeModuleFromFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  updateModuleGanttStructure: (
+    workspaceSlug: string,
+    projectId: string,
+    module: IModule,
+    payload: IBlockUpdateData
+  ) => void;
+
+  // computed
+  projectModules: IModule[] | null;
+}
+
+export class ModuleStore implements IModuleStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  moduleId: string | null = null;
+  modules: {
+    [project_id: string]: IModule[];
+  } = {};
+  moduleDetails: {
+    [module_id: string]: IModule;
+  } = {};
+  issues: {
+    [module_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable,
+      error: observable.ref,
+
+      // observables
+      moduleId: observable.ref,
+      modules: observable.ref,
+      moduleDetails: observable.ref,
+      issues: observable.ref,
+
+      // actions
+      setModuleId: action,
+
+      getModuleById: action,
+
+      fetchModules: action,
+      fetchModuleDetails: action,
+
+      createModule: action,
+      updateModuleDetails: action,
+      deleteModule: action,
+      addModuleToFavorites: action,
+      removeModuleFromFavorites: action,
+      updateModuleGanttStructure: action,
+
+      // computed
+      projectModules: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.projectService = new ProjectService();
+    this.moduleService = new ModuleService();
+  }
+
+  // computed
+  get projectModules() {
+    if (!this.rootStore.project.projectId) return null;
+
+    return this.modules[this.rootStore.project.projectId] || null;
+  }
+
+  getModuleById = (moduleId: string) => this.moduleDetails[moduleId] || null;
+
+  // actions
+  setModuleId = (moduleSlug: string) => {
+    this.moduleId = moduleSlug ?? null;
+  };
+
+  fetchModules = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const modulesResponse = await this.moduleService.getModules(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: modulesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch modules list in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  fetchModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.moduleDetails = {
+          ...this.moduleDetails,
+          [moduleId]: response,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to fetch module details in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createModule = async (workspaceSlug: string, projectId: string, data: Partial<IModule>) => {
+    try {
+      const response = await this.moduleService.createModule(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: [...this.modules[projectId], response],
+        };
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to create module in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string, data: Partial<IModule>) => {
+    try {
+      runInAction(() => {
+        (this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) =>
+            module.id === moduleId ? { ...module, ...data } : module
+          ),
+        }),
+          (this.moduleDetails = {
+            ...this.moduleDetails,
+            [moduleId]: {
+              ...this.moduleDetails[moduleId],
+              ...data,
+            },
+          });
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.moduleService.patchModule(workspaceSlug, projectId, moduleId, data, user);
+
+      return response;
+    } catch (error) {
+      console.error("Failed to update module in module store", error);
+
+      this.fetchModules(workspaceSlug, projectId);
+      this.fetchModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].filter((module) => module.id !== moduleId),
+        };
+      });
+
+      await this.moduleService.deleteModule(workspaceSlug, projectId, moduleId, this.rootStore.user.currentUser);
+    } catch (error) {
+      console.error("Failed to delete module in module store", error);
+
+      this.fetchModules(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+    }
+  };
+
+  addModuleToFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? true : module.is_favorite,
+          })),
+        };
+      });
+
+      await this.moduleService.addModuleToFavorites(workspaceSlug, projectId, {
+        module: moduleId,
+      });
+    } catch (error) {
+      console.error("Failed to add module to favorites in module store", error);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? false : module.is_favorite,
+          })),
+        };
+        this.error = error;
+      });
+    }
+  };
+
+  removeModuleFromFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? false : module.is_favorite,
+          })),
+        };
+      });
+
+      await this.moduleService.removeModuleFromFavorites(workspaceSlug, projectId, moduleId);
+    } catch (error) {
+      console.error("Failed to remove module from favorites in module store", error);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? true : module.is_favorite,
+          })),
+        };
+      });
+    }
+  };
+
+  updateModuleGanttStructure = (
+    workspaceSlug: string,
+    projectId: string,
+    module: IModule,
+    payload: IBlockUpdateData
+  ) => {
+    const modulesList = this.modules[projectId];
+
+    try {
+      const newModules = modulesList?.map((p: any) => ({
+        ...p,
+        ...(p.id === module.id
+          ? {
+              start_date: payload.start_date ? payload.start_date : p.start_date,
+              target_date: payload.target_date ? payload.target_date : p.target_date,
+              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
+            }
+          : {}),
+      }));
+
+      if (payload.sort_order) {
+        const removedElement = newModules.splice(payload.sort_order.sourceIndex, 1)[0];
+        newModules.splice(payload.sort_order.destinationIndex, 0, removedElement);
+      }
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: newModules,
+        };
+      });
+
+      const newPayload: any = { ...payload };
+
+      if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+      this.updateModuleDetails(workspaceSlug, module.project, module.id, newPayload);
+    } catch (error) {
+      console.error("Failed to update module gantt structure in module store", error);
+    }
+  };
+}
diff --git a/web/store/page.store.ts b/web/store/page.store.ts
new file mode 100644
index 00000000000..23a8050aeea
--- /dev/null
+++ b/web/store/page.store.ts
@@ -0,0 +1,99 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "./root";
+import { IPage } from "types";
+// services
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+
+export interface IPageStore {
+  loader: boolean;
+  error: any | null;
+
+  pageId: string | null;
+  pages: {
+    [project_id: string]: IPage[];
+  };
+  page_details: {
+    [page_id: string]: IPage;
+  };
+
+  //computed
+  projectPages: IPage[];
+  // actions
+  setPageId: (pageId: string) => void;
+  fetchPages: (workspaceSlug: string, projectSlug: string) => void;
+}
+
+class PageStore implements IPageStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  pageId: string | null = null;
+  pages: {
+    [project_id: string]: IPage[];
+  } = {};
+  page_details: {
+    [page_id: string]: IPage;
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  pageService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      pageId: observable.ref,
+      pages: observable.ref,
+
+      // computed
+      projectPages: computed,
+      // action
+      setPageId: action,
+      fetchPages: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.pageService = new PageService();
+  }
+
+  get projectPages() {
+    if (!this.rootStore.project.projectId) return [];
+    return this.pages?.[this.rootStore.project.projectId] || [];
+  }
+
+  setPageId = (pageId: string) => {
+    this.pageId = pageId;
+  };
+
+  fetchPages = async (workspaceSlug: string, projectSlug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const pagesResponse = await this.pageService.getPagesWithParams(workspaceSlug, projectSlug, "all");
+
+      runInAction(() => {
+        this.pages = {
+          ...this.pages,
+          [projectSlug]: pagesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project pages in project store", error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+}
+
+export default PageStore;
diff --git a/web/store/profile-issues/index.ts b/web/store/profile-issues/index.ts
new file mode 100644
index 00000000000..abfd52768ec
--- /dev/null
+++ b/web/store/profile-issues/index.ts
@@ -0,0 +1,2 @@
+export * from "./issue.store";
+export * from "./issue_filters.store";
diff --git a/web/store/profile-issues/issue.store.ts b/web/store/profile-issues/issue.store.ts
new file mode 100644
index 00000000000..502fdcc523a
--- /dev/null
+++ b/web/store/profile-issues/issue.store.ts
@@ -0,0 +1,282 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { UserService } from "services/user.service";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IProfileIssueStore {
+  loader: boolean;
+  error: any | null;
+  userId: string | null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: IIssueGroupedStructure;
+        groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+        ungrouped: IIssueUnGroupedStructure;
+      };
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, userId: string, type: "assigned" | "created" | "subscribed") => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class ProfileIssueStore implements IProfileIssueStore {
+  loader: boolean = true;
+  error: any | null = null;
+  userId: string | null = null;
+  currentProfileTab: "assigned" | "created" | "subscribed" | null = null;
+  issues: {
+    [workspace_slug: string]: {
+      [user_id: string]: {
+        grouped: {
+          [group_id: string]: IIssue[];
+        };
+        groupWithSubGroups: {
+          [group_id: string]: {
+            [sub_group_id: string]: IIssue[];
+          };
+        };
+        ungrouped: IIssue[];
+      };
+    };
+  } = {};
+  // service
+  userService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      currentProfileTab: observable.ref,
+      userId: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+      deleteIssue: action,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.profileIssueFilters?.userDisplayFilters?.layout || null;
+    const issueGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.group_by || null;
+    const issueSubGroup = this.rootStore?.profileIssueFilters?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueGroup
+        ? issueSubGroup
+          ? "groupWithSubGroups"
+          : "grouped"
+        : "ungrouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    return this.issues?.[workspaceSlug]?.[userId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+
+    const issueType = this.getIssueType;
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.profileIssueFilters?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [workspaceSlug]: {
+          ...this.issues?.[workspaceSlug],
+          [userId]: {
+            ...this.issues?.[workspaceSlug]?.[userId],
+            [issueType]: issues,
+          },
+        },
+      };
+    });
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const workspaceSlug: string | null = this.rootStore?.workspace?.workspaceSlug;
+    const userId: string | null = this.userId;
+
+    const issueType = this.getIssueType;
+
+    if (!workspaceSlug || !userId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].filter((i: IIssue) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].filter((i: IIssue) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i: IIssue) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = {
+        ...this.issues,
+        [workspaceSlug]: {
+          ...this.issues?.[workspaceSlug],
+          [userId]: {
+            ...this.issues?.[workspaceSlug]?.[userId],
+            [issueType]: issues,
+          },
+        },
+      };
+    });
+  };
+
+  fetchIssues = async (
+    workspaceSlug: string,
+    userId: string,
+    type: "assigned" | "created" | "subscribed" = "assigned"
+  ) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.currentProfileTab = type;
+      this.userId = userId;
+
+      const issueType = this.getIssueType;
+
+      let params: any = this.rootStore?.profileIssueFilters?.appliedFilters;
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (type === "assigned") params = params ? { ...params, assignees: userId } : { assignees: userId };
+      else if (type === "created") params = params ? { ...params, created_by: userId } : { created_by: userId };
+      else if (type === "subscribed") params = params ? { ...params, subscriber: userId } : { subscriber: userId };
+
+      const issueResponse = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
+
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [workspaceSlug]: {
+            ...this.issues?.[workspaceSlug],
+            [userId]: {
+              ...this.issues?.[workspaceSlug]?.[userId],
+              [issueType]: issueResponse,
+            },
+          },
+        };
+
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/profile-issues/issue_filters.store.ts b/web/store/profile-issues/issue_filters.store.ts
new file mode 100644
index 00000000000..6573ec447d1
--- /dev/null
+++ b/web/store/profile-issues/issue_filters.store.ts
@@ -0,0 +1,137 @@
+import { observable, computed, makeObservable, action, autorun, runInAction } from "mobx";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
+
+export interface IProfileIssueFilterStore {
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+  // computed
+  appliedFilters: TIssueParams[] | null;
+  // action
+  handleIssueFilters: (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => void;
+}
+
+export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
+  // observables
+  userFilters: IIssueFilterOptions = {
+    priority: null,
+    state_group: null,
+    labels: null,
+    start_date: null,
+    target_date: null,
+  };
+  userDisplayFilters: IIssueDisplayFilterOptions = {
+    group_by: null,
+    order_by: "sort_order",
+    show_empty_groups: true,
+    type: null,
+    layout: "list",
+  };
+  userDisplayProperties: any = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      userFilters: observable.ref,
+      userDisplayFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+      // computed
+      appliedFilters: computed,
+      // actions
+      handleIssueFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    autorun(() => {
+      if (this.userFilters || this.userDisplayFilters || this.userDisplayProperties) {
+        const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+        const userId = this.rootStore.profileIssues?.userId;
+        if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab && this.appliedFilters) {
+          console.log("autorun triggered");
+          this.rootStore.profileIssues.fetchIssues(
+            workspaceSlug,
+            userId,
+            this.rootStore.profileIssues.currentProfileTab
+          );
+        }
+      }
+    });
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || undefined,
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      type: this.userDisplayFilters?.type || undefined,
+      assignees: undefined,
+      created_by: undefined,
+      subscriber: undefined,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "profile_issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+
+  handleIssueFilters = (type: "userFilters" | "userDisplayFilters" | "userDisplayProperties", params: any) => {
+    if (type === "userFilters") {
+      const updatedFilters = { ...this.userFilters, ...params };
+      runInAction(() => {
+        this.userFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayFilters") {
+      const updatedFilters = { ...this.userDisplayFilters, ...params };
+      runInAction(() => {
+        this.userDisplayFilters = updatedFilters;
+      });
+    }
+    if (type === "userDisplayProperties") {
+      const updatedFilters = { ...this.userDisplayProperties, ...params };
+      runInAction(() => {
+        this.userDisplayProperties = updatedFilters;
+      });
+    }
+  };
+}
diff --git a/web/store/project-view/index.ts b/web/store/project-view/index.ts
new file mode 100644
index 00000000000..39a4c2facff
--- /dev/null
+++ b/web/store/project-view/index.ts
@@ -0,0 +1,5 @@
+export * from "./project_view_filters.store";
+export * from "./project_view_issues.store";
+export * from "./project_views.store";
+
+export * from "./project_view_issue_calendar_view.store";
diff --git a/web/store/project-view/project_view_filters.store.ts b/web/store/project-view/project_view_filters.store.ts
new file mode 100644
index 00000000000..94d35572475
--- /dev/null
+++ b/web/store/project-view/project_view_filters.store.ts
@@ -0,0 +1,68 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions } from "types";
+
+export interface IProjectViewFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  };
+
+  // actions
+  updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
+  deleteStoredFilters: (viewId: string) => void;
+}
+
+export class ProjectViewFiltersStore implements IProjectViewFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  } = {};
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      storedFilters: observable.ref,
+
+      // actions
+      updateStoredFilters: action,
+      deleteStoredFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
+    runInAction(() => {
+      this.storedFilters = {
+        ...this.storedFilters,
+        [viewId]: { ...this.storedFilters[viewId], ...filters },
+      };
+    });
+  };
+
+  deleteStoredFilters = (viewId: string) => {
+    const updatedStoredFilters = { ...this.storedFilters };
+    delete updatedStoredFilters[viewId];
+
+    runInAction(() => {
+      this.storedFilters = updatedStoredFilters;
+    });
+  };
+}
diff --git a/web/store/project-view/project_view_issue_calendar_view.store.ts b/web/store/project-view/project_view_issue_calendar_view.store.ts
new file mode 100644
index 00000000000..9bce218aee8
--- /dev/null
+++ b/web/store/project-view/project_view_issue_calendar_view.store.ts
@@ -0,0 +1,89 @@
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./project_view_issues.store";
+
+export interface IProjectViewIssueCalendarViewStore {
+  // actions
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ProjectViewIssueCalendarViewStore implements IProjectViewIssueCalendarViewStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // actions
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const viewId = this.rootStore?.projectViews?.viewId;
+    const issueType: IIssueType | null = this.rootStore?.projectViewIssues?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.projectViewIssues.getIssues;
+
+    if (workspaceSlug && projectId && viewId && issueType && issueLayout === "calendar" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      const droppableSourceColumnId = source?.droppableId || null;
+      const droppableDestinationColumnId = destination?.droppableId || null;
+
+      if (droppableSourceColumnId === droppableDestinationColumnId) return;
+
+      if (droppableSourceColumnId != droppableDestinationColumnId) {
+        // horizontal
+        const _sourceIssues = currentIssues[droppableSourceColumnId];
+        let _destinationIssues = currentIssues[droppableDestinationColumnId] || [];
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            target_date: droppableDestinationColumnId,
+          });
+        else _destinationIssues = [..._destinationIssues, { ...removed, target_date: droppableDestinationColumnId }];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id, target_date: droppableDestinationColumnId };
+
+        currentIssues[droppableSourceColumnId] = _sourceIssues;
+        currentIssues[droppableDestinationColumnId] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.projectViewIssues.viewIssues,
+        [viewId]: {
+          ...this.rootStore?.projectViewIssues.viewIssues?.[viewId],
+          [issueType]: {
+            ...this.rootStore?.projectViewIssues.viewIssues?.[viewId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.projectViewIssues.viewIssues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue
+      );
+    }
+
+    return;
+  };
+}
diff --git a/web/store/project-view/project_view_issues.store.ts b/web/store/project-view/project_view_issues.store.ts
new file mode 100644
index 00000000000..1e699c27042
--- /dev/null
+++ b/web/store/project-view/project_view_issues.store.ts
@@ -0,0 +1,379 @@
+import { observable, action, makeObservable, runInAction, computed, autorun } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+// types
+import { RootStore } from "../root";
+import { IIssue, IIssueFilterOptions } from "types";
+import { IBlockUpdateData } from "components/gantt-chart";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IProjectViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+
+  // actions
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateGanttIssueStructure: (workspaceSlug: string, viewId: string, issue: IIssue, payload: IBlockUpdateData) => void;
+  deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  fetchViewIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    filters: IIssueFilterOptions
+  ) => Promise<any>;
+
+  // computed
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  getIssuesCount: number;
+  getIssueType: IIssueType | null;
+}
+
+export class ProjectViewIssuesStore implements IProjectViewIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewIssues: observable.ref,
+
+      // actions
+      updateIssueStructure: action,
+      updateGanttIssueStructure: action,
+      deleteIssue: action,
+      fetchViewIssues: action,
+
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      getIssuesCount: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const viewId = this.rootStore.projectViews.viewId;
+
+      if (
+        workspaceSlug &&
+        projectId &&
+        viewId &&
+        this.rootStore.projectViewFilters.storedFilters[viewId] &&
+        this.rootStore.issueFilter.userDisplayFilters
+      )
+        this.fetchViewIssues(workspaceSlug, projectId, viewId, this.rootStore.projectViewFilters.storedFilters[viewId]);
+    });
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+
+    if (!viewId || !issueType) return null;
+
+    return this.viewIssues?.[viewId]?.[issueType] || null;
+  }
+
+  get getIssuesCount() {
+    const issueType = this.rootStore.issue.getIssueType;
+
+    let issuesCount = 0;
+
+    if (issueType === "grouped") {
+      const issues = this.getIssues as IIssueGroupedStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((group_id) => {
+        issuesCount += issues[group_id].length;
+      });
+    }
+
+    if (issueType === "groupWithSubGroups") {
+      const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
+
+      if (!issues) return 0;
+
+      Object.keys(issues).map((sub_group_id) => {
+        Object.keys(issues[sub_group_id]).map((group_id) => {
+          issuesCount += issues[sub_group_id][group_id].length;
+        });
+      });
+    }
+
+    if (issueType === "ungrouped") {
+      const issues = this.getIssues as IIssueUnGroupedStructure;
+
+      if (!issues) return 0;
+
+      issuesCount = issues.length;
+    }
+
+    return issuesCount;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!viewId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.viewIssues = { ...this.viewIssues, [viewId]: { ...this.viewIssues[viewId], [issueType]: issues } };
+    });
+  };
+
+  updateGanttIssueStructure = async (
+    workspaceSlug: string,
+    viewId: string,
+    issue: IIssue,
+    payload: IBlockUpdateData
+  ) => {
+    if (!issue || !workspaceSlug) return;
+
+    const issues = this.getIssues as IIssueUnGroupedStructure;
+
+    const newIssues = issues.map((i) => ({
+      ...i,
+      ...(i.id === issue.id
+        ? {
+            sort_order: payload.sort_order?.newSortOrder ?? i.sort_order,
+            start_date: payload.start_date,
+            target_date: payload.target_date,
+          }
+        : {}),
+    }));
+
+    if (payload.sort_order) {
+      const removedElement = newIssues.splice(payload.sort_order.sourceIndex, 1)[0];
+      removedElement.sort_order = payload.sort_order.newSortOrder;
+      newIssues.splice(payload.sort_order.destinationIndex, 0, removedElement);
+    }
+
+    runInAction(() => {
+      this.viewIssues = {
+        ...this.viewIssues,
+        [viewId]: {
+          ...this.viewIssues[viewId],
+          ungrouped: newIssues,
+        },
+      };
+    });
+
+    const newPayload: any = { ...payload };
+
+    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+
+    this.rootStore.issueDetail.updateIssue(workspaceSlug, issue.project, issue.id, newPayload);
+  };
+
+  deleteIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!viewId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.viewIssues = { ...this.viewIssues, [viewId]: { ...this.viewIssues[viewId], [issueType]: issues } };
+    });
+  };
+
+  fetchViewIssues = async (workspaceSlug: string, projectId: string, viewId: string, filters: IIssueFilterOptions) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const displayFilters = this.rootStore.issueFilter.userDisplayFilters;
+
+      let filteredRouteParams: any = {
+        priority: filters?.priority || undefined,
+        state_group: filters?.state_group || undefined,
+        state: filters?.state || undefined,
+        assignees: filters?.assignees || undefined,
+        created_by: filters?.created_by || undefined,
+        labels: filters?.labels || undefined,
+        start_date: filters?.start_date || undefined,
+        target_date: filters?.target_date || undefined,
+        group_by: displayFilters?.group_by || undefined,
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: displayFilters.sub_issue || undefined,
+        sub_group_by: displayFilters.sub_group_by || undefined,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout(displayFilters.layout ?? "list", "issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      if (displayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+      if (displayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+      const response = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, filteredRouteParams);
+
+      const issueType = this.rootStore.issue.getIssueType;
+
+      if (issueType != null) {
+        const newIssues = {
+          ...this.viewIssues,
+          [viewId]: {
+            ...this.viewIssues[viewId],
+            [issueType]: response,
+          },
+        };
+
+        runInAction(() => {
+          this.loader = false;
+          this.viewIssues = newIssues;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/project-view/project_views.store.ts b/web/store/project-view/project_views.store.ts
new file mode 100644
index 00000000000..4c4baf487cc
--- /dev/null
+++ b/web/store/project-view/project_views.store.ts
@@ -0,0 +1,293 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ViewService } from "services/view.service";
+// types
+import { RootStore } from "../root";
+import { IProjectView } from "types";
+
+export interface IProjectViewsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewId: string | null;
+  viewsList: {
+    [projectId: string]: IProjectView[];
+  };
+  viewDetails: {
+    [viewId: string]: IProjectView;
+  };
+
+  // actions
+  setViewId: (viewId: string) => void;
+
+  fetchAllViews: (workspaceSlug: string, projectId: string) => Promise<IProjectView[]>;
+  fetchViewDetails: (workspaceSlug: string, projectId: string, viewId: string) => Promise<IProjectView>;
+  createView: (workspaceSlug: string, projectId: string, data: Partial<IProjectView>) => Promise<IProjectView>;
+  updateView: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ) => Promise<IProjectView>;
+  deleteView: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  addViewToFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  removeViewFromFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+}
+
+export class ProjectViewsStore implements IProjectViewsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewId: string | null = null;
+  viewsList: {
+    [projectId: string]: IProjectView[];
+  } = {};
+  viewDetails: { [viewId: string]: IProjectView } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  viewService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewId: observable.ref,
+      viewsList: observable.ref,
+      viewDetails: observable.ref,
+
+      // actions
+      setViewId: action,
+
+      fetchAllViews: action,
+      fetchViewDetails: action,
+      createView: action,
+      updateView: action,
+      deleteView: action,
+      addViewToFavorites: action,
+      removeViewFromFavorites: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.viewService = new ViewService();
+  }
+
+  setViewId = (viewId: string) => {
+    this.viewId = viewId;
+  };
+
+  fetchAllViews = async (workspaceSlug: string, projectId: string): Promise<IProjectView[]> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.viewService.getViews(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchViewDetails = async (workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.viewService.getViewDetails(workspaceSlug, projectId, viewId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewDetails = {
+          ...this.viewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createView = async (workspaceSlug: string, projectId: string, data: Partial<IProjectView>): Promise<IProjectView> => {
+    try {
+      const response = await this.viewService.createView(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: [...(this.viewsList[projectId] ?? []), response],
+        };
+        this.viewDetails = {
+          ...this.viewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateView = async (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ): Promise<IProjectView> => {
+    const viewToUpdate = { ...this.viewDetails[viewId], ...data };
+
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId]?.map((view) => (view.id === viewId ? viewToUpdate : view)),
+        };
+
+        this.viewDetails = {
+          ...this.viewDetails,
+          [viewId]: viewToUpdate,
+        };
+      });
+
+      const response = await this.viewService.patchView(
+        workspaceSlug,
+        projectId,
+        viewId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      return response;
+    } catch (error) {
+      this.fetchViewDetails(workspaceSlug, projectId, viewId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId]?.filter((view) => view.id !== viewId),
+        };
+      });
+
+      await this.viewService.deleteView(workspaceSlug, projectId, viewId, this.rootStore.user.currentUser);
+    } catch (error) {
+      this.fetchAllViews(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  addViewToFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? true : view.is_favorite,
+          })),
+        };
+      });
+
+      await this.viewService.addViewToFavorites(workspaceSlug, projectId, {
+        view: viewId,
+      });
+    } catch (error) {
+      console.error("Failed to add view to favorites in view store", error);
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? false : view.is_favorite,
+          })),
+        };
+        this.error = error;
+      });
+    }
+  };
+
+  removeViewFromFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? false : view.is_favorite,
+          })),
+        };
+      });
+
+      await this.viewService.removeViewFromFavorites(workspaceSlug, projectId, viewId);
+    } catch (error) {
+      console.error("Failed to remove view from favorites in view store", error);
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? true : view.is_favorite,
+          })),
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project/index.ts b/web/store/project/index.ts
new file mode 100644
index 00000000000..ccd0abfaf2e
--- /dev/null
+++ b/web/store/project/index.ts
@@ -0,0 +1,5 @@
+export * from "./project_publish.store";
+export * from "./project.store";
+export * from "./project_estimates.store";
+export * from "./project_label_store";
+export * from "./project_state.store";
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
new file mode 100644
index 00000000000..976654ee9ee
--- /dev/null
+++ b/web/store/project/project.store.ts
@@ -0,0 +1,695 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState, IEstimate } from "types";
+// services
+import { ProjectService, ProjectStateService, ProjectEstimateService } from "services/project";
+import { IssueService, IssueLabelService } from "services/issue";
+
+export interface IProjectStore {
+  loader: boolean;
+  error: any | null;
+
+  searchQuery: string;
+  projectId: string | null;
+  projects: { [workspaceSlug: string]: IProject[] };
+  project_details: {
+    [projectId: string]: IProject; // projectId: project Info
+  };
+  states: {
+    [projectId: string]: IStateResponse; // project_id: states
+  } | null;
+  labels: {
+    [projectId: string]: IIssueLabels[] | null; // project_id: labels
+  } | null;
+  members: {
+    [projectId: string]: IProjectMember[] | null; // project_id: members
+  } | null;
+  estimates: {
+    [projectId: string]: IEstimate[] | null; // project_id: members
+  } | null;
+
+  // computed
+  searchedProjects: IProject[];
+  workspaceProjects: IProject[];
+  projectStatesByGroups: IStateResponse | null;
+  projectStates: IState[] | null;
+  projectLabels: IIssueLabels[] | null;
+  projectMembers: IProjectMember[] | null;
+  projectEstimates: IEstimate[] | null;
+
+  joinedProjects: IProject[];
+  favoriteProjects: IProject[];
+
+  currentProjectDetails: IProject | undefined;
+
+  // actions
+  setProjectId: (projectId: string) => void;
+  setSearchQuery: (query: string) => void;
+
+  getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
+  getProjectStateById: (stateId: string) => IState | null;
+  getProjectLabelById: (labelId: string) => IIssueLabels | null;
+  getProjectMemberById: (memberId: string) => IProjectMember | null;
+  getProjectMemberByUserId: (memberId: string) => IProjectMember | null;
+  getProjectEstimateById: (estimateId: string) => IEstimate | null;
+
+  fetchProjects: (workspaceSlug: string) => Promise<void>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
+  fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<any>;
+
+  addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+
+  orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+
+  joinProject: (workspaceSlug: string, projectIds: string[]) => Promise<void>;
+  leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  createProject: (workspaceSlug: string, data: any) => Promise<any>;
+  updateProject: (workspaceSlug: string, projectId: string, data: Partial<IProject>) => Promise<any>;
+  deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+
+  // write operations
+  removeMemberFromProject: (workspaceSlug: string, projectId: string, memberId: string) => Promise<void>;
+  updateMember: (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ) => Promise<IProjectMember>;
+}
+
+export class ProjectStore implements IProjectStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  searchQuery: string = "";
+  projectId: string | null = null;
+  projects: { [workspaceSlug: string]: IProject[] } = {}; // workspaceSlug: project[]
+  project_details: {
+    [projectId: string]: IProject; // projectId: project
+  } = {};
+  states: {
+    [projectId: string]: IStateResponse; // projectId: states
+  } | null = {};
+  labels: {
+    [projectId: string]: IIssueLabels[]; // projectId: labels
+  } | null = {};
+  members: {
+    [projectId: string]: IProjectMember[]; // projectId: members
+  } | null = {};
+  estimates: {
+    [projectId: string]: IEstimate[]; // projectId: estimates
+  } | null = {};
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  issueLabelService;
+  issueService;
+  stateService;
+  estimateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      searchQuery: observable.ref,
+      projectId: observable.ref,
+      projects: observable.ref,
+      project_details: observable.ref,
+      states: observable.ref,
+      labels: observable.ref,
+      members: observable.ref,
+      estimates: observable.ref,
+
+      // computed
+      searchedProjects: computed,
+      workspaceProjects: computed,
+      projectStatesByGroups: computed,
+      projectStates: computed,
+      projectLabels: computed,
+      projectMembers: computed,
+      projectEstimates: computed,
+
+      currentProjectDetails: computed,
+
+      joinedProjects: computed,
+      favoriteProjects: computed,
+
+      // action
+      setProjectId: action,
+      setSearchQuery: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
+
+      getProjectById: action,
+      getProjectStateById: action,
+      getProjectLabelById: action,
+      getProjectMemberById: action,
+      getProjectEstimateById: action,
+
+      fetchProjectStates: action,
+      fetchProjectLabels: action,
+      fetchProjectMembers: action,
+      fetchProjectEstimates: action,
+
+      addProjectToFavorites: action,
+      removeProjectFromFavorites: action,
+
+      orderProjectsWithSortOrder: action,
+      updateProjectView: action,
+      createProject: action,
+      updateProject: action,
+      leaveProject: action,
+
+      // write operations
+      removeMemberFromProject: action,
+      updateMember: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+    this.stateService = new ProjectStateService();
+    this.estimateService = new ProjectEstimateService();
+  }
+
+  get searchedProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+
+    const projects = this.projects[this.rootStore.workspace.workspaceSlug];
+
+    return this.searchQuery === ""
+      ? projects
+      : projects?.filter(
+          (project) =>
+            project.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+            project.identifier.toLowerCase().includes(this.searchQuery.toLowerCase())
+        );
+  }
+
+  get workspaceProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get currentProjectDetails() {
+    if (!this.projectId) return;
+    return this.project_details[this.projectId];
+  }
+
+  get joinedProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_member);
+  }
+
+  get favoriteProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_favorite);
+  }
+
+  get projectStatesByGroups() {
+    if (!this.projectId) return null;
+    return this.states?.[this.projectId] || null;
+  }
+
+  get projectStates() {
+    if (!this.projectId) return null;
+    const stateByGroups: IStateResponse | null = this.projectStatesByGroups;
+    if (!stateByGroups) return null;
+    const _states: IState[] = [];
+    Object.keys(stateByGroups).forEach((_stateGroup: string) => {
+      stateByGroups[_stateGroup].map((state) => {
+        _states.push(state);
+      });
+    });
+    return _states.length > 0 ? _states : null;
+  }
+
+  get projectLabels() {
+    if (!this.projectId) return null;
+    return this.labels?.[this.projectId] || null;
+  }
+
+  get projectMembers() {
+    if (!this.projectId) return null;
+    return this.members?.[this.projectId] || null;
+  }
+
+  get projectEstimates() {
+    if (!this.projectId) return null;
+    return this.estimates?.[this.projectId] || null;
+  }
+
+  // actions
+  setProjectId = (projectId: string) => {
+    this.projectId = projectId ?? null;
+  };
+
+  setSearchQuery = (query: string) => {
+    this.searchQuery = query;
+  };
+
+  /**
+   * get Workspace projects using workspace slug
+   * @param workspaceSlug
+   * @returns
+   *
+   */
+  fetchProjects = async (workspaceSlug: string) => {
+    try {
+      const projects = await this.projectService.getProjects(workspaceSlug);
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: projects,
+        };
+      });
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      throw error;
+    }
+  };
+
+  fetchProjectDetails = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.getProject(workspaceSlug, projectId);
+      runInAction(() => {
+        this.project_details = {
+          ...this.project_details,
+          [projectId]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Error while fetching project details", error);
+      throw error;
+    }
+  };
+
+  getProjectById = (workspaceSlug: string, projectId: string) => {
+    const projects = this.projects?.[workspaceSlug];
+    if (!projects) return null;
+
+    const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
+    return projectInfo;
+  };
+
+  getProjectStateById = (stateId: string) => {
+    if (!this.projectId) return null;
+    const states = this.projectStates;
+    if (!states) return null;
+    const stateInfo: IState | null = states.find((state) => state.id === stateId) || null;
+    return stateInfo;
+  };
+
+  getProjectLabelById = (labelId: string) => {
+    if (!this.projectId) return null;
+    const labels = this.projectLabels;
+    if (!labels) return null;
+    const labelInfo: IIssueLabels | null = labels.find((label) => label.id === labelId) || null;
+    return labelInfo;
+  };
+
+  getProjectMemberById = (memberId: string) => {
+    if (!this.projectId) return null;
+    const members = this.projectMembers;
+    if (!members) return null;
+    const memberInfo: IProjectMember | null = members.find((member) => member.id === memberId) || null;
+    return memberInfo;
+  };
+
+  getProjectMemberByUserId = (memberId: string) => {
+    if (!this.projectId) return null;
+    const members = this.projectMembers;
+    if (!members) return null;
+    const memberInfo: IProjectMember | null = members.find((member) => member.member.id === memberId) || null;
+    return memberInfo;
+  };
+
+  getProjectEstimateById = (estimateId: string) => {
+    if (!this.projectId) return null;
+    const estimates = this.projectEstimates;
+    if (!estimates) return null;
+    const estimateInfo: IEstimate | null = estimates.find((estimate) => estimate.id === estimateId) || null;
+    return estimateInfo;
+  };
+
+  fetchProjectStates = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const stateResponse = await this.stateService.getStates(workspaceSlug, projectId);
+      const _states = {
+        ...this.states,
+        [projectId]: stateResponse,
+      };
+
+      runInAction(() => {
+        this.states = _states;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectLabels = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const labelResponse = await this.issueLabelService.getProjectIssueLabels(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.labels = {
+          ...this.labels,
+          [projectId]: labelResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectMembers = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const membersResponse = await this.projectService.fetchProjectMembers(workspaceSlug, projectId);
+      const _members = {
+        ...this.members,
+        [projectId]: membersResponse,
+      };
+
+      runInAction(() => {
+        this.members = _members;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectEstimates = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const estimatesResponse = await this.estimateService.getEstimatesList(workspaceSlug, projectId);
+      const _estimates = {
+        ...this.estimates,
+        [projectId]: estimatesResponse,
+      };
+
+      runInAction(() => {
+        this.estimates = _estimates;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((project) => {
+            if (project.id === projectId) {
+              return { ...project, is_favorite: true };
+            }
+            return project;
+          }),
+        };
+      });
+      const response = await this.projectService.addProjectToFavorites(workspaceSlug, projectId);
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      await this.fetchProjects(workspaceSlug);
+      throw error;
+    }
+  };
+
+  removeProjectFromFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((project) => {
+            if (project.id === projectId) {
+              return { ...project, is_favorite: false };
+            }
+            return project;
+          }),
+        };
+      });
+      const response = await this.projectService.removeProjectFromFavorites(workspaceSlug, projectId);
+      await this.fetchProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      throw error;
+    }
+  };
+
+  orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
+    try {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug) return 0;
+
+      const projectsList = this.projects[workspaceSlug] || [];
+      let updatedSortOrder = projectsList[sortIndex].sort_order;
+
+      if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      else if (destinationIndex === projectsList.length - 1)
+        updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
+      else {
+        const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
+        const relativeDestinationSortingOrder =
+          sortIndex < destinationIndex
+            ? (projectsList[destinationIndex + 1].sort_order as number)
+            : (projectsList[destinationIndex - 1].sort_order as number);
+
+        updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+      }
+
+      const updatedProjectsList = projectsList.map((p) =>
+        p.id === projectId ? { ...p, sort_order: updatedSortOrder } : p
+      );
+
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: updatedProjectsList,
+        };
+      });
+
+      return updatedSortOrder;
+    } catch (error) {
+      console.log("failed to update sort order of the projects");
+      return 0;
+    }
+  };
+
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
+    try {
+      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      await this.fetchProjects(workspaceSlug);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
+  joinProject = async (workspaceSlug: string, projectIds: string[]) => {
+    const newPermissions: { [projectId: string]: boolean } = {};
+    projectIds.forEach((projectId) => {
+      newPermissions[projectId] = true;
+    });
+
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.joinProject(workspaceSlug, projectIds);
+      await this.fetchProjects(workspaceSlug);
+
+      runInAction(() => {
+        this.rootStore.user.hasPermissionToProject = {
+          ...this.rootStore.user.hasPermissionToProject,
+          ...newPermissions,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  leaveProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.leaveProject(workspaceSlug, projectId, this.rootStore.user);
+      await this.fetchProjects(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  createProject = async (workspaceSlug: string, data: any) => {
+    try {
+      const response = await this.projectService.createProject(workspaceSlug, data, this.rootStore.user.currentUser);
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: [...this.projects[workspaceSlug], response],
+        };
+        this.project_details = {
+          ...this.project_details,
+          [response.id]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  updateProject = async (workspaceSlug: string, projectId: string, data: Partial<IProject>) => {
+    try {
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: this.projects[workspaceSlug].map((p) => (p.id === projectId ? { ...p, ...data } : p)),
+        };
+        this.project_details = {
+          ...this.project_details,
+          [projectId]: { ...this.project_details[projectId], ...data },
+        };
+      });
+
+      const response = await this.projectService.updateProject(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+
+      this.fetchProjects(workspaceSlug);
+      this.fetchProjectDetails(workspaceSlug, projectId);
+      throw error;
+    }
+  };
+
+  deleteProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      await this.projectService.deleteProject(workspaceSlug, projectId, this.rootStore.user.currentUser);
+      await this.fetchProjects(workspaceSlug);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+    }
+  };
+
+  removeMemberFromProject = async (workspaceSlug: string, projectId: string, memberId: string) => {
+    const originalMembers = this.projectMembers || [];
+
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [projectId]: this.projectMembers?.filter((member) => member.id !== memberId) || [],
+      };
+    });
+
+    try {
+      await this.projectService.deleteProjectMember(workspaceSlug, projectId, memberId);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+    }
+  };
+
+  updateMember = async (workspaceSlug: string, projectId: string, memberId: string, data: Partial<IProjectMember>) => {
+    const originalMembers = this.projectMembers || [];
+
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [projectId]: (this.projectMembers || [])?.map((member) =>
+          member.id === memberId ? { ...member, ...data } : member
+        ),
+      };
+    });
+
+    try {
+      const response = await this.projectService.updateProjectMember(workspaceSlug, projectId, memberId, data);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+      return response;
+    } catch (error) {
+      console.log("Failed to update project member from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/web/store/project/project_estimates.store.ts b/web/store/project/project_estimates.store.ts
new file mode 100644
index 00000000000..0cb51c2dca2
--- /dev/null
+++ b/web/store/project/project_estimates.store.ts
@@ -0,0 +1,141 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IEstimate, IEstimateFormData } from "types";
+// services
+import { ProjectService, ProjectEstimateService } from "services/project";
+
+export interface IProjectEstimateStore {
+  loader: boolean;
+  error: any | null;
+
+  // estimates
+  createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
+  updateEstimate: (
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: IEstimateFormData
+  ) => Promise<IEstimate>;
+  deleteEstimate: (workspaceSlug: string, projectId: string, estimateId: string) => Promise<void>;
+}
+
+export class ProjectEstimatesStore implements IProjectEstimateStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  estimateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // estimates
+      createEstimate: action,
+      updateEstimate: action,
+      deleteEstimate: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.estimateService = new ProjectEstimateService();
+  }
+
+  createEstimate = async (workspaceSlug: string, projectId: string, data: IEstimateFormData) => {
+    try {
+      const response = await this.estimateService.createEstimate(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      const responseEstimate = {
+        ...response.estimate,
+        points: response.estimate_points,
+      };
+
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: [responseEstimate, ...(this.rootStore.project.estimates?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create estimate from project store");
+      throw error;
+    }
+  };
+
+  updateEstimate = async (workspaceSlug: string, projectId: string, estimateId: string, data: IEstimateFormData) => {
+    const originalEstimates = this.rootStore.project.getProjectEstimateById(estimateId);
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+          estimate.id === estimateId ? { ...estimate, ...data.estimate } : estimate
+        ),
+      };
+    });
+
+    try {
+      const response = await this.estimateService.patchEstimate(
+        workspaceSlug,
+        projectId,
+        estimateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+      await this.rootStore.project.fetchProjectEstimates(workspaceSlug, projectId);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update estimate from project store");
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+            estimate.id === estimateId ? { ...estimate, ...originalEstimates } : estimate
+          ),
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) => {
+    const originalEstimateList = this.rootStore.project.projectEstimates || [];
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.filter(
+          (estimate) => estimate.id !== estimateId
+        ),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.estimateService.deleteEstimate(workspaceSlug, projectId, estimateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete estimate from project store");
+      // reverting back to original estimate list
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: originalEstimateList,
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project/project_label_store.ts b/web/store/project/project_label_store.ts
new file mode 100644
index 00000000000..f4ea6892ad4
--- /dev/null
+++ b/web/store/project/project_label_store.ts
@@ -0,0 +1,140 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueLabels } from "types";
+// services
+import { IssueLabelService } from "services/issue";
+import { ProjectService } from "services/project";
+
+export interface IProjectLabelStore {
+  loader: boolean;
+  error: any | null;
+
+  // labels
+  createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => Promise<IIssueLabels>;
+  updateLabel: (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: Partial<IIssueLabels>
+  ) => Promise<IIssueLabels>;
+  deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
+}
+
+export class ProjectLabelStore implements IProjectLabelStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  issueLabelService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // labels
+      createLabel: action,
+      updateLabel: action,
+      deleteLabel: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => {
+    try {
+      const response = await this.issueLabelService.createIssueLabel(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: [response, ...(this.rootStore.project.labels?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create label from project store");
+      throw error;
+    }
+  };
+
+  updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabels>) => {
+    const originalLabel = this.rootStore.project.getProjectLabelById(labelId);
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]:
+          this.rootStore.project.labels?.[projectId]?.map((label) =>
+            label.id === labelId ? { ...label, ...data } : label
+          ) || [],
+      };
+    });
+
+    try {
+      const response = await this.issueLabelService.patchIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update label from project store");
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.map((label) =>
+            label.id === labelId ? { ...label, ...originalLabel } : label
+          ),
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteLabel = async (workspaceSlug: string, projectId: string, labelId: string) => {
+    const originalLabelList = this.rootStore.project.projectLabels;
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.filter((label) => label.id !== labelId),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.issueLabelService.deleteIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        this.rootStore.user.currentUser!
+      );
+    } catch (error) {
+      console.log("Failed to delete label from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: originalLabelList || [],
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project/project_publish.store.ts b/web/store/project/project_publish.store.ts
new file mode 100644
index 00000000000..ed427cdbe31
--- /dev/null
+++ b/web/store/project/project_publish.store.ts
@@ -0,0 +1,273 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+// services
+import { ProjectPublishService } from "services/project";
+
+export type TProjectPublishViews = "list" | "gantt" | "kanban" | "calendar" | "spreadsheet";
+
+export type TProjectPublishViewsSettings = {
+  [key in TProjectPublishViews]: boolean;
+};
+
+export interface IProjectPublishSettings {
+  id?: string;
+  project?: string;
+  comments: boolean;
+  reactions: boolean;
+  votes: boolean;
+  views: TProjectPublishViewsSettings;
+  inbox: string | null;
+}
+
+export interface IProjectPublishStore {
+  generalLoader: boolean;
+  fetchSettingsLoader: boolean;
+  error: any | null;
+
+  projectPublishSettings: IProjectPublishSettings | "not-initialized";
+
+  getProjectSettingsAsync: (workspaceSlug: string, projectId: string) => Promise<void>;
+  publishProject: (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => Promise<void>;
+  updateProjectSettingsAsync: (
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
+    data: IProjectPublishSettings
+  ) => Promise<void>;
+  unPublishProject: (workspaceSlug: string, projectId: string, projectPublishId: string) => Promise<void>;
+}
+
+export class ProjectPublishStore implements IProjectPublishStore {
+  // states
+  generalLoader: boolean = false;
+  fetchSettingsLoader: boolean = false;
+  error: any | null = null;
+
+  // actions
+  project_id: string | null = null;
+  projectPublishSettings: IProjectPublishSettings | "not-initialized" = "not-initialized";
+
+  // root store
+  rootStore;
+
+  // services
+  projectPublishService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      generalLoader: observable,
+      fetchSettingsLoader: observable,
+      error: observable,
+
+      // observables
+      project_id: observable,
+      projectPublishSettings: observable.ref,
+
+      // actions
+      getProjectSettingsAsync: action,
+      publishProject: action,
+      updateProjectSettingsAsync: action,
+      unPublishProject: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.projectPublishService = new ProjectPublishService();
+  }
+
+  getProjectSettingsAsync = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.fetchSettingsLoader = true;
+        this.error = null;
+      });
+
+      const response = await this.projectPublishService.getProjectSettingsAsync(workspaceSlug, projectId);
+
+      if (response && response.length > 0) {
+        const _projectPublishSettings: IProjectPublishSettings = {
+          id: response[0]?.id,
+          comments: response[0]?.comments,
+          reactions: response[0]?.reactions,
+          votes: response[0]?.votes,
+          views: {
+            list: response[0]?.views?.list || false,
+            kanban: response[0]?.views?.kanban || false,
+            calendar: response[0]?.views?.calendar || false,
+            gantt: response[0]?.views?.gantt || false,
+            spreadsheet: response[0]?.views?.spreadsheet || false,
+          },
+          inbox: response[0]?.inbox || null,
+          project: response[0]?.project || null,
+        };
+
+        runInAction(() => {
+          this.projectPublishSettings = _projectPublishSettings;
+          this.fetchSettingsLoader = false;
+          this.error = null;
+        });
+      } else {
+        runInAction(() => {
+          this.projectPublishSettings = "not-initialized";
+          this.fetchSettingsLoader = false;
+          this.error = null;
+        });
+      }
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.fetchSettingsLoader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  publishProject = async (workspaceSlug: string, projectId: string, data: IProjectPublishSettings) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
+
+      const response = await this.projectPublishService.createProjectSettingsAsync(workspaceSlug, projectId, data);
+
+      if (response) {
+        const _projectPublishSettings: IProjectPublishSettings = {
+          id: response?.id || null,
+          comments: response?.comments || false,
+          reactions: response?.reactions || false,
+          votes: response?.votes || false,
+          views: { ...response?.views },
+          inbox: response?.inbox || null,
+          project: response?.project || null,
+        };
+
+        runInAction(() => {
+          this.projectPublishSettings = _projectPublishSettings;
+          this.rootStore.project.projects = {
+            ...this.rootStore.project.projects,
+            [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+              ...p,
+              is_deployed: p.id === projectId ? true : p.is_deployed,
+            })),
+          };
+          this.rootStore.project.project_details = {
+            ...this.rootStore.project.project_details,
+            [projectId]: {
+              ...this.rootStore.project.project_details[projectId],
+              is_deployed: true,
+            },
+          };
+          this.generalLoader = false;
+          this.error = null;
+        });
+
+        return response;
+      }
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  updateProjectSettingsAsync = async (
+    workspaceSlug: string,
+    projectId: string,
+    projectPublishId: string,
+    data: IProjectPublishSettings
+  ) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
+
+      const response = await this.projectPublishService.updateProjectSettingsAsync(
+        workspaceSlug,
+        projectId,
+        projectPublishId,
+        data
+      );
+
+      if (response) {
+        const _projectPublishSettings: IProjectPublishSettings = {
+          id: response?.id || null,
+          comments: response?.comments || false,
+          reactions: response?.reactions || false,
+          votes: response?.votes || false,
+          views: { ...response?.views },
+          inbox: response?.inbox || null,
+          project: response?.project || null,
+        };
+
+        runInAction(() => {
+          this.projectPublishSettings = _projectPublishSettings;
+          this.generalLoader = false;
+          this.error = null;
+        });
+
+        return response;
+      }
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  unPublishProject = async (workspaceSlug: string, projectId: string, projectPublishId: string) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+        this.error = null;
+      });
+
+      const response = await this.projectPublishService.deleteProjectSettingsAsync(
+        workspaceSlug,
+        projectId,
+        projectPublishId
+      );
+
+      runInAction(() => {
+        this.projectPublishSettings = "not-initialized";
+        this.rootStore.project.projects = {
+          ...this.rootStore.project.projects,
+          [workspaceSlug]: this.rootStore.project.projects[workspaceSlug].map((p) => ({
+            ...p,
+            is_deployed: p.id === projectId ? false : p.is_deployed,
+          })),
+        };
+        this.rootStore.project.project_details = {
+          ...this.rootStore.project.project_details,
+          [projectId]: {
+            ...this.rootStore.project.project_details[projectId],
+            is_deployed: false,
+          },
+        };
+        this.generalLoader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+}
diff --git a/web/store/project/project_state.store.ts b/web/store/project/project_state.store.ts
new file mode 100644
index 00000000000..56fc0c203ca
--- /dev/null
+++ b/web/store/project/project_state.store.ts
@@ -0,0 +1,273 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IState } from "types";
+// services
+import { ProjectService, ProjectStateService } from "services/project";
+import { groupBy, orderArrayBy } from "helpers/array.helper";
+import { orderStateGroups } from "helpers/state.helper";
+
+export interface IProjectStateStore {
+  loader: boolean;
+  error: any | null;
+
+  // states
+  createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
+  updateState: (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => Promise<IState>;
+  deleteState: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  markStateAsDefault: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  moveStatePosition: (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => Promise<void>;
+}
+
+export class ProjectStateStore implements IProjectStateStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  stateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // states
+      createState: action,
+      updateState: action,
+      deleteState: action,
+      markStateAsDefault: action,
+      moveStatePosition: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.stateService = new ProjectStateService();
+  }
+
+  createState = async (workspaceSlug: string, projectId: string, data: Partial<IState>) => {
+    try {
+      const response = await this.stateService.createState(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [response.group]: [...(this.rootStore.project.states?.[projectId]?.[response.group] || []), response],
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create state from project store");
+      throw error;
+    }
+  };
+
+  updateState = async (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => {
+    const originalStates = this.rootStore.project.states || {};
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: {
+          ...this.rootStore.project.states?.[projectId],
+          [data.group as string]: (this.rootStore.project.states?.[projectId]?.[data.group as string] || []).map(
+            (state) => (state.id === stateId ? { ...state, ...data } : state)
+          ),
+        },
+      };
+    });
+
+    try {
+      const response = await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [response.group]: (this.rootStore.project.states?.[projectId]?.[response.group] || []).map((state) =>
+              state.id === stateId ? { ...state, ...response } : state
+            ),
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update state from project store");
+      runInAction(() => {
+        this.rootStore.project.states = originalStates;
+      });
+      throw error;
+    }
+  };
+
+  deleteState = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const originalStates = this.rootStore.project.projectStates;
+
+    try {
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [originalStates?.[0]?.group || ""]: (
+              this.rootStore.project.states?.[projectId]?.[originalStates?.[0]?.group || ""] || []
+            ).filter((state) => state.id !== stateId),
+          },
+        };
+      });
+
+      // deleting using api
+      await this.stateService.deleteState(workspaceSlug, projectId, stateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete state from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [originalStates?.[0]?.group || ""]: originalStates || [],
+          },
+        };
+      });
+    }
+  };
+
+  markStateAsDefault = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const states = this.rootStore.project.projectStates;
+    const currentDefaultState = states?.find((state) => state.default);
+
+    let newStateList =
+      states?.map((state) => {
+        if (state.id === stateId) return { ...state, default: true };
+        if (state.id === currentDefaultState?.id) return { ...state, default: false };
+        return state;
+      }) ?? [];
+    newStateList = orderArrayBy(newStateList, "sequence", "ascending");
+
+    const newOrderedStateGroups = orderStateGroups(groupBy(newStateList, "group"));
+    const oldOrderedStateGroup = this.rootStore.project.states?.[projectId] || {}; // for reverting back to old state group if api fails
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: newOrderedStateGroups || {},
+      };
+    });
+
+    // updating using api
+    try {
+      this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        { default: true },
+        this.rootStore.user.currentUser!
+      );
+
+      if (currentDefaultState)
+        this.stateService.patchState(
+          workspaceSlug,
+          projectId,
+          currentDefaultState.id,
+          { default: false },
+          this.rootStore.user.currentUser!
+        );
+    } catch (err) {
+      console.log("Failed to mark state as default");
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: oldOrderedStateGroup,
+        };
+      });
+    }
+  };
+
+  moveStatePosition = async (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => {
+    const SEQUENCE_GAP = 15000;
+    let newSequence = SEQUENCE_GAP;
+
+    const states = this.rootStore.project.projectStates || [];
+    const groupedStates = groupBy(states || [], "group");
+
+    const selectedState = states?.find((state) => state.id === stateId);
+    const groupStates = states?.filter((state) => state.group === selectedState?.group);
+    const groupLength = groupStates.length;
+
+    if (direction === "up") {
+      if (groupIndex === 1) newSequence = groupStates[0].sequence - SEQUENCE_GAP;
+      else newSequence = (groupStates[groupIndex - 2].sequence + groupStates[groupIndex - 1].sequence) / 2;
+    } else {
+      if (groupIndex === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + SEQUENCE_GAP;
+      else newSequence = (groupStates[groupIndex + 2].sequence + groupStates[groupIndex + 1].sequence) / 2;
+    }
+
+    const newStateList = states?.map((state) => {
+      if (state.id === stateId) return { ...state, sequence: newSequence };
+      return state;
+    });
+    const newOrderedStateGroups = orderStateGroups(
+      groupBy(orderArrayBy(newStateList, "sequence", "ascending"), "group")
+    );
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: newOrderedStateGroups || {},
+      };
+    });
+
+    // updating using api
+    try {
+      await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        { sequence: newSequence },
+        this.rootStore.user.currentUser!
+      );
+    } catch (err) {
+      console.log("Failed to move state position");
+      // reverting back to old state group if api fails
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: groupedStates,
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/root.ts b/web/store/root.ts
new file mode 100644
index 00000000000..9af4db4924b
--- /dev/null
+++ b/web/store/root.ts
@@ -0,0 +1,231 @@
+import { enableStaticRendering } from "mobx-react-lite";
+// store imports
+import CommandPaletteStore, { ICommandPaletteStore } from "./command-palette.store";
+import UserStore, { IUserStore } from "store/user.store";
+import ThemeStore, { IThemeStore } from "store/theme.store";
+import {
+  DraftIssuesStore,
+  IIssueDetailStore,
+  IIssueFilterStore,
+  IIssueKanBanViewStore,
+  IIssueStore,
+  IssueDetailStore,
+  IssueFilterStore,
+  IssueKanBanViewStore,
+  IIssueCalendarViewStore,
+  IssueCalendarViewStore,
+  IssueStore,
+  IIssueQuickAddStore,
+  IssueQuickAddStore,
+} from "store/issue";
+import { IWorkspaceFilterStore, IWorkspaceStore, WorkspaceFilterStore, WorkspaceStore } from "store/workspace";
+import {
+  IProjectPublishStore,
+  IProjectStore,
+  ProjectPublishStore,
+  ProjectStore,
+  IProjectStateStore,
+  ProjectStateStore,
+  IProjectLabelStore,
+  ProjectLabelStore,
+  ProjectEstimatesStore,
+  IProjectEstimateStore,
+} from "store/project";
+import {
+  IModuleFilterStore,
+  IModuleIssueKanBanViewStore,
+  IModuleIssueStore,
+  IModuleStore,
+  ModuleFilterStore,
+  ModuleIssueKanBanViewStore,
+  ModuleIssueStore,
+  IModuleIssueCalendarViewStore,
+  ModuleIssueCalendarViewStore,
+  ModuleStore,
+} from "store/module";
+import {
+  CycleIssueFilterStore,
+  CycleIssueKanBanViewStore,
+  CycleIssueStore,
+  CycleStore,
+  ICycleIssueFilterStore,
+  ICycleIssueKanBanViewStore,
+  ICycleIssueCalendarViewStore,
+  CycleIssueCalendarViewStore,
+  ICycleIssueStore,
+  ICycleStore,
+} from "store/cycle";
+import {
+  IProjectViewFiltersStore,
+  IProjectViewIssuesStore,
+  IProjectViewsStore,
+  ProjectViewFiltersStore,
+  ProjectViewIssuesStore,
+  ProjectViewsStore,
+  IProjectViewIssueCalendarViewStore,
+  ProjectViewIssueCalendarViewStore,
+} from "store/project-view";
+import CalendarStore, { ICalendarStore } from "store/calendar.store";
+import {
+  GlobalViewFiltersStore,
+  GlobalViewIssuesStore,
+  GlobalViewsStore,
+  IGlobalViewFiltersStore,
+  IGlobalViewIssuesStore,
+  IGlobalViewsStore,
+} from "store/global-view";
+import {
+  ProfileIssueStore,
+  IProfileIssueStore,
+  ProfileIssueFilterStore,
+  IProfileIssueFilterStore,
+} from "store/profile-issues";
+import {
+  ArchivedIssueStore,
+  IArchivedIssueStore,
+  ArchivedIssueFilterStore,
+  IArchivedIssueFilterStore,
+  ArchivedIssueDetailStore,
+  IArchivedIssueDetailStore,
+} from "store/archived-issues";
+import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
+import {
+  IInboxFiltersStore,
+  IInboxIssueDetailsStore,
+  IInboxIssuesStore,
+  IInboxStore,
+  InboxFiltersStore,
+  InboxIssueDetailsStore,
+  InboxIssuesStore,
+  InboxStore,
+} from "store/inbox";
+
+import { IMentionsStore, MentionsStore } from "store/editor";
+
+enableStaticRendering(typeof window === "undefined");
+
+export class RootStore {
+  user: IUserStore;
+  theme: IThemeStore;
+
+  commandPalette: ICommandPaletteStore;
+  workspace: IWorkspaceStore;
+  workspaceFilter: IWorkspaceFilterStore;
+
+  projectPublish: IProjectPublishStore;
+  project: IProjectStore;
+  projectState: IProjectStateStore;
+  projectLabel: IProjectLabelStore;
+  projectEstimates: IProjectEstimateStore;
+  issue: IIssueStore;
+
+  module: IModuleStore;
+  moduleIssue: IModuleIssueStore;
+  moduleFilter: IModuleFilterStore;
+  moduleIssueKanBanView: IModuleIssueKanBanViewStore;
+  moduleIssueCalendarView: IModuleIssueCalendarViewStore;
+
+  cycle: ICycleStore;
+  cycleIssue: ICycleIssueStore;
+  cycleIssueFilter: ICycleIssueFilterStore;
+  cycleIssueKanBanView: ICycleIssueKanBanViewStore;
+  cycleIssueCalendarView: ICycleIssueCalendarViewStore;
+
+  projectViews: IProjectViewsStore;
+  projectViewIssues: IProjectViewIssuesStore;
+  projectViewFilters: IProjectViewFiltersStore;
+  projectViewIssueCalendarView: IProjectViewIssueCalendarViewStore;
+
+  issueFilter: IIssueFilterStore;
+  issueDetail: IIssueDetailStore;
+  issueKanBanView: IIssueKanBanViewStore;
+  issueCalendarView: IIssueCalendarViewStore;
+  draftIssuesStore: DraftIssuesStore;
+  quickAddIssue: IIssueQuickAddStore;
+
+  calendar: ICalendarStore;
+
+  globalViews: IGlobalViewsStore;
+  globalViewIssues: IGlobalViewIssuesStore;
+  globalViewFilters: IGlobalViewFiltersStore;
+
+  profileIssues: IProfileIssueStore;
+  profileIssueFilters: IProfileIssueFilterStore;
+
+  archivedIssues: IArchivedIssueStore;
+  archivedIssueDetail: IArchivedIssueDetailStore;
+  archivedIssueFilters: IArchivedIssueFilterStore;
+
+  draftIssues: IDraftIssueStore;
+  draftIssueFilters: IDraftIssueFilterStore;
+
+  inbox: IInboxStore;
+  inboxIssues: IInboxIssuesStore;
+  inboxIssueDetails: IInboxIssueDetailsStore;
+  inboxFilters: IInboxFiltersStore;
+
+  mentionsStore: IMentionsStore;
+
+  constructor() {
+    this.commandPalette = new CommandPaletteStore(this);
+    this.user = new UserStore(this);
+    this.theme = new ThemeStore(this);
+
+    this.workspace = new WorkspaceStore(this);
+    this.workspaceFilter = new WorkspaceFilterStore(this);
+
+    this.project = new ProjectStore(this);
+    this.projectState = new ProjectStateStore(this);
+    this.projectLabel = new ProjectLabelStore(this);
+    this.projectEstimates = new ProjectEstimatesStore(this);
+    this.projectPublish = new ProjectPublishStore(this);
+
+    this.module = new ModuleStore(this);
+    this.moduleIssue = new ModuleIssueStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
+    this.moduleIssueKanBanView = new ModuleIssueKanBanViewStore(this);
+    this.moduleIssueCalendarView = new ModuleIssueCalendarViewStore(this);
+
+    this.cycle = new CycleStore(this);
+    this.cycleIssue = new CycleIssueStore(this);
+    this.cycleIssueFilter = new CycleIssueFilterStore(this);
+    this.cycleIssueKanBanView = new CycleIssueKanBanViewStore(this);
+    this.cycleIssueCalendarView = new CycleIssueCalendarViewStore(this);
+
+    this.projectViews = new ProjectViewsStore(this);
+    this.projectViewIssues = new ProjectViewIssuesStore(this);
+    this.projectViewFilters = new ProjectViewFiltersStore(this);
+    this.projectViewIssueCalendarView = new ProjectViewIssueCalendarViewStore(this);
+
+    this.issue = new IssueStore(this);
+    this.issueFilter = new IssueFilterStore(this);
+    this.issueDetail = new IssueDetailStore(this);
+    this.issueKanBanView = new IssueKanBanViewStore(this);
+    this.issueCalendarView = new IssueCalendarViewStore(this);
+    this.draftIssuesStore = new DraftIssuesStore(this);
+    this.quickAddIssue = new IssueQuickAddStore(this);
+
+    this.calendar = new CalendarStore(this);
+
+    this.globalViews = new GlobalViewsStore(this);
+    this.globalViewIssues = new GlobalViewIssuesStore(this);
+    this.globalViewFilters = new GlobalViewFiltersStore(this);
+
+    this.profileIssues = new ProfileIssueStore(this);
+    this.profileIssueFilters = new ProfileIssueFilterStore(this);
+
+    this.archivedIssues = new ArchivedIssueStore(this);
+    this.archivedIssueDetail = new ArchivedIssueDetailStore(this);
+    this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
+
+    this.draftIssues = new DraftIssueStore(this);
+    this.draftIssueFilters = new DraftIssueFilterStore(this);
+
+    this.inbox = new InboxStore(this);
+    this.inboxIssues = new InboxIssuesStore(this);
+    this.inboxIssueDetails = new InboxIssueDetailsStore(this);
+    this.inboxFilters = new InboxFiltersStore(this);
+
+    this.mentionsStore = new MentionsStore(this);
+  }
+}
diff --git a/web/store/theme.store.ts b/web/store/theme.store.ts
new file mode 100644
index 00000000000..51189a75d2d
--- /dev/null
+++ b/web/store/theme.store.ts
@@ -0,0 +1,71 @@
+// mobx
+import { action, observable, makeObservable } from "mobx";
+// helper
+import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
+
+export interface IThemeStore {
+  theme: string | null;
+  sidebarCollapsed: boolean | undefined;
+
+  toggleSidebar: (collapsed?: boolean) => void;
+  setTheme: (theme: any) => void;
+}
+
+class ThemeStore implements IThemeStore {
+  sidebarCollapsed: boolean | undefined = undefined;
+  theme: string | null = null;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: any | null = null) {
+    makeObservable(this, {
+      // observable
+      sidebarCollapsed: observable.ref,
+      theme: observable.ref,
+      // action
+      toggleSidebar: action,
+      setTheme: action,
+      // computed
+    });
+
+    this.rootStore = _rootStore;
+    this.initialLoad();
+  }
+  toggleSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+    } else {
+      this.sidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
+  };
+
+  setTheme = async (_theme: { theme: any }) => {
+    try {
+      const currentTheme: string = _theme?.theme?.theme?.toString();
+
+      // updating the local storage theme value
+      localStorage.setItem("theme", currentTheme);
+      // updating the mobx theme value
+      this.theme = currentTheme;
+
+      // applying the theme to platform if the selected theme is custom
+      if (currentTheme === "custom") {
+        const themeSettings = this.rootStore.user.currentUserSettings || null;
+        applyTheme(
+          themeSettings?.theme?.palette !== ",,,,"
+            ? themeSettings?.theme?.palette
+            : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          themeSettings?.theme?.darkPalette
+        );
+      } else unsetCustomCssVariables();
+    } catch (error) {
+      console.error("setting user theme error", error);
+    }
+  };
+
+  // init load
+  initialLoad() {}
+}
+
+export default ThemeStore;
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
new file mode 100644
index 00000000000..80cafdf44d8
--- /dev/null
+++ b/web/store/user.store.ts
@@ -0,0 +1,330 @@
+// mobx
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
+// interfaces
+import { IUser, IUserSettings } from "types/users";
+import { IWorkspaceMemberMe, IProjectMember, TUserProjectRole, TUserWorkspaceRole } from "types";
+import { RootStore } from "./root";
+
+export interface IUserStore {
+  loader: boolean;
+
+  isUserLoggedIn: boolean | null;
+  currentUser: IUser | null;
+  currentUserSettings: IUserSettings | null;
+
+  dashboardInfo: any;
+
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  };
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean | null;
+  };
+
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  };
+  hasPermissionToProject: {
+    [projectId: string]: boolean | null;
+  };
+
+  currentProjectMemberInfo: IProjectMember | undefined;
+  currentWorkspaceMemberInfo: IWorkspaceMemberMe | undefined;
+  currentProjectRole: TUserProjectRole | undefined;
+  currentWorkspaceRole: TUserWorkspaceRole | undefined;
+
+  hasPermissionToCurrentWorkspace: boolean | undefined;
+  hasPermissionToCurrentProject: boolean | undefined;
+
+  fetchCurrentUser: () => Promise<IUser>;
+  fetchCurrentUserSettings: () => Promise<IUserSettings>;
+
+  fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
+  fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<IProjectMember>;
+  fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
+
+  updateUserOnBoard: () => Promise<void>;
+  updateTourCompleted: () => Promise<void>;
+  updateCurrentUser: (data: Partial<IUser>) => Promise<IUser>;
+  updateCurrentUserTheme: (theme: string) => Promise<IUser>;
+}
+
+class UserStore implements IUserStore {
+  loader: boolean = false;
+
+  isUserLoggedIn: boolean | null = null;
+  currentUser: IUser | null = null;
+  currentUserSettings: IUserSettings | null = null;
+
+  dashboardInfo: any = null;
+
+  workspaceMemberInfo: {
+    [workspaceSlug: string]: IWorkspaceMemberMe;
+  } = {};
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean;
+  } = {};
+
+  projectMemberInfo: {
+    [projectId: string]: IProjectMember;
+  } = {};
+  hasPermissionToProject: {
+    [projectId: string]: boolean;
+  } = {};
+  // root store
+  rootStore;
+  // services
+  userService;
+  workspaceService;
+  projectService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      currentUser: observable.ref,
+      currentUserSettings: observable.ref,
+      dashboardInfo: observable.ref,
+      workspaceMemberInfo: observable.ref,
+      hasPermissionToWorkspace: observable.ref,
+      projectMemberInfo: observable.ref,
+      hasPermissionToProject: observable.ref,
+      // action
+      fetchCurrentUser: action,
+      fetchCurrentUserSettings: action,
+      fetchUserDashboardInfo: action,
+      fetchUserWorkspaceInfo: action,
+      fetchUserProjectInfo: action,
+      updateUserOnBoard: action,
+      updateTourCompleted: action,
+      updateCurrentUser: action,
+      updateCurrentUserTheme: action,
+      // computed
+      currentProjectMemberInfo: computed,
+      currentWorkspaceMemberInfo: computed,
+      currentProjectRole: computed,
+      currentWorkspaceRole: computed,
+      hasPermissionToCurrentWorkspace: computed,
+      hasPermissionToCurrentProject: computed,
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+    this.workspaceService = new WorkspaceService();
+    this.projectService = new ProjectService();
+  }
+
+  get currentWorkspaceMemberInfo() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get currentWorkspaceRole() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug]?.role;
+  }
+
+  get currentProjectMemberInfo() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId];
+  }
+
+  get currentProjectRole() {
+    if (!this.rootStore.project.projectId) return;
+    return this.projectMemberInfo[this.rootStore.project.projectId]?.role;
+  }
+
+  get hasPermissionToCurrentWorkspace() {
+    if (!this.rootStore.workspace.workspaceSlug) return;
+    return this.hasPermissionToWorkspace[this.rootStore.workspace.workspaceSlug];
+  }
+
+  get hasPermissionToCurrentProject() {
+    if (!this.rootStore.project.projectId) return;
+    return this.hasPermissionToProject[this.rootStore.project.projectId];
+  }
+
+  fetchCurrentUser = async () => {
+    try {
+      const response = await this.userService.currentUser();
+      if (response) {
+        runInAction(() => {
+          this.currentUser = response;
+          this.isUserLoggedIn = true;
+        });
+      }
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.isUserLoggedIn = false;
+      });
+      throw error;
+    }
+  };
+
+  fetchCurrentUserSettings = async () => {
+    try {
+      const response = await this.userService.currentUserSettings();
+      if (response) {
+        runInAction(() => {
+          this.currentUserSettings = response;
+        });
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchUserDashboardInfo = async (workspaceSlug: string, month: number) => {
+    try {
+      const response = await this.userService.userWorkspaceDashboard(workspaceSlug, month);
+      runInAction(() => {
+        this.dashboardInfo = response;
+      });
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.workspaceMemberMe(workspaceSlug);
+
+      runInAction(() => {
+        this.workspaceMemberInfo = {
+          ...this.workspaceMemberInfo,
+          [workspaceSlug]: response,
+        };
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: true,
+        };
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.hasPermissionToWorkspace = {
+          ...this.hasPermissionToWorkspace,
+          [workspaceSlug]: false,
+        };
+      });
+      throw error;
+    }
+  };
+
+  fetchUserProjectInfo = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.projectMemberMe(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.projectMemberInfo = {
+          ...this.projectMemberInfo,
+          [projectId]: response,
+        };
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: true,
+        };
+      });
+      return response;
+    } catch (error: any) {
+      runInAction(() => {
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: false,
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  updateUserOnBoard = async () => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          is_onboarded: true,
+        } as IUser;
+      });
+
+      const user = this.currentUser ?? undefined;
+
+      if (!user) return;
+
+      await this.userService.updateUserOnBoard({ userRole: user.role }, user);
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      throw error;
+    }
+  };
+
+  updateTourCompleted = async () => {
+    try {
+      if (this.currentUser) {
+        runInAction(() => {
+          this.currentUser = {
+            ...this.currentUser,
+            is_tour_completed: true,
+          } as IUser;
+        });
+
+        const response = await this.userService.updateUserTourCompleted(this.currentUser);
+
+        return response;
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  updateCurrentUser = async (data: Partial<IUser>) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          ...data,
+        } as IUser;
+      });
+
+      const response = await this.userService.updateUser(data);
+
+      runInAction(() => {
+        this.currentUser = response;
+      });
+      return response;
+    } catch (error) {
+      this.fetchCurrentUser();
+
+      throw error;
+    }
+  };
+
+  updateCurrentUserTheme = async (theme: string) => {
+    try {
+      runInAction(() => {
+        this.currentUser = {
+          ...this.currentUser,
+          theme: {
+            ...this.currentUser?.theme,
+            theme,
+          },
+        } as IUser;
+      });
+      const response = await this.userService.updateUser({
+        theme: { ...this.currentUser?.theme, theme },
+      } as IUser);
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
+
+export default UserStore;
diff --git a/web/store/workspace/index.ts b/web/store/workspace/index.ts
new file mode 100644
index 00000000000..887bd0b0d67
--- /dev/null
+++ b/web/store/workspace/index.ts
@@ -0,0 +1,2 @@
+export * from "./workspace_filters.store";
+export * from "./workspace.store";
diff --git a/web/store/workspace/workspace.store.ts b/web/store/workspace/workspace.store.ts
new file mode 100644
index 00000000000..6891da72c89
--- /dev/null
+++ b/web/store/workspace/workspace.store.ts
@@ -0,0 +1,425 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { RootStore } from "../root";
+// types
+import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { ProjectService } from "services/project";
+import { IssueService, IssueLabelService } from "services/issue";
+
+export interface IWorkspaceStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  workspaceSlug: string | null;
+  workspaces: IWorkspace[] | undefined;
+  labels: { [workspaceSlug: string]: IIssueLabels[] }; // workspaceSlug: labels[]
+  members: { [workspaceSlug: string]: IWorkspaceMember[] }; // workspaceSlug: members[]
+
+  // actions
+  setWorkspaceSlug: (workspaceSlug: string) => void;
+  getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
+  getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
+  fetchWorkspaces: () => Promise<IWorkspace[]>;
+  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
+  fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
+
+  // workspace write operations
+  createWorkspace: (data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  updateWorkspace: (workspaceSlug: string, data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  deleteWorkspace: (workspaceSlug: string) => Promise<void>;
+
+  // members write operations
+  updateMember: (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => Promise<void>;
+  removeMember: (workspaceSlug: string, memberId: string) => Promise<void>;
+
+  // computed
+  currentWorkspace: IWorkspace | null;
+  workspacesCreateByCurrentUser: IWorkspace[] | null;
+  workspaceLabels: IIssueLabels[] | null;
+  workspaceMembers: IWorkspaceMember[] | null;
+}
+
+export class WorkspaceStore implements IWorkspaceStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceSlug: string | null = null;
+  workspaces: IWorkspace[] | undefined = [];
+  projects: { [workspaceSlug: string]: IProject[] } = {}; // workspaceSlug: project[]
+  labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
+
+  // services
+  workspaceService;
+  projectService;
+  issueService;
+  issueLabelService;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      workspaceSlug: observable.ref,
+      workspaces: observable.ref,
+      labels: observable.ref,
+      members: observable.ref,
+
+      // actions
+      setWorkspaceSlug: action,
+      getWorkspaceBySlug: action,
+      getWorkspaceLabelById: action,
+      fetchWorkspaces: action,
+      fetchWorkspaceLabels: action,
+      fetchWorkspaceMembers: action,
+
+      // workspace write operations
+      createWorkspace: action,
+      updateWorkspace: action,
+      deleteWorkspace: action,
+
+      // members write operations
+      updateMember: action,
+      removeMember: action,
+
+      // computed
+      currentWorkspace: computed,
+      workspaceLabels: computed,
+      workspaceMembers: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.workspaceService = new WorkspaceService();
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  /**
+   * computed value of current workspace based on workspace id saved in the store
+   */
+  get currentWorkspace() {
+    if (!this.workspaceSlug) return null;
+
+    return this.workspaces?.find((workspace) => workspace.slug === this.workspaceSlug) || null;
+  }
+
+  /**
+   * computed value of all the workspaces created by the current logged in user
+   */
+  get workspacesCreateByCurrentUser() {
+    if (!this.workspaces) return null;
+
+    const user = this.rootStore.user.currentUser;
+
+    if (!user) return null;
+
+    return this.workspaces.filter((w) => w.created_by === user?.id);
+  }
+
+  /**
+   * computed value of workspace labels using the workspace slug from the store
+   */
+  get workspaceLabels() {
+    if (!this.workspaceSlug) return [];
+    const _labels = this.labels?.[this.workspaceSlug];
+    return _labels && Object.keys(_labels).length > 0 ? _labels : [];
+  }
+
+  /**
+   * computed value of workspace members using the workspace slug from the store
+   */
+  get workspaceMembers() {
+    if (!this.workspaceSlug) return [];
+    const _members = this.members?.[this.workspaceSlug];
+    return _members && Object.keys(_members).length > 0 ? _members : [];
+  }
+
+  /**
+   * set workspace slug in the store
+   * @param workspaceSlug
+   * @returns
+   */
+  setWorkspaceSlug = (workspaceSlug: string) => (this.workspaceSlug = workspaceSlug);
+
+  /**
+   * fetch workspace info from the array of workspaces in the store.
+   * @param workspaceSlug
+   */
+  getWorkspaceBySlug = (workspaceSlug: string) => this.workspaces?.find((w) => w.slug == workspaceSlug) || null;
+
+  /**
+   * get workspace label information from the workspace labels
+   * @param labelId
+   * @returns
+   */
+  getWorkspaceLabelById = (workspaceSlug: string, labelId: string) =>
+    this.labels?.[workspaceSlug].find((label) => label.id === labelId) || null;
+
+  /**
+   * fetch user workspaces from API
+   */
+  fetchWorkspaces = async () => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const workspaceResponse = await this.workspaceService.userWorkspaces();
+
+      runInAction(() => {
+        this.workspaces = workspaceResponse;
+        this.loader = false;
+        this.error = null;
+      });
+
+      return workspaceResponse;
+    } catch (error) {
+      console.log("Failed to fetch user workspaces in workspace store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+        this.workspaces = [];
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * fetch workspace labels using workspace slug
+   * @param workspaceSlug
+   */
+  fetchWorkspaceLabels = async (workspaceSlug: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const labelsResponse = await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug);
+
+      runInAction(() => {
+        this.labels = {
+          ...this.labels,
+          [workspaceSlug]: labelsResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  /**
+   * fetch workspace members using workspace slug
+   * @param workspaceSlug
+   */
+  fetchWorkspaceMembers = async (workspaceSlug: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const membersResponse = await this.workspaceService.fetchWorkspaceMembers(workspaceSlug);
+
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: membersResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  /**
+   * create workspace using the workspace data
+   * @param data
+   */
+  createWorkspace = async (data: Partial<IWorkspace>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.workspaceService.createWorkspace(data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = [...(this.workspaces ?? []), response];
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * update workspace using the workspace slug and new workspace data
+   * @param workspaceSlug
+   * @param data
+   */
+  updateWorkspace = async (workspaceSlug: string, data: Partial<IWorkspace>) => {
+    const newWorkspaces = this.workspaces?.map((w) => (w.slug === workspaceSlug ? { ...w, ...data } : w));
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      const response = await this.workspaceService.updateWorkspace(workspaceSlug, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = newWorkspaces;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * delete workspace using the workspace slug
+   * @param workspaceSlug
+   */
+  deleteWorkspace = async (workspaceSlug: string) => {
+    const newWorkspaces = this.workspaces?.filter((w) => w.slug !== workspaceSlug);
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const user = this.rootStore.user.currentUser ?? undefined;
+
+      await this.workspaceService.deleteWorkspace(workspaceSlug, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.workspaces = newWorkspaces;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * update workspace member using workspace slug and member id and data
+   * @param workspaceSlug
+   * @param memberId
+   * @param data
+   */
+  updateMember = async (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => {
+    const members = this.members?.[workspaceSlug];
+    members?.map((m) => (m.id === memberId ? { ...m, ...data } : m));
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: members,
+        };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * remove workspace member using workspace slug and member id
+   * @param workspaceSlug
+   * @param memberId
+   */
+  removeMember = async (workspaceSlug: string, memberId: string) => {
+    const members = this.members?.[workspaceSlug];
+    members?.filter((m) => m.id !== memberId);
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: members,
+        };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/workspace/workspace_filters.store.ts b/web/store/workspace/workspace_filters.store.ts
new file mode 100644
index 00000000000..048ee6b07aa
--- /dev/null
+++ b/web/store/workspace/workspace_filters.store.ts
@@ -0,0 +1,193 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IWorkspaceMemberMe,
+  IWorkspaceViewProps,
+  TIssueParams,
+} from "types";
+
+export interface IWorkspaceFilterStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions;
+  workspaceDisplayFilters: IIssueDisplayFilterOptions;
+  workspaceDisplayProperties: IIssueDisplayProperties;
+
+  // actions
+  fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
+  updateWorkspaceFilters: (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class WorkspaceFilterStore implements IWorkspaceFilterStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions = {};
+  workspaceDisplayFilters: IIssueDisplayFilterOptions = {};
+  workspaceDisplayProperties: IIssueDisplayProperties = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      workspaceFilters: observable.ref,
+      workspaceDisplayFilters: observable.ref,
+      workspaceDisplayProperties: observable.ref,
+
+      // actions
+      fetchUserWorkspaceFilters: action,
+      updateWorkspaceFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.workspaceService = new WorkspaceService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.workspaceFilters || !this.workspaceDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.workspaceFilters?.priority || undefined,
+      state_group: this.workspaceFilters?.state_group || undefined,
+      state: this.workspaceFilters?.state || undefined,
+      assignees: this.workspaceFilters?.assignees || undefined,
+      created_by: this.workspaceFilters?.created_by || undefined,
+      labels: this.workspaceFilters?.labels || undefined,
+      start_date: this.workspaceFilters?.start_date || undefined,
+      target_date: this.workspaceFilters?.target_date || undefined,
+      group_by: this.workspaceDisplayFilters?.group_by || "state",
+      order_by: this.workspaceDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.workspaceDisplayFilters?.sub_group_by || undefined,
+      type: this.workspaceDisplayFilters?.type || undefined,
+      sub_issue: this.workspaceDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.workspaceDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.workspaceDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.workspaceDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.workspaceDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.workspaceDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchUserWorkspaceFilters = async (workspaceSlug: string) => {
+    try {
+      const memberResponse = await this.workspaceService.workspaceMemberMe(workspaceSlug);
+
+      runInAction(() => {
+        this.workspaceFilters = memberResponse?.view_props?.filters;
+        this.workspaceDisplayFilters = memberResponse?.view_props?.display_filters ?? {};
+        this.workspaceDisplayProperties = memberResponse?.view_props?.display_properties;
+      });
+
+      return memberResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateWorkspaceFilters = async (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.workspaceDisplayFilters,
+        ...filterToUpdate.display_filters,
+      },
+      display_properties: {
+        ...this.workspaceDisplayProperties,
+        ...filterToUpdate.display_properties,
+      },
+      filters: {
+        ...this.workspaceFilters,
+        ...filterToUpdate.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.workspaceDisplayFilters = newViewProps.display_filters;
+        this.workspaceDisplayProperties = newViewProps.display_properties;
+        this.workspaceFilters = newViewProps.filters;
+      });
+
+      this.workspaceService.updateWorkspaceView(workspaceSlug, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserWorkspaceFilters(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/apps/app/styles/command-pallette.css b/web/styles/command-pallette.css
similarity index 100%
rename from apps/app/styles/command-pallette.css
rename to web/styles/command-pallette.css
diff --git a/web/styles/editor.css b/web/styles/editor.css
new file mode 100644
index 00000000000..85d881eeb46
--- /dev/null
+++ b/web/styles/editor.css
@@ -0,0 +1,231 @@
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgb(var(--color-text-400));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+  transition: filter 0.1s ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 3px solid #5abbf7;
+    filter: brightness(90%);
+  }
+}
+
+.ProseMirror-gapcursor:after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+  margin-right: 0.2rem;
+  user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: rgb(var(--color-background-100));
+  margin: 0;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  border: 2px solid rgb(var(--color-text-100));
+  margin-right: 0.3rem;
+  display: grid;
+  place-content: center;
+
+  &:hover {
+    background-color: rgb(var(--color-background-80));
+  }
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  &::before {
+    content: "";
+    width: 0.65em;
+    height: 0.65em;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    transform-origin: center;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-200));
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 400px !important;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none;
+  cursor: text;
+  line-height: 1.2;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.fadeIn {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fadeOut {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+  position: relative;
+  width: 35%;
+
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 45%;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid rgba(var(--color-text-200));
+    border-top-color: rgba(var(--color-text-800));
+    animation: spinning 0.6s linear infinite;
+  }
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#editor-container {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0;
+    border: 1px solid rgb(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgb(var(--color-border-200));
+      padding: 10px 15px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: rgb(var(--color-primary-100));
+    }
+
+    td:hover {
+      background-color: rgba(var(--color-primary-300), 0.1);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(var(--color-primary-300), 0.1);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: -2px;
+      width: 2px;
+      background-color: rgb(var(--color-primary-400));
+      pointer-events: none;
+    }
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * p {
+  padding: 0px 1px;
+  margin: 6px 2px;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
diff --git a/web/styles/globals.css b/web/styles/globals.css
new file mode 100644
index 00000000000..cde7993a109
--- /dev/null
+++ b/web/styles/globals.css
@@ -0,0 +1,485 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+
+  .text-2\.5xl {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  color: rgba(var(--color-text-100));
+}
+
+/* scrollbar style */
+::-webkit-scrollbar {
+  display: none;
+}
+
+.horizontal-scroll-enable {
+  overflow-x: scroll;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar {
+  display: block;
+  height: 7px;
+  width: 0;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+  background-color: rgba(var(--color-background-100));
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-80));
+}
+
+.vertical-scroll-enable::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-90));
+}
+/* end scrollbar style */
+
+.tags-input-container {
+  border: 2px solid #000;
+  padding: 0.5em;
+  border-radius: 3px;
+  width: min(80vw, 600px);
+  margin-top: 1em;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.tag-item {
+  background-color: rgb(218, 216, 216);
+  display: inline-block;
+  padding: 0.5em 0.75em;
+  border-radius: 20px;
+}
+.tag-item .close {
+  height: 20px;
+  width: 20px;
+  background-color: rgb(48, 48, 48);
+  color: #fff;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 0.5em;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.tags-input {
+  flex-grow: 1;
+  padding: 0.5em 0;
+  border: none;
+  outline: none;
+}
+
+/* emoji icon picker */
+.conical-gradient {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff6b00 0deg,
+    #f7ae59 70.5deg,
+    #3f76ff 151.12deg,
+    #05c3ff 213deg,
+    #18914f 289.87deg,
+    #f6f172 329.25deg,
+    #ff6b00 360deg
+  );
+}
+
+/* progress bar */
+.progress-bar {
+  fill: currentColor;
+  color: rgba(var(--color-sidebar-background-100));
+}
+
+/* lineclamp */
+.lineclamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+/* popover2 styling */
+.bp4-popover2-transition-container {
+  z-index: 1 !important;
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-400));
+}
+
+.bp4-overlay-content {
+  z-index: 555 !important;
+}
+
+.disable-scroll {
+  overflow: hidden !important;
+}
+
+.vertical-lr {
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+div.web-view-spinner {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  display: inline-block;
+  margin-left: 50%;
+  margin-right: 50%;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+div.web-view-spinner div {
+  width: 6%;
+  height: 16%;
+  background: rgb(var(--color-text-400));
+  position: absolute;
+  left: 49%;
+  top: 43%;
+  opacity: 0;
+  border-radius: 50px;
+  -webkit-border-radius: 50px;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  animation: fade 1s linear infinite;
+  -webkit-animation: fade 1s linear infinite;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+@-webkit-keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+
+div.web-view-spinner div.bar1 {
+  transform: rotate(0deg) translate(0, -130%);
+  -webkit-transform: rotate(0deg) translate(0, -130%);
+  animation-delay: 0s;
+  -webkit-animation-delay: 0s;
+}
+
+div.web-view-spinner div.bar2 {
+  transform: rotate(30deg) translate(0, -130%);
+  -webkit-transform: rotate(30deg) translate(0, -130%);
+  animation-delay: -0.9167s;
+  -webkit-animation-delay: -0.9167s;
+}
+
+div.web-view-spinner div.bar3 {
+  transform: rotate(60deg) translate(0, -130%);
+  -webkit-transform: rotate(60deg) translate(0, -130%);
+  animation-delay: -0.833s;
+  -webkit-animation-delay: -0.833s;
+}
+div.web-view-spinner div.bar4 {
+  transform: rotate(90deg) translate(0, -130%);
+  -webkit-transform: rotate(90deg) translate(0, -130%);
+  animation-delay: -0.7497s;
+  -webkit-animation-delay: -0.7497s;
+}
+div.web-view-spinner div.bar5 {
+  transform: rotate(120deg) translate(0, -130%);
+  -webkit-transform: rotate(120deg) translate(0, -130%);
+  animation-delay: -0.667s;
+  -webkit-animation-delay: -0.667s;
+}
+div.web-view-spinner div.bar6 {
+  transform: rotate(150deg) translate(0, -130%);
+  -webkit-transform: rotate(150deg) translate(0, -130%);
+  animation-delay: -0.5837s;
+  -webkit-animation-delay: -0.5837s;
+}
+div.web-view-spinner div.bar7 {
+  transform: rotate(180deg) translate(0, -130%);
+  -webkit-transform: rotate(180deg) translate(0, -130%);
+  animation-delay: -0.5s;
+  -webkit-animation-delay: -0.5s;
+}
+div.web-view-spinner div.bar8 {
+  transform: rotate(210deg) translate(0, -130%);
+  -webkit-transform: rotate(210deg) translate(0, -130%);
+  animation-delay: -0.4167s;
+  -webkit-animation-delay: -0.4167s;
+}
+div.web-view-spinner div.bar9 {
+  transform: rotate(240deg) translate(0, -130%);
+  -webkit-transform: rotate(240deg) translate(0, -130%);
+  animation-delay: -0.333s;
+  -webkit-animation-delay: -0.333s;
+}
+div.web-view-spinner div.bar10 {
+  transform: rotate(270deg) translate(0, -130%);
+  -webkit-transform: rotate(270deg) translate(0, -130%);
+  animation-delay: -0.2497s;
+  -webkit-animation-delay: -0.2497s;
+}
+div.web-view-spinner div.bar11 {
+  transform: rotate(300deg) translate(0, -130%);
+  -webkit-transform: rotate(300deg) translate(0, -130%);
+  animation-delay: -0.167s;
+  -webkit-animation-delay: -0.167s;
+}
+div.web-view-spinner div.bar12 {
+  transform: rotate(330deg) translate(0, -130%);
+  -webkit-transform: rotate(330deg) translate(0, -130%);
+  animation-delay: -0.0833s;
+  -webkit-animation-delay: -0.0833s;
+}
diff --git a/apps/app/styles/nprogress.css b/web/styles/nprogress.css
similarity index 100%
rename from apps/app/styles/nprogress.css
rename to web/styles/nprogress.css
diff --git a/apps/app/styles/react-datepicker.css b/web/styles/react-datepicker.css
similarity index 100%
rename from apps/app/styles/react-datepicker.css
rename to web/styles/react-datepicker.css
diff --git a/web/styles/table.css b/web/styles/table.css
new file mode 100644
index 00000000000..ad88fd10ec8
--- /dev/null
+++ b/web/styles/table.css
@@ -0,0 +1,194 @@
+.tableWrapper {
+  overflow-x: auto;
+  padding: 2px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tableWrapper table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+  margin-bottom: 3rem;
+  border: 1px solid rgba(var(--color-border-200));
+  width: 100%;
+}
+
+.tableWrapper table td,
+.tableWrapper table th {
+  min-width: 1em;
+  border: 1px solid rgba(var(--color-border-200));
+  padding: 10px 15px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  transition: background-color 0.3s ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.tableWrapper table td > *,
+.tableWrapper table th > * {
+  margin: 0 !important;
+  padding: 0.25rem 0 !important;
+}
+
+.tableWrapper table td.has-focus,
+.tableWrapper table th.has-focus {
+  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
+}
+
+.tableWrapper table th {
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(var(--color-primary-100));
+}
+
+.tableWrapper table th * {
+  font-weight: 600;
+}
+
+.tableWrapper table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--color-primary-300), 0.1);
+  pointer-events: none;
+}
+
+.tableWrapper table .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  z-index: 99;
+  background-color: rgba(var(--color-primary-400));
+  pointer-events: none;
+}
+
+.tableWrapper .tableControls {
+  position: absolute;
+}
+
+.tableWrapper .tableControls .columnsControl,
+.tableWrapper .tableControls .rowsControl {
+  transition: opacity ease-in 100ms;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableWrapper .tableControls .columnsControl {
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+.tableWrapper .tableControls .columnsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  width: 30px;
+  height: 15px;
+}
+
+.tableWrapper .tableControls .rowsControl {
+  width: 20px;
+  transform: translateX(-50%);
+}
+
+.tableWrapper .tableControls .rowsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  height: 30px;
+  width: 15px;
+}
+
+.tableWrapper .tableControls button {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+
+.tableWrapper .tableControls .tableToolbox,
+.tableWrapper .tableControls .tableColorPickerToolbox {
+  border: 1px solid rgba(var(--color-border-300));
+  background-color: rgba(var(--color-background-100));
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 0.25rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
+  background-color: rgba(var(--color-background-100));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
+  background-color: rgba(var(--color-background-100), 0.5);
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
+  border: 1px solid rgba(var(--color-border-300));
+  border-radius: 3px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.tableToolbox {
+  background-color: rgba(var(--color-background-100));
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
+  font-size: 0.85rem;
+  color: rgba(var(--color-text-300));
+}
+
+.resize-cursor .tableWrapper .tableControls .rowsControl,
+.tableWrapper.controls--disabled .tableControls .rowsControl,
+.resize-cursor .tableWrapper .tableControls .columnsControl,
+.tableWrapper.controls--disabled .tableControls .columnsControl {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 00000000000..05bc93bdcd2
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,5 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  presets: [sharedConfig],
+};
diff --git a/apps/app/tsconfig.json b/web/tsconfig.json
similarity index 100%
rename from apps/app/tsconfig.json
rename to web/tsconfig.json
diff --git a/apps/app/types/ai.d.ts b/web/types/ai.d.ts
similarity index 100%
rename from apps/app/types/ai.d.ts
rename to web/types/ai.d.ts
diff --git a/web/types/analytics.d.ts b/web/types/analytics.d.ts
new file mode 100644
index 00000000000..35da4b723d9
--- /dev/null
+++ b/web/types/analytics.d.ts
@@ -0,0 +1,116 @@
+export interface IAnalyticsResponse {
+  total: number;
+  distribution: IAnalyticsData;
+  extras: {
+    assignee_details: IAnalyticsAssigneeDetails[];
+    cycle_details: IAnalyticsCycleDetails[];
+    label_details: IAnalyticsLabelDetails[];
+    module_details: IAnalyticsModuleDetails[];
+    state_details: IAnalyticsStateDetails[];
+  };
+}
+
+export interface IAnalyticsData {
+  [key: string]: {
+    dimension: string | null;
+    segment?: string;
+    count?: number;
+    estimate?: number | null;
+  }[];
+}
+
+export interface IAnalyticsAssigneeDetails {
+  assignees__avatar: string | null;
+  assignees__display_name: string | null;
+  assignees__first_name: string;
+  assignees__id: string | null;
+  assignees__last_name: string;
+}
+
+export interface IAnalyticsCycleDetails {
+  issue_cycle__cycle__name: string | null;
+  issue_cycle__cycle_id: string | null;
+}
+
+export interface IAnalyticsLabelDetails {
+  labels__color: string | null;
+  labels__id: string | null;
+  labels__name: string | null;
+}
+
+export interface IAnalyticsModuleDetails {
+  issue_module__module__name: string | null;
+  issue_module__module_id: string | null;
+}
+
+export interface IAnalyticsStateDetails {
+  state__color: string;
+  state__name: string;
+  state_id: string;
+}
+
+export type TXAxisValues =
+  | "state_id"
+  | "state__group"
+  | "labels__id"
+  | "assignees__id"
+  | "estimate_point"
+  | "issue_cycle__cycle_id"
+  | "issue_module__module_id"
+  | "priority"
+  | "start_date"
+  | "target_date"
+  | "created_at"
+  | "completed_at";
+
+export type TYAxisValues = "issue_count" | "estimate";
+
+export interface IAnalyticsParams {
+  x_axis: TXAxisValues;
+  y_axis: TYAxisValues;
+  segment?: TXAxisValues | null;
+  project?: string[] | null;
+  cycle?: string | null;
+  module?: string | null;
+}
+
+export interface ISaveAnalyticsFormData {
+  name: string;
+  description: string;
+  query_dict: IExportAnalyticsFormData;
+}
+export interface IExportAnalyticsFormData {
+  x_axis: TXAxisValues;
+  y_axis: TYAxisValues;
+  segment?: TXAxisValues | null;
+  project?: string[];
+}
+
+export interface IDefaultAnalyticsUser {
+  assignees__avatar: string | null;
+  assignees__first_name: string;
+  assignees__last_name: string;
+  assignees__display_name: string;
+  assignees__id: string;
+  count: number;
+}
+
+export interface IDefaultAnalyticsResponse {
+  issue_completed_month_wise: { month: number; count: number }[];
+  most_issue_closed_user: IDefaultAnalyticsUser[];
+  most_issue_created_user: {
+    created_by__avatar: string | null;
+    created_by__first_name: string;
+    created_by__last_name: string;
+    created_by__display_name: string;
+    created_by__id: string;
+    count: number;
+  }[];
+  open_estimate_sum: number;
+  open_issues: number;
+  open_issues_classified: { state_group: string; state_count: number }[];
+  pending_issue_user: IDefaultAnalyticsUser[];
+  total_estimate_sum: number;
+  total_issues: number;
+  total_issues_classified: { state_group: string; state_count: number }[];
+}
diff --git a/web/types/app.d.ts b/web/types/app.d.ts
new file mode 100644
index 00000000000..2b03f6975b9
--- /dev/null
+++ b/web/types/app.d.ts
@@ -0,0 +1,3 @@
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
diff --git a/apps/app/types/calendar.ts b/web/types/calendar.ts
similarity index 100%
rename from apps/app/types/calendar.ts
rename to web/types/calendar.ts
diff --git a/apps/app/types/cycles.d.ts b/web/types/cycles.d.ts
similarity index 88%
rename from apps/app/types/cycles.d.ts
rename to web/types/cycles.d.ts
index 955e822224d..e97aa21339c 100644
--- a/apps/app/types/cycles.d.ts
+++ b/web/types/cycles.d.ts
@@ -9,6 +9,10 @@ import type {
   IUserLite,
 } from "types";
 
+export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";
+
+export type TCycleLayout = "list" | "board" | "gantt";
+
 export interface ICycle {
   backlog_issues: number;
   cancelled_issues: number;
@@ -82,9 +86,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 SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | null;
 
diff --git a/apps/app/types/estimate.d.ts b/web/types/estimate.d.ts
similarity index 100%
rename from apps/app/types/estimate.d.ts
rename to web/types/estimate.d.ts
diff --git a/apps/app/types/importer/github-importer.d.ts b/web/types/importer/github-importer.d.ts
similarity index 100%
rename from apps/app/types/importer/github-importer.d.ts
rename to web/types/importer/github-importer.d.ts
diff --git a/apps/app/types/importer/index.ts b/web/types/importer/index.ts
similarity index 100%
rename from apps/app/types/importer/index.ts
rename to web/types/importer/index.ts
diff --git a/apps/app/types/importer/jira-importer.d.ts b/web/types/importer/jira-importer.d.ts
similarity index 100%
rename from apps/app/types/importer/jira-importer.d.ts
rename to web/types/importer/jira-importer.d.ts
diff --git a/web/types/inbox.d.ts b/web/types/inbox.d.ts
new file mode 100644
index 00000000000..10fc37b31f1
--- /dev/null
+++ b/web/types/inbox.d.ts
@@ -0,0 +1,61 @@
+import { IIssue } from "./issues";
+import type { IProjectLite } from "./projects";
+
+export interface IInboxIssue extends IIssue {
+  issue_inbox: {
+    duplicate_to: string | null;
+    id: string;
+    snoozed_till: Date | null;
+    source: string;
+    status: -2 | -1 | 0 | 1 | 2;
+  }[];
+}
+
+export interface IInbox {
+  id: string;
+  project_detail: IProjectLite;
+  pending_issue_count: number;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  is_default: boolean;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  view_props: { filters: IInboxFilterOptions };
+  workspace: string;
+}
+
+interface StatePending {
+  readonly status: -2;
+}
+interface StatusReject {
+  status: -1;
+}
+
+interface StatusSnoozed {
+  status: 0;
+  snoozed_till: Date;
+}
+
+interface StatusAccepted {
+  status: 1;
+}
+
+interface StatusDuplicate {
+  status: 2;
+  duplicate_to: string;
+}
+
+export type TInboxStatus = StatusReject | StatusSnoozed | StatusAccepted | StatusDuplicate | StatePending;
+
+export interface IInboxFilterOptions {
+  priority?: string[] | null;
+  inbox_status?: number[] | null;
+}
+
+export interface IInboxQueryParams {
+  priority: string | null;
+  inbox_status: string | null;
+}
diff --git a/apps/app/types/index.d.ts b/web/types/index.d.ts
similarity index 93%
rename from apps/app/types/index.d.ts
rename to web/types/index.d.ts
index 8c95929178d..b350901066f 100644
--- a/apps/app/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -18,7 +18,8 @@ export * from "./calendar";
 export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";
-
+export * from "./view-props";
+export * from "./workspace-views";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/apps/app/types/integration.d.ts b/web/types/integration.d.ts
similarity index 100%
rename from apps/app/types/integration.d.ts
rename to web/types/integration.d.ts
diff --git a/apps/app/types/issues.d.ts b/web/types/issues.d.ts
similarity index 75%
rename from apps/app/types/issues.d.ts
rename to web/types/issues.d.ts
index 93e1598f31c..553a12ced83 100644
--- a/apps/app/types/issues.d.ts
+++ b/web/types/issues.d.ts
@@ -2,15 +2,14 @@ import { KeyedMutator } from "swr";
 import type {
   IState,
   IUser,
-  IProject,
   ICycle,
   IModule,
   IUserLite,
   IProjectLite,
   IWorkspaceLite,
   IStateLite,
-  TStateGroups,
   Properties,
+  IIssueDisplayFilterOptions,
 } from "types";
 
 export interface IIssueCycle {
@@ -66,17 +65,25 @@ export interface linkDetails {
   url: string;
 }
 
+export type IssueRelationType = "duplicate" | "relates_to" | "blocked_by";
+
+export interface IssueRelation {
+  id: string;
+  issue: string;
+  issue_detail: BlockeIssueDetail;
+  relation_type: IssueRelationType;
+  related_issue: string;
+  relation: "blocking" | null;
+}
+
 export interface IIssue {
   archived_at: string;
   assignees: string[];
   assignee_details: IUser[];
-  assignees_list: string[];
   attachment_count: number;
   attachments: any[];
-  blocked_issues: { blocked_issue_detail?: BlockeIssueDetail }[];
-  blocker_issues: { blocker_issue_detail?: BlockeIssueDetail }[];
-  blockers_list: string[];
-  blocks_list: string[];
+  issue_relations: IssueRelation[];
+  related_issues: IssueRelation[];
   bridge_id?: string | null;
   completed_at: Date;
   created_at: string;
@@ -89,12 +96,14 @@ export interface IIssue {
   description_stripped: any;
   estimate_point: number | null;
   id: string;
+  // tempId is used for optimistic updates. It is not a part of the API response.
+  tempId?: string;
   issue_cycle: IIssueCycle | null;
   issue_link: linkDetails[];
   issue_module: IIssueModule | null;
   labels: string[];
   label_details: any[];
-  labels_list: string[];
+  is_draft: boolean;
   links_list: IIssueLink[];
   link_count: number;
   module: string | null;
@@ -102,7 +111,7 @@ export interface IIssue {
   name: string;
   parent: string | null;
   parent_detail: IIssueParent | null;
-  priority: string | null;
+  priority: TIssuePriorities;
   project: string;
   project_detail: IProjectLite;
   sequence_id: number;
@@ -213,55 +222,6 @@ export interface IIssueLite {
   workspace__slug: string;
 }
 
-export interface IIssueFilterOptions {
-  type: "active" | "backlog" | null;
-  assignees: string[] | null;
-  start_date: string[] | null;
-  target_date: string[] | null;
-  state: string[] | null;
-  state_group: TStateGroups[] | null;
-  subscriber: string[] | null;
-  labels: string[] | null;
-  priority: string[] | null;
-  created_by: string[] | null;
-}
-
-export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
-
-export type TIssueGroupByOptions =
-  | "state"
-  | "priority"
-  | "labels"
-  | "created_by"
-  | "state_detail.group"
-  | "project"
-  | "assignees"
-  | null;
-
-export type TIssueOrderByOptions =
-  | "-created_at"
-  | "-updated_at"
-  | "priority"
-  | "sort_order"
-  | "state__name"
-  | "-state__name"
-  | "assignees__name"
-  | "-assignees__name"
-  | "labels__name"
-  | "-labels__name"
-  | "target_date"
-  | "-target_date"
-  | "estimate__point"
-  | "-estimate__point"
-  | "start_date"
-  | "-start_date";
-
-export interface IIssueViewOptions {
-  group_by: TIssueGroupByOptions;
-  order_by: TIssueOrderByOptions;
-  filters: IIssueFilterOptions;
-}
-
 export interface IIssueAttachment {
   asset: string;
   attributes: {
@@ -280,17 +240,16 @@ export interface IIssueAttachment {
 
 export interface IIssueViewProps {
   groupedIssues: { [key: string]: IIssue[] } | undefined;
-  groupByProperty: TIssueGroupByOptions;
+  displayFilters: IIssueDisplayFilterOptions | undefined;
   isEmpty: boolean;
-  issueView: TIssueViewOptions;
   mutateIssues: KeyedMutator<
     | IIssue[]
     | {
         [key: string]: IIssue[];
       }
   >;
-  orderBy: TIssueOrderByOptions;
   params: any;
   properties: Properties;
-  showEmptyGroups: boolean;
 }
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
diff --git a/apps/app/types/modules.d.ts b/web/types/modules.d.ts
similarity index 86%
rename from apps/app/types/modules.d.ts
rename to web/types/modules.d.ts
index 709d1d300d2..6ec86c4f5f1 100644
--- a/apps/app/types/modules.d.ts
+++ b/web/types/modules.d.ts
@@ -10,13 +10,7 @@ import type {
   linkDetails,
 } from "types";
 
-export type TModuleStatus =
-  | "backlog"
-  | "planned"
-  | "in-progress"
-  | "paused"
-  | "completed"
-  | "cancelled";
+export type TModuleStatus = "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";
 
 export interface IModule {
   backlog_issues: number;
@@ -38,7 +32,6 @@ export interface IModule {
   link_module: linkDetails[];
   links_list: ModuleLink[];
   members: string[];
-  members_list: string[];
   members_detail: IUserLite[];
   is_favorite: boolean;
   name: string;
@@ -80,8 +73,6 @@ export type ModuleLink = {
   url: string;
 };
 
-export type SelectModuleType =
-  | (IModule & { actionType: "edit" | "delete" | "create-issue" })
-  | undefined;
+export type SelectModuleType = (IModule & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
 
 export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | undefined;
diff --git a/apps/app/types/notifications.d.ts b/web/types/notifications.d.ts
similarity index 100%
rename from apps/app/types/notifications.d.ts
rename to web/types/notifications.d.ts
diff --git a/apps/app/types/pages.d.ts b/web/types/pages.d.ts
similarity index 97%
rename from apps/app/types/pages.d.ts
rename to web/types/pages.d.ts
index 6be966f7ca1..f7850d11d29 100644
--- a/apps/app/types/pages.d.ts
+++ b/web/types/pages.d.ts
@@ -14,7 +14,6 @@ export interface IPage {
   is_favorite: boolean;
   label_details: IIssueLabels[];
   labels: string[];
-  labels_list: string[];
   name: string;
   owned_by: string;
   project: string;
diff --git a/apps/app/types/projects.d.ts b/web/types/projects.d.ts
similarity index 77%
rename from apps/app/types/projects.d.ts
rename to web/types/projects.d.ts
index 78ef4d953d8..129b0bb3b82 100644
--- a/apps/app/types/projects.d.ts
+++ b/web/types/projects.d.ts
@@ -1,14 +1,6 @@
-import type {
-  IIssueFilterOptions,
-  IUserLite,
-  IWorkspace,
-  IWorkspaceLite,
-  IUserMemberLite,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
-  TStateGroups,
-} from "./";
+import type { IUserLite, IWorkspace, IWorkspaceLite, IUserMemberLite, TStateGroups, IProjectViewProps } from ".";
+
+export type TUserProjectRole = 5 | 10 | 15 | 20;
 
 export interface IProject {
   archive_in: number;
@@ -42,7 +34,8 @@ export interface IProject {
   is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
-  member_role: 5 | 10 | 15 | 20 | null;
+  member_role: TUserProjectRole | null;
+  members: IProjectMemberLite[];
   issue_views_view: boolean;
   module_view: boolean;
   name: string;
@@ -50,7 +43,6 @@ export interface IProject {
   page_view: boolean;
   project_lead: IUserLite | string | null;
   sort_order: number | null;
-  slug: string;
   total_cycles: number;
   total_members: number;
   total_modules: number;
@@ -66,32 +58,31 @@ export interface IProjectLite {
   identifier: string;
 }
 
-type ProjectViewTheme = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
-
 type ProjectPreferences = {
   pages: {
     block_display: boolean;
   };
 };
 
+export interface IProjectMemberLite {
+  id: string;
+  member__avatar: string;
+  member__display_name: string;
+  member_id: string;
+}
+
 export interface IProjectMember {
   id: string;
   member: IUserMemberLite;
   project: IProjectLite;
   workspace: IWorkspaceLite;
   comment: string;
-  role: 5 | 10 | 15 | 20;
+  role: TUserProjectRole;
 
   preferences: ProjectPreferences;
 
-  view_props: ProjectViewTheme;
-  default_props: ProjectViewTheme;
+  view_props: IProjectViewProps;
+  default_props: IProjectViewProps;
 
   created_at: Date;
   updated_at: Date;
@@ -110,7 +101,7 @@ export interface IProjectMemberInvitation {
   token: string;
   message: string;
   responded_at: Date;
-  role: 5 | 10 | 15 | 20;
+  role: TUserProjectRole;
 
   created_at: Date;
   updated_at: Date;
@@ -118,8 +109,8 @@ export interface IProjectMemberInvitation {
   updated_by: string;
 }
 
-export interface IProjectBulkInviteFormData {
-  members: { role: 5 | 10 | 15 | 20; member_id: string }[];
+export interface IProjectBulkAddFormData {
+  members: { role: TUserProjectRole; member_id: string }[];
 }
 
 export interface IGithubRepository {
@@ -137,7 +128,7 @@ export interface GithubRepositoriesResponse {
 export type TProjectIssuesSearchParams = {
   search: string;
   parent?: boolean;
-  blocker_blocked_by?: boolean;
+  issue_relation?: boolean;
   cycle?: boolean;
   module?: boolean;
   sub_issue?: boolean;
diff --git a/apps/app/types/reaction.d.ts b/web/types/reaction.d.ts
similarity index 100%
rename from apps/app/types/reaction.d.ts
rename to web/types/reaction.d.ts
diff --git a/apps/app/types/state.d.ts b/web/types/state.d.ts
similarity index 100%
rename from apps/app/types/state.d.ts
rename to web/types/state.d.ts
diff --git a/web/types/users.d.ts b/web/types/users.d.ts
new file mode 100644
index 00000000000..2c93ff764c0
--- /dev/null
+++ b/web/types/users.d.ts
@@ -0,0 +1,186 @@
+import { IIssueActivity, IIssueLite, TStateGroups } from ".";
+
+export interface IUser {
+  id: string;
+  avatar: string;
+  cover_image: string | null;
+  date_joined: string;
+  display_name: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  is_active: boolean;
+  is_bot: boolean;
+  is_email_verified: boolean;
+  is_managed: boolean;
+  is_onboarded: boolean;
+  is_tour_completed: boolean;
+  mobile_number: string | null;
+  role: string | null;
+  onboarding_step: {
+    workspace_join?: boolean;
+    profile_complete?: boolean;
+    workspace_create?: boolean;
+    workspace_invite?: boolean;
+  };
+  last_workspace_id: string;
+  user_timezone: string;
+  username: string;
+  theme: IUserTheme;
+}
+
+export interface IUserSettings {
+  id: string;
+  email: string;
+  workspace: {
+    last_workspace_id: string;
+    last_workspace_slug: string;
+    fallback_workspace_id: string;
+    fallback_workspace_slug: string;
+    invites: number;
+  };
+}
+
+export interface IUserTheme {
+  background: string;
+  text: string;
+  primary: string;
+  sidebarBackground: string;
+  sidebarText: string;
+  darkPalette: boolean;
+  palette: string;
+  theme: string;
+}
+
+export interface IUserLite {
+  avatar: string;
+  created_at: Date;
+  display_name: string;
+  email?: string;
+  first_name: string;
+  readonly id: string;
+  is_bot: boolean;
+  last_name: string;
+}
+
+export interface IUserMemberLite extends IUserLite {
+  email?: string;
+}
+
+export interface IUserActivity {
+  created_date: string;
+  activity_count: number;
+}
+
+export interface IUserPriorityDistribution {
+  priority: string;
+  priority_count: number;
+}
+
+export interface IUserStateDistribution {
+  state_group: TStateGroups;
+  state_count: number;
+}
+
+export interface IUserWorkspaceDashboard {
+  assigned_issues_count: number;
+  completed_issues_count: number;
+  issue_activities: IUserActivity[];
+  issues_due_week_count: number;
+  overdue_issues: IIssueLite[];
+  completed_issues: {
+    week_in_month: number;
+    completed_count: number;
+  }[];
+  pending_issues_count: number;
+  state_distribution: IUserStateDistribution[];
+  upcoming_issues: IIssueLite[];
+}
+
+export interface IUserActivityResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: IIssueActivity[];
+  total_pages: number;
+}
+
+export type UserAuth = {
+  isMember: boolean;
+  isOwner: boolean;
+  isViewer: boolean;
+  isGuest: boolean;
+};
+
+export type TOnboardingSteps = {
+  profile_complete: boolean;
+  workspace_create: boolean;
+  workspace_invite: boolean;
+  workspace_join: boolean;
+};
+
+export interface IUserProfileData {
+  assigned_issues: number;
+  completed_issues: number;
+  created_issues: number;
+  pending_issues: number;
+  priority_distribution: IUserPriorityDistribution[];
+  state_distribution: IUserStateDistribution[];
+  subscribed_issues: number;
+}
+
+export interface IUserProfileProjectSegregation {
+  project_data: {
+    assigned_issues: number;
+    completed_issues: number;
+    created_issues: number;
+    emoji: string | null;
+    icon_prop: null;
+    id: string;
+    identifier: string;
+    name: string;
+    pending_issues: number;
+  }[];
+  user_data: {
+    avatar: string;
+    cover_image: string | null;
+    date_joined: Date;
+    display_name: string;
+    first_name: string;
+    last_name: string;
+    user_timezone: string;
+  };
+}
+
+// export interface ICurrentUser {
+//   id: readonly string;
+//   avatar: string;
+//   first_name: string;
+//   last_name: string;
+//   username: string;
+//   email: string;
+//   mobile_number: string;
+//   is_email_verified: boolean;
+//   is_tour_completed: boolean;
+//   onboarding_step: TOnboardingSteps;
+//   is_onboarded: boolean;
+//   role: string;
+// }
+
+// export interface ICustomTheme {
+//   background: string;
+//   text: string;
+//   primary: string;
+//   sidebarBackground: string;
+//   sidebarText: string;
+//   darkPalette: boolean;
+//   palette: string;
+//   theme: string;
+// }
+
+// export interface ICurrentUserSettings {
+//   theme: ICustomTheme;
+// }
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
new file mode 100644
index 00000000000..c8c47576b9a
--- /dev/null
+++ b/web/types/view-props.d.ts
@@ -0,0 +1,160 @@
+export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+
+export type TIssueGroupByOptions =
+  | "state"
+  | "priority"
+  | "labels"
+  | "created_by"
+  | "state_detail.group"
+  | "project"
+  | "assignees"
+  | "mentions"
+  | null;
+
+export type TIssueOrderByOptions =
+  | "-created_at"
+  | "created_at"
+  | "updated_at"
+  | "-updated_at"
+  | "priority"
+  | "-priority"
+  | "sort_order"
+  | "state__name"
+  | "-state__name"
+  | "assignees__first_name"
+  | "-assignees__first_name"
+  | "labels__name"
+  | "-labels__name"
+  | "target_date"
+  | "-target_date"
+  | "estimate_point"
+  | "-estimate_point"
+  | "start_date"
+  | "-start_date"
+  | "link_count"
+  | "-link_count"
+  | "attachment_count"
+  | "-attachment_count"
+  | "sub_issues_count"
+  | "-sub_issues_count";
+
+export type TIssueTypeFilters = "active" | "backlog" | null;
+
+export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
+
+export type TIssueParams =
+  | "priority"
+  | "state_group"
+  | "state"
+  | "assignees"
+  | "mentions"
+  | "created_by"
+  | "subscriber"
+  | "labels"
+  | "start_date"
+  | "target_date"
+  | "project"
+  | "group_by"
+  | "sub_group_by"
+  | "order_by"
+  | "type"
+  | "sub_issue"
+  | "show_empty_groups"
+  | "start_target_date";
+
+export type TCalendarLayouts = "month" | "week";
+
+export interface IIssueFilterOptions {
+  assignees?: string[] | null;
+  mentions?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  project?: string[] | null;
+  start_date?: string[] | null;
+  state?: string[] | null;
+  state_group?: string[] | null;
+  subscriber?: string[] | null;
+  target_date?: string[] | null;
+}
+
+export interface IIssueDisplayFilterOptions {
+  calendar?: {
+    show_weekends?: boolean;
+    layout?: TCalendarLayouts;
+  };
+  group_by?: TIssueGroupByOptions;
+  sub_group_by?: TIssueGroupByOptions;
+  layout?: TIssueLayouts;
+  order_by?: TIssueOrderByOptions;
+  show_empty_groups?: boolean;
+  start_target_date?: boolean;
+  sub_issue?: boolean;
+  type?: TIssueTypeFilters;
+}
+export interface IIssueDisplayProperties {
+  assignee?: boolean;
+  start_date?: boolean;
+  due_date?: boolean;
+  labels?: boolean;
+  key?: boolean;
+  priority?: boolean;
+  state?: boolean;
+  sub_issue_count?: boolean;
+  link?: boolean;
+  attachment_count?: boolean;
+  estimate?: boolean;
+  created_on?: boolean;
+  updated_on?: boolean;
+}
+
+export interface IWorkspaceIssueFilterOptions {
+  assignees?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  state_group?: string[] | null;
+  subscriber?: string[] | null;
+  start_date?: string[] | null;
+  target_date?: string[] | null;
+  project?: string[] | null;
+}
+
+export interface IWorkspaceGlobalViewDisplayFilterOptions {
+  order_by?: string | undefined;
+  type?: "active" | "backlog" | null;
+  sub_issue?: boolean;
+  layout?: TIssueViewOptions;
+}
+
+export interface IWorkspaceViewIssuesParams {
+  assignees?: string | undefined;
+  created_by?: string | undefined;
+  labels?: string | undefined;
+  priority?: string | undefined;
+  start_date?: string | undefined;
+  state?: string | undefined;
+  state_group?: string | undefined;
+  subscriber?: string | undefined;
+  target_date?: string | undefined;
+  project?: string | undefined;
+  order_by?: string | undefined;
+  type?: "active" | "backlog" | undefined;
+  sub_issue?: boolean;
+}
+
+export interface IProjectViewProps {
+  display_filters: IIssueDisplayFilterOptions | undefined;
+  filters: IIssueFilterOptions;
+}
+
+export interface IWorkspaceViewProps {
+  filters: IIssueFilterOptions;
+  display_filters: IIssueDisplayFilterOptions | undefined;
+  display_properties: IIssueDisplayProperties;
+}
+export interface IWorkspaceGlobalViewProps {
+  filters: IWorkspaceIssueFilterOptions;
+  display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
+  display_properties: IIssueDisplayProperties;
+}
diff --git a/web/types/views.d.ts b/web/types/views.d.ts
new file mode 100644
index 00000000000..4f55e8c7459
--- /dev/null
+++ b/web/types/views.d.ts
@@ -0,0 +1,17 @@
+import { IIssueFilterOptions } from "./view-props";
+
+export interface IProjectView {
+  id: string;
+  access: string;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  query: IIssueFilterOptions;
+  query_data: IIssueFilterOptions;
+  project: string;
+  workspace: string;
+}
diff --git a/apps/app/types/waitlist.d.ts b/web/types/waitlist.d.ts
similarity index 100%
rename from apps/app/types/waitlist.d.ts
rename to web/types/waitlist.d.ts
diff --git a/web/types/workspace-views.d.ts b/web/types/workspace-views.d.ts
new file mode 100644
index 00000000000..754e637118e
--- /dev/null
+++ b/web/types/workspace-views.d.ts
@@ -0,0 +1,24 @@
+import { IWorkspaceViewProps } from "./view-props";
+
+export interface IWorkspaceView {
+  id: string;
+  access: string;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  query: any;
+  query_data: IWorkspaceViewProps;
+  project: string;
+  workspace: string;
+  workspace_detail?: {
+    id: string;
+    name: string;
+    slug: string;
+  };
+}
+
+export type TStaticViewTypes = "all-issues" | "assigned" | "created" | "subscribed";
diff --git a/apps/app/types/workspace.d.ts b/web/types/workspace.d.ts
similarity index 84%
rename from apps/app/types/workspace.d.ts
rename to web/types/workspace.d.ts
index 635aea2db65..1b9b924f4a9 100644
--- a/apps/app/types/workspace.d.ts
+++ b/web/types/workspace.d.ts
@@ -1,12 +1,6 @@
-import type {
-  IIssueFilterOptions,
-  IProjectMember,
-  IUser,
-  IUserMemberLite,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
-} from "types";
+import type { IProjectMember, IUser, IUserLite, IUserMemberLite, IWorkspaceViewProps } from "types";
+
+export type TUserWorkspaceRole = 5 | 10 | 15 | 20;
 
 export interface IWorkspace {
   readonly id: string;
@@ -38,13 +32,13 @@ export interface IWorkspaceMemberInvitation {
   token: string;
   message: string;
   responded_at: Date;
-  role: 5 | 10 | 15 | 20;
+  role: TUserWorkspaceRole;
   created_by_detail: IUser;
   workspace: IWorkspace;
 }
 
 export interface IWorkspaceBulkInviteFormData {
-  emails: { email: string; role: 5 | 10 | 15 | 20 }[];
+  emails: { email: string; role: TUserWorkspaceRole }[];
 }
 
 export type Properties = {
@@ -63,26 +57,30 @@ export type Properties = {
   updated_on: boolean;
 };
 
-export interface IWorkspaceViewProps {
-  properties: Properties;
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  filters: Partial<IIssueFilterOptions>;
-  showEmptyGroups: boolean;
-}
-
 export interface IWorkspaceMember {
-  readonly id: string;
-  workspace: IWorkspace;
-  member: IUserMemberLite;
-  role: 5 | 10 | 15 | 20;
   company_role: string | null;
-  view_props: IWorkspaceViewProps;
   created_at: Date;
+  created_by: string;
+  id: string;
+  member: IUserLite;
+  role: TUserWorkspaceRole;
   updated_at: Date;
+  updated_by: string;
+  workspace: IWorkspaceLite;
+}
+
+export interface IWorkspaceMemberMe {
+  company_role: string | null;
+  created_at: Date;
   created_by: string;
+  default_props: IWorkspaceViewProps;
+  id: string;
+  member: string;
+  role: TUserWorkspaceRole;
+  updated_at: Date;
   updated_by: string;
+  view_props: IWorkspaceViewProps;
+  workspace: string;
 }
 
 export interface ILastActiveWorkspaceDetails {
diff --git a/yarn.lock b/yarn.lock
index ac134d60f39..f25d1cf7d56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -36,46 +36,46 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.10", "@babel/code-frame@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.10.tgz#1c20e612b768fefa75f6e90d6ecb86329247f0a3"
-  integrity sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
   dependencies:
-    "@babel/highlight" "^7.22.10"
+    "@babel/highlight" "^7.22.13"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
-  integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc"
+  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==
 
 "@babel/core@^7.11.1":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.10.tgz#aad442c7bcd1582252cb4576747ace35bc122f35"
-  integrity sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.22.10"
-    "@babel/generator" "^7.22.10"
-    "@babel/helper-compilation-targets" "^7.22.10"
-    "@babel/helper-module-transforms" "^7.22.9"
-    "@babel/helpers" "^7.22.10"
-    "@babel/parser" "^7.22.10"
-    "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
-    convert-source-map "^1.7.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
+    json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.10.tgz#c92254361f398e160645ac58831069707382b722"
-  integrity sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
   dependencies:
-    "@babel/types" "^7.22.10"
+    "@babel/types" "^7.23.0"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
@@ -88,32 +88,32 @@
     "@babel/types" "^7.22.5"
 
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.10.tgz#573e735937e99ea75ea30788b57eb52fab7468c9"
-  integrity sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
+  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
   dependencies:
-    "@babel/types" "^7.22.10"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-compilation-targets@^7.22.10", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz#01d648bbc25dd88f513d862ee0df27b7d4e67024"
-  integrity sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==
+"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
+  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
   dependencies:
     "@babel/compat-data" "^7.22.9"
-    "@babel/helper-validator-option" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
     browserslist "^4.21.9"
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.10.tgz#dd2612d59eac45588021ac3d6fa976d08f4e95a3"
-  integrity sha512-5IBb77txKYQPpOEdUdIhBx8VrZyDCQ+H82H0+5dX1TmuscP5vJKEE3cKurjtIw/vFwzbVH48VweE78kVDBrqjA==
+"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
+  integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-environment-visitor" "^7.22.5"
     "@babel/helper-function-name" "^7.22.5"
-    "@babel/helper-member-expression-to-functions" "^7.22.5"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
     "@babel/helper-optimise-call-expression" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.9"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
@@ -121,18 +121,18 @@
     semver "^6.3.1"
 
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.9.tgz#9d8e61a8d9366fe66198f57c40565663de0825f6"
-  integrity sha512-+svjVa/tFwsNSG4NEy1h85+HQ5imbT92Q5/bgtS7P0GTQlP8WuFdqsiABmQouhiFGyV66oGxZFpeYHza1rNsKw==
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
+  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7"
-  integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==
+"@babel/helper-define-polyfill-provider@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba"
+  integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==
   dependencies:
     "@babel/helper-compilation-targets" "^7.22.6"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -140,18 +140,18 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-environment-visitor@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
-  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-function-name@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
-  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
@@ -160,30 +160,30 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-member-expression-to-functions@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz#0a7c56117cad3372fbf8d2fb4bf8f8d64a1e76b2"
-  integrity sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==
+"@babel/helper-member-expression-to-functions@^7.22.15":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
   dependencies:
-    "@babel/types" "^7.22.5"
+    "@babel/types" "^7.23.0"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
-  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
   dependencies:
-    "@babel/types" "^7.22.5"
+    "@babel/types" "^7.22.15"
 
-"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz#92dfcb1fbbb2bc62529024f72d942a8c97142129"
-  integrity sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==
+"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e"
+  integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
     "@babel/helper-simple-access" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
@@ -197,22 +197,22 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
   integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
 
-"@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.9.tgz#53a25b7484e722d7efb9c350c75c032d4628de82"
-  integrity sha512-8WWC4oR4Px+tr+Fp0X3RHDVfINGpF3ad1HIbrc8A77epiR6eMMc6jsgozkzT2uDiOOdoS9cLIQ+XD2XvI2WSmQ==
+"@babel/helper-remap-async-to-generator@^7.22.20", "@babel/helper-remap-async-to-generator@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
+  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-wrap-function" "^7.22.9"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-wrap-function" "^7.22.20"
 
 "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
-  version "7.22.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz#cbdc27d6d8d18cd22c81ae4293765a5d9afd0779"
-  integrity sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-member-expression-to-functions" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
     "@babel/helper-optimise-call-expression" "^7.22.5"
 
 "@babel/helper-simple-access@^7.22.5":
@@ -241,63 +241,63 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
-"@babel/helper-validator-identifier@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
-  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/helper-validator-option@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
-  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+"@babel/helper-validator-option@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
+  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
 
-"@babel/helper-wrap-function@^7.22.9":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.10.tgz#d845e043880ed0b8c18bd194a12005cb16d2f614"
-  integrity sha512-OnMhjWjuGYtdoO3FmsEFWvBStBAe2QOgwOLsLNDjN+aaiMD8InJk1/O3HSD8lkqTjCgg5YI34Tz15KNNA3p+nQ==
+"@babel/helper-wrap-function@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
+  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
   dependencies:
     "@babel/helper-function-name" "^7.22.5"
-    "@babel/template" "^7.22.5"
-    "@babel/types" "^7.22.10"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.10.tgz#ae6005c539dfbcb5cd71fb51bfc8a52ba63bc37a"
-  integrity sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
   dependencies:
-    "@babel/template" "^7.22.5"
-    "@babel/traverse" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.10.tgz#02a3f6d8c1cb4521b2fd0ab0da8f4739936137d7"
-  integrity sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.22.10", "@babel/parser@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.10.tgz#e37634f9a12a1716136c44624ef54283cabd3f55"
-  integrity sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
-  version "7.22.5"
-  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.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
-  integrity sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15":
+  version "7.22.15"
+  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.22.15.tgz#02dc8a03f613ed5fdc29fb2f728397c78146c962"
+  integrity sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz#fef09f9499b1f1c930da8a0c419db42167d792ca"
-  integrity sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.15.tgz#2aeb91d337d4e1a1e7ce85b76a37f5301781200f"
+  integrity sha512-Hyph9LseGvAeeXzikV88bczhsrLrIZqDPxO+sSmAunMPaGrBGhfMWzCPYTtiW9t+HzSE2wtV8e5cc5P6r1xMDQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/plugin-transform-optional-chaining" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.22.15"
 
 "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
   version "7.21.0-placeholder-for-preset-env.2"
@@ -438,14 +438,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.10.tgz#45946cd17f915b10e65c29b8ed18a0a50fc648c8"
-  integrity sha512-eueE8lvKVzq5wIObKK/7dvoeKJ+xc6TvRn6aysIjS6pSCeLy7S/eVi7pEQknZqyqvzaNKdDtem8nUNTBgDVR2g==
+"@babel/plugin-transform-async-generator-functions@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.2.tgz#054afe290d64c6f576f371ccc321772c8ea87ebb"
+  integrity sha512-BBYVGxbDVHfoeXbOwcagAkOQAm9NxoTdMGfTqghu1GrvadSaw6iW3Je6IcL5PNOw8VwjxqBECXy50/iCQSY/lQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-remap-async-to-generator" "^7.22.9"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
 "@babel/plugin-transform-async-to-generator@^7.22.5":
@@ -464,10 +464,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-block-scoping@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.10.tgz#88a1dccc3383899eb5e660534a76a22ecee64faa"
-  integrity sha512-1+kVpGAOOI1Albt6Vse7c8pHzcZQdQKW+wJH+g8mCaszOdDVwRXa/slHPqIw+oJAJANTKDMuM2cBdV0Dg618Vg==
+"@babel/plugin-transform-block-scoping@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.0.tgz#8744d02c6c264d82e1a4bc5d2d501fd8aff6f022"
+  integrity sha512-cOsrbmIOXmf+5YbL99/S49Y3j46k/T16b9ml8bm9lP6N9US5iQ2yBK7gpui1pg0V/WMcXdkfKbTb7HXq9u+v4g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -479,27 +479,27 @@
     "@babel/helper-create-class-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-class-static-block@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz#3e40c46f048403472d6f4183116d5e46b1bff5ba"
-  integrity sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==
+"@babel/plugin-transform-class-static-block@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974"
+  integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-transform-classes@^7.22.6":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz#e04d7d804ed5b8501311293d1a0e6d43e94c3363"
-  integrity sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ==
+"@babel/plugin-transform-classes@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.15.tgz#aaf4753aee262a232bbc95451b4bdf9599c65a0b"
+  integrity sha512-VbbC3PGjBdE0wAWDdHM9G8Gm977pnYI0XpqMd6LrKISj8/DJXEsWqgRuTYaNE9Bv0JGhTZUzHDlMk18IpOuoqw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-compilation-targets" "^7.22.15"
     "@babel/helper-environment-visitor" "^7.22.5"
     "@babel/helper-function-name" "^7.22.5"
     "@babel/helper-optimise-call-expression" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.9"
     "@babel/helper-split-export-declaration" "^7.22.6"
     globals "^11.1.0"
 
@@ -511,10 +511,10 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/template" "^7.22.5"
 
-"@babel/plugin-transform-destructuring@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.10.tgz#38e2273814a58c810b6c34ea293be4973c4eb5e2"
-  integrity sha512-dPJrL0VOyxqLM9sritNbMSGx/teueHF/htMKrPT7DNxccXxRDPYqlgPFFdr8u+F+qUZOkZoXue/6rL5O5GduEw==
+"@babel/plugin-transform-destructuring@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c"
+  integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -533,10 +533,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dynamic-import@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz#d6908a8916a810468c4edff73b5b75bda6ad393e"
-  integrity sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==
+"@babel/plugin-transform-dynamic-import@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa"
+  integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
@@ -549,18 +549,18 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-export-namespace-from@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz#57c41cb1d0613d22f548fddd8b288eedb9973a5b"
-  integrity sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==
+"@babel/plugin-transform-export-namespace-from@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c"
+  integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz#ab1b8a200a8f990137aff9a084f8de4099ab173f"
-  integrity sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==
+"@babel/plugin-transform-for-of@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.15.tgz#f64b4ccc3a4f131a996388fae7680b472b306b29"
+  integrity sha512-me6VGeHsx30+xh9fbDLLPi0J1HzmeIIyenoOQHuw2D4m2SAU3NrspX5XxJLBpqn5yrLzrlw2Iy3RA//Bx27iOA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -573,10 +573,10 @@
     "@babel/helper-function-name" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-json-strings@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz#14b64352fdf7e1f737eed68de1a1468bd2a77ec0"
-  integrity sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==
+"@babel/plugin-transform-json-strings@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835"
+  integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
@@ -588,10 +588,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-logical-assignment-operators@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz#66ae5f068fd5a9a5dc570df16f56c2a8462a9d6c"
-  integrity sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==
+"@babel/plugin-transform-logical-assignment-operators@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c"
+  integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
@@ -603,32 +603,32 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-amd@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526"
-  integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==
+"@babel/plugin-transform-modules-amd@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.0.tgz#05b2bc43373faa6d30ca89214731f76f966f3b88"
+  integrity sha512-xWT5gefv2HGSm4QHtgc1sYPbseOyf+FFDo2JbpE25GWl5BqTGO9IMwTYJRoIdjsF85GE+VegHxSCUt5EvoYTAw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-commonjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz#7d9875908d19b8c0536085af7b053fd5bd651bfa"
-  integrity sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==
+"@babel/plugin-transform-modules-commonjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz#b3dba4757133b2762c00f4f94590cf6d52602481"
+  integrity sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz#18c31410b5e579a0092638f95c896c2a98a5d496"
-  integrity sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==
+"@babel/plugin-transform-modules-systemjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.0.tgz#77591e126f3ff4132a40595a6cccd00a6b60d160"
+  integrity sha512-qBej6ctXZD2f+DhlOC9yO47yEYgUh5CZNz/aBoH4j/3NOlRfJXJbY7xDQCqQVf9KbrqGzIWER1f23doHGrIHFg==
   dependencies:
     "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
 "@babel/plugin-transform-modules-umd@^7.22.5":
   version "7.22.5"
@@ -653,32 +653,32 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz#f8872c65776e0b552e0849d7596cddd416c3e381"
-  integrity sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc"
+  integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-numeric-separator@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz#57226a2ed9e512b9b446517ab6fa2d17abb83f58"
-  integrity sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==
+"@babel/plugin-transform-numeric-separator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd"
+  integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-rest-spread@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz#9686dc3447df4753b0b2a2fae7e8bc33cdc1f2e1"
-  integrity sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==
+"@babel/plugin-transform-object-rest-spread@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.15.tgz#21a95db166be59b91cde48775310c0df6e1da56f"
+  integrity sha512-fEB+I1+gAmfAyxZcX1+ZUwLeAuuf8VIg67CTznZE0MqVFumWkh8xWtn58I4dxdVf080wn7gzWoF8vndOViJe9Q==
   dependencies:
-    "@babel/compat-data" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-compilation-targets" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.22.5"
+    "@babel/plugin-transform-parameters" "^7.22.15"
 
 "@babel/plugin-transform-object-super@^7.22.5":
   version "7.22.5"
@@ -688,27 +688,27 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.5"
 
-"@babel/plugin-transform-optional-catch-binding@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz#842080be3076703be0eaf32ead6ac8174edee333"
-  integrity sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==
+"@babel/plugin-transform-optional-catch-binding@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0"
+  integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-transform-optional-chaining@^7.22.10", "@babel/plugin-transform-optional-chaining@^7.22.5":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.10.tgz#076d28a7e074392e840d4ae587d83445bac0372a"
-  integrity sha512-MMkQqZAZ+MGj+jGTG3OTuhKeBpNcO+0oCEbrGNEaOmiEn+1MzRyQlYsruGiU8RTK3zV6XwrVJTmwiDOyYK6J9g==
+"@babel/plugin-transform-optional-chaining@^7.22.15", "@babel/plugin-transform-optional-chaining@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.0.tgz#73ff5fc1cf98f542f09f29c0631647d8ad0be158"
+  integrity sha512-sBBGXbLJjxTzLBF5rFWaikMnOGOk/BmK6vVByIdEggZ7Vn6CvWXZyRkkLFK6WE0IF8jSliyOkUN6SScFgzCM0g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-transform-parameters@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz#c3542dd3c39b42c8069936e48717a8d179d63a18"
-  integrity sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==
+"@babel/plugin-transform-parameters@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.15.tgz#719ca82a01d177af358df64a514d64c2e3edb114"
+  integrity sha512-hjk7qKIqhyzhhUvRT683TYQOFa/4cQKwQy7ALvTpODswN40MljzNDa0YldevS6tGbxwaEKVn502JmY0dP7qEtQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -720,13 +720,13 @@
     "@babel/helper-create-class-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-private-property-in-object@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz#07a77f28cbb251546a43d175a1dda4cf3ef83e32"
-  integrity sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==
+"@babel/plugin-transform-private-property-in-object@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1"
+  integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
@@ -820,16 +820,16 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/preset-env@^7.11.0":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.10.tgz#3263b9fe2c8823d191d28e61eac60a79f9ce8a0f"
-  integrity sha512-riHpLb1drNkpLlocmSyEg4oYJIQFeXAK/d7rI6mbD0XsvoTOOweXDmQPG/ErxsEhWk3rl3Q/3F6RFQlVFS8m0A==
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.2.tgz#1f22be0ff0e121113260337dbc3e58fafce8d059"
+  integrity sha512-BW3gsuDD+rvHL2VO2SjAUNTBe5YrjsTiDyqamPDWY723na3/yPQ65X5oQkFVJZ0o50/2d+svm1rkPoJeR1KxVQ==
   dependencies:
-    "@babel/compat-data" "^7.22.9"
-    "@babel/helper-compilation-targets" "^7.22.10"
+    "@babel/compat-data" "^7.23.2"
+    "@babel/helper-compilation-targets" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.22.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.5"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.15"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.15"
     "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -850,41 +850,41 @@
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.22.5"
-    "@babel/plugin-transform-async-generator-functions" "^7.22.10"
+    "@babel/plugin-transform-async-generator-functions" "^7.23.2"
     "@babel/plugin-transform-async-to-generator" "^7.22.5"
     "@babel/plugin-transform-block-scoped-functions" "^7.22.5"
-    "@babel/plugin-transform-block-scoping" "^7.22.10"
+    "@babel/plugin-transform-block-scoping" "^7.23.0"
     "@babel/plugin-transform-class-properties" "^7.22.5"
-    "@babel/plugin-transform-class-static-block" "^7.22.5"
-    "@babel/plugin-transform-classes" "^7.22.6"
+    "@babel/plugin-transform-class-static-block" "^7.22.11"
+    "@babel/plugin-transform-classes" "^7.22.15"
     "@babel/plugin-transform-computed-properties" "^7.22.5"
-    "@babel/plugin-transform-destructuring" "^7.22.10"
+    "@babel/plugin-transform-destructuring" "^7.23.0"
     "@babel/plugin-transform-dotall-regex" "^7.22.5"
     "@babel/plugin-transform-duplicate-keys" "^7.22.5"
-    "@babel/plugin-transform-dynamic-import" "^7.22.5"
+    "@babel/plugin-transform-dynamic-import" "^7.22.11"
     "@babel/plugin-transform-exponentiation-operator" "^7.22.5"
-    "@babel/plugin-transform-export-namespace-from" "^7.22.5"
-    "@babel/plugin-transform-for-of" "^7.22.5"
+    "@babel/plugin-transform-export-namespace-from" "^7.22.11"
+    "@babel/plugin-transform-for-of" "^7.22.15"
     "@babel/plugin-transform-function-name" "^7.22.5"
-    "@babel/plugin-transform-json-strings" "^7.22.5"
+    "@babel/plugin-transform-json-strings" "^7.22.11"
     "@babel/plugin-transform-literals" "^7.22.5"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.22.5"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.22.11"
     "@babel/plugin-transform-member-expression-literals" "^7.22.5"
-    "@babel/plugin-transform-modules-amd" "^7.22.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.22.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.22.5"
+    "@babel/plugin-transform-modules-amd" "^7.23.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.23.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.23.0"
     "@babel/plugin-transform-modules-umd" "^7.22.5"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
     "@babel/plugin-transform-new-target" "^7.22.5"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.5"
-    "@babel/plugin-transform-numeric-separator" "^7.22.5"
-    "@babel/plugin-transform-object-rest-spread" "^7.22.5"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11"
+    "@babel/plugin-transform-numeric-separator" "^7.22.11"
+    "@babel/plugin-transform-object-rest-spread" "^7.22.15"
     "@babel/plugin-transform-object-super" "^7.22.5"
-    "@babel/plugin-transform-optional-catch-binding" "^7.22.5"
-    "@babel/plugin-transform-optional-chaining" "^7.22.10"
-    "@babel/plugin-transform-parameters" "^7.22.5"
+    "@babel/plugin-transform-optional-catch-binding" "^7.22.11"
+    "@babel/plugin-transform-optional-chaining" "^7.23.0"
+    "@babel/plugin-transform-parameters" "^7.22.15"
     "@babel/plugin-transform-private-methods" "^7.22.5"
-    "@babel/plugin-transform-private-property-in-object" "^7.22.5"
+    "@babel/plugin-transform-private-property-in-object" "^7.22.11"
     "@babel/plugin-transform-property-literals" "^7.22.5"
     "@babel/plugin-transform-regenerator" "^7.22.10"
     "@babel/plugin-transform-reserved-words" "^7.22.5"
@@ -898,10 +898,10 @@
     "@babel/plugin-transform-unicode-regex" "^7.22.5"
     "@babel/plugin-transform-unicode-sets-regex" "^7.22.5"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
-    "@babel/types" "^7.22.10"
-    babel-plugin-polyfill-corejs2 "^0.4.5"
-    babel-plugin-polyfill-corejs3 "^0.8.3"
-    babel-plugin-polyfill-regenerator "^0.5.2"
+    "@babel/types" "^7.23.0"
+    babel-plugin-polyfill-corejs2 "^0.4.6"
+    babel-plugin-polyfill-corejs3 "^0.8.5"
+    babel-plugin-polyfill-regenerator "^0.5.3"
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
@@ -919,45 +919,45 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
-  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
-  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+"@babel/template@^7.22.15", "@babel/template@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
   dependencies:
-    "@babel/code-frame" "^7.22.5"
-    "@babel/parser" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
 
-"@babel/traverse@^7.22.10":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.10.tgz#20252acb240e746d27c2e82b4484f199cf8141aa"
-  integrity sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==
+"@babel/traverse@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
   dependencies:
-    "@babel/code-frame" "^7.22.10"
-    "@babel/generator" "^7.22.10"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.22.10"
-    "@babel/types" "^7.22.10"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.22.10", "@babel/types@^7.22.5", "@babel/types@^7.4.4":
-  version "7.22.10"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
-  integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
+"@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.4.4":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
   dependencies:
     "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@blueprintjs/colors@^4.2.1":
@@ -967,6 +967,13 @@
   dependencies:
     tslib "~2.5.0"
 
+"@blueprintjs/colors@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.0.5.tgz#3a8faa640dd2877aa4fd00b886cf8e58daf5f868"
+  integrity sha512-UcCsBxE8GTF6GW1oHBb+cuhPpKiJFWbIRkemwcRkp9HvXXQHxEaXlFFC6jAx5pf3JmRwde5/ck3r+lJFP1YqzA==
+  dependencies:
+    tslib "~2.6.2"
+
 "@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"
@@ -984,6 +991,20 @@
     react-transition-group "^4.4.5"
     tslib "~2.5.0"
 
+"@blueprintjs/core@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.6.0.tgz#915b708a8c2d7e916d30dae704829e2d948301d9"
+  integrity sha512-NtQL/iu8P8DhHUCWCstc9Ps+JkRZCPRJ2ZoxubOt21pfxN50CN0sKHkDETHUQyZ73RviveVIIK+m32mT5Wwdqg==
+  dependencies:
+    "@blueprintjs/colors" "^5.0.5"
+    "@blueprintjs/icons" "^5.3.0"
+    "@popperjs/core" "^2.11.7"
+    classnames "^2.3.1"
+    normalize.css "^8.0.1"
+    react-popper "^2.3.0"
+    react-transition-group "^4.4.5"
+    tslib "~2.6.2"
+
 "@blueprintjs/icons@^4.16.0":
   version "4.16.0"
   resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.16.0.tgz#47f9e8abe64d84fc18721080b8f191d8aac075d8"
@@ -993,6 +1014,15 @@
     classnames "^2.3.1"
     tslib "~2.5.0"
 
+"@blueprintjs/icons@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-5.3.0.tgz#9c9498df415bf7e028ceac15f90228d0ffd9a521"
+  integrity sha512-PGZHbWZ41b/SDOENlZQE1pAab4eluzf/hZ6sHB5nPrQNJuGNr94yaPp6u//Tu24iqVFFP20Soi3+ckhf/o3V/g==
+  dependencies:
+    change-case "^4.1.2"
+    classnames "^2.3.1"
+    tslib "~2.6.2"
+
 "@blueprintjs/popover2@^1.13.3":
   version "1.14.11"
   resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.11.tgz#0698fdeaf6710460cef0b71bed592ca37f40d1f9"
@@ -1006,6 +1036,15 @@
     react-popper "^2.3.0"
     tslib "~2.5.0"
 
+"@blueprintjs/popover2@^2.0.10":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-2.0.17.tgz#ed1fd3a6fbb0a7ae623ccb649b150a7f22a09534"
+  integrity sha512-sJTlLD9ihKUITC8xEm1lzae4IumXkwoTEu/ajUTgd3GlLyQsUSC5CdlBihX7LlA60WbuyVSE3Jbazhqw2Fud2w==
+  dependencies:
+    "@blueprintjs/core" "^5.6.0"
+    classnames "^2.3.1"
+    tslib "~2.6.2"
+
 "@cfcs/core@^0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@cfcs/core/-/core-0.0.6.tgz#9f8499dcd2ad29fd96d8fa72055411cd4a249121"
@@ -1031,9 +1070,9 @@
     "@egjs/list-differ" "^1.0.0"
 
 "@egjs/component@^3.0.2":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.4.tgz#ad7b53794b2a612806179a188ad828acb9525f61"
-  integrity sha512-sXA7bGbIeLF2OAw/vpka66c6QBBUPcA4UUhR4WGJfnp2XWdiI8QrnJGJMr/UxpE/xnevX9tN3jvNPlW8WkHl3g==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.5.tgz#2dc86e835d5dc5055cdf46c7cd794eb45330e1b6"
+  integrity sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==
 
 "@egjs/list-differ@^1.0.0":
   version "1.0.1"
@@ -1147,6 +1186,121 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1155,9 +1309,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
-  integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1189,10 +1343,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
-  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
+"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.3.tgz#797470a75fe0fbd5a53350ee715e85e87baff22d"
+  integrity sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1204,29 +1358,69 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@^8.47.0":
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
-  integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
+"@eslint/js@8.36.0":
+  version "8.36.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
+  integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
-"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.3":
-  version "1.7.16"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.16.tgz#9c458c9c4dbb708258c9e8da3fe5363f915f7b11"
-  integrity sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==
+"@eslint/js@8.53.0":
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d"
+  integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==
+
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
   dependencies:
-    client-only "^0.0.1"
+    "@floating-ui/utils" "^0.1.3"
 
-"@heroicons/react@^2.0.12":
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
-  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+"@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
 
-"@humanwhocodes/config-array@^0.11.10", "@humanwhocodes/config-array@^0.11.8":
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
-  integrity sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==
+"@floating-ui/react-dom@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
+"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.3":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
+"@hello-pangea/dnd@^16.3.0":
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.3.0.tgz#3776212f812df4e8e69c42831ec8ab7ff3a087d6"
+  integrity sha512-RYQ/K8shtJoyNPvFWz0gfXIK7HF3P3mL9UZFGMuHB0ljRSXVgMjVFI/FxcZmakMzw6tO7NflWLriwTNBow/4vw==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.1.1"
+    redux "^4.2.1"
+    use-memo-one "^1.1.3"
+
+"@humanwhocodes/config-array@^0.11.13", "@humanwhocodes/config-array@^0.11.8":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
     minimatch "^3.0.5"
 
@@ -1244,11 +1438,16 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.0", "@humanwhocodes/object-schema@^1.2.1":
+"@humanwhocodes/object-schema@^1.2.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
+
 "@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"
@@ -1308,9 +1507,9 @@
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.19"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811"
-  integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
@@ -1320,96 +1519,87 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@mui/base@5.0.0-beta.10":
-  version "5.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.10.tgz#b9a2de21c7de45aa4275c7ecf5aa803ecc236ba6"
-  integrity sha512-moTAhGwFfQffj7hsu61FnqcGqVcd53A1CrOhnskM9TF0Uh2rnLDMCuar4JRUWWpaJofAfQEbQBBFPadFQLI4PA==
+"@mui/base@5.0.0-beta.22":
+  version "5.0.0-beta.22"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.22.tgz#9ea6be6c8bfc4d8f825660da36d228f5315d4706"
+  integrity sha512-l4asGID5tmyerx9emJfXOKLyXzaBtdXNIFE3M+IrSZaFtGFvaQKHhc3+nxxSxPf1+G44psjczM0ekRQCdXx9HA==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@emotion/is-prop-valid" "^1.2.1"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@babel/runtime" "^7.23.2"
+    "@floating-ui/react-dom" "^2.0.2"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
-    react-is "^18.2.0"
-
-"@mui/core-downloads-tracker@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5"
-  integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg==
 
-"@mui/icons-material@^5.14.1":
-  version "5.14.3"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90"
-  integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==
-  dependencies:
-    "@babel/runtime" "^7.22.6"
+"@mui/core-downloads-tracker@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.16.tgz#03ceb422d69a33e6c1cbd7e943cf60816878be2a"
+  integrity sha512-97isBjzH2v1K7oB4UH2f4NOkBShOynY6dhnoR2XlUk/g6bb7ZBv2I3D1hvvqPtpEigKu93e7f/jAYr5d9LOc5w==
 
 "@mui/material@^5.14.1":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"
-  integrity sha512-2XUV3KyRC07BQPPzEgd+ss3x/ezXtHeKtOGCMCNmx3MauZojPYUpSwFkE0fYgYCD9dMQMVG4DY/VF38P0KShsg==
-  dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/base" "5.0.0-beta.10"
-    "@mui/core-downloads-tracker" "^5.14.4"
-    "@mui/system" "^5.14.4"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
-    "@types/react-transition-group" "^4.4.6"
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.16.tgz#45cd62d312d10399d3813ee6dc43bd1f11179bf4"
+  integrity sha512-W4zZ4vnxgGk6/HqBwgsDHKU7x2l2NhX+r8gAwfg58Rhu3ikfY7NkIS6y8Gl3NkATc4GG1FNaGjjpQKfJx3U6Jw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/base" "5.0.0-beta.22"
+    "@mui/core-downloads-tracker" "^5.14.16"
+    "@mui/system" "^5.14.16"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
+    "@types/react-transition-group" "^4.4.8"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.4.tgz#0ec5510da05047f94984344360c7f457f3a0e19e"
-  integrity sha512-ISXsHDiQ3z1XA4IuKn+iXDWvDjcz/UcQBiFZqtdoIsEBt8CB7wgdQf3LwcwqO81dl5ofg/vNQBEnXuKfZHrnYA==
+"@mui/private-theming@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.16.tgz#ffdc9a9d3deaa46af000f04c0a9cc3a982f73071"
+  integrity sha512-FNlL0pTSEBh8nXsVWreCHDSHk+jG8cBx1sxRbT8JVtL+PYbYPi802zfV4B00Kkf0LNRVRvAVQwojMWSR/MYGng==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/utils" "^5.14.4"
+    "@babel/runtime" "^7.23.2"
+    "@mui/utils" "^5.14.16"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.13.2":
-  version "5.13.2"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.13.2.tgz#c87bd61c0ab8086d34828b6defe97c02bcd642ef"
-  integrity sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==
+"@mui/styled-engine@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.16.tgz#a4a78a9980f138c2e705d04d67d44051f5005f22"
+  integrity sha512-FfvYvTG/Zd+KXMMImbcMYEeQAbONGuX5Vx3gBmmtB6KyA7Mvm9Pma1ly3R0gc44yeoFd+2wBjn1feS8h42HW5w==
   dependencies:
-    "@babel/runtime" "^7.21.0"
+    "@babel/runtime" "^7.23.2"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.4.tgz#306a2fdd41ab6f4912ea689316f834db8461bb86"
-  integrity sha512-oPgfWS97QNfHcDBapdkZIs4G5i85BJt69Hp6wbXF6s7vi3Evcmhdk8AbCRW6n0sX4vTj8oe0mh0RIm1G2A1KDA==
+"@mui/system@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.16.tgz#5c30c5123767416358c3b73774eb985e189119a4"
+  integrity sha512-uKnPfsDqDs8bbN54TviAuoGWOmFiQLwNZ3Wvj+OBkJCzwA6QnLb/sSeCB7Pk3ilH4h4jQ0BHtbR+Xpjy9wlOuA==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@mui/private-theming" "^5.14.4"
-    "@mui/styled-engine" "^5.13.2"
-    "@mui/types" "^7.2.4"
-    "@mui/utils" "^5.14.4"
+    "@babel/runtime" "^7.23.2"
+    "@mui/private-theming" "^5.14.16"
+    "@mui/styled-engine" "^5.14.16"
+    "@mui/types" "^7.2.8"
+    "@mui/utils" "^5.14.16"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.4":
-  version "7.2.4"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
-  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
+"@mui/types@^7.2.8":
+  version "7.2.8"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.8.tgz#2ed4402f104d65fcd4f460ca358654c8935e2285"
+  integrity sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==
 
-"@mui/utils@^5.14.4":
-  version "5.14.4"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.4.tgz#498cc2b08e46776c1e4327bfd8c23ad2f5890bc6"
-  integrity sha512-4ANV0txPD3x0IcTCSEHKDWnsutg1K3m6Vz5IckkbLXVYu17oOZCVUdOKsb/txUmaCd0v0PmSRe5PW+Mlvns5dQ==
+"@mui/utils@^5.14.16":
+  version "5.14.16"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.16.tgz#09a15fd45530cadc642c5c08eb6cc660ea230506"
+  integrity sha512-3xV31GposHkwRbQzwJJuooWpK2ybWdEdeUPtRjv/6vjomyi97F3+68l+QVj9tPTvmfSbr2sx5c/NuvDulrdRmA==
   dependencies:
-    "@babel/runtime" "^7.22.6"
-    "@types/prop-types" "^15.7.5"
-    "@types/react-is" "^18.2.1"
+    "@babel/runtime" "^7.23.2"
+    "@types/prop-types" "^15.7.9"
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
@@ -1418,11 +1608,6 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.2.tgz#fb819366771f5721e9438ca3a42ad18684f0949b"
   integrity sha512-upwtMaHxlv/udAWGq0kE+rg8huwmcxQPsKZFhS1R5iVO323mvxEBe1YrSXe1awLbg9sTIuEHbgxjLLt7JbeuAQ==
 
-"@next/env@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.16.tgz#382b565b35a2a69bd0e6b50f74c7b95f0c4b1097"
-  integrity sha512-pCU0sJBqdfKP9mwDadxvZd+eLz3fZrTlmmDHY12Hdpl3DD0vy8ou5HWKVfG0zZS6tqhL4wnQqRbspdY5nqa7MA==
-
 "@next/eslint-plugin-next@12.2.2":
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz#b4a22c06b6454068b54cc44502168d90fbb29a6d"
@@ -1444,6 +1629,13 @@
   dependencies:
     glob "7.1.7"
 
+"@next/eslint-plugin-next@13.2.4":
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.2.4.tgz#3e124cd10ce24dab5d3448ce04104b4f1f4c6ca7"
+  integrity sha512-ck1lI+7r1mMJpqLNa3LJ5pxCfOB1lfJncKmRJeJxcJqcngaFwylreLP7da6Rrjr6u2gVRTfmnkSkjc80IiQCwQ==
+  dependencies:
+    glob "7.1.7"
+
 "@next/swc-android-arm-eabi@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz#806e3be9741bc14aafdfad0f0c4c6a8de5b77ee1"
@@ -1459,21 +1651,11 @@
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.2.tgz#97c532d35c66ce6b6941ae24b5b8b267b9b0d0d8"
   integrity sha512-PTUfe1ZrwjsiuTmr3bOM9lsoy5DCmfYsLOUF9ZVhtbi5MNJVmUTy4VZ06GfrvnCO5hGCr48z3vpFE9QZ0qLcPw==
 
-"@next/swc-darwin-arm64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.16.tgz#ed6a342f95e5f21213fdadbceb65b40ae678cee0"
-  integrity sha512-Rl6i1uUq0ciRa3VfEpw6GnWAJTSKo9oM2OrkGXPsm7rMxdd2FR5NkKc0C9xzFCI4+QtmBviWBdF2m3ur3Nqstw==
-
 "@next/swc-darwin-x64@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz#e0cb4ff4b11faaff3a891bd1d18ed72f71e30ebe"
   integrity sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==
 
-"@next/swc-darwin-x64@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.16.tgz#36c16066a1a3ef8211e84a6a5d72bef15826b291"
-  integrity sha512-o1vIKYbZORyDmTrPV1hApt9NLyWrS5vr2p5hhLGpOnkBY1cz6DAXjv8Lgan8t6X87+83F0EUDlu7klN8ieZ06A==
-
 "@next/swc-freebsd-x64@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz#d7b93dd344cb67d1969565d0796c7b7d0217fccf"
@@ -1489,71 +1671,36 @@
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz#26df7d7cdc18cf413f12a408179ee4ac315f383a"
   integrity sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==
 
-"@next/swc-linux-arm64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.16.tgz#a5b5500737f07e3aa7f184014d8df7973420df26"
-  integrity sha512-JRyAl8lCfyTng4zoOmE6hNI2f1MFUr7JyTYCHl1RxX42H4a5LMwJhDVQ7a9tmDZ/yj+0hpBn+Aan+d6lA3v0UQ==
-
 "@next/swc-linux-arm64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz#fd42232a6b10d9f9a4f71433d59c280a4532d06f"
   integrity sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==
 
-"@next/swc-linux-arm64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.16.tgz#381b7662c5b10ed5750dce41dd57841aa0713e77"
-  integrity sha512-9gqVqNzUMWbUDgDiND18xoUqhwSm2gmksqXgCU0qaOKt6oAjWz8cWYjgpPVD0WICKFylEY/gvPEP1fMZDVFZ/g==
-
 "@next/swc-linux-x64-gnu@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz#5307579e3d8fbdb03adbe6cfc915b51548e0a103"
   integrity sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==
 
-"@next/swc-linux-x64-gnu@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.16.tgz#6e0b0eab1c316506950aeb4a09a5ea5c38edabe7"
-  integrity sha512-KcQGwchAKmZVPa8i5PLTxvTs1/rcFnSltfpTm803Tr/BtBV3AxCkHLfhtoyVtVzx/kl/oue8oS+DSmbepQKwhw==
-
 "@next/swc-linux-x64-musl@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz#d5cb920a825a8dc80ffba8a6b797fb845af0b84c"
   integrity sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==
 
-"@next/swc-linux-x64-musl@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.16.tgz#36b84e4509168a5cadf9dfd728c239002d4311fe"
-  integrity sha512-2RbMZNxYnJmW8EPHVBsGZPq5zqWAyBOc/YFxq/jIQ/Yn3RMFZ1dZVCjtIcsiaKmgh7mjA/W0ApbumutHNxRqqQ==
-
 "@next/swc-win32-arm64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz#2a0d619e5bc0cec17ed093afd1ca6b1c37c2690c"
   integrity sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==
 
-"@next/swc-win32-arm64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.16.tgz#52d36f909ccdefa2761617b6d4e9ae65f99880a9"
-  integrity sha512-thDcGonELN7edUKzjzlHrdoKkm7y8IAdItQpRvvMxNUXa4d9r0ElofhTZj5emR7AiXft17hpen+QAkcWpqG7Jg==
-
 "@next/swc-win32-ia32-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz#769bef60d0d678c3d7606a4dc7fee018d6199227"
   integrity sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==
 
-"@next/swc-win32-ia32-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.16.tgz#a9cb0556d19c33fbb39ac9bef195fd490d6c7673"
-  integrity sha512-f7SE1Mo4JAchUWl0LQsbtySR9xCa+x55C0taetjUApKtcLR3AgAjASrrP+oE1inmLmw573qRnE1eZN8YJfEBQw==
-
 "@next/swc-win32-x64-msvc@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz#45beb4b9d28e6dd6abf63cab1c5b92dc84323a6b"
   integrity sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==
 
-"@next/swc-win32-x64-msvc@13.4.16":
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.16.tgz#79a151d94583e03992c80df3d3e7f7686390ddac"
-  integrity sha512-WamDZm1M/OEM4QLce3lOmD1XdLEl37zYZwlmOLhmF7qYJ2G6oYm9+ejZVv+LakQIsIuXhSpVlOvrxIAHqwRkPQ==
-
 "@nivo/annotations@0.80.0":
   version "0.80.0"
   resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.80.0.tgz#127e4801fff7370dcfb9acfe1e335781dd65cfd5"
@@ -2011,18 +2158,18 @@
     picomatch "^2.2.2"
 
 "@rollup/pluginutils@^5.0.1":
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0"
-  integrity sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
+  integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
 "@rushstack/eslint-patch@^1.1.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
-  integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922"
+  integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
 "@scena/dragscroll@^1.4.0":
   version "1.4.0"
@@ -2046,32 +2193,30 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/tracing@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.63.0.tgz#58903b2205456034611cc5bc1b5b2479275f89c7"
-  integrity sha512-Fxpc53p6NGvLSURg3iRvZA0k10K9yfeVhtczvJnpX30POBuV41wxpkLHkb68fjksirjEma1K3Ut1iLOEEDpPQg==
+"@sentry-internal/tracing@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.77.0.tgz#f3d82486f8934a955b3dd2aa54c8d29586e42a37"
+  integrity sha512-8HRF1rdqWwtINqGEdx8Iqs9UOP/n8E0vXUu3Nmbqj4p5sQPA7vvCfq+4Y4rTqZFc7sNdFpDsRION5iQEh8zfZw==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/browser@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.63.0.tgz#d7eee4be7bfff015f050bca83cafb111dc13d40d"
-  integrity sha512-P1Iw/2281C/7CUCRsN4jgXvjMNKnrwKqxRg7JqN8eVeCDPMpOeEPHNJ6YatEXdVLTKVn0JB7L63Q1prhFr8+SQ==
+"@sentry/browser@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.77.0.tgz#155440f1a0d3a1bbd5d564c28d6b0c9853a51d72"
+  integrity sha512-nJ2KDZD90H8jcPx9BysQLiQW+w7k7kISCWeRjrEMJzjtge32dmHA8G4stlUTRIQugy5F+73cOayWShceFP7QJQ==
   dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/replay" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/replay" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
 "@sentry/cli@^1.74.6":
-  version "1.75.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.2.tgz#2c38647b38300e52c9839612d42b7c23f8d6455b"
-  integrity sha512-CG0CKH4VCKWzEaegouWfCLQt9SFN+AieFESCatJ7zSuJmzF05ywpMusjxqRul6lMwfUhRKjGKOzcRJ1jLsfTBw==
+  version "1.76.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.76.0.tgz#3d48248a4fec2fee7c4d30320c563c91c75290ec"
+  integrity sha512-56bVyUJoi52dop/rFEaSoU4AfVRXpR6M+nZBwN1iGUAwdfBrarNbtmIOjfgPi+tVzVB5ck09PzVXG6zeBqJJcA==
   dependencies:
     https-proxy-agent "^5.0.0"
     mkdirp "^0.5.5"
@@ -2080,89 +2225,94 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.63.0.tgz#8c38da6ef3a1de6e364463a09bc703b196ecbba4"
-  integrity sha512-13Ljiq8hv6ieCkO+Am99/PljYJO5ynKT/hRQrWgGy9IIEgUr8sV3fW+1W6K4/3MCeOJou0HsiGBjOD1mASItVg==
+"@sentry/core@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.77.0.tgz#21100843132beeeff42296c8370cdcc7aa1d8510"
+  integrity sha512-Tj8oTYFZ/ZD+xW8IGIsU6gcFXD/gfE+FUxUaeSosd9KHwBQNOLhZSsYo/tTVf/rnQI/dQnsd4onPZLiL+27aTg==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/integrations@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.63.0.tgz#bf4268b524670fdbc290dc489de0069143b499c6"
-  integrity sha512-+P8GNqFZNH/yS/KPbvUfUDERneoRNUrqp9ayvvp8aq4cTtrBdM72CYgI21oG6cti42SSM1VDLYZomTV3ElPzSg==
+"@sentry/integrations@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.77.0.tgz#f2717e05cb7c69363316ccd34096b2ea07ae4c59"
+  integrity sha512-P055qXgBHeZNKnnVEs5eZYLdy6P49Zr77A1aWJuNih/EenzMy922GOeGy2mF6XYrn1YJSjEwsNMNsQkcvMTK8Q==
   dependencies:
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     localforage "^1.8.1"
-    tslib "^2.4.1 || ^1.9.3"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.63.0.tgz#79bca799d451e1570c7873474e295660218cadea"
-  integrity sha512-pf1kEt2oqxe84+DdmGkI6BEe1KMUcUFU4PZKg5GRFY7e2ZqHoS8hTJF5rBkScqVlQoXDTiGpfI+vU8Ie3snUcQ==
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.77.0.tgz#036b1c45dd106e01d44967c97985464e108922be"
+  integrity sha512-8tYPBt5luFjrng1sAMJqNjM9sq80q0jbt6yariADU9hEr7Zk8YqFaOI2/Q6yn9dZ6XyytIRtLEo54kk2AO94xw==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/integrations" "7.63.0"
-    "@sentry/node" "7.63.0"
-    "@sentry/react" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/integrations" "7.77.0"
+    "@sentry/node" "7.77.0"
+    "@sentry/react" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
+    "@sentry/vercel-edge" "7.77.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
+    resolve "1.22.8"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
-    tslib "^2.4.1 || ^1.9.3"
-
-"@sentry/node@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.63.0.tgz#38508a440c04c0e98d00f5a1855e5448ee70c8d6"
-  integrity sha512-tSMyfQNbfjX1w8vJDZtvWeaD4QQ/Z4zVW/TLXfL/JZFIIksPgDZmqLdF+NJS4bSGTU5JiHiUh4pYhME4mHgNBQ==
-  dependencies:
-    "@sentry-internal/tracing" "7.63.0"
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
-    cookie "^0.4.1"
+
+"@sentry/node@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.77.0.tgz#a247452779a5bcb55724457707286e3e4a29dbbe"
+  integrity sha512-Ob5tgaJOj0OYMwnocc6G/CDLWC7hXfVvKX/ofkF98+BbN/tQa5poL+OwgFn9BA8ud8xKzyGPxGU6LdZ8Oh3z/g==
+  dependencies:
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     https-proxy-agent "^5.0.0"
-    lru_map "^0.3.3"
-    tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/react@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.63.0.tgz#6d318191e13ccf7ebba4897d7258b4ea3bcf6c51"
-  integrity sha512-KFRjgADVE4aMI7gJmGnoSz65ZErQlz9xRB3vETWSyNOLprWXuQLPPtcDEn39BROtsDG4pLyYFaSDiD7o0+DyjQ==
+"@sentry/react@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.77.0.tgz#9da14e4b21eae4b5a6306d39bb7c42ef0827d2c2"
+  integrity sha512-Q+htKzib5em0MdaQZMmPomaswaU3xhcVqmLi2CxqQypSjbYgBPPd+DuhrXKoWYLDDkkbY2uyfe4Lp3yLRWeXYw==
   dependencies:
-    "@sentry/browser" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry/browser" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
     hoist-non-react-statics "^3.3.2"
-    tslib "^2.4.1 || ^1.9.3"
 
-"@sentry/replay@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.63.0.tgz#989ae32ea028a5eca323786cc07294fedb1f0d45"
-  integrity sha512-ikeFVojuP9oDF103blZcj0Vvb4S50dV54BESMrMW2lYBoMMjvOd7AdL+iDHjn1OL05/mv1C6Oc8MovmvdjILVA==
+"@sentry/replay@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.77.0.tgz#21d242c9cd70a7235237216174873fd140b6eb80"
+  integrity sha512-M9Ik2J5ekl+C1Och3wzLRZVaRGK33BlnBwfwf3qKjgLDwfKW+1YkwDfTHbc2b74RowkJbOVNcp4m8ptlehlSaQ==
   dependencies:
-    "@sentry/core" "7.63.0"
-    "@sentry/types" "7.63.0"
-    "@sentry/utils" "7.63.0"
+    "@sentry-internal/tracing" "7.77.0"
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
-"@sentry/types@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.63.0.tgz#8032029fee6f70e04b667646626a674b03e2f79b"
-  integrity sha512-pZNwJVW7RqNLGuTUAhoygt0c9zmc0js10eANAz0MstygJRhQI1tqPDuiELVdujPrbeL+IFKF+7NvRDAydR2Niw==
+"@sentry/types@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.77.0.tgz#c5d00fe547b89ccde59cdea59143bf145cee3144"
+  integrity sha512-nfb00XRJVi0QpDHg+JkqrmEBHsqBnxJu191Ded+Cs1OJ5oPXEW6F59LVcBScGvMqe+WEk1a73eH8XezwfgrTsA==
 
-"@sentry/utils@7.63.0":
-  version "7.63.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.63.0.tgz#7c598553b4dbb6e3740dc96bc7f112ec32edbe69"
-  integrity sha512-7FQv1RYAwnuTuarruP+1+Jd6YQuN7i/Y7KltwPMVEwU7j5mzYQaexLr/Jz1XIdR2KYVdkbXQyP8jj8BmA6u9Jw==
+"@sentry/utils@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.77.0.tgz#1f88501f0b8777de31b371cf859d13c82ebe1379"
+  integrity sha512-NmM2kDOqVchrey3N5WSzdQoCsyDkQkiRxExPaNI2oKQ/jMWHs9yt0tSy7otPBcXs0AP59ihl75Bvm1tDRcsp5g==
   dependencies:
-    "@sentry/types" "7.63.0"
-    tslib "^2.4.1 || ^1.9.3"
+    "@sentry/types" "7.77.0"
+
+"@sentry/vercel-edge@7.77.0":
+  version "7.77.0"
+  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.77.0.tgz#6a90a869878e4e78803c4331c30aea841fcc6a73"
+  integrity sha512-ffddPCgxVeAccPYuH5sooZeHBqDuJ9OIhIRYKoDi4TvmwAzWo58zzZWhRpkHqHgIQdQvhLVZ5F+FSQVWnYSOkw==
+  dependencies:
+    "@sentry/core" "7.77.0"
+    "@sentry/types" "7.77.0"
+    "@sentry/utils" "7.77.0"
 
 "@sentry/webpack-plugin@1.20.0":
   version "1.20.0"
@@ -2189,195 +2339,201 @@
   dependencies:
     tslib "^2.4.0"
 
-"@swc/helpers@0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
-  integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
-  dependencies:
-    tslib "^2.4.0"
-
 "@tailwindcss/typography@^0.5.9":
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
-  integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.10.tgz#2abde4c6d5c797ab49cf47610830a301de4c1e0a"
+  integrity sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
-"@tiptap-pro/extension-unique-id@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.tiptap.dev/@tiptap-pro%2fextension-unique-id/-/extension-unique-id-2.1.0.tgz#7f5e7cc2d068eff11531e2b8c894ddf13c8d41d8"
-  integrity sha512-RdkDqFV0adN/NXJ31I64mD3VmoGhQfNMmOyF5X92fbIymHaonAGzDeoXoindd+6MUUd6e3cm75x5VQLdsddG4Q==
-  dependencies:
-    uuid "^8.3.2"
-
-"@tiptap/core@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.4.tgz#0a2047150ae537e75f96841a603699526f7b4ec5"
-  integrity sha512-2YOMjRqoBGEP4YGgYpuPuBBJHMeqKOhLnS0WVwjVP84zOmMgZ7A8M6ILC9Xr7Q/qHZCvyBGWOSsI7+3HsEzzYQ==
+"@tiptap/core@^2.1.12", "@tiptap/core@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.12.tgz#904fdf147e91b5e60561c76e7563c1b5a32f54ab"
+  integrity sha512-ZGc3xrBJA9KY8kln5AYTj8y+GDrKxi7u95xIl2eccrqTY5CQeRu6HRNM1yT4mAjuSaG9jmazyjGRlQuhyxCKxQ==
 
-"@tiptap/extension-blockquote@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.4.tgz#1e87f8f157573deec65b54d8a8b5568d79066a86"
-  integrity sha512-z5qfuLi04OgCBI6/odzB2vhulT/wpjymYOnON65vLXGZZbUw4cbPloykhqgWvQp+LzKH+HBhl4fz53d5CgnbOA==
+"@tiptap/extension-blockquote@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.12.tgz#97b43419606acf9bfd93b9f482a1827dcac8c3e9"
+  integrity sha512-Qb3YRlCfugx9pw7VgLTb+jY37OY4aBJeZnqHzx4QThSm13edNYjasokbX0nTwL1Up4NPTcY19JUeHt6fVaVVGg==
 
-"@tiptap/extension-bold@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.4.tgz#debba8b0d957fe0b6943354834d8f1f0f8c0695c"
-  integrity sha512-CWSQy1uWkVsen8HUsqhm+oEIxJrCiCENABUbhaVcJL/MqhnP4Trrh1B6O00Yfoc0XToPRRibDaHMFs4A3MSO0g==
+"@tiptap/extension-bold@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.12.tgz#5dbf41105fc0fbde8adbff629312187fbebc39b0"
+  integrity sha512-AZGxIxcGU1/y6V2YEbKsq6BAibL8yQrbRm6EdcBnby41vj1WziewEKswhLGmZx5IKM2r2ldxld03KlfSIlKQZg==
 
-"@tiptap/extension-bubble-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.4.tgz#f9dde09d3984e9879b1fe13d3e8c1859f0779ef5"
-  integrity sha512-+cRZwj0YINNNDElSAiX1pvY2K98S2j9MQW2dXV5oLqsJhqGPZsKxVo8I1u7ZtqUla3QE1V18RYPAzVgTiMRkBg==
+"@tiptap/extension-bubble-menu@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.12.tgz#4103a21a6433e58690c8f742ece39fad78dc26eb"
+  integrity sha512-gAGi21EQ4wvLmT7klgariAc2Hf+cIjaNU2NWze3ut6Ku9gUo5ZLqj1t9SKHmNf4d5JG63O8GxpErqpA7lHlRtw==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.4.tgz#d192767d39e45253c5e9d974e949f271e09c72d7"
-  integrity sha512-JSZKBVTaKSuLl5fR4EKE4dOINOrgeRHYA25Vj6cWjgdvpTw5ef7vcUdn9yP4JwTmLRI+VnnMlYL3rqigU3iZNg==
-
-"@tiptap/extension-code-block-lowlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.0.4.tgz#e641f08d2ea77271722e848c6efa819b63638b1a"
-  integrity sha512-fKM/4MY9R75IJJVt7P+aD+GX3yzzL6oHo1dn4hNFJlYp2x5+yH6kneaqKcTglVicBCGc8Ks6wJLEZTxxG35MOA==
-
-"@tiptap/extension-code-block@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.0.4.tgz#d551ee7c13fef379bbbad298f1be757d1125cd54"
-  integrity sha512-In2tV3rgm/MznVF0N7qYsYugPWSzhZHaCRCWcFKNvllMExpo91bUWvk+hXaIhhPxvuqGIVezjybwrYuU3bJW0g==
-
-"@tiptap/extension-code@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.0.4.tgz#6952d402e7372dd2d129e962bf9bd54d68ee6183"
-  integrity sha512-HuwJSJkipZf4hkns9witv1CABNIPiB9C8lgAQXK4xJKcoUQChcnljEL+PQ2NqeEeMTEeV3nG3A/0QafH0pgTgg==
-
-"@tiptap/extension-color@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.0.4.tgz#564265c2bcadd268e6b5745d2a06571744cb4090"
-  integrity sha512-7Eb5Gk9v3sj2i1Q8dfqmpnc5aDPC/t0ZEsSLRi4C6SNo1nBeUxteXzpzxWwYjTvK+Um40STR89Z6PY14FIYXSA==
-
-"@tiptap/extension-document@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.4.tgz#f94e6da23a7d93a8ea34c6767d4e2e31f5ab8849"
-  integrity sha512-mCj2fAhnNhIHttPSqfTPSSTGwClGaPYvhT56Ij/Pi4iCrWjPXzC4XnIkIHSS34qS2tJN4XJzr/z7lm3NeLkF1w==
-
-"@tiptap/extension-dropcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.4.tgz#f4a7542866c9100fee8e78eca5eebefff58989ca"
-  integrity sha512-1OmKBv/E+nJo2vsosvu8KwFiBB+gZM1pY61qc7JbwEKHSYAxUFHfvLkIA0IQ53Z0DHMrFSKgWmHEcbnqtGevCA==
-
-"@tiptap/extension-floating-menu@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.4.tgz#82f12c2415b7ddbfd782a03b100f717e9905bab0"
-  integrity sha512-0YRE738k+kNKuSHhAb3jj9ZQ7Kda78RYRr+cX2jrQVueIMKebPIY07eBt6JcKmob9V9vcNn9qLtBfmygfcPUQg==
+"@tiptap/extension-bullet-list@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.12.tgz#7c905a577ce30ef2cb335870a23f9d24fd26f6aa"
+  integrity sha512-vtD8vWtNlmAZX8LYqt2yU9w3mU9rPCiHmbp4hDXJs2kBnI0Ju/qAyXFx6iJ3C3XyuMnMbJdDI9ee0spAvFz7cQ==
+
+"@tiptap/extension-code-block-lowlight@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.1.12.tgz#ccbca5d0d92bee373dc8e2e2ae6c27f62f66437c"
+  integrity sha512-dtIbpI9QrWa9TzNO4v5q/zf7+d83wpy5i9PEccdJAVtRZ0yOI8JIZAWzG5ex3zAoCA0CnQFdsPSVykYSDdxtDA==
+
+"@tiptap/extension-code-block@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.12.tgz#20416baef1b5fc839490a8416e97fdcbb5fdf918"
+  integrity sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==
+
+"@tiptap/extension-code@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.12.tgz#86d2eb5f63725af472c5fd858e5a9c7ccae06ef3"
+  integrity sha512-CRiRq5OTC1lFgSx6IMrECqmtb93a0ZZKujEnaRhzWliPBjLIi66va05f/P1vnV6/tHaC3yfXys6dxB5A4J8jxw==
+
+"@tiptap/extension-color@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-2.1.12.tgz#1076833f061c3eabf59aef32cd15f103fd6ec710"
+  integrity sha512-Myd6iSbPJvvclr+NRBEdE0k52QlQrXZnJljk4JKn0b25cl60ERA40FH9QLBjkpTed7SDbI3oX7LWIzTUoCj39w==
+
+"@tiptap/extension-document@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.12.tgz#e19e4716dfad60cbeb6abaf2f362fed759963529"
+  integrity sha512-0QNfAkCcFlB9O8cUNSwTSIQMV9TmoEhfEaLz/GvbjwEq4skXK3bU+OQX7Ih07waCDVXIGAZ7YAZogbvrn/WbOw==
+
+"@tiptap/extension-dropcursor@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.12.tgz#9da0c275291c9d47497d3db41b4d70d96366b4ff"
+  integrity sha512-0tT/q8nL4NBCYPxr9T0Brck+RQbWuczm9nV0bnxgt0IiQXoRHutfPWdS7GA65PTuVRBS/3LOco30fbjFhkfz/A==
+
+"@tiptap/extension-floating-menu@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.12.tgz#68a658b2b9bdd3a0fc1afc5165231838061a8fde"
+  integrity sha512-uo0ydCJNg6AWwLT6cMUJYVChfvw2PY9ZfvKRhh9YJlGfM02jS4RUG/bJBts6R37f+a5FsOvAVwg8EvqPlNND1A==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.4.tgz#c100a792fd41535ad6382aa8133d0d9c0b2cb2b8"
-  integrity sha512-VxmKfBQjSSu1mNvHlydA4dJW/zawGKyqmnryiFNcUV9s+/HWLR5i9SiUl4wJM/B8sG8cQxClne5/LrCAeGNYuA==
-
-"@tiptap/extension-hard-break@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.0.4.tgz#a4f70fa9a473270f7ec89f20a14b9122af5657bc"
-  integrity sha512-4j8BZa6diuoRytWoIc7j25EYWWut5TZDLbb+OVURdkHnsF8B8zeNTo55W40CdwSaSyTtXtxbTIldV80ShQarGQ==
-
-"@tiptap/extension-heading@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.4.tgz#5372e346c5d69cfa0060d7238d1a0bf440442f6f"
-  integrity sha512-EfitUbew5ljH3xVlBXAxqqcJ4rjv15b8379LYOV6KQCf+Y1wY0gy9Q8wXSnrsAagqrvqipja4Ihn3OZeyIM+CA==
-
-"@tiptap/extension-highlight@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-2.0.4.tgz#5d54232ac573d0b04c3e705ca38f207fb6cf7270"
-  integrity sha512-z1hcpf0eHHdaBE0pewXiNIu+QBodw4IAbZykTXMaY1xCsbYWfOJxeIb5o+CEG5HBsmaoJrCYenQw71xzgV0hKA==
-
-"@tiptap/extension-history@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.4.tgz#761a9c4b2a875817acc73137660552bd49e94fca"
-  integrity sha512-3GAUszn1xZx3vniHMiX9BSKmfvb5QOb0oSLXInN+hx80CgJDIHqIFuhx2dyV9I/HWpa0cTxaLWj64kfDzb1JVg==
-
-"@tiptap/extension-horizontal-rule@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.4.tgz#6988dd63fb00ca144feb1baac84142782e8ebe38"
-  integrity sha512-OMx2ImQseKbSUjPbbRCuYGOJshxYedh9giWAqwgWWokhYkH4nGxXn5m7+Laj+1wLre4bnWgHWVY4wMGniEj3aw==
-
-"@tiptap/extension-image@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.4.tgz#a41d5ca246bd41dd293194e359a80cb97f477ab3"
-  integrity sha512-5iQ96pt9xppM8sWzwhGgc99PPoYPQuokTaCXAQKDI0Y1CFCjZ+/duUG3al1VUMpBXsjJw3/RVO1+7CEhRTd3mA==
-
-"@tiptap/extension-italic@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.4.tgz#4c6d0938542e4f7276f9dd18db395c040f76dcd8"
-  integrity sha512-C/6+qs4Jh8xERRP0wcOopA1+emK8MOkBE4RQx5NbPnT2iCpERP0GlmHBFQIjaYPctZgKFHxsCfRnneS5Xe76+A==
-
-"@tiptap/extension-link@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.4.tgz#2899f9060ca722f11bd10ceb572ceb5178f111d6"
-  integrity sha512-CliImI1hmC+J6wHxqgz9P4wMjoNSSgm3fnNHsx5z0Bn6JRA4Evh2E3KZAdMaE8xCTx89rKxMYNbamZf4VLSoqQ==
+"@tiptap/extension-gapcursor@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.12.tgz#63844c3abd1a38af915839cf0c097b6d2e5a86fe"
+  integrity sha512-zFYdZCqPgpwoB7whyuwpc8EYLYjUE5QYKb8vICvc+FraBUDM51ujYhFSgJC3rhs8EjI+8GcK8ShLbSMIn49YOQ==
+
+"@tiptap/extension-hard-break@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.12.tgz#54d0c9996e1173594852394975a9356eec98bc9a"
+  integrity sha512-nqKcAYGEOafg9D+2cy1E4gHNGuL12LerVa0eS2SQOb+PT8vSel9OTKU1RyZldsWSQJ5rq/w4uIjmLnrSR2w6Yw==
+
+"@tiptap/extension-heading@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.12.tgz#05ae4684d6f29ae611495ab114038e14a5d1dff6"
+  integrity sha512-MoANP3POAP68Ko9YXarfDKLM/kXtscgp6m+xRagPAghRNujVY88nK1qBMZ3JdvTVN6b/ATJhp8UdrZX96TLV2w==
+
+"@tiptap/extension-history@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.12.tgz#03bcb9422e8ea2b82dc45207d1a1b0bc0241b055"
+  integrity sha512-6b7UFVkvPjq3LVoCTrYZAczt5sQrQUaoDWAieVClVZoFLfjga2Fwjcfgcie8IjdPt8YO2hG/sar/c07i9vM0Sg==
+
+"@tiptap/extension-horizontal-rule@^2.1.11", "@tiptap/extension-horizontal-rule@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.12.tgz#2191d4ff68ed39381d65971ad8e2aa1be43e6d6b"
+  integrity sha512-RRuoK4KxrXRrZNAjJW5rpaxjiP0FJIaqpi7nFbAua2oHXgsCsG8qbW2Y0WkbIoS8AJsvLZ3fNGsQ8gpdliuq3A==
+
+"@tiptap/extension-image@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.1.12.tgz#ab035db82f0961b1d906c4d426bf68be563fdcd3"
+  integrity sha512-VCgOTeNLuoR89WoCESLverpdZpPamOd7IprQbDIeG14sUySt7RHNgf2AEfyTYJEHij12rduvAwFzerPldVAIJg==
+
+"@tiptap/extension-italic@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.12.tgz#e99480eb77f8b4e5444fc236add8a831d5aa2343"
+  integrity sha512-/XYrW4ZEWyqDvnXVKbgTXItpJOp2ycswk+fJ3vuexyolO6NSs0UuYC6X4f+FbHYL5VuWqVBv7EavGa+tB6sl3A==
+
+"@tiptap/extension-link@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.1.12.tgz#a18f83a0b54342e6274ff9e5a5907ef7f15aa723"
+  integrity sha512-Sti5hhlkCqi5vzdQjU/gbmr8kb578p+u0J4kWS+SSz3BknNThEm/7Id67qdjBTOQbwuN07lHjDaabJL0hSkzGQ==
   dependencies:
     linkifyjs "^4.1.0"
 
-"@tiptap/extension-list-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.4.tgz#8ca7c9959a07bf94602f8957d784d526568f2069"
-  integrity sha512-tSkbLgRo1QMNDJttWs9FeRywkuy5T2HdLKKfUcUNzT3s0q5AqIJl7VyimsBL4A6MUfN1qQMZCMHB4pM9Mkluww==
-
-"@tiptap/extension-ordered-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.4.tgz#e3e220e9c15114b07c952c32fa58e96601db6bd7"
-  integrity sha512-Kfg+8k9p4iJCUKP/yIa18LfUpl9trURSMP/HX3/yQTz9Ul1vDrjxeFjSE5uWNvupcXRAM24js+aYrCmV7zpU+Q==
-
-"@tiptap/extension-paragraph@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.4.tgz#9cffa3f8a980349ca068b1b3c12596bf5f3aef0f"
-  integrity sha512-nDxpopi9WigVqpfi8nU3B0fWYB14EMvKIkutNZo8wJvKGTZufNI8hw66wupIx/jZH1gFxEa5dHerw6aSYuWjgQ==
-
-"@tiptap/extension-placeholder@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.0.4.tgz#74259783757c59751d78fcdd1aade7e928809187"
-  integrity sha512-Y8hjUYBGTbytgrsplSZdHGciqbuVHQX+h0JcuvVaIlAy1kR7hmbxJLqL8tNa7qLtTqo2MfS2942OtSv85JOCzA==
-
-"@tiptap/extension-strike@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.4.tgz#13286dcf8780c55610ed65b24238b8395a5be824"
-  integrity sha512-Men7LK6N/Dh3/G4/z2Z9WkDHM2Gxx1XyxYix2ZMf5CnqY37SeDNUnGDqit65pdIN3Y/TQnOZTkKSBilSAtXfJA==
-
-"@tiptap/extension-task-item@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.0.4.tgz#71f46d35ac629ca10c5c23d4ad170007338a436e"
-  integrity sha512-0FfYWrOslDzzN7Ehnt3yBekOSH45tiB/3gzFRvGdLBUv0PiYQolUpyfHGsdNzeKYuWLF1yiacJkCeLgNDgCLDw==
-
-"@tiptap/extension-task-list@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.0.4.tgz#69b2b23d1e757044c05f3d7dcbd30194c71f9324"
-  integrity sha512-3RGoEgGJdWpGf8aWl7O7+jnnvfpF0or2YHYYvJv13t5G4dNIS9E7QXT3/rU9QtHNYkbcJYFjHligIFuBTAhZNg==
-
-"@tiptap/extension-text-style@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.0.4.tgz#4ba3fd6b204badc43ac6a00285315fe868f07e52"
-  integrity sha512-HQk8c7HasDdeAJxlHrztkgprxocZecZVUMlvPvFAhkq8E/5+nfmr/Gm9qudiStEARZrIYBATNA2PbnQuIGMx3A==
-
-"@tiptap/extension-text@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.4.tgz#318b0105491a5976d220871dccabe6c4d2cbeedd"
-  integrity sha512-i8/VFlVZh7TkAI49KKX5JmC0tM8RGwyg5zUpozxYbLdCOv07AkJt+E1fLJty9mqH4Y5HJMNnyNxsuZ9Ol/ySRA==
-
-"@tiptap/extension-underline@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.4.tgz#c1e5df75a4c9f2d9e691d48438ee0894f8bb01f1"
-  integrity sha512-Hvhy3iV5dWs0SFTww6sIzyQSSgVzcQuiozhDs11iP+gvFjK7ejg86KZ8wAVvyCi9K3bOMhohsw1Q2b8JSnIxcg==
-
-"@tiptap/pm@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.0.4.tgz#c3df31a29120e1e3334f8f063df23ccb1ace7851"
-  integrity sha512-DNgxntpEaiW7ciW0BTNTL0TFqAreZTrAROWakI4XaYRAyi5H9NfZW8jmwGwMBkoZ1KB3pfy+jT/Bisy4okEQGQ==
+"@tiptap/extension-list-item@^2.1.11", "@tiptap/extension-list-item@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.12.tgz#3eb28dc998490a98f14765783770b3cf6587d39e"
+  integrity sha512-Gk7hBFofAPmNQ8+uw8w5QSsZOMEGf7KQXJnx5B022YAUJTYYxO3jYVuzp34Drk9p+zNNIcXD4kc7ff5+nFOTrg==
+
+"@tiptap/extension-mention@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.1.12.tgz#a395e7757b45630ec3047f14b0ba2dde8e1c9c93"
+  integrity sha512-Nc8wFlyPp+/48IpOFPk2O3hYsF465wizcM3aihMvZM96Ahic7dvv9yVptyOfoOwgpExl2FIn1QPjRDXF60VAUg==
+
+"@tiptap/extension-ordered-list@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.12.tgz#f41a45bc66b4d19e379d4833f303f2e0cd6b9d60"
+  integrity sha512-tF6VGl+D2avCgn9U/2YLJ8qVmV6sPE/iEzVAFZuOSe6L0Pj7SQw4K6AO640QBob/d8VrqqJFHCb6l10amJOnXA==
+
+"@tiptap/extension-paragraph@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.12.tgz#922447b2aa1c7184787d351ceec593a74d24ed03"
+  integrity sha512-hoH/uWPX+KKnNAZagudlsrr4Xu57nusGekkJWBcrb5MCDE91BS+DN2xifuhwXiTHxnwOMVFjluc0bPzQbkArsw==
+
+"@tiptap/extension-placeholder@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.1.12.tgz#f6267a563d17a5ae8a04da32231eac8d8868519e"
+  integrity sha512-K52o7B1zkP4vaVy3z4ZwHn+tQy6KlXtedj1skLg+796ImwH2GYS5z6MFOTfKzBO2hLncUzLco/s0C5PLCD6SDw==
+
+"@tiptap/extension-strike@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.12.tgz#2b049aedf2985e9c9e3c3f1cc0b203a574c85bd8"
+  integrity sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==
+
+"@tiptap/extension-table-cell@^2.1.6":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.1.12.tgz#b13938d345065a3750610c66a81ea107edbbcea7"
+  integrity sha512-hextcfVTdwX8G7s8Q/V6LW2aUhGvPgu1dfV+kVVO42AFHxG+6PIkDOUuHphGajG3Nrs129bjMDWb8jphj38dUg==
+
+"@tiptap/extension-table-header@^2.1.6":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-header/-/extension-table-header-2.1.12.tgz#87ac2efa073a212c6114e0b137cf4afc3d75c35f"
+  integrity sha512-a4WZ5Z7gqQ/QlK8cK2d1ONYdma/J5+yH/0SNtQhkfELoS45GsLJh89OyKO0W0FnY6Mg0RoH1FsoBD+cqm0yazA==
+
+"@tiptap/extension-table-row@^2.1.6":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table-row/-/extension-table-row-2.1.12.tgz#27bee7d046b2bea4fe6bf46260e0d89305b75663"
+  integrity sha512-0kPr+zngQC1YQRcU6+Fl3CpIW/SdJhVJ5qOLpQleXrLPdjmZQd3Z1DXvOSDphYjXCowGPCxeUa++6bo7IoEMJw==
+
+"@tiptap/extension-table@^2.1.6":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-2.1.12.tgz#173cc4eac75c650b440dfcae433d3c74e78aa1bc"
+  integrity sha512-q/DuKZ4j1ycRfuFdb9rBJ3MglGNxlM2BQ1csScX/BrVIsAQI5B8sdzy1BrIlepQ6DRu4DCzHcKMI8u4/edUSWA==
+
+"@tiptap/extension-task-item@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.1.12.tgz#944eacf6f0ed1a430d807217d62b49ccef3956e1"
+  integrity sha512-uqrDTO4JwukZUt40GQdvB6S+oDhdp4cKNPMi0sbteWziQugkSMLlkYvxU0Hfb/YeziaWWwFI7ssPu/hahyk6dQ==
+
+"@tiptap/extension-task-list@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.1.12.tgz#adbfb5a5b990d6f189c776b45de2d2c5bb77e963"
+  integrity sha512-BUpYlEWK+Q3kw9KIiOqvhd0tUPhMcOf1+fJmCkluJok+okAxMbP1umAtCEQ3QkoCwLr+vpHJov7h3yi9+dwgeQ==
+
+"@tiptap/extension-text-style@^2.1.11":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.12.tgz#ec6a025fc6785246c9fcf78e34088759c1d2b213"
+  integrity sha512-nfjWXX0JSRHLcscfiMESh+RN+Z7bG8nio/C9+8yQASM90VxU9f8oKgF8HnnSYsSrD4lLf44Q6XjmB7aMVUuikg==
+
+"@tiptap/extension-text@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.12.tgz#466e3244bdd9b2db2304c0c9a1d51ce59f5327d0"
+  integrity sha512-rCNUd505p/PXwU9Jgxo4ZJv4A3cIBAyAqlx/dtcY6cjztCQuXJhuQILPhjGhBTOLEEL4kW2wQtqzCmb7O8i2jg==
+
+"@tiptap/extension-underline@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.1.12.tgz#abd59c4b6c8434dbadb4ff9bff23eefcc6bc095e"
+  integrity sha512-NwwdhFT8gDD0VUNLQx85yFBhP9a8qg8GPuxlGzAP/lPTV8Ubh3vSeQ5N9k2ZF/vHlEvnugzeVCbmYn7wf8vn1g==
+
+"@tiptap/pm@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.12.tgz#88a4b19be0eabb13d42ddd540c19ba1bbe74b322"
+  integrity sha512-Q3MXXQABG4CZBesSp82yV84uhJh/W0Gag6KPm2HRWPimSFELM09Z9/5WK9RItAYE0aLhe4Krnyiczn9AAa1tQQ==
   dependencies:
     prosemirror-changeset "^2.2.0"
     prosemirror-collab "^1.3.0"
@@ -2398,60 +2554,65 @@
     prosemirror-transform "^1.7.0"
     prosemirror-view "^1.28.2"
 
-"@tiptap/react@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.0.4.tgz#b879faeabd67859254d594eafe0f8232f5d78116"
-  integrity sha512-NcrZL4Tu3+1Xfj/us5AOD7+kJhwYo2XViOB2iRRnfwS80PUtiLWDis6o3ngMGot/jBWzaMn4gofXnMWHtFdIAw==
-  dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.4"
-    "@tiptap/extension-floating-menu" "^2.0.4"
-
-"@tiptap/starter-kit@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.4.tgz#20456eb4a4ae0ac8d5bf2ac5e9771b3c617c51a6"
-  integrity sha512-9WtVXhujyp5cOlE7qlcQMFr0FEx3Cvo1isvfQGzhKKPzXa3rR7FT8bnOFsten31/Ia/uwvGXAvRDQy24YfHdNA==
-  dependencies:
-    "@tiptap/core" "^2.0.4"
-    "@tiptap/extension-blockquote" "^2.0.4"
-    "@tiptap/extension-bold" "^2.0.4"
-    "@tiptap/extension-bullet-list" "^2.0.4"
-    "@tiptap/extension-code" "^2.0.4"
-    "@tiptap/extension-code-block" "^2.0.4"
-    "@tiptap/extension-document" "^2.0.4"
-    "@tiptap/extension-dropcursor" "^2.0.4"
-    "@tiptap/extension-gapcursor" "^2.0.4"
-    "@tiptap/extension-hard-break" "^2.0.4"
-    "@tiptap/extension-heading" "^2.0.4"
-    "@tiptap/extension-history" "^2.0.4"
-    "@tiptap/extension-horizontal-rule" "^2.0.4"
-    "@tiptap/extension-italic" "^2.0.4"
-    "@tiptap/extension-list-item" "^2.0.4"
-    "@tiptap/extension-ordered-list" "^2.0.4"
-    "@tiptap/extension-paragraph" "^2.0.4"
-    "@tiptap/extension-strike" "^2.0.4"
-    "@tiptap/extension-text" "^2.0.4"
-
-"@tiptap/suggestion@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.4.tgz#08e6c47a723200d02238d845cb09684c481f0066"
-  integrity sha512-C5LGGjH8VFET34V7vKkqlwpSzrPl+7oAcj9h+P3jvJQ076iYpmpnMtz6dNLSFGKpHp5mtyl4RoJzh7lTvlfyiA==
+"@tiptap/prosemirror-tables@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/prosemirror-tables/-/prosemirror-tables-1.1.4.tgz#e123978f13c9b5f980066ba660ec5df857755916"
+  integrity sha512-O2XnDhZV7xTHSFxMMl8Ei3UVeCxuMlbGYZ+J2QG8CzkK8mxDpBa66kFr5DdyAhvdi1ptpcH9u7/GMwItQpN4sA==
+
+"@tiptap/react@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.12.tgz#23566c7992b9642137171b282335e646922ae559"
+  integrity sha512-RMO4QmmpL7sPR7w8o1Wq0hrUe/ttHzsn5I/eWwqg1d3fGx5y9mOdfCoQ9XBtm49Xzdejy3QVzt4zYp9fX0X/xg==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.1.12"
+    "@tiptap/extension-floating-menu" "^2.1.12"
+
+"@tiptap/starter-kit@^2.1.10":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.12.tgz#2bf28091ed08dc8f7b903ba92925e4ffe06257ea"
+  integrity sha512-+RoP1rWV7rSCit2+3wl2bjvSRiePRJE/7YNKbvH8Faz/+AMO23AFegHoUFynR7U0ouGgYDljGkkj35e0asbSDA==
+  dependencies:
+    "@tiptap/core" "^2.1.12"
+    "@tiptap/extension-blockquote" "^2.1.12"
+    "@tiptap/extension-bold" "^2.1.12"
+    "@tiptap/extension-bullet-list" "^2.1.12"
+    "@tiptap/extension-code" "^2.1.12"
+    "@tiptap/extension-code-block" "^2.1.12"
+    "@tiptap/extension-document" "^2.1.12"
+    "@tiptap/extension-dropcursor" "^2.1.12"
+    "@tiptap/extension-gapcursor" "^2.1.12"
+    "@tiptap/extension-hard-break" "^2.1.12"
+    "@tiptap/extension-heading" "^2.1.12"
+    "@tiptap/extension-history" "^2.1.12"
+    "@tiptap/extension-horizontal-rule" "^2.1.12"
+    "@tiptap/extension-italic" "^2.1.12"
+    "@tiptap/extension-list-item" "^2.1.12"
+    "@tiptap/extension-ordered-list" "^2.1.12"
+    "@tiptap/extension-paragraph" "^2.1.12"
+    "@tiptap/extension-strike" "^2.1.12"
+    "@tiptap/extension-text" "^2.1.12"
+
+"@tiptap/suggestion@^2.0.4", "@tiptap/suggestion@^2.1.7":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.1.12.tgz#a13782d1e625ec03b3f61b6839ecc95b6b685d3f"
+  integrity sha512-rhlLWwVkOodBGRMK0mAmE34l2a+BqM2Y7q1ViuQRBhs/6sZ8d83O4hARHKVwqT5stY4i1l7d7PoemV3uAGI6+g==
 
 "@types/debug@^4.0.0":
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
-  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.10.tgz#f23148a6eb771a34c466a4fc28379d8101e84494"
+  integrity sha512-tOSCru6s732pofZ+sMv9o4o3Zc+Sa8l3bxd/tweTQudFn06vAzb13ZX46Zi6m6EJ+RUbRTHvgQJ1gBtSgkaUYA==
   dependencies:
     "@types/ms" "*"
 
 "@types/dom4@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
-  integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.3.tgz#bd084dbd4c15bee49442c5cd231acdcd14efbe90"
+  integrity sha512-xQT2XxtDGP1WFfTB/Lti629HpguNrfZ3dg84bWXASd6JUay6WgR73Wb6DG3kmr2/iGAWZ7NNLceGVWYWfgPX0g==
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
-  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.4.tgz#d9748f5742171b26218516cf1828b8eafaf8a9fa"
+  integrity sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -2467,29 +2628,36 @@
     "@types/node" "*"
 
 "@types/hast@^2.0.0":
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
-  integrity sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.7.tgz#5e9bd7ab4452d5313aeec9d38fbc193a70f8d810"
+  integrity sha512-EVLigw5zInURhzfXUM65eixfadfsHKomGKUakToXo84t8gGIJuTcD2xooM2See7GyQ7DRtYjhCHnSUQez8JaLw==
   dependencies:
     "@types/unist" "^2"
 
-"@types/hoist-non-react-statics@^3.3.0":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hast@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.2.tgz#e6c1126a33955cb9493a5074ddf1873fb48248c7"
+  integrity sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.4.tgz#cc477ce0283bb9d19ea0cbfa2941fe2c8493a1be"
+  integrity sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
 "@types/js-cookie@^3.0.2", "@types/js-cookie@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.3.tgz#d6bfbbdd0c187354ca555213d1962f6d0691ff4e"
-  integrity sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.5.tgz#5eba4033a4f17fb2b29d975892694315194eca33"
+  integrity sha512-dtLshqoiGRDHbHueIT9sjkd2F4tW1qPSX2xKAQK8p1e6pM+Z913GM1shv7dOqqasEMYbC5zEaClJomQe8OtQLA==
 
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
-  version "7.0.12"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
-  integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1"
+  integrity sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -2497,21 +2665,21 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/linkify-it@*":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
-  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.4.tgz#def6a9bb0ce78140860602f16ace37a9997f086a"
+  integrity sha512-hPpIeeHb/2UuCw06kSNAOVWgehBLXEo0/fUs0mw3W2qhqX89PI2yvok83MnuctYGCPrabGIoi0fFso4DQ+sNUQ==
 
 "@types/lodash.debounce@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
-  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.8.tgz#d5fe36a35aa57773e05d960b3e3c703fd9ffb8b3"
+  integrity sha512-REumepIJjQFSOaBUoj81U5ZzF9YIhovzE2Lm6ejUbycmwx597k2ivG1cVfPtAj4eVuSbGoZDkJR0sRIahsE6/Q==
   dependencies:
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.197"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.197.tgz#e95c5ddcc814ec3e84c891910a01e0c8a378c54b"
-  integrity sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==
+  version "4.14.200"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.200.tgz#435b6035c7eba9cdf1e039af8212c9e9281e7149"
+  integrity sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==
 
 "@types/markdown-it@^12.2.3":
   version "12.2.3"
@@ -2522,16 +2690,16 @@
     "@types/mdurl" "*"
 
 "@types/mdast@^3.0.0":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
-  integrity sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.14.tgz#0735473a5b35be032b9f2685b7413cbab1b8a639"
+  integrity sha512-gVZ04PGgw1qLZKsnWnyFv4ORnaJ+DXLdHTVSFbU8yX6xZ34Bjg4Q32yPkmveUP1yItXReKfB0Aknlh/3zxTKAw==
   dependencies:
     "@types/unist" "^2"
 
 "@types/mdurl@*":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
-  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.4.tgz#574bfbec51eb41ab5f444116c8555bc4347feba5"
+  integrity sha512-ARVxjAEX5TARFRzpDRVC6cEk0hUIXCCwaMhz8y7S1/PxU6zZS1UMjyobz7q4w/D/R552r4++EhwmXK1N2rAy0A==
 
 "@types/minimatch@*":
   version "5.1.2"
@@ -2539,14 +2707,16 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/ms@*":
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
-  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.33.tgz#80bf1da64b15f21fd8c1dc387c31929317d99ee9"
+  integrity sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==
 
-"@types/node@*":
-  version "20.5.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.0.tgz#7fc8636d5f1aaa3b21e6245e97d56b7f56702313"
-  integrity sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==
+"@types/node@*", "@types/node@^20.5.2":
+  version "20.8.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.10.tgz#a5448b895c753ae929c26ce85cab557c6d4a365e"
+  integrity sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==
+  dependencies:
+    undici-types "~5.26.4"
 
 "@types/node@18.0.6":
   version "18.0.6"
@@ -2558,50 +2728,48 @@
   resolved "https://registry.yarnpkg.com/@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"
+  integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==
+
 "@types/nprogress@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
-  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.2.tgz#c73bf540ac7926fb1b6d03f9d2725e07b3848d65"
+  integrity sha512-2wLrSJXLztGmr7wXwM0hA/wuIOY9DznVdd+ZFofHOiXcj9JnVt+2ZeLRJ7v5ZVlmheSkUOSg3Q3O4Ce7yji79A==
 
 "@types/object.omit@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.0.tgz#0d31e1208eac8fe2ad5c9499a1016a8273bbfafc"
-  integrity sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.2.tgz#13d23915cc16fa54b0d4cfbcb79840f4fe1474d9"
+  integrity sha512-BxWU36cMP+FKD3OLFluQaj2cBev2sx2LJaHELuphHwnleq+xnEhTmuYYYx4pOT/1U/ZoR6B+RdvxWh2FD6lGGA==
 
 "@types/object.pick@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.2.tgz#9eb28118240ad8f658b9c9c6caf35359fdb37150"
-  integrity sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.3.tgz#f4d4a76e9ef1161e965b963d2bb33c3f6c300125"
+  integrity sha512-qZqHmdGEALeSATMB1djT1S5szv6Wtpb7DKpHrt2XG4iyKlV7C2Xk8GmDXr1KXakOqUfX6ohw7ceruYt4NVmB1Q==
 
 "@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.1.tgz#27f7559836ad796cea31acb63163b203756a5b4e"
+  integrity sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng==
 
-"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.5":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.9":
+  version "15.7.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
+  integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
 
-"@types/react-beautiful-dnd@^13.1.2":
-  version "13.1.4"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.4.tgz#bcec72da719c18c0d8b4a7cb00e7fb443211d6d7"
-  integrity sha512-4bIBdzOr0aavN+88q3C7Pgz+xkb7tz3whORYrmSj77wfVEMfiWiooIwVWFR7KM2e+uGTe5BVrXqSfb0aHeflJA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-color@^3.0.6":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
-  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+"@types/react-color@^3.0.6", "@types/react-color@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.9.tgz#8dbb0d798f2979c3d7e2e26dd46321e80da950b4"
+  integrity sha512-Ojyc6jySSKvM6UYQrZxaYe0JZXtgHHXwR2q9H4MhcNCswFdeZH1owYZCvPtdHtMOfh7t8h1fY0Gd0nvU1JGDkQ==
   dependencies:
     "@types/react" "*"
     "@types/reactcss" "*"
 
 "@types/react-datepicker@^4.8.0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.0.tgz#24a9c03e79ab4b232b346edd006cfb6060b0fb43"
-  integrity sha512-kr10s8ex4+MmCJmzdhA9kfmoMQBmsW5uDYDlH+8f/PgStrp7rRaz23Y/cvTiMgvESVq8ujDh4SOo6jlSwEw13g==
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.19.1.tgz#c7102c015eb0f63b0f1707e34799d289408654be"
+  integrity sha512-HV52yjxuRi49psAVuHTFXXr+RSrCbIFDn9ayei0YH8xVVAXCO+5GwHAGKeREAmNbneweN0ySGoByr90yJCAnrQ==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/react" "*"
@@ -2615,75 +2783,40 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@18.0.6":
-  version "18.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
-  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@^18.0.6":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
-  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-is@^18.2.1":
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863"
-  integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==
+"@types/react-dom@18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.0.tgz#374f28074bb117f56f58c4f3f71753bebb545156"
+  integrity sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.25"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88"
-  integrity sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==
+"@types/react-dom@^18.2.14":
+  version "18.2.14"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.14.tgz#c01ba40e5bb57fc1dc41569bb3ccdb19eab1c539"
+  integrity sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==
   dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
 
-"@types/react-transition-group@^4.4.6":
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
-  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+"@types/react-transition-group@^4.4.8":
+  version "4.4.8"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.8.tgz#46f87d80512959cac793ecc610a93d80ef241ccf"
+  integrity sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.17":
-  version "18.2.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
-  integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.15":
-  version "18.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
-  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
+"@types/react@*", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.2.35", "@types/react@^18.2.5":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
+  integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/reactcss@*":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
-  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.8.tgz#8c2342f5f650cc5f9e8bea73199c17ba747b9126"
+  integrity sha512-IzxChTOxOFWZb1RhXoNZ7oEi3BtUdLQIFheoOurvu6iu0X9kwhoFe73DW9EVFxVFTKnd8bb8b1dKtO0tokM3eA==
   dependencies:
     "@types/react" "*"
 
@@ -2695,14 +2828,14 @@
     "@types/node" "*"
 
 "@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.5.tgz#4751153abbf8d6199babb345a52e1eb4167d64af"
+  integrity sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==
 
 "@types/semver@^7.3.12":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
-  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.4.tgz#0a41252ad431c473158b22f9bfb9a63df7541cff"
+  integrity sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==
 
 "@types/throttle-debounce@^2.1.0":
   version "2.1.0"
@@ -2710,14 +2843,24 @@
   integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
 
 "@types/trusted-types@^2.0.2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
-  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.5.tgz#5cac7e7df3275bb95f79594f192d97da3b4fd5fe"
+  integrity sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==
+
+"@types/unist@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.1.tgz#778652d02ddec1bfc9e5e938fec8d407b8e56cba"
+  integrity sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==
 
 "@types/unist@^2", "@types/unist@^2.0.0":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
-  integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.9.tgz#72e164381659a49557b0a078b28308f2c6a3e1ce"
+  integrity sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==
+
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
 "@types/uuid@^8.3.4":
   version "8.3.4"
@@ -2725,11 +2868,11 @@
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@types/uuid@^9.0.1":
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.2.tgz#ede1d1b1e451548d44919dc226253e32a6952c4b"
-  integrity sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ==
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.6.tgz#c91ae743d8344a54b2b0c691195f5ff5265f6dfb"
+  integrity sha512-BT2Krtx4xaO6iwzwMFUYvWBWkV2pr37zD68Vmp1CDV196MzczBRxuEpD6Pr395HAgebC/co7hOphs53r8V7jew==
 
-"@typescript-eslint/eslint-plugin@^5.48.2", "@typescript-eslint/eslint-plugin@^5.51.0":
+"@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"
   integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
@@ -2813,6 +2956,11 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2824,9 +2972,9 @@ acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.8.2, acorn@^8.9.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
-  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
 agent-base@6:
   version "6.0.2"
@@ -2921,7 +3069,7 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
-aria-query@^5.1.3:
+aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -2936,15 +3084,15 @@ array-buffer-byte-length@^1.0.0:
     call-bind "^1.0.2"
     is-array-buffer "^3.0.1"
 
-array-includes@^3.1.5, array-includes@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
-  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+array-includes@^3.1.5, array-includes@^3.1.6, array-includes@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     is-string "^1.0.7"
 
 array-union@^1.0.1:
@@ -2964,64 +3112,65 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
-array.prototype.findlastindex@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.2.tgz#bc229aef98f6bd0533a2bc61ff95209875526c9b"
-  integrity sha512-tb5thFFlUcp7NdNF6/MpDk/1r/4awWG1FIz3YqDf+/zJSTezBb+/5WViH41obXULHVpDzoiCLpJ/ZO9YbJMsdw==
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
+  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.1"
 
-array.prototype.flat@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
-  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+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==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
-  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1, 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==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
 array.prototype.tosorted@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
-  integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
+  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.1"
 
-arraybuffer.prototype.slice@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz#9b5ea3868a6eebc30273da577eb888381c0044bb"
-  integrity sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==
+arraybuffer.prototype.slice@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
+  integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
   dependencies:
     array-buffer-byte-length "^1.0.0"
     call-bind "^1.0.2"
     define-properties "^1.2.0"
+    es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
     is-array-buffer "^3.0.2"
     is-shared-array-buffer "^1.0.2"
 
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+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"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 astral-regex@^2.0.0:
   version "2.0.0"
@@ -3029,9 +3178,16 @@ astral-regex@^2.0.0:
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async@^3.2.3:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
-  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
+  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
+
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -3048,14 +3204,14 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
-autoprefixer@^10.4.13, autoprefixer@^10.4.7:
-  version "10.4.15"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530"
-  integrity sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==
+autoprefixer@^10.4.14, autoprefixer@^10.4.15:
+  version "10.4.16"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
+  integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
   dependencies:
     browserslist "^4.21.10"
-    caniuse-lite "^1.0.30001520"
-    fraction.js "^4.2.0"
+    caniuse-lite "^1.0.30001538"
+    fraction.js "^4.3.6"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
@@ -3065,21 +3221,21 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.6.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
-  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
 axios@^1.1.3, axios@^1.3.4:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
+  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@^3.1.1:
+axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
   integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
@@ -3110,29 +3266,29 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c"
-  integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==
+babel-plugin-polyfill-corejs2@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
+  integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==
   dependencies:
     "@babel/compat-data" "^7.22.6"
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz#b4f719d0ad9bb8e0c23e3e630c0c8ec6dd7a1c52"
-  integrity sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==
+babel-plugin-polyfill-corejs3@^0.8.5:
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz#25c2d20002da91fe328ff89095c85a391d6856cf"
+  integrity sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
-    core-js-compat "^3.31.0"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    core-js-compat "^3.33.1"
 
-babel-plugin-polyfill-regenerator@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326"
-  integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==
+babel-plugin-polyfill-regenerator@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5"
+  integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.2"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
 
 bail@^2.0.0:
   version "2.0.2"
@@ -3190,15 +3346,15 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.10, browserslist@^4.21.9:
-  version "4.21.10"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
-  integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
+browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
   dependencies:
-    caniuse-lite "^1.0.30001517"
-    electron-to-chromium "^1.4.477"
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
     node-releases "^2.0.13"
-    update-browserslist-db "^1.0.11"
+    update-browserslist-db "^1.0.13"
 
 buffer-from@^1.0.0:
   version "1.1.2"
@@ -3218,20 +3374,33 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
-busboy@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
-  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+bundle-require@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-3.1.2.tgz#1374a7bdcb8b330a7ccc862ccbf7c137cc43ad27"
+  integrity sha512-Of6l6JBAxiyQ5axFxUM6dYeP/W7X2Sozeo/4EYB9sJhL+dqL7TKjg+shwxp6jlu/6ZSERfsYtIpSJ1/x3XkAEA==
   dependencies:
-    streamsearch "^1.1.0"
+    load-tsconfig "^0.2.0"
 
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+bundle-require@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.0.2.tgz#65fc74ff14eabbba36d26c9a6161bd78fff6b29e"
+  integrity sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==
   dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
+    load-tsconfig "^0.2.3"
+
+cac@^6.7.12:
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
+
+call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
+  integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
+  dependencies:
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.1"
+    set-function-length "^1.1.1"
 
 callsites@^3.0.0:
   version "3.1.0"
@@ -3251,10 +3420,10 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001520"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006"
-  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+  version "1.0.30001561"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz#752f21f56f96f1b1a52e97aae98c57c562d5d9da"
+  integrity sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -3318,7 +3487,7 @@ character-entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
-chokidar@^3.5.3:
+chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3338,6 +3507,13 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
@@ -3350,16 +3526,21 @@ clean-webpack-plugin@^4.0.0:
   dependencies:
     del "^4.1.1"
 
-client-only@0.0.1, 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"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.0.0:
+clsx@2.0.0, clsx@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+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==
+
 cmdk@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
@@ -3459,27 +3640,27 @@ constant-case@^3.0.4:
     tslib "^2.0.3"
     upper-case "^2.0.2"
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+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"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
-cookie@^0.4.1:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+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"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
 cookie@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-core-js-compat@^3.31.0:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.0.tgz#f41574b6893ab15ddb0ac1693681bd56c8550a90"
-  integrity sha512-7a9a3D1k4UCVKnLhrgALyFcP7YCsLOQIxPd0dKjf/6GuPcgyiGP70ewWdCGrSK7evyhymi0qO4EqCmSJofDeYw==
+core-js-compat@^3.31.0, core-js-compat@^3.33.1:
+  version "3.33.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.2.tgz#3ea4563bfd015ad4e4b52442865b02c62aba5085"
+  integrity sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
   dependencies:
-    browserslist "^4.21.9"
+    browserslist "^4.22.1"
 
 cosmiconfig@^7.0.0:
   version "7.1.0"
@@ -3497,7 +3678,7 @@ crelt@^1.0.0:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
-cross-spawn@^7.0.2:
+cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3511,7 +3692,7 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -3646,7 +3827,7 @@ date-fns@^2.0.1, date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3701,11 +3882,21 @@ deepmerge@^4.2.2, deepmerge@^4.3.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
-  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
+define-data-property@^1.0.1, define-data-property@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
+  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
+define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
   dependencies:
+    define-data-property "^1.0.1"
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
@@ -3747,6 +3938,13 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/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"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -3821,10 +4019,10 @@ ejs@^3.1.6:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.477:
-  version "1.4.490"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.490.tgz#d99286f6e915667fa18ea4554def1aa60eb4d5f1"
-  integrity sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==
+electron-to-chromium@^1.4.535:
+  version "1.4.576"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.576.tgz#0c6940fdc0d60f7e34bd742b29d8fa847c9294d1"
+  integrity sha512-yXsZyXJfAqzWk1WKryr0Wl0MN2D47xodPvEEwlVePBnhU5E7raevLQR+E6b9JAD3GfL/7MbAL9ZtWQQPcLx7wA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3876,26 +4074,26 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
-  integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
+es-abstract@^1.22.1:
+  version "1.22.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
+  integrity sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==
   dependencies:
     array-buffer-byte-length "^1.0.0"
-    arraybuffer.prototype.slice "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.2"
     available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    call-bind "^1.0.5"
     es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.5"
-    get-intrinsic "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.2"
     get-symbol-description "^1.0.0"
     globalthis "^1.0.3"
     gopd "^1.0.1"
-    has "^1.0.3"
     has-property-descriptors "^1.0.0"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
     internal-slot "^1.0.5"
     is-array-buffer "^3.0.2"
     is-callable "^1.2.7"
@@ -3903,39 +4101,59 @@ es-abstract@^1.19.0, es-abstract@^1.20.4, es-abstract@^1.21.2:
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
-    is-typed-array "^1.1.10"
+    is-typed-array "^1.1.12"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.3"
+    object-inspect "^1.13.1"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.0"
-    safe-array-concat "^1.0.0"
+    regexp.prototype.flags "^1.5.1"
+    safe-array-concat "^1.0.1"
     safe-regex-test "^1.0.0"
-    string.prototype.trim "^1.2.7"
-    string.prototype.trimend "^1.0.6"
-    string.prototype.trimstart "^1.0.6"
+    string.prototype.trim "^1.2.8"
+    string.prototype.trimend "^1.0.7"
+    string.prototype.trimstart "^1.0.7"
     typed-array-buffer "^1.0.0"
     typed-array-byte-length "^1.0.0"
     typed-array-byte-offset "^1.0.0"
     typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.10"
+    which-typed-array "^1.1.13"
+
+es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
+  integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.0.1"
 
 es-set-tostringtag@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
-  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz#11f7cc9f63376930a5f20be4915834f4bc74f9c9"
+  integrity sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==
   dependencies:
-    get-intrinsic "^1.1.3"
-    has "^1.0.3"
+    get-intrinsic "^1.2.2"
     has-tostringtag "^1.0.0"
+    hasown "^2.0.0"
 
 es-shim-unscopables@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
-  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  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==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -3946,6 +4164,161 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
+
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
+
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
+
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
+
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
+
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
+
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
+
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
+
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
+
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
+
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
+
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
+
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
+
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
+
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
+
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
+
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
+
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
+
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
+
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
+
+esbuild@^0.14.25:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
+
+esbuild@^0.18.2:
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
+  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-x64" "0.18.20"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -4006,19 +4379,34 @@ eslint-config-next@13.2.1:
     eslint-plugin-react "^7.31.7"
     eslint-plugin-react-hooks "^4.5.0"
 
+eslint-config-next@13.2.4:
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.2.4.tgz#8aa4d42da3a575a814634ba9c88c8d25266c5fdd"
+  integrity sha512-lunIBhsoeqw6/Lfkd6zPt25w1bn0znLA/JCL+au1HoEpSb4/PpsOYsYtgV/q+YPsoKIOzFyU5xnb04iZnXjUvg==
+  dependencies:
+    "@next/eslint-plugin-next" "13.2.4"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
 eslint-config-prettier@^8.3.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
   integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
 
 eslint-config-turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.12.tgz#5868252d6833dd2b5cab4414751ed31ebe2177c3"
-  integrity sha512-z3jfh+D7UGYlzMWGh+Kqz++hf8LOE96q3o5R8X4HTjmxaBWlLAWG+0Ounr38h+JLR2TJno0hU9zfzoPNkR9BdA==
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.10.16.tgz#175cabd8eb1ec5fb8e254abcb09df3955fe476a1"
+  integrity sha512-O3NQI72bQHV7FvSC6lWj66EGx8drJJjuT1kuInn6nbMLOHdMBhSUX/8uhTAlHRQdlxZk2j9HtgFCIzSc93w42g==
   dependencies:
-    eslint-plugin-turbo "1.10.12"
+    eslint-plugin-turbo "1.10.16"
 
-eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.7:
+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"
   integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
@@ -4039,9 +4427,9 @@ eslint-import-resolver-typescript@^2.7.1:
     tsconfig-paths "^3.14.1"
 
 eslint-import-resolver-typescript@^3.5.2:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.0.tgz#36f93e1eb65a635e688e16cae4bead54552e3bbd"
-  integrity sha512-QTHR9ddNnn35RTxlaEnx2gCxqFlF2SEN0SE2d17SqwyM7YOSI2GHWRYp5BiRkObTUNYPupC/3Fq2a0PpT+EKpg==
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
   dependencies:
     debug "^4.3.4"
     enhanced-resolve "^5.12.0"
@@ -4059,50 +4447,49 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.0.tgz#8d66d6925117b06c4018d491ae84469eb3cb1005"
-  integrity sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==
-  dependencies:
-    array-includes "^3.1.6"
-    array.prototype.findlastindex "^1.2.2"
-    array.prototype.flat "^1.3.1"
-    array.prototype.flatmap "^1.3.1"
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155"
+  integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.7"
+    eslint-import-resolver-node "^0.3.9"
     eslint-module-utils "^2.8.0"
-    has "^1.0.3"
-    is-core-module "^2.12.1"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.fromentries "^2.0.6"
-    object.groupby "^1.0.0"
-    object.values "^1.1.6"
-    resolve "^1.22.3"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
     semver "^6.3.1"
     tsconfig-paths "^3.14.2"
 
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
-  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
-  dependencies:
-    "@babel/runtime" "^7.20.7"
-    aria-query "^5.1.3"
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.6.2"
-    axobject-query "^3.1.1"
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    has "^1.0.3"
-    jsx-ast-utils "^3.3.3"
-    language-tags "=1.0.5"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
     minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    semver "^6.3.0"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
 
 eslint-plugin-react-hooks@^4.5.0:
   version "4.6.0"
@@ -4130,14 +4517,15 @@ eslint-plugin-react@7.31.8:
     string.prototype.matchall "^4.0.7"
 
 eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
-  version "7.33.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.1.tgz#bc27cccf860ae45413a4a4150bf0977345c1ceab"
-  integrity sha512-L093k0WAMvr6VhNwReB8VgOq5s2LesZmrpPdKz/kZElQDzqS7G7+DnKoqT+w4JwuiGeAhAvHO0fvy0Eyk4ejDA==
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
     array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.12"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
@@ -4150,10 +4538,10 @@ eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-turbo@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.12.tgz#3f95884faf35b56e0855d939585fa6cd457bb128"
-  integrity sha512-uNbdj+ohZaYo4tFJ6dStRXu2FZigwulR1b3URPXe0Q8YaE7thuekKNP+54CHtZPH9Zey9dmDx5btAQl9mfzGOw==
+eslint-plugin-turbo@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.16.tgz#368723f2140617f273c60f65b09267f73b496cd9"
+  integrity sha512-ZjrR88MTN64PNGufSEcM0tf+V1xFYVbeiMeuIqr0aiABGomxFLo4DBkQ7WI4WzkZtWQSIA2sP+yxqSboEfL9MQ==
   dependencies:
     dotenv "16.0.3"
 
@@ -4247,6 +4635,52 @@ eslint@8.34.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
+eslint@8.36.0:
+  version "8.36.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf"
+  integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.1"
+    "@eslint/js" "8.36.0"
+    "@humanwhocodes/config-array" "^0.11.8"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.5.0"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
 eslint@^7.23.0, eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
@@ -4294,17 +4728,18 @@ eslint@^7.23.0, eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.31.0:
-  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
-  integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
+  version "8.53.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.53.0.tgz#14f2c8244298fcae1f46945459577413ba2697ce"
+  integrity sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "^8.47.0"
-    "@humanwhocodes/config-array" "^0.11.10"
+    "@eslint/eslintrc" "^2.1.3"
+    "@eslint/js" "8.53.0"
+    "@humanwhocodes/config-array" "^0.11.13"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -4345,7 +4780,7 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-espree@^9.4.0, espree@^9.6.0, espree@^9.6.1:
+espree@^9.4.0, espree@^9.5.0, espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -4398,6 +4833,26 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventsource-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/eventsource-parser/-/eventsource-parser-0.1.0.tgz#4a6b84751ca8e704040e6f7f50e7d77344fa1b7c"
+  integrity sha512-M9QjFtEIkwytUarnx113HGmgtk52LSn3jNAtnWKi3V+b9rqSfQeVdLsaD5AG/O4IrGQwmAAHBIsqbmURPTd2rA==
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.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"
@@ -4414,11 +4869,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-fifo@^1.1.0, fast-fifo@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.0.tgz#03e381bcbfb29932d7c3afde6e15e83e05ab4d8b"
-  integrity sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/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.1:
+fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -4458,7 +4913,15 @@ file-entry-cache@^6.0.1:
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
   integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
-    flat-cache "^3.0.4"
+    flat-cache "^3.0.4"
+
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
 
 file-selector@^0.6.0:
   version "0.6.0"
@@ -4512,22 +4975,23 @@ find-up@^5.0.0:
     path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.1.tgz#a02a15fdec25a8f844ff7cc658f03dd99eb4609b"
+  integrity sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==
   dependencies:
-    flatted "^3.1.0"
+    flatted "^3.2.9"
+    keyv "^4.5.3"
     rimraf "^3.0.2"
 
-flatted@^3.1.0:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
-  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+flatted@^3.2.9:
+  version "3.2.9"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
+  integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 follow-redirects@^1.15.0:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -4550,10 +5014,10 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
-fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+fraction.js@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 framework-utils@^1.1.0:
   version "1.1.0"
@@ -4581,31 +5045,31 @@ fs.realpath@^1.0.0:
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
-  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+function.prototype.name@^1.1.5, 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==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
-functions-have-names@^1.2.2, functions-have-names@^1.2.3:
+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"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -4616,22 +5080,22 @@ gensync@^1.0.0-beta.2:
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
 gesto@^1.19.0, gesto@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.19.1.tgz#b2a29730663eecf77b248982bbff929e79d4a461"
-  integrity sha512-ofWVEdqmnpFm3AFf7aoclhoayseb3OkwSiXbXusKYu/99iN5HgeWP+SWqdghQ5TFlOgP5Zlz+6SY8mP2V0kFaQ==
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.19.2.tgz#1f5ab5cf49bd5a1ec2ee3805f35e77161343ea7b"
+  integrity sha512-i6OGsrR2GN7n2dQaUhY+LZ+AAZgBNg5/1kest/ST5VRRflfVl5bSfvOkJMDmKEUrGbKF6eIDkFz/DnCXJD4UMA==
   dependencies:
     "@daybrush/utils" "^1.13.0"
     "@scena/event-emitter" "^1.0.2"
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
-  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
+  integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
   dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    function-bind "^1.1.2"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
+    hasown "^2.0.0"
 
 get-nonce@^1.0.0:
   version "1.0.1"
@@ -4643,6 +5107,11 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-symbol-description@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
@@ -4652,9 +5121,9 @@ get-symbol-description@^1.0.0:
     get-intrinsic "^1.1.1"
 
 get-tsconfig@^4.5.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.0.tgz#06ce112a1463e93196aa90320c35df5039147e34"
-  integrity sha512-pmjiZ7xtB8URYm74PlGJozDNyhvsVLUcpBa8DZBG3bWHwaHa9bPiRpiSfovw+fjhwONSCWKRyk+JQHEGZmMrzw==
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
@@ -4677,11 +5146,6 @@ glob-parent@^6.0.2:
   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"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -4735,9 +5199,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
-  version "13.21.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.21.0.tgz#163aae12f34ef502f5153cfbdd3600f36c63c571"
-  integrity sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==
+  version "13.23.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
+  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
   dependencies:
     type-fest "^0.20.2"
 
@@ -4748,7 +5212,7 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.4, globby@^11.1.0:
+globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -4778,7 +5242,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -4814,11 +5278,11 @@ has-flag@^4.0.0:
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 has-property-descriptors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
-  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz#52ba30b6c5ec87fd89fa574bc1c39125c6f65340"
+  integrity sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==
   dependencies:
-    get-intrinsic "^1.1.1"
+    get-intrinsic "^1.2.2"
 
 has-proto@^1.0.1:
   version "1.0.1"
@@ -4837,12 +5301,12 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
   dependencies:
-    function-bind "^1.1.1"
+    function-bind "^1.1.2"
 
 hast-util-whitespace@^2.0.0:
   version "2.0.1"
@@ -4857,7 +5321,12 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-highlight.js@^11.8.0, highlight.js@~11.8.0:
+highlight.js@^11.8.0, highlight.js@~11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
+highlight.js@~11.8.0:
   version "11.8.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
   integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
@@ -4877,6 +5346,11 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
 idb@^7.0.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@@ -4938,13 +5412,13 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-internal-slot@^1.0.3, internal-slot@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
-  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+internal-slot@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
+  integrity sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==
   dependencies:
-    get-intrinsic "^1.2.0"
-    has "^1.0.3"
+    get-intrinsic "^1.2.2"
+    hasown "^2.0.0"
     side-channel "^1.0.4"
 
 internmap@^1.0.0:
@@ -4986,6 +5460,13 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/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==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -5018,14 +5499,14 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.11.0, is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.9.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
-  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
   dependencies:
-    has "^1.0.3"
+    hasown "^2.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, 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==
@@ -5044,11 +5525,25 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
 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"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-function@^1.0.10:
+  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==
+  dependencies:
+    has-tostringtag "^1.0.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"
@@ -5056,6 +5551,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -5139,6 +5639,11 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -5165,13 +5670,18 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
   integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
   dependencies:
     which-typed-array "^1.1.11"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -5179,6 +5689,14 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -5194,6 +5712,17 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  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"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -5222,10 +5751,15 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.1.tgz#fa99e4b76a23053e0e7cde098efe1704a14c16f1"
-  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
+joycon@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
 js-cookie@^3.0.1:
   version "3.0.5"
@@ -5267,6 +5801,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -5299,7 +5838,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5318,7 +5857,7 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
+"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"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
@@ -5328,6 +5867,13 @@ jsonpointer@^5.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+jsx-dom-cjs@^8.0.3:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/jsx-dom-cjs/-/jsx-dom-cjs-8.0.7.tgz#098c54680ebf5bb6f6d12cdea5cde3799c172212"
+  integrity sha512-dQWnuQ+bTm7o72ZlJU4glzeMX8KLxx5U+ZwmEAzVP1+roL7BSM0MrkWdHjdsuNgmxobZCJ+qgiot9EgbJPOoEg==
+  dependencies:
+    csstype "^3.1.2"
+
 keycode@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.1.tgz#09c23b2be0611d26117ea2501c2c391a01f39eff"
@@ -5343,22 +5889,29 @@ keycon@^1.2.0:
     "@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"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 kleur@^4.0.3:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-language-subtag-registry@~0.3.2:
+language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@=1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
-    language-subtag-registry "~0.3.2"
+    language-subtag-registry "^0.3.20"
 
 leven@^3.1.0:
   version "3.1.0"
@@ -5402,6 +5955,11 @@ linkifyjs@^4.1.0:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.1.tgz#73d427e3bbaaf4ca8e71c589ad4ffda11a9a5fde"
   integrity sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==
 
+load-tsconfig@^0.2.0, load-tsconfig@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
+  integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
+
 loader-utils@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -5495,6 +6053,15 @@ lowlight@^2.9.0:
     fault "^2.0.0"
     highlight.js "~11.8.0"
 
+lowlight@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.1.0.tgz#aa394c5f3a7689fce35fa49a7c850ba3ead4f590"
+  integrity sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    highlight.js "~11.9.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -5509,16 +6076,21 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lru_map@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
-  integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
+lucide-react@^0.244.0:
+  version "0.244.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b"
+  integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==
 
 lucide-react@^0.263.1:
   version "0.263.1"
   resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.263.1.tgz#a456ee0d171aa373929bd3ee20d6f9fb4429c301"
   integrity sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw==
 
+lucide-react@^0.274.0:
+  version "0.274.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.274.0.tgz#d3b54dcb972b12f1292061448d61d422ef2e269d"
+  integrity sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -5551,9 +6123,9 @@ markdown-it-task-lists@^2.1.1:
   integrity sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==
 
 markdown-it@^13.0.1:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
-  integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.2.tgz#1bc22e23379a6952e5d56217fbed881e0c94d536"
+  integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==
   dependencies:
     argparse "^2.0.1"
     entities "~3.0.1"
@@ -5619,10 +6191,10 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -5841,13 +6413,18 @@ mime-db@1.52.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12:
+mime-types@^2.1.12, mime-types@^2.1.27:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/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"
@@ -5885,16 +6462,16 @@ mkdirp@^0.5.5:
     minimist "^1.2.6"
 
 mobx-react-lite@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.3.tgz#f7aa5ac3be558ca19a53b2929d9599679769c2a8"
-  integrity sha512-wEE1oT5zvDdvplG4HnRrFgPwg5GFVVrEtl42Er85k23zeu3om8H8wbDPgdbQP88zAihVsik6xJfw6VnzUl8fQw==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
+  integrity sha512-StfB2wxE8imKj1f6T8WWPf4lVMx3cYH9Iy60bbKXEs21+HQ4tvvfIBZfSmMXgQAefi8xYEwQIz4GN9s0d2h7dg==
   dependencies:
     use-sync-external-store "^1.2.0"
 
 mobx@^6.10.0:
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.10.0.tgz#3537680fe98d45232cc19cc8f76280bd8bb6b0b7"
-  integrity sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww==
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.10.2.tgz#96e123deef140750360ca9a5b02a8b91fbffd4d9"
+  integrity sha512-B1UGC3ieK3boCjnMEcZSwxqRDMdzX65H/8zOHbuTY8ZhvrIjTUoLRR2TP2bPqIgYRfb3+dUigu8yMZufNjn0LQ==
 
 mri@^1.1.0:
   version "1.2.0"
@@ -5921,9 +6498,9 @@ mz@^2.7.0:
     thenify-all "^1.0.0"
 
 nanoid@^3.3.4, nanoid@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
-  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 napi-build-utils@^1.0.1:
   version "1.0.2"
@@ -5940,6 +6517,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-images@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/next-images/-/next-images-1.8.5.tgz#2eb5535bb1d6c58a5c4e03bc3be6c72c8a053a45"
+  integrity sha512-YLBERp92v+Nu2EVxI9+wa32KRuxyxTC8ItbiHUWVPlatUoTl0yRqsNtP39c2vYv27VRvY4LlYcUGjNRBSMUIZA==
+  dependencies:
+    file-loader "^6.2.0"
+    url-loader "^4.1.0"
+
 next-pwa@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4"
@@ -5983,30 +6568,6 @@ next@12.3.2:
     "@next/swc-win32-ia32-msvc" "12.3.2"
     "@next/swc-win32-x64-msvc" "12.3.2"
 
-next@^13.4.16:
-  version "13.4.16"
-  resolved "https://registry.yarnpkg.com/next/-/next-13.4.16.tgz#327ef6885b22161ed001cd5943c20b5e409a9406"
-  integrity sha512-1xaA/5DrfpPu0eV31Iro7JfPeqO8uxQWb1zYNTe+KDKdzqkAGapLcDYHMLNKXKB7lHjZ7LfKUOf9dyuzcibrhA==
-  dependencies:
-    "@next/env" "13.4.16"
-    "@swc/helpers" "0.5.1"
-    busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
-    postcss "8.4.14"
-    styled-jsx "5.1.1"
-    watchpack "2.4.0"
-    zod "3.21.4"
-  optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.16"
-    "@next/swc-darwin-x64" "13.4.16"
-    "@next/swc-linux-arm64-gnu" "13.4.16"
-    "@next/swc-linux-arm64-musl" "13.4.16"
-    "@next/swc-linux-x64-gnu" "13.4.16"
-    "@next/swc-linux-x64-musl" "13.4.16"
-    "@next/swc-win32-arm64-msvc" "13.4.16"
-    "@next/swc-win32-ia32-msvc" "13.4.16"
-    "@next/swc-win32-x64-msvc" "13.4.16"
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -6016,9 +6577,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.45.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.45.0.tgz#f568f163a3bfca5aacfce1fbeee1fa2cc98441f5"
-  integrity sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==
+  version "3.51.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.51.0.tgz#970bf595ef5a26a271307f8a4befa02823d4e87d"
+  integrity sha512-SQkEP4hmNWjlniS5zdnfIXTk1x7Ome85RDzHlTbBtzE97Gfwz/Ipw4v/Ryk20DWIy3yCNVLVlGKApCnmvYoJbA==
   dependencies:
     semver "^7.3.5"
 
@@ -6028,9 +6589,9 @@ node-addon-api@^6.1.0:
   integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
 
 node-fetch@^2.6.7:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
-  integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
   dependencies:
     whatwg-url "^5.0.0"
 
@@ -6054,6 +6615,13 @@ normalize.css@^8.0.1:
   resolved "https://registry.yarnpkg.com/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"
+  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"
@@ -6069,10 +6637,10 @@ object-hash@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.12.3, object-inspect@^1.9.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+object-inspect@^1.13.1, object-inspect@^1.9.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
 object-is@^1.0.1:
   version "1.1.5"
@@ -6097,41 +6665,41 @@ object.assign@^4.1.4:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.5, object.entries@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
-  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+object.entries@^1.1.5, object.entries@^1.1.6, object.entries@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-object.fromentries@^2.0.5, object.fromentries@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
-  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
+object.fromentries@^2.0.5, object.fromentries@^2.0.6, object.fromentries@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-object.groupby@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.0.tgz#cb29259cf90f37e7bac6437686c1ea8c916d12a9"
-  integrity sha512-70MWG6NfRH9GnbZOikuhPPYzpUpof9iW2J9E4dW7FXTqPNb6rllE6u39SKwwiNh8lCwX3DDb5OgcKGiEBrTTyw==
+object.groupby@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
+  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
-    es-abstract "^1.21.2"
+    es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
 
 object.hasown@^1.1.1, object.hasown@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
-  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
+  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
   dependencies:
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.omit@^3.0.0:
   version "3.0.0"
@@ -6147,14 +6715,14 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.5, object.values@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
-  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+object.values@^1.1.5, object.values@^1.1.6, object.values@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
+  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
@@ -6163,6 +6731,13 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 optionator@^0.9.1, optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
@@ -6281,7 +6856,7 @@ path-is-inside@^1.0.2:
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
 
-path-key@^3.1.0:
+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"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -6361,6 +6936,14 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
+postcss-load-config@^3.0.1:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
+
 postcss-load-config@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
@@ -6406,10 +6989,10 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.23:
-  version "8.4.27"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.27.tgz#234d7e4b72e34ba5a92c29636734349e0d9c3057"
-  integrity sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
+postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.29:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -6438,15 +7021,25 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.8.7:
+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"
+  integrity sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==
+
+prettier-plugin-tailwindcss@^0.5.4:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.6.tgz#8e511857a49bf127f078985f52b04a70e8e92285"
+  integrity sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==
+
+prettier@^2.8.7, prettier@^2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 prettier@latest:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.1.tgz#65271fc9320ce4913c57747a70ce635b30beaa40"
-  integrity sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
@@ -6468,9 +7061,9 @@ prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2,
     react-is "^16.13.1"
 
 property-information@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
-  integrity sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.4.0.tgz#6bc4c618b0c2d68b3bb8b552cbb97f8e300a0f82"
+  integrity sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==
 
 prosemirror-changeset@^2.2.0:
   version "2.2.1"
@@ -6549,23 +7142,16 @@ prosemirror-markdown@^1.10.1, prosemirror-markdown@^1.11.1:
     prosemirror-model "^1.0.0"
 
 prosemirror-menu@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.2.tgz#c545a2de0b8cb79babc07682b1d93de0f273aa33"
-  integrity sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
   dependencies:
     crelt "^1.0.0"
     prosemirror-commands "^1.0.0"
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
-  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
-  dependencies:
-    orderedmap "^2.0.0"
-
-prosemirror-model@^1.19.0:
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.19.3"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
   integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
@@ -6618,16 +7204,16 @@ prosemirror-trailing-node@^2.0.2:
     escape-string-regexp "^4.0.0"
 
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0, prosemirror-transform@^1.7.3:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.4.tgz#ea878c90563f3586064dd5ccf6cabb50b2753fd9"
-  integrity sha512-GO38mvqJ2yeI0BbL5E1CdHcly032Dlfn9nHqlnCHqlNf9e9jZwJixxp6VRtOeDZ1uTDpDIziezMKbA41LpAx3A==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz#a47c64a3c373c1bd0ff46e95be3210c8dda0cd11"
+  integrity sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==
   dependencies:
     prosemirror-model "^1.0.0"
 
 prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.28.2, prosemirror-view@^1.31.0:
-  version "1.31.7"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.31.7.tgz#dccb2879314e1e1a24d48044c15374754e50ef00"
-  integrity sha512-Pr7w93yOYmxQwzGIRSaNLZ/1uM6YjnenASzN2H6fO6kGekuzRbgZ/4bHbBTd1u4sIQmL33/TcGmzxxidyPwCjg==
+  version "1.32.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.32.3.tgz#9019151211f685e553f681837435cae4885beece"
+  integrity sha512-tP7AUTxisM0m3PDxs6vDWgTjgcbFo4fnwg2M/5NHlgMqUJgBNOqSUZETBZKmLD7AxGN3GZ5yqEzQv9r9VCZKrg==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
@@ -6647,9 +7233,9 @@ pump@^3.0.0:
     once "^1.3.1"
 
 punycode@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
-  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -6661,7 +7247,7 @@ queue-tick@^1.0.1:
   resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142"
   integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -6683,19 +7269,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-beautiful-dnd@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-color@^2.19.3:
   version "2.19.3"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
@@ -6718,15 +7291,15 @@ react-css-styled@^1.1.9:
     framework-utils "^1.1.0"
 
 react-datepicker@^4.8.0:
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.16.0.tgz#b9dd389bb5611a1acc514bba1dd944be21dd877f"
-  integrity sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.21.0.tgz#09b2ba3e53654a8563b22c9f649835716c8456d3"
+  integrity sha512-z0DtuRrKMz9i7dcTusW29VacbM9pn08g1yw0cG+Y5GpodJDxSWv7zUMxl3IwKN9Ap/AMphiepvmT5P+iNCgEiA==
   dependencies:
     "@popperjs/core" "^2.11.8"
     classnames "^2.2.6"
     date-fns "^2.30.0"
     prop-types "^15.7.2"
-    react-onclickoutside "^6.12.2"
+    react-onclickoutside "^6.13.0"
     react-popper "^2.3.0"
 
 react-dom@18.2.0, react-dom@^18.2.0:
@@ -6752,20 +7325,15 @@ react-fast-compare@^3.0.1:
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
 react-hook-form@^7.38.0:
-  version "7.45.4"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.4.tgz#73d228b704026ae95d7e5f7b207a681b173ec62a"
-  integrity sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==
+  version "7.48.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
+  integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
 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"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -6797,10 +7365,10 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-react-moveable@^0.54.1:
-  version "0.54.1"
-  resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.54.1.tgz#3c69748c444184700e6999501b0da953c934205e"
-  integrity sha512-Kj2ifw9nk3LZvu7ezhst8Z5WBPRr+yVv9oROwrBirFlHmwGHHZXUGk5Gaezu+JGqqNRsQJncVMW5Uf68KSSOvg==
+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==
   dependencies:
     "@daybrush/utils" "^1.13.0"
     "@egjs/agent" "^2.2.1"
@@ -6816,7 +7384,7 @@ react-moveable@^0.54.1:
     react-css-styled "^1.1.9"
     react-selecto "^1.25.0"
 
-react-onclickoutside@^6.12.2:
+react-onclickoutside@^6.13.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"
   integrity sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==
@@ -6842,17 +7410,17 @@ react-popper@^2.2.5, react-popper@^2.3.0:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-redux@^7.2.0:
-  version "7.2.9"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
-  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+react-redux@^8.1.1:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
+  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
   dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
     hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
 
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
@@ -6936,17 +7504,29 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+reflect.getprototypeof@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 regenerate-unicode-properties@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
-  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
+  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
   dependencies:
     regenerate "^1.4.2"
 
@@ -6967,14 +7547,14 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb"
-  integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
+  integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
-    functions-have-names "^1.2.3"
+    set-function-name "^2.0.0"
 
 regexpp@^3.1.0, regexpp@^3.2.0:
   version "3.2.0"
@@ -7029,26 +7609,31 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/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"
+  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"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4:
-  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
-  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.0, resolve@^1.22.2, resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/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@^2.0.0-next.3, resolve@^2.0.0-next.4:
-  version "2.0.0-next.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
-  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
   dependencies:
-    is-core-module "^2.9.0"
+    is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -7088,13 +7673,20 @@ rollup@2.78.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^2.43.1:
+rollup@^2.43.1, rollup@^2.74.1:
   version "2.79.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^3.2.5:
+  version "3.29.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
+  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  optionalDependencies:
+    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"
@@ -7114,13 +7706,13 @@ sade@^1.7.3:
   dependencies:
     mri "^1.1.0"
 
-safe-array-concat@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.0.tgz#2064223cba3c08d2ee05148eedbc563cd6d84060"
-  integrity sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==
+safe-array-concat@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
+  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.2.0"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
@@ -7154,7 +7746,7 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -7214,10 +7806,29 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+set-function-length@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
+  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+  dependencies:
+    define-data-property "^1.1.1"
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
+set-function-name@^2.0.0, set-function-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
+  integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+  dependencies:
+    define-data-property "^1.0.1"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.0"
+
 sharp@^0.32.1:
-  version "0.32.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.4.tgz#0354653b7924f2520b2264ac9bcd10a58bf411b6"
-  integrity sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==
+  version "0.32.6"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
+  integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
   dependencies:
     color "^4.2.3"
     detect-libc "^2.0.2"
@@ -7249,6 +7860,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 simple-concat@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
@@ -7292,11 +7908,6 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-sonner@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/sonner/-/sonner-0.6.2.tgz#d87420e80d8b25b6d2bd6aabcc28465f03962bdc"
-  integrity sha512-bh4FWhYoNN481ZIW94W4e0kSLBTMGislYg2YXvDS1px1AJJz4erQe9jHV8s5pS1VMVDgfh3CslNSFLaU6Ldrnw==
-
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -7315,6 +7926,13 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map@0.8.0-beta.0, 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"
+  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"
@@ -7325,13 +7943,6 @@ source-map@^0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-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"
-  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
-  dependencies:
-    whatwg-url "^7.0.0"
-
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -7354,15 +7965,10 @@ stacktrace-parser@^0.1.10:
   dependencies:
     type-fest "^0.7.1"
 
-streamsearch@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
-  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
-
 streamx@^2.15.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.1.tgz#396ad286d8bc3eeef8f5cea3f029e81237c024c6"
-  integrity sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==
+  version "2.15.2"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.2.tgz#680eacebdc9c43ede7362c2e6695b34dd413c741"
+  integrity sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==
   dependencies:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
@@ -7377,45 +7983,46 @@ string-width@^4.2.3:
     strip-ansi "^6.0.1"
 
 string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.prototype.matchall@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
-  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
+  integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.4.3"
+    internal-slot "^1.0.5"
+    regexp.prototype.flags "^1.5.0"
+    set-function-name "^2.0.0"
     side-channel "^1.0.4"
 
-string.prototype.trim@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
-  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+string.prototype.trim@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
+  integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-string.prototype.trimend@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
-  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+string.prototype.trimend@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
+  integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
-string.prototype.trimstart@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
-  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+string.prototype.trimstart@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
+  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -7450,6 +8057,11 @@ strip-comments@^2.0.1:
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
   integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
 
+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"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-json-comments@^3.1.0, 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"
@@ -7461,9 +8073,9 @@ strip-json-comments@~2.0.1:
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
 style-to-object@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.2.tgz#a8247057111dea8bd3b8a1a66d2d0c9cf9218a54"
-  integrity sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
+  integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
   dependencies:
     inline-style-parser "0.1.1"
 
@@ -7472,19 +8084,12 @@ styled-jsx@5.0.7:
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
   integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
 
-styled-jsx@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/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"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.32.0:
+sucrase@^3.20.3, sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
   integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
@@ -7523,10 +8128,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swr@^2.1.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"
-  integrity sha512-KJVA7dGtOBeZ+2sycEuzUfVIP5lZ/cd0xjevv85n2YG0x1uHJQicjAtahVZL6xG3+TjqhbBqimwYzVo3saeVXQ==
+swr@^2.1.3, swr@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
   dependencies:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
@@ -7548,24 +8153,24 @@ tailwind-merge@^1.14.0:
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
 tailwindcss-animate@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.6.tgz#c7195037481552cc47962ea50113830360fd0c28"
-  integrity sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.1.6, tailwindcss@^3.2.7:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.2.7, tailwindcss@^3.3.3:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
+  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
   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"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.19.1"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
@@ -7651,9 +8256,9 @@ terser-webpack-plugin@^5.3.3:
     terser "^5.16.8"
 
 terser@^5.0.0, terser@^5.16.8:
-  version "5.19.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.2.tgz#bdb8017a9a4a8de4663a7983f45c506534f9234e"
-  integrity sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.24.0.tgz#4ae50302977bca4831ccc7b4fef63a3c04228364"
+  integrity sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -7702,20 +8307,15 @@ tippy.js@^6.3.7:
     "@popperjs/core" "^2.9.0"
 
 tiptap-markdown@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.2.tgz#93d42ef6225042d8bfe77861b93450aab184d67b"
-  integrity sha512-RyfpnH475+FYVh1fCiWF9+wBvA8T6X3PqxZR1MApEewxkoQ5kREQFiVwjZiez9qUQk/Bxu3RerFSJot65V6cbQ==
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.3.tgz#51e93aad3c603c75a91111494ef4fd04115165fe"
+  integrity sha512-RULu1OXFTHdTJCHwdUOvDk0nDoH8YdgXulR0f+8XBd/x+SuT+EafdQuEKz2ggFlW1Mvl5niKGT5lAHTeXYFmaw==
   dependencies:
     "@types/markdown-it" "^12.2.3"
     markdown-it "^13.0.1"
     markdown-it-task-lists "^2.1.1"
     prosemirror-markdown "^1.11.1"
 
-tlds@^1.238.0:
-  version "1.242.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.242.0.tgz#da136a9c95b0efa1a4cd57dca8ef240c08ada4b7"
-  integrity sha512-aP3dXawgmbfU94mA32CJGHmJUE1E58HCB1KmlKRhBNtqBL27mSQcAEmcaMaQ1Za9kIVvOdbxJD3U5ycDy7nJ3w==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -7740,6 +8340,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/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"
+  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"
@@ -7770,16 +8375,56 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, "tslib@^2.4.1 || ^1.9.3":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.1.tgz#fd8c9a0ff42590b25703c0acb3de3d3f4ede0410"
-  integrity sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@~2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 tslib@~2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tsup@^5.10.1:
+  version "5.12.9"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-5.12.9.tgz#8cdd9b4bc6493317cb92edf5f3476920dddcdb18"
+  integrity sha512-dUpuouWZYe40lLufo64qEhDpIDsWhRbr2expv5dHEMjwqeKJS2aXA/FPqs1dxO4T6mBojo7rvo3jP9NNzaKyDg==
+  dependencies:
+    bundle-require "^3.0.2"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.14.25"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^3.0.1"
+    resolve-from "^5.0.0"
+    rollup "^2.74.1"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
+tsup@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-7.2.0.tgz#bb24c0d5e436477900c712e42adc67200607303c"
+  integrity sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==
+  dependencies:
+    bundle-require "^4.0.0"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.18.2"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^4.0.1"
+    resolve-from "^5.0.0"
+    rollup "^3.2.5"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -7794,47 +8439,47 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.12.tgz#a3d9d6bd3436e795254865bc3d76a9c79aff8085"
-  integrity sha512-vmDfGVPl5/aFenAbOj3eOx3ePNcWVUyZwYr7taRl0ZBbmv2TzjRiFotO4vrKCiTVnbqjQqAFQWY2ugbqCI1kOQ==
-
-turbo-darwin-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.12.tgz#ff1d9466935687ca68c0dee88a909c34cc654357"
-  integrity sha512-3JliEESLNX2s7g54SOBqqkqJ7UhcOGkS0ywMr5SNuvF6kWVTbuUq7uBU/sVbGq8RwvK1ONlhPvJne5MUqBCTCQ==
-
-turbo-linux-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.12.tgz#d184a491cc67c07672d339e36427378d0fc6b82e"
-  integrity sha512-siYhgeX0DidIfHSgCR95b8xPee9enKSOjCzx7EjTLmPqPaCiVebRYvbOIYdQWRqiaKh9yfhUtFmtMOMScUf1gg==
-
-turbo-linux-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.12.tgz#44e6ca10b20fd4c59f8c85acf8366c7c09ebca81"
-  integrity sha512-K/ZhvD9l4SslclaMkTiIrnfcACgos79YcAo4kwc8bnMQaKuUeRpM15sxLpZp3xDjDg8EY93vsKyjaOhdFG2UbA==
-
-turbo-windows-64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.12.tgz#36380eca8e7b0505d08b87a084efab1500b2a80e"
-  integrity sha512-7FSgSwvktWDNOqV65l9AbZwcoueAILeE4L7JvjauNASAjjbuzXGCEq5uN8AQU3U5BOFj4TdXrVmO2dX+lLu8Zg==
-
-turbo-windows-arm64@1.10.12:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.12.tgz#757ad59b9abf1949f22280bee6e8aad253743ba5"
-  integrity sha512-gCNXF52dwom1HLY9ry/cneBPOKTBHhzpqhMylcyvJP0vp9zeMQQkt6yjYv+6QdnmELC92CtKNp2FsNZo+z0pyw==
-
-turbo@latest:
-  version "1.10.12"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.12.tgz#cd6f56b92da0600dae9fd94230483556a5c83187"
-  integrity sha512-WM3+jTfQWnB9W208pmP4oeehZcC6JQNlydb/ZHMRrhmQa+htGhWLCzd6Q9rLe0MwZLPpSPFV2/bN5egCLyoKjQ==
+turbo-darwin-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.16.tgz#5a8717c1372f2a75e8cfe0b4b6455119ce410b19"
+  integrity sha512-+Jk91FNcp9e9NCLYlvDDlp2HwEDp14F9N42IoW3dmHI5ZkGSXzalbhVcrx3DOox3QfiNUHxzWg4d7CnVNCuuMg==
+
+turbo-darwin-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.16.tgz#19b5b63acf7ee0fce7e1fe5850e093c2ac9c73f5"
+  integrity sha512-jqGpFZipIivkRp/i+jnL8npX0VssE6IAVNKtu573LXtssZdV/S+fRGYA16tI46xJGxSAivrZ/IcgZrV6Jk80bw==
+
+turbo-linux-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.16.tgz#ee97c0011553a96bd7995e7bcc6e65aab8996798"
+  integrity sha512-PpqEZHwLoizQ6sTUvmImcRmACyRk9EWLXGlqceogPZsJ1jTRK3sfcF9fC2W56zkSIzuLEP07k5kl+ZxJd8JMcg==
+
+turbo-linux-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.16.tgz#2723cc2a846d89df7484002161b25673f4f04009"
+  integrity sha512-TMjFYz8to1QE0fKVXCIvG/4giyfnmqcQIwjdNfJvKjBxn22PpbjeuFuQ5kNXshUTRaTJihFbuuCcb5OYFNx4uw==
+
+turbo-windows-64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.16.tgz#87c46a78502a86dec73634b255a6b3471285969b"
+  integrity sha512-+jsf68krs0N66FfC4/zZvioUap/Tq3sPFumnMV+EBo8jFdqs4yehd6+MxIwYTjSQLIcpH8KoNMB0gQYhJRLZzw==
+
+turbo-windows-arm64@1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.16.tgz#a6208c2bc27e5e6ef0aa4a3e64389c4285c3f274"
+  integrity sha512-sKm3hcMM1bl0B3PLG4ifidicOGfoJmOEacM5JtgBkYM48ncMHjkHfFY7HrJHZHUnXM4l05RQTpLFoOl/uIo2HQ==
+
+turbo@^1.10.16:
+  version "1.10.16"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.16.tgz#51601a65a3aa56d1b9d9cb9a2ab3a5a2eab41e19"
+  integrity sha512-2CEaK4FIuSZiP83iFa9GqMTQhroW2QryckVqUydmg4tx78baftTOS0O+oDAhvo9r9Nit4xUEtC1RAHoqs6ZEtg==
   optionalDependencies:
-    turbo-darwin-64 "1.10.12"
-    turbo-darwin-arm64 "1.10.12"
-    turbo-linux-64 "1.10.12"
-    turbo-linux-arm64 "1.10.12"
-    turbo-windows-64 "1.10.12"
-    turbo-windows-arm64 "1.10.12"
+    turbo-darwin-64 "1.10.16"
+    turbo-darwin-arm64 "1.10.16"
+    turbo-linux-64 "1.10.16"
+    turbo-linux-arm64 "1.10.16"
+    turbo-windows-64 "1.10.16"
+    turbo-windows-arm64 "1.10.16"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -7932,6 +8577,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -8019,19 +8669,19 @@ unist-util-visit@^4.0.0:
     unist-util-visit-parents "^5.1.1"
 
 universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
 upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
-  integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
@@ -8057,6 +8707,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-loader@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 use-callback-ref@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
@@ -8069,7 +8728,7 @@ use-debounce@^9.0.4:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
   integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
@@ -8082,7 +8741,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -8092,15 +8751,10 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
 uuid@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
-  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
 uvu@^0.5.0:
   version "0.5.6"
@@ -8113,9 +8767,9 @@ uvu@^0.5.0:
     sade "^1.7.3"
 
 v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
+  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
 
 vfile-message@^3.0.0:
   version "3.1.4"
@@ -8147,14 +8801,6 @@ warning@^4.0.2, warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -8206,13 +8852,41 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-typed-array@^1.1.10, which-typed-array@^1.1.11:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
-  integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
+which-typed-array@^1.1.11, which-typed-array@^1.1.13, which-typed-array@^1.1.9:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36"
+  integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==
   dependencies:
     available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    call-bind "^1.0.4"
     for-each "^0.3.3"
     gopd "^1.0.1"
     has-tostringtag "^1.0.0"
@@ -8408,22 +9082,17 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0:
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.1.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
-  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2"
+  integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==
 
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-zod@3.21.4:
-  version "3.21.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
-  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==